...

View Full Version : IE7 ok, not working in FF



nshack31
02-07-2008, 10:03 PM
i have a two column layout that works in IE7 but not FF. the part that wont work is my thick left border..


#container{
margin: 0 auto;
background-color:#ffffff;
width:465px;
border-left:335px solid #8FADB4;
border-right:1px solid #8FADB4;
border-top:1px solid #8FADB4;
border-bottom:1px solid #8FADB4;
background: url('images/br_logo.jpg') no-repeat bottom right;

}
/* The width and color of the left rail */
#leftRail{
float:left;
padding: 5px;
width:315px;
margin-left:-335px;
position:relative;



}
#center{
float:left;
padding: 7px;
width:455px;
margin-right:-465px;
}


my html is as follows:


<div id="container">
<div id="center"> Right column
</div>
<div id="leftRail">
left column
</div>
</div>


can anybody help?

Andrew Johnson
02-07-2008, 10:15 PM
It seems you could go about this whole thing in a better way, without negative margins and such - however I think this HTML fix may solve some of your woes:



<div id="container">
<div id="center">
Right column
</div>
<div id="leftRail">
left column
</div>
<br style="clear:both" />
</div>

nshack31
02-07-2008, 10:22 PM
that worked thanks! although im not sure why, will read up on br styles

Andrew Johnson
02-07-2008, 10:25 PM
Just read up on the "clear" css attribute and how it affects "float"ing objects.

EXTREMELY important to understand if you use floating div's and the like, but a lot of people don't know about it for some reason.

nshack31
02-08-2008, 06:51 PM
ive designed another css template as im trying to learn about clearing floats. my css is as follows:


#container{
margin: 0 auto;
background-color:#ffffff;
width:760px;
border:1px solid #8FADB4;
padding: 12px;

}

#header{
width:100%;
}
#links {
margin-top: 5px;
margin-bottom: 10px;
height:25px;
background: url('images/links.jpg') repeat-y;
width: 100%;
}
#bodycontainer
{
background: url('images/mainbody.jpg') repeat-y;
width:100%;

}
#left{
float: left;
width:220px;
padding: 5px;

}
#content{
padding: 5px;
width:520px;
}


my html:


<div id="container">
<div id="header">
header info here (banner etc)
</div>
<div id="links">links go here after header</div>

<div id="bodycontainer">
<div id="left">left hand column info here </div>
<div id="content">
right content here
</div>
</div>
<div id="footer">stuff for footer</div>
</div>

i have the same problem in that it works in IE7 but not FF, so i tried to add the following to my css:


#left{
float: left;
clear: both;
width:220px;
padding: 5px;

}

this seemed to help but my site is still a mess! it seems to be that the 'links' section is not low enough down the page. any ideas? thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum