Forum Moderators: not2easy
Basically the problem is my background color is showing in IE but not Mozilla.
Style
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#000000;
}
#main-wrapper {
text-align: center;
}
#main{
width:800px;
text-align:left;
margin-left:auto;
margin-right:auto;
clear:left;
color:#000000;
background-color:#FFFFFF;
}
basically I want the outside of the page black and the page itself white.
any ideas why this is not working?
Cheers
Kiwidesign
margin-left:auto;
margin-right:auto;
with the background I tried adding the style="background-color:#ffffff;" to the html document but it didn't help.
<body>
<div id="main-wrapper">
<div id="main" style="background-color:#FFFFFF;">
<div id="header">
cheers
kiwidesign
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#000;
}
#main-wrapper {
text-align: center;
}
#main{
width:800px;
text-align:left;
margin:0 auto;
clear:left;
color:#000;
background-color:#fff;
}What's the clear:left for?
Still no luck white background is not showing in Mozilla.
I don't know why I put a clear left in have taken it out.
Could it be that the div needs a hight in mozilla before the background will show?
Kiwidesign
<html>
<head>
<style type="text/css">
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#000000;
}
#main-wrapper {
text-align: center;
}
#main{
width:800px;
text-align:left;
background-color:#FFFFFF;
clear:left;
color:#000000;
}
</style>
</head>
<body>
<center>
<div id=main>
test
</div>
</center>
</body>
</html>
Use that code in a test page see if it will work for you.
<html>
<head>
<style type="text/css">
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#000;
}
#main{
width:800px;
text-align:left;
margin:0 auto;
color:#000;
background-color:#FFF;
}
</style>
</head>
<body>
<div id="main">
test
</div>
</body>
</html>
thanks for all the help. Sadly still not working for me here is full details:
CSS
kground-color:#000;
}
#main-wrapper {
text-align: center;
}
#main{
width:800px;
text-align:left;
margin:0 auto;
color:#000;
background-color:#FFF;
}
#header{
float:left;
clear:left;
text-align:right;
}
#content{
float:left;
width:600px;
padding-top:20px;
padding-right:20px;
color:#000000;
}
.heading1{
font-size:18px;
color:#006666;
font-weight:bold;
padding-right:10px;
margin-bottom:20px;
}
.maintxt {
font-size:14px;
}
#leftnav{
float:left;
width:180px;
padding-top:20px;
background-color:
}
ul.none{
list-style-type:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#leftnav li a {
height: 18px;
text-decoration: none;
}
#leftnav li a:link, #leftnav li a:visited {
color:#CCCCCC;;
display: block;
background: url(menu_back.gif);
background-repeat:no-repeat;
padding:1px 0px 0px 5px;
margin-top:5px;
}
#leftnav li a:active{
color: #000066;
display: block;
background: url(menu_back_selected.gif);
background-repeat:no-repeat;
padding:1px 0px 0px 5px;
margin-top:5px;
}
#leftnav li a:hover {
color: #00CCFF;
background: url(menu_back.gif);
background-repeat:no-repeat;
padding:1px 0px 0px 5px;
margin-top:5px;
margin-left:5px;
}
HTML
<body>
<div id="main-wrapper">
<div id="main">
<div id="header">
<img src="headertriala.jpg" alt="header" />
<span class="heading1">Time Management</span>
</div>
<div id="leftnav">
<ul class="none">
<li><a href="time management.htm">Time Management</a></li>
<li><a href="">The Smart Leader</a></li>
<li><a href="">Stress Management</a></li>
<li><a href="">Change Management</a></li>
<li><a href="">Team</a></li>
<li><a href="">Home Base Business</a></li>
<li><a href="">Health -Wellness</a></li>
<li><a href="">Contact Us</a></li>
</ul>
<br><br><br>
<div align="center">
<img src="timedownload.gif" width="100" alt="Download Time Management PDF" title="Download Time Management PDF">
</div>
</div>
<div id="content">
<span class="maintxt">This is example content </span>
</div>
</div>
</div>
</body>
You can get around this by adding a clearing item after the float. For example, change your code to this:
...
<div id="content">
<span class="maintxt">This is example content </span>
</div>
<br class="floatfix"/>
</div>
</div>
</body>
And add the following class:
.floatfix { clear: both; }
Alternatively, you could also float #main so that it "contains" the other floated items, but then you'd need to add the width and centering to a wrapper around #main, like so:
#main-wrapper {
text-align: center;
width: 800px;
margin: 0 auto;
}
#main{
width:800px;
text-align:left;
color:#000;
background-color:#FFF;
float: left;
}
PS- Ignore Kufu... his advice about using <center> is crap. Pardon my aggression, but I *hate* when people suggest using depreciated, obsolete, tag-soup approaches.
Does the 'margin:0 auto;' work with IE? How do you make it work? I've just never been able to make it center with anything other than <center>.
Addition: Ok I just figured it out...lol. After all this time it's a nice relief.
[edited by: Kufu at 12:05 am (utc) on Mar. 28, 2006]
Fotiman - thanks heaps for your advice - I used the clearfix class and it worked a treat. Would you mind explaining why this worked i'm still a little hazy on floats and clears.
Cheers
Kiwidesign
on the container will make it work with IE. For example:
<body>
<div id="wrapper">
Centered
</div>
</body>
With these styles:
body
{
text-align: center;
}
#wrapper
{
margin: 0 auto;
width: 770px;
border: 1px solid red;
text-align: left;
}
Fotiman - thanks heaps for your advice - I used the clearfix class and it worked a treat. Would you mind explaining why this worked i'm still a little hazy on floats and clears.
Sure. With floats, you are taking the floated item out of the flow. So if you have something like this:
<div id="main">
<div id="foo">
Blah blah blah
</div>
</div>
If you float #foo, you are taking it out of the flow. Thus #main is essentially empty, which is why you don't see the white background. If your content looked like this:
<div id="main">
<div id="foo">
Blah blah blah
</div>
<div id="bar">
More of the same
</div>
</div>
Now, if #foo is floated, but #bar is not, then #main still contains some content, and you will see the white background behind #bar, but it may end before the bottom of #foo (if #bar contains more data than #foo).
Picture it like this:
+- main -----------------+
¦+- foo ----++- bar ----+¦
¦¦``````````¦¦,,,,,,,,,,¦¦
¦¦``````````¦¦,,,,,,,,,,¦¦
¦¦``````````¦¦,,,,,,,,,,¦¦
¦+----------+¦,,,,,,,,,,¦¦
¦,,,,,,,,,,,,¦,,,,,,,,,,¦¦
¦,,,,,,,,,,,,¦,,,,,,,,,,¦¦
¦,,,,,,,,,,,,+----------+¦
+------------------------+
or if bar contains less than foo:
+- main -----------------+
¦+- foo ----++- bar ----+¦
¦¦``````````¦¦,,,,,,,,,,¦¦
¦¦``````````¦+----------+¦
+¦``````````¦------------+
+----------+
now with a break that clears the float:
+- main -----------------+
¦+- foo ----++- bar ----+¦
¦¦``````````¦¦,,,,,,,,,,¦¦
¦¦``````````¦+----------+¦
¦¦``````````¦,,,,,,,,,,,,¦
¦+----------+,,,,,,,,,,,,¦
¦[ BR CLEARS FLOAT ],,,,,¦
+------------------------+
So by adding clearance to the <br>, it now has to appear below the float. And since it's contained by main, the background of main now reaches beyond the float, no matter which "column" is longer. Does that make it any clearer?
That is a great illustratio! I found out about the 'clear:both' fuction a few months back and it has helped out a lot.
I have new question though: do you know if there is a way to make both DIVs (in your example 'foo' and 'bar') equally tall (100% height of container), even if they have different amounts of content, without using an exact height value?
I have new question though: do you know if there is a way to make both DIVs (in your example 'foo' and 'bar') equally tall (100% height of container), even if they have different amounts of content, without using an exact height value?
Typically, this might be done using faux columns (using a vertically tiled background image to create the illusion of columns). Do a Google search for faux columns, or visit the "A List Apart" website and search there.
Alternatively, there is another method called "One True Layout". You'll find the article for this at the "Position Is Everything" website. Essentially, it involves using the overflow property, really big padding, and negative margins.
Hope that helps.
A List Apart is a great great site.
