PDA

View Full Version : liquid layout woes... :(


benjipie
02-05-2009, 11:23 AM
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 here (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....

Attached Code
<div id="mainContent">
<p class="hello">hello</p>

<img id="megaPhone" src="images/megaphone.jpg" width="128" height="94"/>
<p class="minContentText">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 </p>
</div>


#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;

}