Validated page, fine in IE7 badly rendered in Firefox
Question posted by: Bozz282
(Newbie)
on
March 28th, 2008 01:04 PM
Hi
Hope someone can help or shed some light on where I'm going wrong (notice that I'm not blaming the browser !)
I took the time to validate my page both for the HTML and the CSS and both passed (after some tweaking) My problem is that the page displays perfectly in IE7 but looks horrible in Firefox. I'm not expecting anyone to fix the problem but if someone can have a look and see a glaringly obvious issue, and could point me in the right direction, I'd really appreciate it.
My page can be viewed at : My Site
Thanks in advance.
Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
|
|
March 28th, 2008 02:21 PM
# 2
|
Re: Validated page, fine in IE7 badly rendered in Firefox
Despite the fact that it validates, your doctype is incorrect for IE and it puts it in quirks mode. You should be using this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In addition, your test bed should always be a modern browser and never IE. Use Firefox/Opera/Safari for your initial test. Then see if IE screws it up. The quirks and bugs of IE are known, as are the fixes.
Never, ever use IE as a reference for how things should work. It is old, buggy, non-standard and 10 years behind web standards.
|
|
March 28th, 2008 02:25 PM
# 3
|
Re: Validated page, fine in IE7 badly rendered in Firefox
Your main problem is that Firefox and IE render a block object differently that has a fixed width and padding. Firefox does not include the padding in the width of the element while IE does.
For example, when you specify a width of 696px for your bodyblock, Firefox adds the padding to this size. IE, however, puts the padding inside the block whose final width will be 696px.
This same problem is seen in other places on your page too, such as the "Vacancies", "Things for Sale", and "When things go wrong." You have to be careful when you use fixed-width blocks that also have padding; so careful that I would suggest just not using it at all.
Hope this helps.
|
|
|
March 28th, 2008 02:53 PM
# 4
|
Re: Validated page, fine in IE7 badly rendered in Firefox
To be clear, it's not just Firefox. All browsers, in standards mode, do it that way. That is how it's supposed to work. Only in quirks mode do browsers do it wrong and he is in quirks.
|
|
|
March 28th, 2008 05:14 PM
# 5
|
Re: Validated page, fine in IE7 badly rendered in Firefox
Thanks for the pointers - really helpful and I have now managed to tweak the page so that it renders perfectly in both IE7 and Firefox.
Would percentages work better for the boxes ? or will fixed width be ok as long as I have my calculations right ?
|
|
|
March 28th, 2008 05:20 PM
# 6
|
Re: Validated page, fine in IE7 badly rendered in Firefox
Just tried to validate the page again and it's showing up with errors. I changed the html minimally (changed some values but nothing structurally) I can only assume that the DOCTYPE is perhaps causing the errors ? Can I not use the transitional rather than strict DOCTYPE ?
|
|
|
March 28th, 2008 06:06 PM
# 7
|
Re: Validated page, fine in IE7 badly rendered in Firefox
You can use either but, unless you are using deprecated elements, there is no need for transitional. Your page will render the exact same with both but the validator will flag deprecated tags if you use strict.
Not the answer you were looking for? Post your question . . .
180,804 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).
|
|
|
Top HTML / CSS Forum Contributors
|
