PDA

View Full Version : IE6 problem



okoolo
Aug 21st, 2009, 07:40 PM
Hi I've created a website that seems to work well in ie7,firefox, opera but in ie 6 one of the elements (image gallery) is way too much to the right ...
I created an ie6 specific stylesheet but I'm not quite sure what excactly is the problem ...

site is www.bzconstruction.ca and here's the relevant code (I think)..

#wrapper {
position: relative;
padding-top: 68px;
}

#body {
background: url(images/body_bg.gif) repeat-y;
color: white;
width: 100%;
}
#body-top {
background: top left url(images/body_top.gif) no-repeat;
position: relative;
}
#body-bot {
background: bottom left url(images/body_bot.gif) no-repeat;
padding-bottom: 17px;
}
#body-top-2 {
position: absolute;
top: 12px;
left: 251px;
width: 463px;
height: 11px;
background: top left url(images/body_top_2.gif) no-repeat;
}

div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 145px;
width: 415px;
overflow: auto;
}
ul.sc_menu {
display: block;
height: 110px;
/* max width here, for users without javascript */
width: 7000px;
/* top right bottom left padding */
padding: 5px 5px 0px 5px;
/* removing default styling */
margin: 0;
background: 'background.jpg';
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 2px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
display: none;
margin-top: 5px;

text-align: center;
font-size: 12px;
color: #fff;
}
.sc_menu a:hover span {
display: block;
}
.sc_menu img {
border: 1px #666 solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.sc_menu a:hover img {
filter:alpha(opacity=70);
opacity: 0.5;
border:2px
border-color: rgb(130, 130, 130);
border-style: dotted;


}
html:
<body>
<div id="wrapper">
...
...
<div id="body">
<div id="body-top">
<div id="body-top-2"></div>
<div id="body-bot">
...
...
...

<div class="sc_menu">
<ul class="sc_menu">
<li><a href="img/mc6_big.JPG"> <img src="img/mc6.jpg" alt=""/><span </span>;</a></li>

...
...(same elements)
...
</ul>
</div>
...closing div statements...

jhaycutexp
Aug 21st, 2009, 10:39 PM
well sir.. think because your div sv_menu.. relatively positioned.. try to make it just like a float.. or display block..

okoolo
Aug 21st, 2009, 11:36 PM
wel I'm kind of a beginner so could you clarify or perhaps give an example how I could do that?

jhaycutexp
Aug 22nd, 2009, 12:56 AM
here it is..



div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative; <-- change to float left / display:block;
height: 145px;
width: 415px;
overflow: auto;
}

okoolo
Aug 22nd, 2009, 03:39 AM
ok .. played around .. setting display to static worked .. thanks a lot