Re: [css-d] Bottom 3 divs are displaced in Firefox 1.5

[Roger Roelofs]

Terri,

On Jan 17, 2007, at 3:32 PM, Terri Hodgson wrote:

> Thanks to Roger and Tim for help with the last issue; that problem  
> is solved.
> The next item I have with this website is the home page.
> There are 3 divs under the main content. Each one holds a featured  
> item of some sort.
> They are to be displayed side by side, which works well in IE 6.
> In Firefox 1.5 they do not line up at all.
> All 3 are within a div called 'hotboxcontainer'.
>
> The Home page is here:
> http://www.thehomehunter.ca/index.htm

First, you need better markup.  The html has 32 validation errors,  
some of them serious.  For the particular spot that is giving you  
fits, try this.

<div id="hotBoxContainer">
   <div>
     <h4>Buying? Selling? </h4>
     <div class="body">
       <h5>Thinking of Buying?</h5>
       <p>Sign up for <a href="forms/frm_emailRequest.htm">Free VIP  
listings</a> email notification.</p>
       <h5>Thinking of Selling?</h5>
       <p><a href="forms/frm_homeEval.htm">Click here</a> for a Free  
Evaluation of your Home's Worth</p>
     </div>
   </div>
   <div>
     <h4>Feature</h4>
     <div class="body">
       <p><a href="milton_listings.htm"><img src="listings/ 
1517marshall-W1019354/1517marshall-feature.jpg" alt="The Home  
Hunter's Featured Listing"/></a></p>
       <p><a href="milton_listings.htm">Spotless Sutton Hills loaded  
with upgrades ...</a></p>
     </div>
   </div>
   <div>
     <h4>Area Listings</h4>
     <div class="body">
       <p><a href="http://www.mls.ca/map.aspx?AreaID=928";  
target="_blank"><img src="images/home/area_listings.jpg" alt="View  
Milton and Area real Estate Listings" /></a></p>
       <p>View all area listings that suit your buying needs <a  
href="http://www.mls.ca/map.aspx?AreaID=928"; target="_blank">Search  
here >></a></p>
     </div>
   </div>
</div>

and css like this...

#hotBoxContainer {
   background-color: #E7E7E7;
   width: 470px;
   height: 175px;
   padding-top: 10px;
   padding-bottom: 19px;
   padding-left: 8px;
   border-right: 1px solid #000;
   border-bottom: 1px solid #000;
   border-left: 1px solid #000;
   font-size: .9em;
}

#hotBoxContainer div {
   float: left;
   width: 154px;
   text-align: center;
}

#hotBoxContainer h4 {
   margin: 0;
   padding-top: .5em;
   background: url(images/home/hot_box_header.gif) top center no-repeat;
   color: white;
   text-align: center;
   vertical-align: bottom;
   line-height: 1.5;
}

#hotBoxContainer h5 {
   margin: 0;
   font-size: .9em;
}
#hotBoxContainer p {
   margin: 0 0 .25em 0;
   font-size: .8em;
}

#hotBoxContainer div.body {
   float: none;
   width: auto;
   margin: 0 5px;
   padding-top: 10px;
   background-color: white;
   border: 1px solid black;
   border-top: none;
   height: 150px;
}

#hotBoxContainer a img { border: 0 none;}

-- 
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
        God allows U-turns!"
          ~Allison Gappa Bottke

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/