Hello there.
I hope you can help me please.
I have the following layout (which has taken forever!), I've cut it down from all images etc so you just have the "base" in the attached file.
The problems I'm experiencing are with the following browsers, and their errors:
Firefox: There seems to be a padding-top above anything in the "maincontent" div, therefore I had to add a p (the class of "yourehere") with a padding-top and margin-top of 0. Whenever there's anything else (something without that class of "yourhere") there seems to be a padding at the top which shouldn't be there.
IE 4.01, 5.01, 5.5: There seems to be a padding to the left of the "contentarea" div that shouldn't be there. If needed, I can show screenshots.
Hopefully this is clear, please post if you need clarification.
The attached 'layout.txt' contains the HTML and CSS.
I hope you can help.
Thanks in advance.
Regards,Firefox: is this the margin: 44px 0px 0px 0px; in #maincontent that you are talking about?
IE: I see no difference between FF and IE in padding to the left of the "contentarea".
Some screen shots would be helpful.
Why is #nav position: absolute; and not just in the flow?Hiya Fang.
What version of IE was you checking?
Firefox it is indeed the margin: 44px 0px 0px 0px; but this is fine on all other browers. I think it's actually to do with what firefox wants the padding above a "<p>" etc to be, as using padding-top, and margin-top to 0 on a p class stopped this on Firefox.
If you're checking in anything IE 5.5, 5.01, 4.01 you'll see the padding issue to the left I'm talking about.
I'll try and post a screenshot too!
Thanks!Hi there.
Okay, here's the screenshots.
The first "correct.jpg" is taken from IE6 - and is how it should look like.
"wrong.jpg" shows you IE 5.5/5.01/4.01 with the left padding I was talking about, I've put a red circle round it too.And correct.jpg:Change these:
#leftcontainer {
margin: 35px 12px 0px 0px;
border-right: 1px solid #000;
float: left;
width: 179px;
text-align: left;
}
#maincontent {
margin: 44px 0px 0px 0px;
padding: 0px;
width:575px;
float: left;
text-align: left;
}
#maincontent, float left, no padding.
#leftcontainer, increase right margin to simulate padding of the #maincontainer.
BTY The delay in answering was because I had to reinstall all IE versions. XP SP2 I think had changed then all to IE6.Absolutely fantastic, works brilliantly.
Thank you ever so much.
Would you mind describing what it actually was that was "wrong" and how those things fixed it, for future reference?
Thanks again, you're a star!
Regards,There was nothing "wrong", it was just fooling all the browsers to generate the same layout.
The #maincontent was floated left and it's padding removed so that it butted up to the #leftcontainer.
As older versions of IE calculate the width of a div without counting the padding, the margin was used to "pad" the #maincontent from the #leftcontainer.
I hope you can help me please.
I have the following layout (which has taken forever!), I've cut it down from all images etc so you just have the "base" in the attached file.
The problems I'm experiencing are with the following browsers, and their errors:
Firefox: There seems to be a padding-top above anything in the "maincontent" div, therefore I had to add a p (the class of "yourehere") with a padding-top and margin-top of 0. Whenever there's anything else (something without that class of "yourhere") there seems to be a padding at the top which shouldn't be there.
IE 4.01, 5.01, 5.5: There seems to be a padding to the left of the "contentarea" div that shouldn't be there. If needed, I can show screenshots.
Hopefully this is clear, please post if you need clarification.
The attached 'layout.txt' contains the HTML and CSS.
I hope you can help.
Thanks in advance.
Regards,Firefox: is this the margin: 44px 0px 0px 0px; in #maincontent that you are talking about?
IE: I see no difference between FF and IE in padding to the left of the "contentarea".
Some screen shots would be helpful.
Why is #nav position: absolute; and not just in the flow?Hiya Fang.
What version of IE was you checking?
Firefox it is indeed the margin: 44px 0px 0px 0px; but this is fine on all other browers. I think it's actually to do with what firefox wants the padding above a "<p>" etc to be, as using padding-top, and margin-top to 0 on a p class stopped this on Firefox.
If you're checking in anything IE 5.5, 5.01, 4.01 you'll see the padding issue to the left I'm talking about.
I'll try and post a screenshot too!
Thanks!Hi there.
Okay, here's the screenshots.
The first "correct.jpg" is taken from IE6 - and is how it should look like.
"wrong.jpg" shows you IE 5.5/5.01/4.01 with the left padding I was talking about, I've put a red circle round it too.And correct.jpg:Change these:
#leftcontainer {
margin: 35px 12px 0px 0px;
border-right: 1px solid #000;
float: left;
width: 179px;
text-align: left;
}
#maincontent {
margin: 44px 0px 0px 0px;
padding: 0px;
width:575px;
float: left;
text-align: left;
}
#maincontent, float left, no padding.
#leftcontainer, increase right margin to simulate padding of the #maincontainer.
BTY The delay in answering was because I had to reinstall all IE versions. XP SP2 I think had changed then all to IE6.Absolutely fantastic, works brilliantly.
Thank you ever so much.
Would you mind describing what it actually was that was "wrong" and how those things fixed it, for future reference?
Thanks again, you're a star!
Regards,There was nothing "wrong", it was just fooling all the browsers to generate the same layout.
The #maincontent was floated left and it's padding removed so that it butted up to the #leftcontainer.
As older versions of IE calculate the width of a div without counting the padding, the margin was used to "pad" the #maincontent from the #leftcontainer.