Forum Moderators: not2easy
Before I start I would like to say that IE6 displays the page fine, however Firefox will not render the background images)
What I'm trying to achive is to have 3 areas to my site(not 3 columns more like 3 rows with the middle expanding)
So I need:
a head area for title and logo's
a main area for the left nav and content
and a footer.
All very simple so far, however I want to use background images for each area, all custom made. The reason for this is I want the main area background to expand verticaly as the page does.
now what seems to be the problem is I want a left and right column in the head and main areas using nested divs.
IE displays all okay however firefox won't display the background images when any divs are nested inside the parent area, infact it wont show the image unless there is some content in that parent area. The div obviously just sits on top.
If you need any more info into the issue please just ask away.
ahhh css is driving me nuts.. well actually its firefox that really bugging me.
If I can upload a link to an image that would show it far better.
DOCTYPE = xhtml1/DTD/xhtml1-transitional.dtd
my simple page
<body class="page">
<div id="wrapper">
<div id="header">
<div id="left">
<a hre="http://custompages.co.uk"><img src="images/logolet.gif" alt="logo" /></a>
</div> <div id="centre">
<img src="images/logo.gif" alt="logo title" /><br />
<div id="title">
<br />
<h3>Solution Development</h3>
</div>
</div>
</div>
<div id="main">
<div id="nav">
<h4>Title1</h4>
link1<br />
link2<br />
link3<br />
link4<br />
<br />
<h4>title2</h4>
link5<br />
link6<br />
link7<br />
link8<br />
link9<br />
link10<br />
link11<br />
link12<br />
</div>
<div id="content">
This is the main content area and the text should word wrap from one end of the text area to the other.
<br /> a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
</div>
</div>
<div id="footer">
©2007 Custompages
</div>
</div>
</body>
my css
/* --------- 1. defaults --------- */* {
margin: 0 auto;
padding: 0;
}
body {
background: #333333;
font: Verdana, Arial, sans-serif;
line-height: 130%;
}
a {
text-decoration: none
}
a img {
border:none;
}
/* --------- 2. page structure --------- */
.page #wrapper {
width: 740px;
margin: 0 auto;
padding: 0px 0px;
background: #333333;
}
/* --------- 3. header structure --------- */
#header {
width: 720px;
background-image: url('../images/sample/head.gif');
background-repeat: no-repeat;
font-variant: small-caps;
}
#left {
width: 160px;
padding-left: 8px;
padding-top: 15px;
margin: 0px 0px;
float: left;
/*background: #ff0000;*/
}
#centre {
width: 500px;
text-align: center;
padding-top: 15px;
margin: 0px 0px;
float: right;
/*background: #FFFF00;*/
}
/* --------- 4. content structure --------- */
.page #main {
width: 720px;
background-image: url('../images/sample/body.gif');
background-repeat: repeat-y;
/*background: #FF00FF;*/
}
#nav {
width: 160px;
padding: 5px;
margin: 0px 0px;
float: left;
/*background: #ff0000;*/ /*-- this is the color background for visual layout -- */
}
#content {
width: 490px;
padding: 10px;
padding-right: 20px;
margin: 0px 0px;
background-image: url('../images/sample/body.gif') right;
background-repeat: repeat-y;
float: right;
}
/* --------- 5. footer structure --------- */
#footer {
width: 700px;
background-image: url('../images/sample/foot.gif');
background-repeat: no-repeat;
font-size: 60%;
padding-left: 20px;
/*background: #00FFFF;*/
}
I hope no links show as I've tried to stop any.
Any plain english explination of why firefox won't render this way would be really appreciated.
IE is behaving wrong. When you float something, you are taking it out of the flow. To fix this, you need some element below your floats (but still contained within the element that has the background image that you want to show) to clear the floats. Doing that will force that element to appear below the floats, causing your container to stretch down, thereby appearing behind your floated items.
In short, you need something more like this:
<div id="container">
<div id="aFloat">...</div><div id="anotherFloat">
<div id="clear">...</div>
</div>
I made a class as below and just placed it after each section of the page.
css class
.clear {
clear: both;
}
after each nested area
<div class="clear"></div>
useful tip: I used class instead of id as id's can only be called once, a class can be used as many times as required in the same page.
I've searched for a few days on this so I hope it helps others.
feel free to correct any of the above if I'm wrong.
