Problems with Firefox rendering of my page

[Syman]

hallo, i have a problem with the design of my site in firefox. it differs from the design in IE throught that, that there are gaps between the gifs in the menu-, news-, and links-bar.has this problem something to do with linebreaks in the source code? please help me, i go crazy...thank you

Syman

<Sorry, no personal URLs. See TOS [webmasterworld.com]>

[edited by: tedster at 4:17 pm (utc) on Oct. 6, 2004]

[tedster]

Welcome to the forums, Syman.

If the gaps you see are between the top and the bottom of images, you may well have Quirks Mode vs. Standards Mode issue. See [webmasterworld.com...] for full details. This is something you will want to know about, if you don't already

[Andre]

Thanks for the relevant and helpful link, Tedster.

Adding the following css fixes the site:

td img { 
display:block; 
margin:0; 
padding:0; 
}

cu Andreas ;-)

[Joe Belmaati]

One of the main headaches is the <p> tag. It seems that FF inserts a line break before the <p> tag and IE inserts it after. <br /> is the safe choice as it renders the same in all browsers.

[tedster]

Joe, are you talking about the default space between paragraph elements (usually that's the margin), or the basic fact that a paragraph begins on a new line (line break)?

My first thought is that you are talking about the extra space that is created by top and bottom margins - there should be a simple line break both before and after any block level element, such as a <p>. I've only seen Safari get this one wrong, and even then, only in very special cases where both text-alignment and margins change from one <p> to the next.

But how a browser sets the margins for a <p> by default, and how any two neighboring margins are collapsed, that can be a bit chaotic cross browser.

[mincklerstraat]

you can avoid a lot of misery w/one of SuzyUK's tricks:

* {
padding: 0;
margin: 0;
}

This will just set these to every element as 0, and add margins and padding as desired for the elements you declare. Gets over the 'browser defaults are different' problem.

[Joe Belmaati]

tedster

IE breaks after a <p> tag as for instance <p>&nbsp;</p><img src="somepic.jpg">

In this instance you'd have picture, then break in IE.
In FF you'd have break, then picture.

If you do it like this
<br /><img src="somepic.jpg">

Or like this

<img src="somepic.jpg"><br />

you should get the same result in all browsers. As for general page margin, only Opera complains about

body {margin: 0px;}

At least, these are my findings.. :D