ie 6/7 css fix on position please [Archive]

plushenator

06-14-2010, 06:26 AM

i have a horizontal menu that won't stay to the left in internet explorer 5.5/6/7. i finally got the div that contains the background button image to stay where it is supposed to, but the text is shoved over to the right (it should overlay the buttons). i am afraid that the positioning issue may be part of the dropdown menu coding, which took me a long time to get to work/be positioned properly (the menus were adapted from css3menu). i am still learning css but did try everything i could think of, including adding/subtracting relative/absolute positioning selectors, removing all margins and padding on anything with a width declaration, and floating everything.

http://www.plushdesign.net/skylights/template_final2.html
only necessary floats

http://www.plushdesign.net/skylights/template_final4.html
float everything i thought would affect the nav

thank you. code below if you want a quick look:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="skylights2.css" rel="stylesheet" type="text/css">
<style type="text/css">

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

</style>
</head>

<body class="thrColLiqHdr">

<div id="container">
<div id="header">
<div id="nav" class="centerme">

<div id="navLeft">



<ul id="css3menu">
<li class="mainbuttonrollover"><a href="about.html" title="ABOUT US"><span>ABOUT US</span></a></li>

<li class="mainbuttonrollover"><a href="residential.html" title="RESIDENTIAL"><span>RESIDENTIAL</span></a>
<ul>
<li><a href="res_acrylic.html" title="Acrylic"><span>Acrylic</span></a>
<ul>
<li class="level2"><a href="#">Cut Sheet</a></li>
<li class="level2"><a href="#">Fixed</a></li>
<li class="level2"><a href="#">Openable</a></li>
<li class="level2"><a href="#">Hatch</a></li>
<li class="level2"><a href="#">Pyramid</a></li>
</ul>
</li>
<li><a href="res_glass.html" title="Glass"><span>Glass</span></a>
<ul>
<li class="level2"><a href="#">Cut Sheet</a></li>
<li class="level2"><a href="#">Fixed</a></li>
<li class="level2"><a href="#">Openable</a></li>
<li class="level2"><a href="#">Ridge</a></li>
</ul>
</li>
<li><a href="res_velux.html" title="Velux"><span>Acrylic</span></a>
<ul>
<li class="level2"><a href="shopvelux.html">Shop Online</a></li>
<li class="level2"><a href="warrantyvelux.html">Warranty</a></li>
<li class="level2"><a href="installvelux.html">Installation</a></li>
</ul>
</li>
<li><a href="res_suntunnel.html" title="Sun Tunnel"><span>Sun Tunnel</span></a>
<ul>
<li class="level2"><a href="shopvelux.html">Shop Online</a></li>
<li class="level2"><a href="warrantyvelux.html">Warranty</a></li>
<li class="level2"><a href="installvelux.html">Installation</a></li>
</ul>
</li>
</ul>



<li class="mainbuttonrollover"><a href="commercial.html" title="COMMERCIAL"><span>COMMERCIAL</span></a>
<ul>
<li><a href="res_acrylic.html" title="Acrylic"><span>Acrylic</span></a>
<ul>

<li class="level2"><a href="#">Cut Sheet</a></li>
<li class="level2"><a href="#">Fixed</a></li>
<li class="level2"><a href="#">Openable</a></li>
<li class="level2"><a href="#">Hatch</a></li>
<li class="level2"><a href="#">Pyramid</a></li>
</ul>

</li>

<li><a href="res_glass.html" title="Glass"><span>Glass</span></a>
<ul>
<li class="level2"><a href="#">Cut Sheet</a></li>
<li class="level2"><a href="#">Fixed</a></li>
<li class="level2"><a href="#">Openable</a></li>
<li class="level2"><a href="#">Ridge</a></li>

</ul>
</li>

</ul>
</li>



</ul>
</div>


<div id="navRight">

<ul id="css3menu2">
<li class="mainbuttonrollover"><a href="gallery.html" title="GALLERY"><span>GALLERY</span></a></li>
<li class="mainbuttonrollover"><a href="faqs.html" title="FAQs"><span>FAQs</span></a></li>
<li class="mainbuttonrollover"><a href="contact.html" title="contact"><span>CONTACT</span></a></li></ul>

</div>
</div>
</div>

<div id="sidebar1">
<p><img src="images/velux_logo.gif" width="124" height="48" alt="velux"></p>
<p><img src="images/traditional.gif" width="110" height="57" alt="traditional skylights"></p>
<p><img src="images/tubular.gif" width="99" height="59" alt="tubular skylights"></p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>

</div>
<div id="sidebar2">
<p class="imgmiddle"><img src="images/BBB_ValueStar.gif" width="72" height="137" alt="valuestar">. </p>
<p class="clearfloat"> </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
</div>

<div id="mainContent">
<h1 class="h1"> Let the Sun In!</h1>
<p>Since 1972, SKYLIGHT & SUN, INC. has been dedicated to providing intelligent and inexpensive solutions to customers who wanted to add
or improve natural light in their living and working environments. A naturally-lit space is more cheerful, more healthy, and more beautiful.</p>
<p><span class="caption">residential</span><span class="captionR">commercial</span>
<br>
<img src="images/GGBridge.jpg" width="166" height="107"> <img src="images/AmericanBagLG.jpg" width="257" height="189" class="imgmiddle"> <img src="images/schroeder1.jpg" width="176" height="117" class="imgmiddle"><br>
<img src="images/GGBridge.jpg" width="166" height="107" style="position: relative; top: -82px; margin: 0 0; padding: 0 0;">
<img src="images/AmericanBagLG.jpg" width="257" height="189" class="imgmiddle">
<img src="images/schroeder1.jpg" width="176" height="117" style="position: relative; top: -72px; margin: 0 0; padding: 0 0;"></p>
<br><br>

</div>

<div> <p class="clearfloat"><br></p> </div>
<div id="footer">
<p class="bottomnav">ABOUT US • RESIDENTIAL • COMMERCIAL • GALLERY • FAQs • CONTACT<br>
©2010 SUN & SKYLIGHT, INC.</p>
</div>
</div>

</body>
</html>

plushenator

06-14-2010, 08:07 AM

while wandering around on the forum, i found a link to this:

http://bonrouge.com/~positioning

wherein advice was stated: beware of absolute positioning

so i checked it on the http://www.plushdesign.net/skylights/template_final2.html version (disregard http://www.plushdesign.net/skylights/template_final4.html version now) and none of my tags were using it. i took it off the main ul#css3menu selector (note i duplicated those tags to apply to the floated menu on the right, in case i needed to tweak its position, so took it off both), and its looking ok in ie netrenderer. i will check it on a real pc tomorrow...

part two of my question would then be: the buttons are supposed to have a rollover where the button graphic becomes lighter on hover... any thoughts? css pasted below and TIA:

@charset "UTF-8";
/* CSS Document */

/*a:link {
color: 374e86;
}
a:visited {
color: #567AD0;
}
a:hover {
color: #567AD0;
}
a:active {
color: 374e86;
}
*/
body {
font: 100%/120% "Trebuchet MS", sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/cloudtile3.jpg);
}
.thrColLiqHdr #container {
width: 1007px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: center; /* this overrides the text-align: center on the body element. */
overflow: auto;
background-color: #FFFFFF;
background-image: url(images/fauxcolumns.gif);
background-repeat: repeat-y;
}
.caption {
font-size: 80%;
text-transform: uppercase;
color: #93B4DF;
display: inline;
position: absolute;
}
.thrColLiqHdr #header {
height: 142px;
width: 1007px;
background-image: url(images/skyheader3.jpg);
margin: 0px;
background-repeat: no-repeat;
padding: 0px;
}
.thrColLiqHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
.thrColLiqHdr #sidebar1 {
float: left; /* this element must precede in the source order any element you would like it be positioned next to */
width: 163px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0; /* top and bottom padding create visual space within this div */
margin: 0;
text-align: left;
background-repeat: repeat-y;
height: 100%;
}
.thrColLiqHdr #sidebar2 {
float: right; /* this element must precede in the source order any element you would like it be positioned next to */
width: 163px; /* the background color will be displayed for the length of the content in the column, but no further */
height: 100%;
padding: 0; /* top and bottom padding create visual space within this div */
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: left;
background-repeat: repeat-y;
}
.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
margin-left: 20px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 15px;
font-size: 70%;
color: #64829D;
}

/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
.thrColLiqHdr #mainContent {
margin: 0 auto; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
width: 640px;
text-align: left;
background-color: #ffffff;
}
.imgmiddle {
display: inline;
text-align: center;
margin-right: auto;
margin-left: auto;
}
.h1 {
font-size: 140%;
line-height: 130%;
font-weight: bold;
color: #1A7091;
}

.thrColLiqHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#3d9ad6;
}
.thrColLiqHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
font-size: 70%;
text-align: center;
color: #FFF;
letter-spacing: .12em;
}
.bottomnav {
font-size: 10px;
line-height: 16px;
}
.clear { clear: both; }

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

/* ****************************************************/

#nav {
text-transform: uppercase;
height: 20px;
width: 966px;
top: 35px;
margin: 0px;
position: relative;
left: 20px;
float: left;
padding: 0px;
border: 0px;
}
#navLeft {
float: left;
height: 20px;
width: 330px;
margin: 0px;
padding: 0px;
background-image: url(images/skybutton2.png);
background-repeat: repeat-x;
border: 0px;
}
#navRight {
float: right;
height: 20px;
width: 330px;
padding: 0px;
margin: 0px;
background-image: url(images/skybutton2.png);
background-repeat: repeat-x;
border: 0px;
}

/* ************************************************************************/

ul#css3menu{
display:block;
font-size:0;
z-index:1000;
height: 20px;
margin: 0px;
padding: 0px;
}
ul#css3menu a{ /* button titles */
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font: bold 10px "Trebuchet MS", sans-serif;
cursor:pointer;
color: #385088; /* d36bc6<pink blue> # */
}
ul#css3menu>li,ul#css3menu li{
margin:0;
}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;
}
ul#css3menu li{
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu li:hover>*{
display:block;
}
ul#css3menu li:hover{
position:relative;
}
*ul#css3menu li:hover>a{
font:10px "Trebuchet MS", sans-serif;
text-decoration:none;
background-position:left top;
background-repeat: no-repeat;
background-image: url(images/skybutton2f2.png);
color: #878AA1; /* 8ce0d1<turq grayish> * main button rollover color */
}
ul#css3menu,ul#css3menu ul{
margin:0;
list-style:none;
padding:0;
}
ul#css3menu ul {
display:none;
position:absolute;
left: 2px; /*horizontal pos of first level dd*/
top:80%; /*gap between main button and first dropdown*/
background-color:#ffffff; /*ffffff */ /*bg color of first level dropdown*/
-moz-box-shadow:3.5px 4px 5px #cccccc;
-webkit-box-shadow:3.5px 4px 5px #cccccc;
box-shadow:3.5px 4px 5px #cccccc;
padding:0;
/*width: 40px;*/
color: #385088; /*dark blue text color*/
height: 20px;
}
ul#css3menu ul li{
float:none;
margin:0;
}
ul#css3menu ul li:hover>a{
background-color:#e3e1c2; /*beige rollover color*/
background-image:none;
font:10px "Trebuchet MS", sans-serif;
color:#adac94; /*darker beige rollover text color, second and third level*/
text-decoration:none;
height: 20px;
}
ul#css3menu ul a{
text-align:left;
font:10px "Trebuchet MS", sans-serif;
text-decoration:none;
}
ul#css3menu ul ul{
position:absolute;
left:95%; /*third level left indent*/
top:4px;
}

/* ************************************************************************/

ul#css3menu img{
border:none;
vertical-align:middle;
margin-right:20px;
width:16px;
height:16px;
}
ul#css3menu ul img{
width:16px;height:16px;
}
ul#css3menu img.over{
display:none;
}
ul#css3menu li:hover > a img.def{
display:none;
}
ul#css3menu li:hover > a img.over{
display:inline;
}

/* ************************************************************************/

ul#css3menu span{
display:block;
overflow:visible;
width: 100px; /*width of main button space*/
padding-right: 0px;
padding-top: 4px;
height: 20px;
padding-left: 10px;
}
/*ul#css3menu span li:hover {
background-position:left top;
background-repeat: no-repeat;
background-image: url(images/skybutton2f2.png);
}*/

ul#css3menu ul span{
background-image:url(arrowsub.png);
padding-right:28px;
background-color: #FFF;
height: 20px;
/*width: 110px;*/
}
ul#css3menu li.topfirst>a {
border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
}

ul#css3menu li.toplast>a {
border-radius:0 5px 5px 0;
-webkit-border-radius:0 5px 5px 0;
}
mainbuttonrollover {
font:bold 10px "Trebuchet MS", sans-serif;
text-decoration:none;
color: #878AA1;
display: inline;
/*width: 110px;*/
float: left;
height: 20px;
position: relative;
}
mainbuttonrollover:hover {
background-position:left top;
background-repeat: no-repeat;
background-image: url(images/skybutton2f2.png);
}

.level2 { /*third level */
padding-top: 6px;
padding-left: 6px;
background-color: #FFFFDB;
height: 20px;
width: 100px;
display: block;
}

/* ************************************************************************/

ul#css3menu2{
display:block;
font-size:0;
z-index:1000;
height: 20px;
}
ul#css3menu2 a{ /* button titles */
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font: 10px "Trebuchet MS", sans-serif;
cursor:pointer;
color: #385088; /* d36bc6<pink blue> # */
}
ul#css3menu2>li,ul#css3menu2 li{
margin:0;
}
ul#css3menu2 a:active, ul#css3menu2 a:focus{
outline-style:none;
}
ul#css3menu2 li{
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu2 li:hover>*{
display:block;
}
ul#css3menu2 li:hover{
position:relative;
}
*ul#css3menu2 li:hover>a{
font:10px "Trebuchet MS", sans-serif;
text-decoration:none;
background-position:left top;
background-repeat: no-repeat;
background-image: url(images/skybutton2f2.png);
color: #878AA1; /* 8ce0d1<turq grayish> * main button rollover color */
}
ul#css3menu2,ul#css3menu2 ul{
margin:0;
list-style:none;
padding:0;
}
ul#css3menu2 ul {
display:none;
position:absolute;
left: 2px; /*horizontal pos of first level dd*/
top:80%; /*gap between main button and first dropdown*/
background-color:#ffffff; /*ffffff */ /*bg color of first level dropdown*/
-moz-box-shadow:3.5px 4px 5px #cccccc;
-webkit-box-shadow:3.5px 4px 5px #cccccc;
box-shadow:3.5px 4px 5px #cccccc;
padding:0;
/*width: 40px;*/
color: #385088; /*dark blue text color*/
height: 20px;
}
ul#css3menu2 ul li{
float:none;
margin:0;
}
ul#css3menu2 ul li:hover>a{
background-color:#e3e1c2; /*beige rollover color*/
background-image:none;
font:10px "Trebuchet MS", sans-serif;
color:#adac94; /*darker beige rollover text color, second and third level*/
text-decoration:none;
height: 20px;
}
ul#css3menu2 ul a{
text-align:left;
font:10px "Trebuchet MS", sans-serif;
text-decoration:none;
}
ul#css3menu2 ul ul{
position:absolute;
left:95%; /*third level left indent*/
top:4px;
}

/* ************************************************************************/

ul#css3menu2 img{
border:none;
vertical-align:middle;
margin-right:20px;
width:16px;
height:16px;
}
ul#css3menu2 ul img{
width:16px;height:16px;
}
ul#css3menu2 img.over{
display:none;
}
ul#css3menu2 li:hover > a img.def{
display:none;
}
ul#css3menu2 li:hover > a img.over{
display:inline;
}

/* ************************************************************************/

ul#css3menu2 span{
display:block;
overflow:visible;
width: 100px; /*width of main button space*/
padding-right: 0px;
padding-top: 4px;
height: 20px;
padding-left: 10px;
}
ul#css3menu2 ul span{
background-image:url(arrowsub.png);
padding-right:28px;
background-color: #FFF;
height: 20px;
/*width: 110px;*/
}
ul#css3menu2 li.topfirst>a {
border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
}

ul#css3menu2 li.toplast>a {
border-radius:0 5px 5px 0;
-webkit-border-radius:0 5px 5px 0;
}
mainbuttonrollover {
font:bold 10px "Trebuchet MS", sans-serif;
text-decoration:none;
color: #878AA1;
display: inline;
height: 20px;
position: relative;
}
.level2 { /*third level */
padding-top: 6px;
padding-left: 6px;
background-color: #FFFFDB;
height: 20px;
width: 100px;
display: block;
}

/* ************************************************************************/

/* Global Defaults */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
body {
font: 1em/1.25 Arial, Helvetica, sans-serif;
}

/* Headlines */
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

/* Tables */
table {
margin: 0;
padding: 0;
border: none;
}

/* Common Classes */
/* .clear { clear: both; }
.floatLeft { float: left; }
.floatRight { float: right; }
.textLeft { text-align: left; }
.textRight { text-align: right; }
.textCenter { text-align: center; }
.textJustify { text-align: justify; }
.blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
/* .bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.noindent { margin-left: 0; padding-left: 0; }
.nomargin { margin: 0; }
.nopadding { padding: 0; }
.nobullet { list-style: none; list-style-image: none; }*/
.imgfloatup {
top: -80px;
position: relative;
}
.captionR {
font-size: 80%;
text-transform: uppercase;
color: #93B4DF;
display: inline;
float: right;
}