Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Padding woes 2

Status
Not open for further replies.

audiopro

Programmer
Apr 1, 2004
3,165
GB
I have a div with a background image. Height and width of the div are set to the size of the image.
I want to pad the top of the div (padding:30px;) so the contents display in the correct position.
In IE - the display is correct.
In FF - the padding is added to the height of the div so the image repeats and the contents of the page are pushed down.
How can I make the display appear the same in both browsers?

Keith
 
FF does the correct thing. IE mistakenly takes the padding from the width instead of adding it to it. If you give your page a full and correct doctype you'll see IE will do the same thing.

In other words you need to calculate to full width of your div and then subtract the padding and set the result as the width to get the desired result.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Thanks for that but how do I decide which doctype to use and why is there not just a single standard, when the output of a web page will always be displayed in a standard way?
Is there a guide to which to use when, somewhere?
All I can find is a list of the common ones but no explanation of when each one should be used.


Keith
 
Choosing which is much less important than having one. Which doctype will depend on your coding style (this will decide if you can fall within the strict and XHTML templates or if it is best for you to stick with HTML and/or transitional) and page layout (frameset doctypes are used for pages with frames).

I find it ideal if my pages validate in strict XHTML, but that's just how I am used to coding. If your style is closer to HTML transitional, choose that (but don't choose doctypes of HTML older than 4.01).

If you have any of these valid doctypes, your page will render in standards-compliance mode and whilst not perfect, this is the closest you will get to a uniform display of a page across different OSes and browsers.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
I have got to the root of the problem.
I did have a doctype in place but the first line of my HTML is a placeholder in the form of a comment. This is in the main index.htm page which I use as a template for the header and footer sections of my dynamic pages. I thought that the comment would be ignored by browsers but having removed it, the page renders correctly in IE and FF. I will have to work out another way to do the start place holder but at least the display problem is cured.
Thanks guys

Keith
 
Comments make no difference to most browsers, IE however dislikes anything placed in the code before the doctype. If doctype is not the first thing that appears in the HTML file, IE will ignore the doctype completely. This is true for IE6 (older IE versions do not really change the display style by adding/omitting doctype), but I am not sure about IE7 and later.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top