1 reply [Last post]
GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 8 years 34 weeks ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

and how do i fix it?

i have a"menu" which has 3 components. a div for content (#expander) and two images, one placed on top of the div, and one below it.

if the text inside #expander ends with a paragraph tag, in FireFox it creates a small gap between #xpander div, and the image below it. why does it do that?

i've been having some problems getting it all to display properly in both IE and FF.

in the code below, it currently diplays correctly in IE. in FF you can see the gap. I'm surprised i'm having the prob in FF instead of IE!

i've been playing around with display: block/inline, and paddings and margins.. but i cant quite figure out what is the best way to make sure its works cross browser. any help would be appreciated !

all the "action" is going on inside #left-col. i attached a "test.gif" just in case.. but its just a simple rectangle.

i assume this should be pretty a pretty simple fix for somebody with more skillz than me..
thanks in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>two col</title>




<style type="text/css">

body {
    margin: 0px;
    padding: 0;
    font-family: helvetica, Tahoma, Verdana,Serif;
   background: #416882 url("../assets/bkg2.gif") repeat-x;
   font-size:75%;
    }

/*  =structure tags */
#container {
   
   margin:0 auto;
   width: 750px;
   padding: 0px;
   background: #FFFFFF url("../assets/side_bkg.gif");
   }

* html #container { /* This is the "Tan hack" for IE */ 
                width: 750px;  /* when i do use the hack.. its frequently here.. so this is just a visual que for me..  */
                w\idth: 750px;
                }


/* =logo */
#logo {
    background-color:#CC99CC;
   padding:0px;
   margin: 0px 10px 0px 10px;
    }
   
   
      h1 {margin:0px;}



/* =header */
#header {
    background-color:#FFFF00;
   padding:0px;
   margin: 0px 10px 0px 10px;   
    }



#left-col {
   display:inline;
   float: left;
   width: 360px;
   background-color:#66CC00;
   margin:0px 5px 0px 10px;
   }





      
      /* =lef-col contents */
      #left-col img {display:block;}
      
      #spaced_image { margin-top:50px;}
      #expander {
         
         width: 360px;
         background-color: #CF3C14;
         padding:0px;
         margin: 0px;
         }




#right-col {
   display:inline;
   
   float: left;
   width: 360px;
   background-color:#FF6600;
   margin:0px 10px 0px 5px;
   
   
   }


.both { clear:both; }  /*used with br tag to clear footer*/

/* =footer */
#footer {
    background-color: #FFCCFF;
   padding:0px;
   margin: 0px 10px 0px 10px;   
    }


</style>










</head>

<body>

<div id="container">
<div id="logo"><h1>website name</h1></div>
<div id="header">header</div>
<div id="left-col">
   <img src="test.gif" />
   <div id="expander">text<br />text<br />text<br />text<br />
   <p>ends in paragraph tag - see the gap? </p>
   </div>
   <img src="test.gif" /><img id="spaced_image" src="test.gif" />
   <div id="expander">text<br />
   <p>ends in break tag, no gap </p>
   <br /></div>
   <img src="test.gif" />
</div>
   
<div id="right-col">right</div>
<br class="both" />
<div id="footer">footer</div>
</div>



</body>
</html>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 30 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

extra space.. what is this bug/problem called?

Firefox (once again) is displaying it correctly - it's collapsing margins. Add 1px of padding or border to #expander to see the change. Or you could set the bottom-margin of #expander p to zero.