Firefox layout problems

[mrb1972]

hi,

I wonder if anyone can help with my layout problems in Firefox, i have tried to have vertically alignment on the whole page, its looks ok in IE but not FF.

Im fairly new to CSS so if anyone can spot what i have done wrong that would be great

link to layout here (http://www.avmechanic.co.uk/test/center.html)

thanks

[jscheuer1]

Other than the header border-bottom not showing up in FF, I see no real difference between the two browsers. That can be fixed by using a height of 20px for that class under FF:


.header{
position:absolute;
top: 0px;
left: 0px;
height:20px!important;
height:22px;
background-color:#F5F5F5;
width:900px;
border-left: 1px solid #0082c6;
border-top: 1px solid #0082c6;
border-right: 1px solid #0082c6;
border-bottom: 1px solid #0082c6;
background-repeat:repeat-x;
background-position: left bottom;
background-image:url(images/top.jpg);
}

[mrb1972]

ok thanks

I also see a problem in firefox with the right hand border seems to be 1 pixel out of line with the header.

[jscheuer1]

Ah, so. I missed that one, it can be remedied in a similar fashion:


.maincol{background-color: #FFFFFF;
left:550px;
top:22px;
float: right;
display:inline;
position:absolute;
width:351px!important;
width:350px;
height:441px;
border-right: 1px solid #0082c6;
background-repeat: no-repeat;
background-position: right center;
background-image:url(images/right_side.jpg);
}

[elliott]

So if I am understanding you right



width:351px!important;


the !important is only done by Firefox? Or only done by IE?

[Twey]

Every CSS-capable browser recognizes !important except IE, as far as I know.

[jscheuer1]

Every CSS-capable browser recognizes !important except IE, as far as I know.

Technically yes, with a twist. If there is no other value given later for that property, IE will follow the value given, even if it has !important appended to it.

[Twey]

Ah. So it is recognized, but totally ignored.
My apologies.

[mwinter]

So [!important] is recognized, but totally ignored.In that instance, yes. It's not totally ignored, though.

Mike

[Twey]

Oh? How does it modify the behaviour of IE, then?

[mwinter]

Oh? How does it modify the behaviour of IE, then?IE has an issue with specificity, especially with link pseudo-classes. Consider:



<a class="test" href="#">Link</a>


a:visited {
color: red;
}
a.test {
color: green;
}
Both rules have the same specificity ([0-]0-1-1) so any declarations in the latter should override those in the former. However, this doesn't happen in IE and a visited link would be rendered red. Add the !important priority to the color declaration second rule, and it takes precedence.

IE's support is still broken, though. The :link pseudo class doesn't display the problem as :visited, so



a:link {
color: red;
}
a.test {
color: green;
}
will render the link green as expected. But, apply !important to the first color declaration and the link will stay green (not turn red, as it should).

Mike

[Twey]

Aha, I see. Thank you.