The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> ie vs firefox spacing, extra space in firefox, not ie: img? table? fix?
non-profit
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dr Z
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 25 2007, 08:16 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dr Z
post Mar 25 2007, 10:48 PM
Post #4


Advanced Member
****

Group: Members
Posts: 221
Joined: 23-August 06
Member No.: 11



QUOTE(pandy @ Mar 25 2007, 05:16 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
non-profit
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 28 2007, 12:06 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Don't be sad. I think it's hard to find anything at mozilla.org. ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 11:00 PM