Please take a look at this site I've been working on: <!-- m --><a class="postlink" href="http://sh.jobowoo.com/index2.htm">http://sh.jobowoo.com/index2.htm</a><!-- m -->
Here is the CSS: <!-- m --><a class="postlink" href="http://sh.jobowoo.com/style.css">http://sh.jobowoo.com/style.css</a><!-- m -->
If you look at it in IE, it looks completely fine. However, if you look at it in Mozilla, the images are out of whack and the padding/margins look completely off.
Here are some of the issues:
1) The "Surehouse" logo at the top fits perfect in IE, the logo has a width of 462px. That does not add up in the CSS where I only allotted 420px for the leftcontent box in which it is placed. Why does the sizing inconsitency show up in Mozilla but not in IE? How do I fix this?
2) The picture on top of the navigation is 172px wide, but the navigation button width is only 140px. Yet in IE the image matches up perfectly with the button. You can see the sizing inconsitency again in Mozilla. How do I fix this?
3) The footer at the bottom of the page also looks fine in IE, but not so in Mozilla. The top padding is way out of proportion. To make it look fine in IE I had to set the width of the #footer element to 482px to make it align with the very right of the #leftcontent element, even though the #leftcontent element is only 420px.
Thanks so much. I love CSS but it's completely frustrating at times
It looks pretty messed up in Opera so I'd say you're coding is bad and it just happens to work in IEIf you're going to declare it's xhtml then you're going to have to do it right.
<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fsh.jobowoo.com%2Findex2.htm&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&verbose=1If">http://validator.w3.org/check?uri=http% ... erbose=1If</a><!-- m --> you're going to declare it's xhtml then you're going to have to do it right.
<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fsh.jobowoo.com%2Findex2.htm&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a><!-- m -->
Dreamweaver put the Doctype in there automatically for me before I started coding the site. What should I do to rectify it? I'm not really understanding the link you've provided. Will fixing the Doctype fix the layout errors? Thanks.In your css you also use "text-size" and there is no such thing.
You use a negative padding number that also is illegal.
If it works in IE but not in Firefox then chances are your code is wrong as was said. Run it through the validators and make it work in FF first. IE has it wrong.Dreamweaver put the Doctype in there automatically for me before I started coding the site. What should I do to rectify it? I'm not really understanding the link you've provided. Will fixing the Doctype fix the layout errors? Thanks.
Then Dreamweaver is screwing up the HTML because it should NOT be putting uppercase tags into an XHTML page. Fixing the doctype will fix the validation errors but probably not the layout.If DW is creating tags in uppercase you can change that in the preferencesSo my best bet at fixing the layout is coding it for FF first then adding in extra code explicitly for the eccentricities of IE? Are there specific known errors in IE that I should be aware about, or should I just fix them as they come?It's better to know your enemy than to bandage your wounds.
<!-- m --><a class="postlink" href="http://www.quirksmode.org/It's">http://www.quirksmode.org/It's</a><!-- m --> better to know your enemy than to bandage your wounds.
<!-- m --><a class="postlink" href="http://www.quirksmode.org/">http://www.quirksmode.org/</a><!-- m -->
Excellent resource, many thanks
Here is the CSS: <!-- m --><a class="postlink" href="http://sh.jobowoo.com/style.css">http://sh.jobowoo.com/style.css</a><!-- m -->
If you look at it in IE, it looks completely fine. However, if you look at it in Mozilla, the images are out of whack and the padding/margins look completely off.
Here are some of the issues:
1) The "Surehouse" logo at the top fits perfect in IE, the logo has a width of 462px. That does not add up in the CSS where I only allotted 420px for the leftcontent box in which it is placed. Why does the sizing inconsitency show up in Mozilla but not in IE? How do I fix this?
2) The picture on top of the navigation is 172px wide, but the navigation button width is only 140px. Yet in IE the image matches up perfectly with the button. You can see the sizing inconsitency again in Mozilla. How do I fix this?
3) The footer at the bottom of the page also looks fine in IE, but not so in Mozilla. The top padding is way out of proportion. To make it look fine in IE I had to set the width of the #footer element to 482px to make it align with the very right of the #leftcontent element, even though the #leftcontent element is only 420px.
Thanks so much. I love CSS but it's completely frustrating at times
It looks pretty messed up in Opera so I'd say you're coding is bad and it just happens to work in IEIf you're going to declare it's xhtml then you're going to have to do it right.<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fsh.jobowoo.com%2Findex2.htm&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&verbose=1If">http://validator.w3.org/check?uri=http% ... erbose=1If</a><!-- m --> you're going to declare it's xhtml then you're going to have to do it right.
<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fsh.jobowoo.com%2Findex2.htm&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a><!-- m -->
Dreamweaver put the Doctype in there automatically for me before I started coding the site. What should I do to rectify it? I'm not really understanding the link you've provided. Will fixing the Doctype fix the layout errors? Thanks.In your css you also use "text-size" and there is no such thing.
You use a negative padding number that also is illegal.
If it works in IE but not in Firefox then chances are your code is wrong as was said. Run it through the validators and make it work in FF first. IE has it wrong.Dreamweaver put the Doctype in there automatically for me before I started coding the site. What should I do to rectify it? I'm not really understanding the link you've provided. Will fixing the Doctype fix the layout errors? Thanks.
Then Dreamweaver is screwing up the HTML because it should NOT be putting uppercase tags into an XHTML page. Fixing the doctype will fix the validation errors but probably not the layout.If DW is creating tags in uppercase you can change that in the preferencesSo my best bet at fixing the layout is coding it for FF first then adding in extra code explicitly for the eccentricities of IE? Are there specific known errors in IE that I should be aware about, or should I just fix them as they come?It's better to know your enemy than to bandage your wounds.
<!-- m --><a class="postlink" href="http://www.quirksmode.org/It's">http://www.quirksmode.org/It's</a><!-- m --> better to know your enemy than to bandage your wounds.
<!-- m --><a class="postlink" href="http://www.quirksmode.org/">http://www.quirksmode.org/</a><!-- m -->
Excellent resource, many thanks