Good in ie7/firefox/opera/safari but not ie6

HTML & CSS
1

There is just one slight little booger left to fix on this practice site.
For some reason in ie6 the background image will not fill the div.
I put in a conditional for ie6 and tried making it a specific height and even a specific padding but the background image still won’t fill the space.

I attached a picture of it. The news section in the column on the right is the one I would like to solve for ie6.

ie.css


html { /*background-color: gray;*/
margin: 0;
padding: 0;
/*background-image: url(../images/leftimg.png);
background-repeat: no-repeat;
background-position: 2px 150px;*/
}

body { font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: small;
margin: 0; /* clears default browser margins */
padding: 0;
/*background-color: #DCDCDC;*/ 
/*border: solid 1px;*/ 
}

.wrapper { position: relative;
width: 800px;
margin-left: auto;
margin-right: auto;
/*background-color: gray;*/
/*border-bottom: solid 1px;*/
}

#header { padding: 15px;
padding-left: 20%;
background-color: black;
color: white;
margin-bottom: 2px;
margin-top: 5px;
/*padding-top: 0px;*/
/*background-image: url(../images/logotest.png);
background-repeat: repeat-x;
background-position: 0px 0px;*/
}

#cntrheadertxt { padding-left: 25px;
}

#main { float: left; /* floats the whole main article to the left */
width: 442px;
/*height: 600px;*/
min-height: 600px;
margin-right: 5px; /* adds space between columns */
margin-left: 5px;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
border-left: solid 1px;
border-right: solid 1px;
/*background-color: #F5F5F5;*/
}

#menu { float: left;
width: 130px;
margin-top: 5px;
margin-left: 2px;
padding-left: 2px;
/*background-color: #F5F5F5;*/
/*border: solid 1px;*/
}

#mnucntnr { /*width: 75px;*/
}

#menu2 { background-color: #DCDCDC;
padding-left: 10%;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-top: 5px;
margin-bottom: 0px;
border-bottom: solid 1px;
border-top: solid 1px;
/*border: solid 1px;*/
}

#news { float: left;
width: 175px;
height: 600px;
padding-bottom: 600px;
padding-left: 2px;
padding-top: 5px;
/*border-left: solid 1px;*/
background-image: url(../images/chaosV2.png);
background-repeat: no-repeat;
background-position: 2px 2px;
/*background-color: #F5F5F5;*/
}

.newsspace { margin-bottom: 0px;
padding-bottom: 2px;
}

.note { margin-top: 2px;
/*margin-bottom: 2px;*/
font-size: x-small;
}

.footer { float: left;
/*clear: left;*/
/*padding: 15px;*/
margin-left: 150px;
margin-top: 100px;
/*border: solid 1px;*/
}

.horzntl { display: inline;
}

.prntonly { display: none;
font-size: .75em;
}

.smallesttxt { font-size: xx-small;
color: #ffffff;
/*float: right;*/
position: absolute;
right: 30px;
top: 30px;
}

li { list-style: none;
margin: 5px 0;
/*border: solid 1px;*/
}

/* Any unordered list that has menu as its id */
ul#menu { margin-top: 10px;
/*border: solid 1px;*/
}

/* Any element that has menu as its id and has list elements descended from it 

*/
#menu li { border: solid 1px;
}

/* Any a element that has lifill as its class */
a.lifill { padding-left: 2px;
display: block;
width: 125;
/*padding-right: 100%;*/
/*border: solid 1px;*/
}

/* a elements that are hovered over that have lifill as a class */
a:hover.lifill { background-color: #DCDCDC;
text-decoration: none;
/*border: none;*/
}

/* Link pseudoselectors must be in this order to function properly*/

a:link {
color: #000000;
text-decoration: none;
}

a:visited {
color: #000000;
text-decoration: none;
}

a:hover {
color: gray;
text-decoration: underline;
/*background-color: #DCDCDC;*/
}

a:active {
color: gray;
text-decoration: underline;
background-color: white;
}

index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<link rel="stylesheet" href="stylesheets/stylesheet.css" type="text/css" />
<!--[if IE 6]> <link rel="stylesheet" href="ie.css" type="text/css"> <![endif]-->
<title>Chaos Computers</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
@import url(stylesheets/index_print.css) print;
</style>
</head>

<body>
<div class="wrapper">

<h2 id="header"><span id="cntrheadertxt">Chaos Computers<span class="smallesttxt"> &copy; 2007</span></span><em class="prntonly"> - Print Version - </em></h2>

<ul id="menu2">
<li class="horzntl"><a href="index.xhtml">Home</a> | </li>
<li class="horzntl">News | </li>
<li class="horzntl">Contact | </li>
<li class="horzntl">Resources | </li>
<li class="horzntl">Downloads | </li>
<li class="horzntl">Links | </li>
<li class="horzntl">Log-In</li>
</ul>

<ul id="menu">
<li><span id="mnucntnr"><a class="lifill" href="index.xhtml">Audio</a></span></li>
<li><a class="lifill" href="index.xhtml">Cases</a></li>
<li><a class="lifill" href="index.xhtml">Cooling</a></li>
<li><a class="lifill" href="index.xhtml">Drives</a></li> 
<li><a class="lifill" href="index.xhtml">Keyboard/Mouse</a></li> 
<li><a class="lifill" href="index.xhtml">Lighting/Mods</a></li>
<li><a class="lifill" href="index.xhtml">Memory</a></li>
<li><a class="lifill" href="index.xhtml">Misc</a></li> 
<li><a class="lifill" href="index.xhtml">Modems/Network</a></li>
<li><a class="lifill" href="index.xhtml">Motherboards</a></li>
<li><a class="lifill" href="index.xhtml">Power-Supplies</a></li>
<li><a class="lifill" href="index.xhtml">Printer-Supplies</a></li> 
<li><a class="lifill" href="index.xhtml">Processors</a></li> 
<li><a class="lifill" href="index.xhtml">Software</a></li>
<li><a class="lifill" href="index.xhtml">Video</a></li>
<li><a class="lifill" href="index.xhtml">Contact</a></li>
<li><a class="lifill" href="index.xhtml">Links</a></li> 
<li><a class="lifill" href="index.xhtml">Used-Systems</a></li>
</ul>

<div id="main">
<p>Chaos Computers has been serving the community since 1999. Wespecialize in Computer Repair, Custom built systems, Sales of Parts &amp; Accessories, and Printer Supplies. Our staff offers quality and reliable products and services you can count on. In addition, our friendly and professional staff is here to answer any questions you may have about our company or our services.Whether you need your computer repaired, replaced  or upgraded, we have what you need at prices you can afford. At Chaos Computers, our goal is to provide you with courteous, expedient, professional service of the highest caliber.
</p>

<h3 class="category">Store Hours</h3>
<p>Monday-Friday 10 A.M. - 6 P.M. 
Saturday 10 A.M. - 3 P.M.
<br /> 
<em>*ATX CASES STARTING @ $15*</em>
</p>

<p><em>Please note this is not a real time representation of our inventory.</em>
</p>
<p class="notice"><em>Prices &amp; availability subject to change without notice.</em>
</p>
</div>

<div id="news">
<h4 class="newsspace">News</h4>
<p class="note">I AM GOING TO BE LOCKED UP AND NEED YOUR HELP!
</p>
</div>

  <p class="footer">Site design by Gjon <img src="images/valid_xhtml.png" alt="Valid XHTML 1.0 Strict" height="31" width="88" /><img src="images/valid_css.png" alt="Valid CSS!" height="31" width="88" />
</p>

</div>
</body>
</html>
2

I’m not sure what you mean by won’t fill the div. Do you want the image repeated ?
<snip/>

3

Hi,

If you have a link to the page it would be much easier to see what was wrong. I’m not sure what you mean by won’t fill the div. Do you want the image repeated ?

If I add a background colour to the div it goes to the 600px height (+600px padding) you set so you may need to explain a bit better what you expect to happen or what you wanted :slight_smile:

4

Hope this helps:

On the right side, only in IE6, where the news section is. The background image should fill 600px of height. The image is 600pixels high.
Looks fine in everything else.

For some reason that darned image won’t display after where the text ends. I can not for the life of me figure out why it won’t go below that area of text.

Thanks in advance.

5

Hi,

I copied your code exactly as above and inserted one of my images and it displays full length ok in IE6. There must be something you are not telling us :slight_smile:

6

okies, maybe this will help:

[URL="http://some link os/index.html

7

okies, maybe this will help:

At last !!! :slight_smile:

… 10 seconds later…

Try using the correct path to your ie stylesheet and see what happens.


 <link rel="stylesheet" [B]href="stylesheets/ie.css" t[/B]ype="text/css">

Paul wanders off mumbling to himself…

8

One more thing…

Why are you sending IE the whole stylesheet which effectively makes it loads the styles twice.

You should only have the changes in the IE stylesheet and not the whole lot again (unless you just did this for testing).

In fact you should be supplying the stylesheet to lte ie 6 because ie7 doesn’t need it and will break if it gets the height:600px.

Seeing as you only have one hack in the page you would be better off just using * html news {height:600px} in the main stylesheet which only IE6 and under would get. Or if you are worried about ie5 mac then use this:


/* mac hide \\*/
* html #news{height:600px}
/* end hide */
9

In fact you should be supplying the stylesheet to lte ie 6 because ie7 doesn’t need it and will break if it gets the height:600px.

I’m not sure what you mean. Are you saying I should make the initial style sheet filled with all the css and then make the conditional just for ie7?

Thanks so much for finding the obvious of which I miss all the time. Remembers to put on glasses

10

No. Paul is saying that you should make the IE stylesheet be for IE5-6/Win only and that you only need styles in the IE stylesheet that need to be different from the main stylesheet…

“lte” means “less then or equal to”.

11

Thank you both.