ie vs firefox spacing, extra space in firefox, not ie: img? table? fix? |
ie vs firefox spacing, extra space in firefox, not ie: img? table? fix? |
non-profit |
Mar 25 2007, 07:02 PM
Post
#1
|
Member Group: Members Posts: 45 Joined: 25-March 07 Member No.: 2,321 |
I am getting extra space below an image contained in a table. See http://www.mpaf.org/white-space.html. The code is below: (And yes, I know I shouldn't be using tables, but I don't seem to be able to CSS what I am trying to do.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Our Art Foundation</title> <style type="text/css"> <!-- #header { background-color : #900; color : #fff; margin : 0 auto 0 auto; padding : 0; width : 50%; } #header h1 { font-size : 120%; text-align : right; } #header img { border : 0; } --> </style> </head> <body> <div id="header"> <!-- LOGO AND TITLE --> <table width="100%" cellpadding="0" cellspacing="0" summary="header graphics"> <tr> <td valign="bottom"><a href="white-space.html"><img src="images/logo.gif" width="150" height="142" alt="M.P.A.F. Logo" /></a></td> <td align="right"><h1>This Is<br />Our Art<br />Foundation</h1></td> <td align="right" valign="bottom"><img src="images/header-red-edge-1.gif" width="8" height="142" alt="[cosmetic graphic]" /></td> </tr> <tr><td colspan="3"><img src="images/shadow-bottom.gif" width="100%" height="8" alt="[cosmetic graphic]" /></td></tr> </table> </div> <!-- end #header --> </body> </html> |
Dr Z |
Mar 25 2007, 07:35 PM
Post
#2
|
Advanced Member Group: Members Posts: 221 Joined: 23-August 06 Member No.: 11 |
That space may be coming from the default padding of the h1 element. Try adding padding: 0; to the styling of h1, and see if it will solve the problem.
|
pandy |
Mar 25 2007, 08:16 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
I don't think any browser adds padding to headings. They add margin. But the heading isn't the problem. Here's the cause of your gap.
http://developer.mozilla.org/en/docs/Image...Mysterious_Gaps |
Dr Z |
Mar 25 2007, 10:48 PM
Post
#4
|
Advanced Member Group: Members Posts: 221 Joined: 23-August 06 Member No.: 11 |
I don't think any browser adds padding to headings. They add margin. But the heading isn't the problem. Here's the cause of your gap. http://developer.mozilla.org/en/docs/Image...Mysterious_Gaps I have to admit it. You are right about padding vs margins. I caught myself - I should have said margins not padding, and came back to edit my original post, but you beat me to it. |
non-profit |
Mar 27 2007, 03:23 PM
Post
#5
|
Member Group: Members Posts: 45 Joined: 25-March 07 Member No.: 2,321 |
Thank you, thank you. The Mysterios Gaps was right on the money. Instead of searching the internet, I should have searched Mozilla.
|
pandy |
Mar 28 2007, 12:06 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
Don't be sad. I think it's hard to find anything at mozilla.org.
|
Lo-Fi Version | Time is now: 26th April 2024 - 08:01 PM |