PDA

View Full Version : IE display issues


dsnyder
04-20-2007, 04:45 PM
I canít seem to figure out what to do about the drop float(?) issue and a non working drop down nav menu. All seems fine in FF. In both IE 6 & 7 Iím having issues w/ my content div showing up. I read up on the Ďdouble-margin bugí and have added the following IE6 hack to places in which my float and margin are in the same direction. But Iím still having issues.
*html #leftcol{display:inline;}
I think Iíve looked at all the places where I use a float and added the hack but maybe there are inheritance things Iím missing? I don't think that I've mis-added widths.

wrapper = 740px
#leftcol = 170px + 10px left margin + .containerBottom 520px width

#content has a left margin of 200px & the containerBottom w/ 520px is floated within. Problems there?

test pg here http://cellocelli.com/test1.htm
Donít know what to do. Iím sure that this is a rather common issue but havenít had luck searching. Any search advice?

css


h1 { font: normal 1.2em Verdana;
color:#333333;
margin: 50px 10px 10px 0px;
line-height:140%}
/* h1 top margin at 60px to drop content lower (ds) */

h2 {float: left;
margin: 4px 5px 2px 0px;
padding: 2px;
width: 95%;
text-align: left;
text-decoration: none;
font: bold 1.2em Verdana;
color: #758279;
}

/* h3 removes margin so table look is correct (ds) */
h3 {font: normal 1.2em Verdana;
color: #333;
margin: 0px;
}

h4 { font: normal 1.2em Verdana;
line-height:150%;
color: #fff;
margin:0px 15px 10px 10px;
}

/* h5 adjust padding to effect top bkgd image in sidebar (ds) */
h5 { font: normal 1.1em Verdana;
line-height:150%;
border-left: 1px solid #999;
padding: 15px 0px 10px 0px;
margin: 0px;
color:#990000;}

#wrapper {
margin: 0px auto;
width: 740px;
border: 1px solid #758279;
background-color: #fff;
text-align:left;
}

#leftcol{
margin-left: 10px;
margin-top:20px;
margin-bottom:30px;
width: 170px;
float: left;
border-right: 1px solid #fff;
padding-right:10px;
background-color: #fff;
}

/* hack IE6 double margin (ds) */
*html #leftcol{
display:inline;
}

.leftimage {
padding-left: 15px;
margin-bottom: 0px;
float:left;
background-color:#fff;
}

.sideBox {
width: 165px;
margin:5px; /* controls elements distance from left edge */
float:left;
background: #e7e4bb url(../Images/BkGrd/bg_side_bottom.gif) center bottom no-repeat;
padding-bottom: 20px;
}

/* hack IE6 double margin (ds) */
*html .sideBox {
display:inline;
}

.sideBox p {
font-size: 1.2em; line-height: 140%; text-transform:capitalize; text-align: left;
margin: 0px 0px 0px 0px;
padding: 5px 5px 0px 5px;
border-left: 1px solid #758279; border-right: 1px solid #758279;
background-color:#e7e4bb;
}

.sideBox h1 {
font-size: 1.3em;
margin: 0px;
padding: 10px 5px 5px 5px;
background-image:url(../Images/BkGrd/bg_side_top.gif);
background-repeat: no-repeat; background-position: top;
}

#content{
margin-left: 200px;
background-color:#FF0000;
}

#content p{
margin:20px 0px 20px 0px;
}

.containerTop {
width: 99%;
float: right;
background-color: #fff;
}

.containerBottom {
width: 520px;
float: left;
background-color: #758279;
background-image:url(../Images/BkGrd/bg_bottom.gif);
background-repeat: no-repeat; background-position: bottom;
margin-bottom: 20px;
}

/* hack IE6 double margin (ds) */
*html .containerBottom{
display:inline;
}
.containerBottom p {
font: normal 1.2em Verdana;
line-height:150%;
color: #fff;
margin:0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #333; border-right: 1px solid #333;
}

.containerBottom h2 {
color:#fff;
font-size: 1.3em;
padding: 15px 14px 15px 12px;
margin: 0px;
text-align: left;
background-image:url(../Images/BkGrd/bg_top.gif);
background-repeat: no-repeat; background-position: right top;
}

.containerImage {
margin-right: 13px;
margin-bottom: 4px;
float:left;
background-color:#CCCCCC;
outline:1px solid #000;
}

.containerAddition {
width: 500px;
float: left;
margin-bottom: 20px;
margin-top:0px;
}

.containerAddition h1 {
font-size: 12px;
font-weight: bold;
font-style:italic;
color:#cc6600;
padding:0px;
margin:0px 0px 5px 0px;
}

.containerAddition table{
border:none;
font: normal 1.2em Verdana;
border-collapse:collapse;
margin:0px;
}
.containerAddition th{
border-right:none; border-left:none; border-top:none;
border-bottom:1px solid #999;
margin-right: 0px;
padding: 2px 15px 2px 5px;
}
.containerAddition td{
border:none;
margin-right: 0px;
padding: 2px 15px 2px 5px;
}

.containerAddition tr{
border:none;
background: none;
}
#footer{
clear: both;
height: 70px;
border-top: 1px solid #949e7c;
background-image:url(../Images/BkGrd/FgrBoardFtr.gif);
background-repeat:no-repeat;
background-color: #758279;
color: #FFFFFF;
}



the nav drop down in IE6 is another css sheet and another issue...but any thoughts appreciated!
thanks

dsnyder
04-20-2007, 10:19 PM
this drop down is based on the ULTIMATE drop down at cssplay http://www.cssplay.co.uk/menus/final_drop2.html which doesn't seem to work in IE6 for me either. In fact none of the menus I tried from the site dropped in IE6. I don't understand. Stu adds stuff to the html to deal with IE6 but it seems not to be working. Any thoughts?