differences between IE and Firefox..

[benjipie]

Hi,

I am trying to layout a site with CSS in a liquid style. This is the first time im using a liquid layout and find it pretty confusing.... The site is http://www.figureeight.us. The problem im currently having is the block of text and image in the main content area (in white with the guy with the megaphone) looks different in Internet Explorer and Firefox and i cant work out why this is. Firefox places it higher up the page and explorer places it lower down the page....

 

How can i get them to be the same distance from the top? Any ideas?

 

Thanks....

 

 

hello



content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here  



#mainContent {
   position:relative;
   width: 100%; /*was 100% */
   height: 450px; /* ie fyucks up here */
   margin: 0;


} 

.hello {
   background: url(../images/newBGBanner.png) no-repeat;
   font-family:"trebuchet MS", sans-serif;
   font-size: 16px;
   letter-spacing: 2px;
   color: #fff;
   padding-left: 5px;
   height: 26px;
   float: right;
   padding-right: 500px;
   margin-top: 70px;

   }

#megaPhone {
   position: relative;
   float: right;
   padding-left: 500px;    
   top: 100px;
   }

#mainContent .minContentText {
   position: relative;
   color: #999999;
   width: 540px;
   float: right;
   left: -10px;
   top: -80px;

   }

[Wickham]

Your div #sidebar has float: left; but #mainContent doesn't and it causes a difference between the browsers. Add clear: both to #mainContent and they will show #mainContent at the same height.

 

#mainContent { clear: both;

position:relative;

width: 100%; /*was 100% */

height: 450px; /* ie fyucks up here */

margin: 0;

 

}

[benjipie]

Thanks Wickham....it sorted it out!!