Click to See Complete Forum and Search --> : backgroundimage DIV in Netscape


ahasverus
10-14-2003, 05:20 AM
I use CSS to position my page instead of tables. I got one problem: I use one global DIV to position all the others in the center, and I would like tu use this DIV for a backgroundimage.

It works fine in IE but not in Netscape. This DIV has no contents except for other div's and netscape seems to set the height to 0.

How can I get it so the height in NS of the div is the height of my page, so the backgroundimage shows?

Thanks

Ahas

DaveSW
10-14-2003, 07:04 AM
Can we see the full page?

ahasverus
10-14-2003, 09:07 AM
The new version isn't online yet.

The old version: www.cvpberingen.be

This one still uses a table for main layout.

The code for the new version that works with IE is:

<html>
<head>
<title>CD&V-Beringen</title>
<style>
body {
background-color:#bf5009;
margin:0px 0px 0px 0px;
text-align:center;
}
a {
text-decoration:none;
font-size:12pt;
font-weight:bold;
color: #BF5009;
}
a:hover {
text-decoration:none;
font-size:12pt;
font-weight:bold;
color: #F8B445;
}
#container{
width:700;
background-image:url(bglights.jpg);
background-position:100% 100%;
background-repeat:no-repeat;
margin-right:auto;
margin-left:auto;
}
#banner {
font-weight:bold;
font-family:times new roman, serif;
background-image:url(cdvtop.jpg);
height:78px;
border-bottom: 2px solid #BF5009;
voice-family: "\"}\"";
voice-family: inherit;
height:78px;
color:#0a078d;
text-align:left;
}
html>body #banner {
height:78px;
}

#nav {
width:100%;
font-family: Arial, sans-serif;
font-size:10pt;
background-color: #BF5009;
margin-left: 0;
border-bottom: 2px solid #BF5009;
}
#nav ul {
display:inline;
margin-left:0;
padding-left:0;
}
#nav li {
display:inline;
list-style:none;
}
#nav a.navi {
padding: 3px 3px 3px 3px;
border-left: 10px solid #BF5009;
border-right: 10px solid #BF5009;
background-color: #E16F30;
color: #fff;
font-size:10pt;
font-weight:bold;
text-decoration: none;
width:96px;
text-align:center;
font-family:times new roman, serif;
}
#nav a.navi:hover {
padding: 3px 3px 3px 3px;
border-left: 10px solid #F8B445;
border-right: 10px solid #F8B445;
background-color: #EFAF7F;
color: #BF5009;
font-weight:bold;
text-decoration: none;
width:96px;
text-align:center;
font-size:10pt;
font-family:times new roman, serif;
}
#main {
float:left;
width:55%;
margin-right:15px;
padding-bottom:20px;
margin-left:20px;
margin-top:40px;
font-size:12pt;
text-align:left;
}
#rightcontent {
float:right;
width:200px;
margin-right:15px;
margin-left:20px;
margin-top:40px;
padding-bottom:20px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
border-top:10px solid #BF5009;
border-right:2px solid #BF5009;
border-left:2px solid #BF5009;
border-bottom:2px solid #BF5009;
text-align:left;
}

</style>
</head>
<body>
<div id="container">
<div id="banner"><br><br><br>&nbsp;&nbsp;<script language="javascript" src="slogan.js"></script></div>
<div id="nav">
<ul>
<li><a href="mandaten.htm" class="navi">Mandaten</a></li>
<li><a href="actueel.htm" class="navi">Actueel</a></li>
<li><a href="chatcafe.htm" class="navi">Chatcafé</a></li>
<li><a href="mening.htm" class="navi">Uw mening</a></li>
<li><a href="links.htm" class="navi">Links</a></li>
<li><a href="mailto:christoph.bielen@pandora.be?subject=e-mail via website cdenv" class="navi">Contact</a></li>
<li><a href="index.htm" class="navi">Home</a></li>
</ul>
</div>
<div id="main">
<p><h2>Uit de actualiteit:</h2></p>
<p><a href="ford.htm">Ford-drama bewijst nood aan industrieel beleid.</a><br>CD&V-voorzitter Yves Leterme trok donderdag met de Limburgse parlementsleden en députés van CD&V naar de Ford-fabriek in Genk. Hij ontmoette er de vakbonds- afgevaardigden en werknemers en luisterde ... <a href="ford.htm">lees verder</a></p>
<p><a href="ocmwbestuur.htm">Openbaarheid van OCMW-bestuur</a><br>Sedert 24 augustus 2002 is de OCMW-raad openbaar. De raad moet vergaderen met geopende deuren en zal net als de gemeenteraad vanaf heden een openbare en geheime zitting hebben. ... <a href="ocmwbestuur.htm">lees verder</a></p>
<br>
<p align=justify><b>Beste bezoeker,</b></p>
<p align=justify><b>Welkom op onze website.</b></p>
<p align=justify><b>De CD&V-Beringen staat voor een Christelijke maatschappijvisie en solidariteit.</b></p>
<p align=justify><b>Omdat wij economische vooruitgang en moderne technologie hoog in het vaandel dragen, nodigen wij u graag uit voor verdere kennismaking.</b></p>
<p align=justify><b>Namens CD&V-Beringen,</b></p>
<p><b>Norbert Ziembicki<br>Voorzitter CD&V-Beringen</b></p>
</div>
<div id="rightcontent">
<script language="javascript" src="rcindex.js"></script>
<noscript>Deze tekst wordt met een javascript gegenereerd. Om deze te zien zal u javascript in uw browser moeten activeren.</noscript>
</div>
</div>
</body>
</html>


But the container div has no height in netscape so that the background-image doesn't show.

I have no idea how to correct this unless setting the height for every page.

Thanks,


Ahas

Robert Wellock
10-14-2003, 11:42 AM
Basically you should give the division a specific height dimension or it will only stretch to vertically to the contents.

toicontien
10-14-2003, 03:00 PM
You were actually running into a CSS bug in IE. Since you floated both main and rightContent, those DIVs are removed from the normal document flow, and other elements are allowed to wrap around their sides.

The container DIV does not take on the height of either of its floated child DIVs. Container is only as tall as the main menu, since it is not floated and therefore still in the normal document flow.

I placed a DIV inside the container DIV but still below the code for the main content and the right column (div class="spacer">&amp;nbsp;</div>). In CSS, I specified that no element can float to the left or right of this last DIV (clear: both;). That will place the spacer DIV below the two floated elements and stretch the container DIV 1 pixel below the floated DIVs.

See the attached code.

ahasverus
10-15-2003, 02:01 AM
Thanks, it works great!

So it 's actually IE that has the problem.

I never would have found the solution without help.

Thank you

Ahas

Robert Wellock
10-15-2003, 04:38 AM
You can nearly always guarantee if M$ displays a CSS-P page drastically different than Mozilla Firebird it will be M$ at fault.