...

View Full Version : Tableless Layout Messed up in IE



inko9nito
07-26-2007, 02:12 AM
This layout is made up of a bunch of divs. It looks perfectly fine in Firefox, but IE moves the centerPanel div below the leftPanel div (naturally...). I tried floating it to the right but that doesn't help either. I'm stumped :(

Here's the page: http://prodigyoilandgas.com/test/layout_new.html

And the stylesheet: http://prodigyoilandgas.com/test/layout/stylesheet_new.css

I created a dummy template before creating this and it looked fine in both browsers. I went line by line comparing the two and they seem to have identical rules, yet the styled page with images and all doesn't work in IE. Here's the dummy: http://prodigyoilandgas.com/test/test_layout_new.html (css is embedded)

inko9nito
07-26-2007, 02:40 AM
I made the centerPanel background red and took a screenshot of it (in IE).

The results - IE is making it 5 pixels wider for no apparent reason. I made the centerPanel and the content div 5 pixels smaller and it seems to have fixed the problem, but I don't know if this is the right way to do this and whether this will affect anything in newer IE (I'm using v.6).

_Aerospace_Eng_
07-26-2007, 02:41 AM
Its the things like this

*font-size: 0.55em;
Causing your problems. What was your reasoning behind using CSS like that? Validating your CSS even tells you that this is invalid CSS
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fprodigyoilandgas.com%2Ftest%2Flayout_new.html

Your coding is also invalid. See your errors here (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fprodigyoilandgas.com%2Ftest%2Flayout_new.html).

You also need to add display:inline; to #leftPanel to fix the IE6 double margin bug.

inko9nito
07-26-2007, 03:02 AM
Its the things like this

*font-size: 0.55em;
Causing your problems. What was your reasoning behind using CSS like that? Validating your CSS even tells you that this is invalid CSS
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fprodigyoilandgas.com%2Ftest%2Flayout_new.html

Your coding is also invalid. See your errors here (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fprodigyoilandgas.com%2Ftest%2Flayout_new.html).

You also need to add display:inline; to #leftPanel to fix the IE6 double margin bug.

I used the * for IE. For some reason font size 0.65ems is 0.55 in IE (?) I'm making another IE-specific stylesheet to get rid of the asterisks now. Do you think that will fix the layout issues?

_Aerospace_Eng_
07-26-2007, 03:04 AM
Yeah it will for the most part.

inko9nito
07-26-2007, 03:17 AM
Yeah it will for the most part.

All errors are fixed but it's still not working. The only way to make it work is to set #content width to 374px (5 pixels less than what it should be) which will probably cause problems in the future, knowing how IE is...

_Aerospace_Eng_
07-26-2007, 03:41 AM
Float #centerPanel to the left instead of the right. The layout was looking bad in IE7 but is now looking fine after you fixed what I told you to fix.

inko9nito
07-26-2007, 03:49 AM
Float #centerPanel to the left instead of the right.

Nope, doesn't work :(


The layout was looking bad in IE7 but is now looking fine after you fixed what I told you to fix.

Really? That's great! At least one of them works :)

_Aerospace_Eng_
07-26-2007, 03:51 AM
You have this

#banner {
width: 531px;
height: 298px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #78735C;

margin: 0;
padding: 0;
}
That 3px border makes the total width of #banner 537px. Remove the border and it will likely now work. If you still want the border you need to decrease the width of the image inside of #banner as well as the width of #banner by 6px.

inko9nito
07-26-2007, 03:59 AM
You have this

#banner {
width: 531px;
height: 298px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #78735C;

margin: 0;
padding: 0;
}
That 3px border makes the total width of #banner 537px. Remove the border and it will likely now work. If you still want the border you need to decrease the width of the image inside of #banner as well as the width of #banner by 6px.

No, it's a bottom border, not left or right, so it doesn't affect it. I tried adding border-left: none and border-right: none, just in case, but that didn't work either.

Btw, thank you for helping me with this :o

_Aerospace_Eng_
07-26-2007, 04:00 AM
Start removing elements until it fits. Once it does you should be able to fix the issue.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum