PDA

View Full Version : Firefox layout problems



mrb1972
12-18-2005, 04:17 PM
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
12-18-2005, 04:28 PM
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
12-18-2005, 04:58 PM
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
12-18-2005, 07:10 PM
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
01-03-2006, 12:49 PM
So if I am understanding you right



width:351px!important;


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

Twey
01-03-2006, 03:59 PM
Every CSS-capable browser recognizes !important except IE, as far as I know.

jscheuer1
01-03-2006, 06:19 PM
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
01-03-2006, 06:48 PM
Ah. So it is recognized, but totally ignored.
My apologies.

mwinter
01-03-2006, 09:10 PM
So [!important] is recognized, but totally ignored.In that instance, yes. It's not totally ignored, though.

Mike

Twey
01-03-2006, 09:12 PM
Oh? How does it modify the behaviour of IE, then?

mwinter
01-03-2006, 09:28 PM
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
01-04-2006, 05:18 PM
Aha, I see. Thank you.