Float Left?

[webskipper]

Can someone help with an exception for IE6?

I have a 4 column CSS layout in which the left column contains a
simple List based vertical menu. Now, the menu sometimes floats out
into the middle of the screen in IE6 and sometimes IE7. It behaves
properly in all other Browsers. Maybe it is a connection speed
issue? I cannot verify the phenomenon.

I tried float: left; and I still get emails saying that it is not
helping. I also tried reverting the PC back to IE6 and wouldn't you
know it, you can't if Service Pack7 was installed.
Below is the CSS for the left column and the top elements of the
menu. (ModelYacht.org) Thanks in advance for any help. -PhilipS

#left
{
width: 140px;
/* LC width */
padding: 5px 5px 0 5px;
/* LC padding */
right: 240px;
/* LC fullwidth + CC padding */
margin-left: -100%;
}

/* CSS Popout Menu */
#menu
{
position: absolute;
top: 1px;
left: 58px;
padding: 1px;
z-index: 2;
width: 140px;
background-image: url();
color: inherit;
background-color: #003;
right: 0px;
bottom: 0px;
text-indent: 4px;
float: left;
}

#menu a, #menu h2
{
display: block;
font: bold 11px/15px arial,helvetica,sans-serif;
border-top: 1px #00F solid;
white-space: nowrap;
text-indent: 4px;
width: 135px;
text-transform: uppercase;
text-align: justify;
text-decoration: none;
background-image: url(/css/image/buttonup.gif);
background-repeat: repeat-x;
height: 15px;
padding: 1px 0px 0px 0px;
background-color: #FAFAFA;
border-right: 1px #CCC solid;
border-left: 1px #CCC solid;
}

[Snookerman]

If you need IE6, I'd recommend IETester (http://www.my-debugbar.com/wiki/IETester/HomePage), it has IE5.5 to IE8 all in one.

[webskipper]

Very Cool!

Ok now what? I have verified the issue. Cannot control it.

[Master_script_maker]

can you post a link to your site or all of your code?

[webskipper]

I listed the domain in the first post.

I already have the <meta http-equiv=X-UA-Compatible content="IE=EmulateIE7"> . I think the problem is that IE6 is not recognizing the new CSS standards.

[webskipper]

Here's the whole enchilada:

body
{
padding-left: 140px;
/* LC fullwidth */
padding-right: 190px;
/* RC fullwidth + CC padding */
min-width: 730px;
/* LC fullwidth + CC padding */
background-image: url(/css/image/steel37.gif);
font-family: Arial,Times,Monoco,Helvetica,Serif;
font-size: 14px;
min-height: 600px;
border: 1px #900;
max-width: 1600px;
max-height: 1000px;
background-color: #003;
}

#header
{
margin: 0px -197px 0px -200px;
border: 0;
}

#footer
{
margin: 5px -197px 0px -200px;
height: 15px;
}

.column
{
position: relative;
float: left;
min-height: 400px;
height: auto;
}

#center
{
padding: 0 20px 0 20px;
width: 100%;
min-height: 545px;
}

#left
{
width: 140px;
/* LC width */
padding: 1px;
/* LC padding */
right: 240px;
/* LC fullwidth + CC padding */
margin-left: -100%;
float: left;
}

#right
{
width: 130px;
/* RC width */
padding: 75px 1px 1px 5px;
/* RC padding */
margin-right: -100%;

}

#footer
{
clear: both;
border: 0;
}

/*** IE Fix ***/
* html #left
{
left: 130px;
/* RC fullwidth */
float: left;
}

/*** Just for Looks ***/
body { background-color: #003; }

#header
{
font-size: small;
text-align: center;
padding-bottom: 1px;
background-image: url(/css/image/header_back.gif);
background-color: #003;
border: 0;
height: 75px;
padding-top: 4px;
}

#footer
{
text-align: center;
height: 14px;
color: #000;
background-image: url(/css/image/nav_back.gif);
background-color: #FAFAFA;
text-transform: capitalize;
white-space: nowrap;
font-style: italic;
background-repeat: repeat-x;
font-size: 10px;
font-family: Times,Arial,Monoco,Helvetica,Serif;
padding: 6px 0px 2px 0px;
font-weight: normal;
vertical-align: middle;
border: 0;
}

#left
{
background-color: #003;
background-image: url(/css/image/steel37.gif);
float: left;
}

#center { background-color: #FFF; }
#right { color: #000; }

.column
{
padding-top: 1px;
text-align: justify;
}

#hnav
{
margin: 0px -197px 0px -200px;
text-align: center;
height: 14px;
color: #000;
background-image: url(/css/image/nav_back.gif);
background-color: #FAFAFA;
white-space: nowrap;
font-style: italic;
background-repeat: repeat-x;
font-size: 12px;
padding: 6px 0px 3px 0px;
font-weight: bold;
vertical-align: middle;
}

/* For Menu */
.hand { cursor: pointer; }
.help { cursor: help; }

/* CSS Popout Menu */
#menu
{
position: absolute;
top: 1px;
left: 58px;
padding: 1px;
z-index: 2;
width: 140px;
background-image: url();
color: inherit;
background-color: #003;
right: 0px;
bottom: 0px;
text-indent: 4px;
float: left;
}

#menu a, #menu h2
{
display: block;
font: bold 11px/15px arial,helvetica,sans-serif;
border-top: 1px #00F solid;
white-space: nowrap;
text-indent: 4px;
width: 135px;
text-transform: uppercase;
text-align: justify;
text-decoration: none;
background-image: url(/css/image/buttonup.gif);
background-repeat: repeat-x;
height: 15px;
padding: 1px 0px 0px 0px;
background-color: #FAFAFA;
border-right: 1px #CCC solid;
border-left: 1px #CCC solid;
}

#menu a
{
background-image: url(/css/image/buttonup.gif);
background-color: #FAFAFA;
background-repeat: repeat-x;
text-indent: 2;
color: #000;
text-decoration: none;
}

#menu a:visited
{
background-image: url(/css/image/buttonup.gif);
background-repeat: repeat-x;
text-indent: 2;
color: #000;
text-decoration: none;
border-top: 1px #C00 solid;
}

#menu a:hover
{
background-image: url(/css/image/buttondown.gif);
background-repeat: repeat-x;
text-indent: 2;
text-decoration: none;
color: #000;
border-right: 1px #CCC solid;
border-left: 1px #CCC solid;
border-top: 1px #C00 solid;
}

#menu a:active
{
background-image: url(/css/image/buttonup.gif);
background-repeat: repeat-x;
color: #F00;
border-right: 1px #CCC solid;
border-left: 1px #CCC solid;
}

#menu h2
{
font: bold 12px/16px arial,helvetica,sans-serif;
color: #003;
text-transform: uppercase;
margin: 0;
padding: 4;
width: 134px;
background-image: url(/css/image/buttonup.gif);
background-repeat: repeat-x;
border-right: 1px #CCC solid;
border-left: 1px #CCC solid;
}

#menu li
{
list-style-type: none;
color: #F00;
background-image: url(/css/image/buttonup.gif);
background-repeat: repeat-x;
border-right: 1px #CCC solid;
border-left: 1px #CCC solid;
}

#menu ul li
{
position: relative;
list-style-type: none;
color: #FFF;
background-image: url(/css/image/buttonup.gif);
background-repeat: repeat-x;
}

#menu li ul
{
position: absolute;
top: 0;
left: 134px;
display: none;
color: #FF0;
background-image: url(/css/image/buttonup.gif);
background-repeat: repeat-x;
}

/* Fix IE. Hide from IE Mac \*/
* html #menu ul li
{
height: 1%;
width: auto;
}

* html #menu ul li a { height: 1%; }

/* End */
div#menu ul, #menu ul ul, div#menu ul ul ul
{
margin: 0;
padding: 0;
list-style-image: none;
width: 134px;
}

div#menu ul ul, div#menu ul ul ul, div#menu ul li:hover ul ul, div#menu ul li:hover ul ul ul { display: none; }

div#menu ul li:hover > ul
{
display: block;
position: absolute;
top: 0px;
left: 136px;
background-image: url(/css/image/buttondown.gif);
background-repeat: repeat-x;
}

div#menu ul ul li:hover ul
{
display: block;
color: #FFF;
background-image: url(/css/image/buttondown.gif);
background-repeat: repeat-x;
}

div#menu ul ul ul li:hover ul
{
display: block;
color: #C00;
background-image: url(/css/image/buttondown.gif);
background-repeat: repeat-x;
}

/* Styling for Expand */
#menu a.x, #menu a.x:visited
{
font-weight: bold;
text-indent: 5px;
color: #003;
background-image: url(/css/image/buttonup.gif);
background-repeat: repeat-x;
}

#menu a.x:hover
{
color: #003;
background-image: url(/css/image/buttondown.gif);
background-repeat: repeat-x;
}

#menu a.x:active
{
color: #003;
background-image: url(/css/image/buttonup.gif);
background-repeat: repeat-x;
}

Thanks!

[webskipper]

HI I am using the IE Tester as mentioned above to create a new template.

Is anyone supporting IE6 on their sites anymore?

I can only go so far with the template and IE6 blows it up.

[Snookerman]

Usually, designers support the two latest versions of a browser so IE6 doesn't qualify. However, IE users suck at updating so depending on your audience, it might be good to support IE6, at least for a few more months.

[webskipper]

Sounds good.

Your statement about IE users is correct.

What makes it worse is AOL and Compuserve users think that <that is their browser. Most of my users on one site are seasoned citizens. This is the repeated problem.

I am using the DD Liquid 2 column layout and just trying to use the IE6 emulator above.

Can you help me use a background image (repeat-x), a logo image over that, and than a clear image over that in a header?

Trying to stop thieves. It is not the fact that the logo is being snagged it is how they are butchering it and renaming the copyrighted image or changing colors in some instances. The background header image completes the logo image.

#topsection
{
height: 71px;
/*Height of top section*/
background-color: #003;
background-image: url(/css/image/header_back.gif);
background-repeat: repeat-x left top;
}

.topsection span
{
display: block;
position: relative;
height: 71px;
background-image: url(/css/image/logo.gif);
background-repeat: no-repeat;
}

</head>
<body>
<div id="maincontainer">

<div id="topsection"><span></span></div>