I’m having trouble with the layout of a simple HTML page. Please help.
Here’s the layout I’m going for…
Layout http://img516.imageshack.us/img516/9637/layoutfk5.gif
- orange = body
- blue/red = frame div
- green = header image
- black/white = menu div
It looks correct in Internet Explorer, but in Firefox, Safari, and Chrome there’s a 4-pixel gap between my image (header) and my div (menu).
Internet Explorer, Firefox, Safari, and Chrome…
Browsers http://img516.imageshack.us/img516/3292/browserszi8.gif
This is my HTML…
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> <html> ... <body> <div id='frame'> <img id='header' src='images/header.jpg' width='700' height='245' alt='' /><div id='menu'> <strong>One</strong> | <a href='two.html'>Two</a> | <a href='three.html'>Three</a> | <a href='four.html'>Four</a> | <a href='five.html'>Five</a> | <a href='six.html'>Six</a> | <a href='seven.html'>Seven</a> | <a href='eight.html'>Eight</a> | <a href='nine.html'>Nine</a> </div> <div id='content'> ... </div> ... </body> </html> Notice there’s no whitespace between the IMG and the menu DIV.
This is my CSS…
... div#frame { background: #FF0000; margin-right: auto; margin-left: auto; width: 700px; border: 5px #30AADE solid; } div#frame img#header { margin: 0; padding: 0; border: 0; } div#frame div#menu { margin: 0 auto 0 auto; padding: 5px 0 5px 0; border-top: solid 2px #FFFFFF; text-align: center; font-size: small; color: #88BE34; background-color: #000000; } div#frame div#menu strong { font-size: medium; color: #FFFFFF; } div#frame div#menu a { color: #88BE34; } Why are Firefox, Safari, and Chrome showing that 4-pixel gap?
It has to do with the default rules for IMG tags.
I recommend always using this in your stylesheet as a default rule: