Forum Moderators: not2easy
i have two divs, one nested in the other.
the bottoms' div background-image does not show through in firefox 2.0.0.3, but does show in internet explorer 6 and 7. the top div does not have any background attributes specified (i have also tried specifying background:none, but didn't work either). is there any workaround?
Can you provide some sample code? I can't see any particular reason why this wouldn't work.
body, td, th {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#container {
text-align: center;
height: 100%;
}
#header {
margin: 0 auto;
}
#contentscontainer {
width: 950px;
margin: 0 auto;
background-image: url("images/background-cc.gif");
height: 100%;
}
#leftcolumn {
width: 185px;
text-align: left;
float: left;
padding: 10px 10px;
}
#contents {
width: 520px;
text-align: left;
float:left;
padding: 10px 10px;
}
#rightcolumn {
width: 185px;
text-align: left;
float: right;
padding: 10px 10px;
}
#footer {
clear: both;
}
a img {
border: 0;
}
the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><img src="images/layout_01.jpg" width="121" height="50"><a id="ro-paginaprincipala" href="#"><img src="images/transparent5x5.gif" width="185" height="50"></a><a id="ro-cercetare" href="#"><img src="images/transparent5x5.gif" width="115" height="50"></a><a id="ro-productie" href="#"><img src="images/transparent5x5.gif" width="114" height="50"></a><a id="ro-oferte" href="#"><img src="images/transparent5x5.gif" width="83" height="50"></a><a id="ro-legaturi" href="#"><img src="images/transparent5x5.gif" width="101" height="50"></a><a id="ro-contact" href="#"><img src="images/transparent5x5.gif" width="104" height="50"></a><img src="images/layout_08.jpg" width="127" height="50"><img src="images/layout_09.jpg" width="950" height="200"></div>
<div id="contentscontainer">
<div id="leftcolumn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce et mauris. Etiam sagittis ultrices justo. Phasellus leo. Fusce dictum est vitae ligula. Vivamus accumsan, quam et porttitor aliquam, mi urna interdum velit, sit amet fermentum leo felis blandit ipsum. Nullam sem. Curabitur a quam. Integer eu metus. Nunc tincidunt, lectus sit amet molestie posuere, tortor justo feugiat dolor, ac rhoncus dui nulla ac arcu. Ut scelerisque dolor ut mi. Nunc iaculis molestie eros. Quisque dapibus, nisi sit amet eleifend viverra, erat augue interdum erat, eget iaculis augue mi varius ligula.</div>
<div id="contents"><p> Integer non lacus. Suspendisse ante. Ut sapien. Proin id erat sed justo vulputate placerat. Nunc magna. Sed lectus. Sed pede. Nullam nec est. Fusce in purus. Phasellus ut neque ut urna dignissim laoreet. Nulla facilisi. Suspendisse potenti. Nullam vitae nibh vitae eros pretium fermentum. Nullam gravida, ligula eu viverra venenatis, mi odio luctus metus, quis placerat purus magna sit amet eros. Etiam sollicitudin arcu vel nisl. </p>
<p>Donec posuere, urna vel nonummy pretium, nisl enim elementum est, eget mollis quam massa sed justo. Duis volutpat pellentesque massa. Integer a magna. Nunc dictum posuere quam. Aenean pretium, leo nec sodales luctus, nisi mi accumsan enim, porta nonummy mi nisl quis dolor. Aenean ornare ligula sit amet dolor. Aenean nibh. Integer neque nisi, commodo et, iaculis id, viverra fermentum, erat. Sed erat tellus, elementum vel, feugiat non, consequat at, tortor. Aenean tincidunt, orci bibendum fermentum ornare, enim tortor vehicula velit, a tincidunt magna eros ut est. Cras sit amet magna tempus arcu feugiat lobortis. Donec quis mauris. Nulla ipsum leo, ultrices non, adipiscing vitae, sagittis non, tortor. Nunc dapibus purus non nibh. Sed nisl. Praesent placerat sollicitudin nisl. Donec lorem velit, rutrum nec, fermentum ut, dictum ac, pede. Donec mattis libero suscipit nibh. Morbi nec lacus in dui fermentum cursus. </p>
<p>Curabitur tincidunt dui quis odio pellentesque lobortis. Donec porta felis ac enim. Praesent vitae dui elementum risus volutpat congue. Donec eget pede at eros commodo consectetuer. Suspendisse ut ligula. Morbi dignissim dolor a metus. Phasellus tempus augue luctus nisi. Maecenas odio. Vivamus elementum, dolor ac commodo nonummy, nibh lectus lobortis lacus, sit amet suscipit tellus leo at arcu. Maecenas viverra dapibus neque. Fusce varius imperdiet eros. Nullam in ligula. Mauris tristique dolor et est. </p>
</div>
<div id="rightcolumn">Aliquam dui. Mauris velit. Nullam sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent porttitor, libero nec convallis congue, massa ante nonummy risus, sit amet tempus felis sapien a urna. Sed eget elit nec enim adipiscing tincidunt. Nulla rhoncus, nibh eu ultrices mattis, urna sapien semper eros, vitae cursus libero lorem in augue. Morbi tristique. Ut imperdiet volutpat nibh. Nunc sit amet pede at nisl dapibus ornare. Ut ac metus sed odio tincidunt vehicula. Sed a sapien ut turpis nonummy semper. Integer ut odio. Nullam dignissim mauris ac lacus. Quisque luctus quam ac lacus.</div></div>
<div id="footer"><img src="images/layout_21.jpg" width="950" height="60"></div>
</div>
</body>
</html>
the problem is with the #contentscontainer id. doesn't want to show up :(
<br style="clear:both;" />just before the end of #contentscontainer it'll clear the floated columns above it and 'prop' the container open forcing the background to show
#contentscontainer:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; } This doesn't work in IE because it doesn't support generated content, but luckily...
Personally I'd go for the :after trick as I've found it the most foolproof. For IE you're already triggering hasLayout so that browser isn't an issue.
Hope this helps. Reply back if you've got any questions of course.
