2 Replies - 1637 Views - Last Post: 18 May 2007 - 01:50 PM

#1 matt-the-mash   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 122
  • Joined: 10-July 06

Div background color issue

Posted 16 May 2007 - 02:28 AM

This is probably really simple, but when i produce a layout using DIV, and styling with CSS, i can align the DIV's and set font's etc no problem.

But when i use by HTML editor, i can set the background color of the DIV and it fills fine, but when i upload and to the server and run on the web, the background color does'nt fill all the way down.

The background color for the div#nav fills ok, its just the #container div that does'nt seem to work.
Here is the code for the styles and layout:

<style type="text/css" media="screen">

div#container {
 margin: 0 auto; width: 80%;
height: 100%;
background-color:#FDCFAE;
z-index:100;
} 

div#content {
width:100%;
height:100%;
background-color:#FDCFAE;
z-index:101;

}

div#nav {
background-color:#F79E5D;
border-style:solid;
border-color:orange;
font-family: arial;
font-size:8;
text-align:center;
}

div#banner {
z-index: 103; left: 110px; width: 344px; position: absolute; top: 51px;
		height: 64px
}
</style>
</head>

<body>
	 
	
<div id="container">
	 
	<div id="content">
		<div id="nav" style="z-index: 102; left: 121px; width: 175px; position: absolute; top: 127px;
			height: 194px">
			<a href="http://www.book-your-mot.co.uk">book-your-mot.co.uk</a>
		</div>
  <div id="banner">
	   <img src="/images/bookmy_banner1.jpg" style="width:100%;" /> 
	</div>  

</div><!--content-->
</div><!--container-->
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Div background color issue

#2 DilutedImage   User is offline

  • D.I.C Addict
  • member icon

Reputation: 15
  • View blog
  • Posts: 646
  • Joined: 20-November 06

Re: Div background color issue

Posted 16 May 2007 - 05:40 PM

What browser are you viewing this in? Not all browsers (IE6) support the height attribute in DIVs. To work around this, you can create a background that is as tall as the minimum height you want the DIV to be (perhaps a 1px wide transparent GIF). You could also use padding to force it X pixels beyond the content.


Was This Post Helpful? 0
  • +
  • -

#3 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Div background color issue

Posted 18 May 2007 - 01:50 PM

Let’s see: Absolutely positioned elements aren’t in the normal flow, so #content behaves as if it has no content. Thus, the background is not drawn because there’s nowhere to draw it to. You might think that #content has dimensions greater than zero by zero, because you’ve assigned it a height of 100%; however, percentage heights are ignored unless an ancestor has an explicit height. Since neither body nor html have been assigned explicit or percentage heights…
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1