...

View Full Version : Positioning not the same in ff and ie



chrise007
07-16-2007, 01:51 PM
chrise007


newbie


Posts: 1
Joined: 2007-07-16
Posted: Mon, 2007-07-16 10:31

Hi All

I am new to CSS and am trying to style a page with 3 columns. The left column will always have an image, the middle content will have the main content and the right column will have extra info and links etc.

My problem is that in ie it all aligns up correctly, but when i preview in ff the middle content drops down to under the left column. I havent positioned the middle content absolutely because i have a footer that at the moment expands down the page as the content expands. If i absolutely position the middle content the footer no longer looks right.

I hope this makes sense and that someone is able to help! The code is below:

CSS CODE:
body{
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #2a558e;
font-size: 0.7em;
line-height: 1.3em;
text-align:left;
}
html, body {
margin: 0;
padding: 0;
}
div {border: none;}

/* LAYOUT DIVS */
#header {
margin-left: 0px;
background-image:url(../images/top_bar_mini.jpg);
background-repeat:no-repeat;height: 200px;
}

#leftcol {
float: left;
width: 150px;
margin-left: 2px;
margin-top: 0px;
margin-right: 3px;
padding: 10px;
}

#rightcol {
position: absolute;
margin-left: 560px;
top: 215px;
width: 180px;
padding-left: 20px;
padding-right: 10px;
padding-top: 10px;
border-left:1px dotted #51aac2;
}

#leftcol p, #leftcol li, #rightcol p {
font-size: 100%;
}

#content {
padding: 10px;width: 390px;
}

#footer {
clear: both;
width: 760px;
margin: 10px;
text-align: center;
font-family: Verdana;
font-size: 80%;
padding: 3px;
border-top: 1px solid #51aac2;color: #000;
}

#breadcrumb1{
position:absolute;
top: 181px;
left: 0px;
z-index:-1;
text-align:left;
width:760px;
background-color: #ffde00;
font-size: 90%;
padding: 5px;
}
.breadcrumb1{color: #000000;}

HTML CODE:
<body>
<div id="header"></div>
<div id="breadcrumb1" class="breadcrumb1"> Home > Company Info > Our Customers <img src="../images/spacer.gif" width="400" height="1">Print this page&nbsp;<img src="../images/printer_icon_yellow.gif" width="19" height="19" align="absmiddle"></div><div>&nbsp;</div>
<div id="leftcol"><img src="../images/inner_pic_yellow.jpg" width="130"></div>
<div id="content"><img src="../images/inner_title_who_we_are.jpg" width="370" height="30">
<p>Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.</p>
<img src="../images/inner_title_why_are_we_different.jpg" width="370" height="30">
<p>Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.</p>
<p>Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.</p>
<p>Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.</p>
</div>
<div id="rightcol"><img src="../images/inner_key_high_yellow.jpg" width="180" height="30">
<p>Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret. Ex delicata moderatius pro. His quot voluptua antiopam an, et nec mazim graeco, abhorreant efficiendi quaerendum qui an.</p></div>
<div>&nbsp;</div><div>&nbsp;</div>
<div id="footer" class="footer"><br><a href="#">Site Map</a> | <a href="#">Copyright Info</a> | <a href="#">Terms and Conditions</a> | <a href="#">Privacy Policy</a> | <a href="#">Accessibility</a></div></div></body>

Can anyone help at all?? Much appreciated...

koyama
07-16-2007, 02:07 PM
Can anyone help at all?? Much appreciated...
Remember that we don't have your images. We need a live link to the page in order to tell what the problem is.

chrise007
07-18-2007, 10:09 AM
Hi

Thanks for the reply but i have actually managed to sort the problem!!

Regards

_Aerospace_Eng_
07-18-2007, 10:33 AM
Hi

Thanks for the reply but i have actually managed to sort the problem!!

Regards

What was the solution?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum