Firefox and IE table problems

[Mezrius]

I have made my site with tables and css, but when I positioned the menu and the other texts with padding-top and padding-left, the actual text gets positioned differently between the IE and FF browsers.

I have uploaded an example at my site @ http://www.tutor4u.nl/artwork/test/

The site looks perfect in IE, but FF screws up the positioning.
I am trying for hours now and I'm getting really frustrated with this problem.
Please tell me what to do or else tell me how to rewrite the site so it works both in IE and FF.
Thanks in advance.

PS. the css file is located @ http://www.tutor4u.nl/artwork/test/opmaak.css

[Mezrius]

*bump*
Anyone knows what I should do ?
I really don't have a clue...
Please help me out here.

Mezrius.

[mwinter]

http://www.tutor4u.nl/artwork/test/

"Could not find host www.tutor4u.nl".

The site looks perfect in IE, but FF screws up the positioning.

You are most likely pandering to bugs in IE, and Fx is rendering the document correctly. Without being able to see the document in question, I'll just have to suggest that you start by validating both your markup and your style sheet.

Mike

[Mezrius]

The site works on my computer, it takes a little while to load but should popup eventually.

Mezrius

[jscheuer1]

body {
background-image: url(Layout.jpg);
background-repeat: no-repeat;
background-position: center 10px;
font-family: serif;
}

.head {
font-family: sans-serif;
font-size: 12pt;
}

a {
text-decoration: none;
color: #E9932F;
}

a:hover {
text-decoration: none;
color: black;
}

a img {
border: none;
}

.inactive {
text-decoration: none;
color: black;
}

.menu {
padding-top: 25px!important;
padding-top: 20px;
margin-top: 0px;
}

.inhoud {
padding-top: 17px!important;
padding-top: 10px;
padding-left: 26px;
margin-top: 0px;
margin-left: 0px;
}

[Mezrius]

I'm astoundished, it actually worked.
I owe you bigtime !
Just one more question, can you tell me what you did and why it works now ?
That way I can fix it myself in the future.

Mezrius

[jscheuer1]

Well, if you look at the css carefully, you will notice that the biggest change is cosmetic. I rewrote it using more lines, in a way that makes it clearer to the human eye what each property/value pair is. And sets each selector clearly apart from the others. This is simply how I've become accustomed to doing it over time, it helps avoid errors but, is no guarantee. Now, if you look back over my last post, near the bottom are the only material changes and each addition and/or change is highlighted red. That shows you what I've done only on one level, the actual values. On another level, I've taken advantage of the fairly well known !important hack. The way this hack goes, if a property/value pair is followed by !important; and then restated without it, FF and almost all other browsers will follow the first rule while IE will follow the second. This can oftentimes result in poor layout in a third browser like, say Opera (which sometimes renders things similarly to IE). But, it can be relied upon for straightening things out between IE and most Mozilla based browsers.

One added tidbit of info is that I was able to readily see what needed to be done partly because of experience but, also because I use the FF developer's extension (Web Developer 0.9.4 to be specific) that allows one to (among a great many other tools and techniques) temporarily rewrite the css on the fly, to see what it would look like.

[jstgermain]

just so he understands why you have padding-top twice but one listed with !important is because ie will us the one that says !important, and the FF browser will use the other one. just wasnt sure if you understood that.

[jscheuer1]

ie will us(e) the one that says !important, and the FF browser will use the other one.

Actually, it is the other way around. Also, if there is no 'second one', ie will use the !important one as well. To be even clearer:

selector {
property:value!important;
property:value;
}

In the above, FF will use the red one, IE the green one, assuming they are both the same property. However, here:

selector {
property:value!important;
}

Both IE and FF will follow the !important property/value pair.