How to Prevent 100% Width DIV in IE6?

@msmith29063Apr 06.2009

I’ve got a side navigation that displays correctly in every browser EXCEPT IE 6. Big shock… I want the navigation DIV to only be as wide as the content inside it. It does this in IE7, FF, Safari, etc. Any help would be greatly appreciated.

The CSS:

[CODE]#nav { background-color: #fff; width: 218px; height: 400px; float: left } #menuContainer { margin-top: 120px; margin-left: 12px; position: fixed } #menuContainer h3 { font-size: 11px; font-weight: 900; text-transform: uppercase; margin: 0 0 4px } .menu { list-style: none; margin: 0; padding: 6px 0; border-top: 1px dashed; border-bottom: 1px dashed } .menu li { font-size: 20px; font-weight: 900; text-align: right; text-transform: uppercase; margin: 3px 0; padding: 0 } .menu a { color: #000; text-decoration: none } .menu a:hover {} .menu ul { list-style: none; margin: 0; padding: 0 } .menu ul li { font-size: 12px; font-weight: bold; line-height: 14px; text-transform: lowercase; margin: 0; padding: 0 } .menu ul a { color: #c00 } .menu ul a:hover { color: #000 }[/CODE]

And the HTML:

[CODE]<div id=”nav”> <div id=”menuContainer”> <h3>Site Name</h3> <ul class=”menu”> <li><a href=”…”>Page</a></li> <li><a href=”…”>Page</a></li> <li><a href=”#”>Page</a> <ul> <li><a href=”…”>Page</a></li> <li><a href=”…”>Page</a></li> <li><a href=”…”>Page</a></li> <li><a href=”…”>Page</a></li> </ul> </li> <li><a href=”…”>Page</a></li> <li><a href=”#”>Page</a> <ul> <li><a href=”…”>Page</a></li> <li><a href=”…”>Page</a></li> </ul> </li> <li><a href=”…”>Page</a></li> </ul> </div> </div>[/CODE]

to post a comment

CSS

5 Comments(s) _↴

@cootheadApr 06.2009 — #Hi there msmith29063,

unfortunately IE6 does not support [b]position:fixed[/b]. ?

Try it like this...

[color=navy]
 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 
 &lt;title&gt;&lt;/title&gt;
 
 &lt;style type="text/css"&gt;
 #nav { 
 background-color:#fff; 
 width:218px; 
 height:400px; 
 float:left;
 }
 #menuContainer { 
 margin-top:120px; 
 margin-left:12px; 
 position:fixed; 
 }
 #menuContainer h3 { 
 font-size:11px; 
 font-weight:900; 
 text-transform:uppercase; 
 margin: 0 0 4px ;
 }
 .menu { 
 list-style:none; 
 margin:0; 
 padding:6px 0; 
 border-top:1px dashed; 
 border-bottom:1px dashed; 
 }
 .menu li { 
 font-size:20px; 
 font-weight:900; 
 text-align:right; 
 text-transform:uppercase; 
 margin:3px 0; 
 padding:0;
 }
 .menu a { 
 color:#000; 
 text-decoration:none;
 }
 .menu a:hover  {}
 .menu ul { 
 list-style:none; 
 margin:0; 
 padding:0;
 }
 .menu ul li { 
 font-size:12px; 
 font-weight:bold; 
 line-height:14px; 
 text-transform:lowercase; 
 margin:0;
 padding:0;
 }
 .menu ul a { 
 color:#c00;
 }
 .menu ul a:hover { 
 color:#000;
 }[color=purple]
 #content {
 width:342px;
 margin-left:10px;
 float:left;
 }[/color]
 &lt;/style&gt;
 [color=red]
 &lt;!--[if IE 6]&gt;
 &lt;style type="text/css"&gt;
 html,body {
 margin:0;
 padding:0;
 height:100%;
 overflow:auto;
 }
 #menuContainer { 
 position:absolute;
 }
 #content {
 padding-top:20px;
 }
 &lt;/style&gt;
 &lt;![endif]--&gt;
 [/color]
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="nav"&gt;
 
 &lt;div id="menuContainer"&gt;
 
 &lt;h3&gt;Site Name&lt;/h3&gt;
 
 &lt;ul class="menu"&gt;
 &lt;li&gt;&lt;a href="..."&gt;Page&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="..."&gt;Page&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Page&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="..."&gt;Page&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="..."&gt;Page&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="..."&gt;Page&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="..."&gt;Page&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="..."&gt;Page&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Page&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="..."&gt;Page&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="..."&gt;Page&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="..."&gt;Page&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 
 &lt;/div&gt;
 
 &lt;/div&gt;
 [color=purple]
 &lt;div id="content"&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
 pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
 orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
 nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
 sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
 Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
 pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
 Pellentesque in dui. In eget elit. Praesent eu lorem.
 &lt;/p&gt;&lt;p&gt;
 Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
 orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
 augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
 interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
 lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
 lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
 Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
 volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
 Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
 metus urna, semper eget, aliquam ac, feugiat nec, massa.
 &lt;/p&gt;&lt;p&gt;
 Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. *** sociis natoque 
 penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat 
 quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin 
 diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin 
 scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit. 
 Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in, 
 rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
 &lt;/p&gt;
 &lt;/div&gt;
 [/color]
 &lt;/body&gt;
 &lt;/html&gt;
 [/color]

[i]coothead[/i]

@msmith29063authorApr 06.2009 — #Sorry. I'm not so concerned about the position issue. I'm concerned about the width issue. Although, this did fix the problem in IE 6. What is it in the conditional IE 6 CSS that did it?

@cootheadApr 06.2009 — #Hi there msmith29063,
[color=navy]What is it in the conditional IE 6 CSS that did it? [/color][/quote]
[b]position:absolute;[/b] fixed the little critter. ?

[i]coothead[/i]

@msmith29063authorApr 06.2009 — #Okay. Thanks.

Can I do the IE6 conditional INSIDE my existing CSS file? If so, how? Or do I have to link to an additional IE6 CSS file?

@cootheadApr 06.2009 — #Hi there msmith29063,

No, all IE conditional comments must be placed [b]after[/b] the main CSS.

So use either...

[color=navy]
 
 &lt;!--[if IE 6]&gt;
 &lt;style type="text/css"&gt;
 ...
 ...
 ...
 &lt;/style&gt;
 &lt;![endif]--&gt;
 [/color]

...or...

[color=navy]
 &lt;!--[if IE 6]&gt;
 &lt;link rel="stylesheet" type="text/css" href="[color=red]ie6.css[/color]"&gt;
 &lt;/style&gt;
 [/color]

[i]coothead[/i]

Also in #CSS _↴

Site shows up perfectly in Firefox & Opera but not in IE will CSS work on mozilla help with "clipping" css attribute

Success!

Help @msmith29063 spread the word by sharing this article on Twitter...

Tweet This

How to Prevent 100% Width DIV in IE6?

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

How to Prevent 100% Width DIV in IE6?

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴