IE 7 positioning bugs

[thelumpster]

Hi all
I am having the usual problem with IE7 and below. my site looks fine in everything else but when view in anything under IE8 the css positioning of the logo and menu move up. This is probably due to the absolute positioning of the #branding being -21px. But if i try and change anything the whole site goes mental in all browsers.
here is the css file :
@charset “UTF-8”;
/* CSS Document */
body{
padding:0;
margin:0;
background:url(../images/background_blue_white.gif);
background-repeat:repeat-x;
background-attachment:fixed;
}
div#container {
background:url(../images/main_background.png) repeat-y; background-position:14px 200px;
position:relative;
width : 1000px;
margin: 0 auto;
padding-top: 0;
text-align:left;
}
div#branding { z-index : 1; position : relative; width : 100%; height : 165px; }
div#branding h1 { z-index : 3; position : absolute; left : 10px; top : -21px; width: 980px; height : 205px; background : url(../images/header_main.png) no-repeat;text-indent:-9999px; }

/* MAIN NAV Styles*/
#mainNav {
background-color:#BA0000;
width:752;
z-index:1;
display:block;
position:absolute;
left: 200px;
top:142px;
}
div#mainNav ul, div#mainNav li {
font-family: Georgia, “Times New Roman”, Times, serif; font-weight:bold;
display: inline;
margin:0;
padding:0;
list-style:none;
}
div#mainNav a{
display:block;
padding:0 5px 0 5px;
border-right:2px solid #f04e38
}
div#mainNav a:link{
padding-top:5px;
padding-bottom:5px;
color:#FFC;
float:left;
text-decoration:none;
}
div#mainNav a:visited{
padding-top:5px;
padding-bottom:5px;
color:#FFF;
float:left;
text-decoration:none;
}
div#mainNav a:hover{
background-color:#ffffac;
color:#BA0000;
padding-top:5px;
padding-bottom:5px;

}
div#mainNav li i {
display:none;
}
div#left {
//background:#cd0000;
background:url(../images/left_menu_back.png) no-repeat 0 100%;
position:relative; top:40px;
float:left;
width:121px;
margin:0px 0px 50px 51px;
padding:5px 25px 12px 5px;

}
div #mainContent {
float:left;
width:730px;
padding-top:40px;

}

//side menu styles
#menu_sub_01 {
}
div#menu_sub_01 ul {padding:0px 0px 0px 0px; margin:0 0 20px 0;list-style:none; font-family: Georgia, “Times New Roman”, Times, serif; font-weight:bold;}
div#menu_sub_01 li a:link{display:block;text-decoration:none; color:#ffffff;background-color:#BA0000; font-size:12px;text-align:right; padding: 5px;margin:0px 0 5px 0;}
div#menu_sub_01 a:visited{display:block;text-decoration:none; color:#ffffff;background-color:#BA0000; font-size:12px;text-align:right; padding: 5px;margin:0px 0 0px 0;}
div#menu_sub_01 a:hover{display:block;text-decoration:none; color:#632023;background-color:#ffffac; font-size:12px;text-align:right; padding: 5px;margin:0px 0 0px 0;}
div#menu_sub_01 a:active{display:block;text-decoration:none; color:#854146;background-color:#Fcfdde; font-size:12px;text-align:right; padding: 5px;margin:0px 0 0px 0;}
/* get rid of the annoying LOF showcase item Number*/
div#menu_sub_01 li i {
display:none;
}
/* ~~ The footer ~~ */
div #footer {color:#ffffac;
font-size:10px;
text-align:center;
padding: 5px;margin:0px 0 2px 0;
height:35px;
background:url(../images/footer_back.png) 0 100%;
margin 0px;
padding: 2px;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
/* ~~ K 2 styles ~~
.latestItemView {float:left;
width: 320px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;}*/
/*catergory view styles*/
.itemListCategory { margin:5px !important; background-color:#fff !important; border:hidden !important; }
.itemListCategory h2{ margin:5px !important; }
itemListCategoriesBlock{}
.catItemIntroText {margin-top:-35px;}
/*main overall styles*/
div#k2Container{font-family: Verdana, Geneva, sans-serif; font-size:12px; line-height:1.5em;padding:10px;}
div#k2Container h2, h2 a{ font-family: Impact, Charcoal,”Arial Black”, Arial, sans-serif; font-size:50px; text-align:left; color: #B00; text-decoration:none; font-weight:bold; }
div#k2Container h3, h3 a{ font-family: Impact, Charcoal,”Arial Black”, Arial, sans-serif; font-size:24px; text-align:center; color: #B00; text-decoration:none; font-weight:bold}
.itemImageBlock {float: left;}
.itemFullText{float: left; width: 300px; padding-left:20px;}
.itemExtraFields{float: left; width: 250px; border:#BB0000, thick; }
.k2SearchBlockForm {z-index : 4; position : absolute; left : 605px; top : -133px;}
.itemSocialSharing{float:left; width:500px;}
.catItemReadMore a {text-decoration:none; color:#B00; font-weight:bold; }
.itemImageGallery h3{text-align:left !important;}
/* add drop shadow to items list*/
.latestItemView a {font-family: Impact, Charcoal,”Arial Black”, Arial, sans-serif; font-size:24px; text-align:center; color: #B00; text-decoration:none; font-weight:bold}
.latestItemView {float:left !important;}
.latestItemView, .catItemView {padding:4px; margin:4px; border:10px solid #C00;
-moz-box-shadow: 0px 5px 5px #999;
-webkit-box-shadow: 0px 5px 5px #999;
box-shadow: 0px 5px 5px #999;}
/*left banner styles*/
div#menu_sub_01 .random-image, .random-image a:link{ padding:0px 0px 1px 0px !important; margin:-5px 0px 7px 0px !important; background-color:transparent !important; }
/* main content banner styles*/
div #mainContent .bannergroup { padding:10px 15px 10px 15px ;}
the site itself, still in testing phase is at http://www.traffikcone.com/joomla_harrylevy/hl/index.php/pushers
Any help would be greatly appreciated
Thanks

[Senff]

I’d advise against setting those items in the header with absolute and relative positioning, it’s a little funky what you do there by giving “branding” some relative positioning and then the menu some absolute positioning.

[thelumpster]

Thanks Senff
I switched all the positioning to relative and, after putting out some new layout fires this caused the site seems to looks the same in any browser.

!!SOLVED!!

[Author]

Posts