PDA

View Full Version : Please help with strange HTML/CSS Bug on IE



cement hands
Apr 13th, 2007, 01:47 PM
Strange HTML/CSS Bullet problem on IE for www.Rocketfireworks.ca

Hopefully someone can give me a hand. I have a page at www.rocketfireworks.ca and everything is great in Firefox but is a little buggy in IE. The IE bug seems to be slightly different depending on the viewer's pc, but the basic problem is this:

I have a sidebar with image-bulleted links. Each link displays a text-box (blurb) on hover. On Firefox, excellent: looks exactly as desired. On IE, sometimes the image-bullets are over to the left (cut off a bit) and sometimes there are some to the left and some still positioned properly, which makes the bulleted-sidebar look really sloppy. As I said, this is only on IE. If you don't see it at first glance, try refreshing the page.

The html for the sidebar:
<!-- sidebar begins -->
<div id="sidebar">
<ul class="options">
<li><a href="/intro.html">Flash Intro <span>Welcome to ROCKET FIREWORKS Canada!</span></a></li>
<li><a href="/fountains.html">FOUNTAINS <span>FROM THE GROUND UP: A great way to start your firework display!</span></a></li>
<li><a href="/wheels.html">WHEELS <span>SPINNERS: Attach to post or fence; create a cascading ring of fire!</span></a></li>
<li><a href="/romancandles.html">ROMAN CANDLES <span>SHOOTING STARS: Traditional Candles to deluxe items with multiple colours and effects!</span></a></li>

-- etc., etc. for all links ---

</ul>
</div>
<!-- sidebar ends -->

The css for the sidebar:
#sidebar {
width: 190px;
float:left;
display:block;
background-image:url(/lib/yhst-51880503744781/bg-sidebar.jpg);
background-repeat:no-repeat;
color:#FFFFFF;
}

#sidebar ul.options {
color:#FFCC00;
font-size:11px;
font-weight:bold;
margin: 0px;
padding:0px;
list-style-position:inside;
list-style-image:url(/lib/yhst-51880503744781/bullet-sidebar.jpg);
height:688px;
background-color:#6633CC;
background-image:url(/lib/yhst-51880503744781/bg-sidebar.jpg);
padding-top:20px;
}

#sidebar li {
padding-top:2px;
}

#sidebar a {
color: #FFCC00;
}

#sidebar a:hover {
color: #FFFFFF;
text-decoration:none;
}

a span {
display: none;
}

div #sidebar a:hover span {
display: block; width: 125px;
position: absolute;
top: -9px; left: 75px;
/* formatting only styles */
color: #000;
padding: 5px;
margin: 10px;
z-index: 100;
background: #f0f0f0;
border: 2px solid #000;
opacity: 1;
/* end formatting */
}

#sidebar a:visited {
color:#FF9900;
}

ANyway, I know this is a lot, but any help on this would be GREATLY appreciated! Thank-you!!

Excavator
Apr 13th, 2007, 05:01 PM
Good morning cement hands,
It's kind of hard to tell how it would act without downloading your site, re-writing and then testing it locally. I'll be glad to do that later but figured I'd give you a shot first.
I think that your conflicting CSS is causing a problem. Not postitive though.

You style the body tag to be 780px wide and centered but put a 1600px wide background image on it. It would be better to take a slice of the stars and repeat it for a background on body, then take your actual page background and repeat that inside a 780px wide container div.

Floats need cleared in #main
Add overflow: hidden; to do that and read about it here. (http://www.quirksmode.org/css/clearing.html)

Your ul has the same background as #sidebar. That's kind of goofy. Change the CSS to look like this:

* {
margin: 0; /*I added this to zero out margin/padding on the whole document*/
padding: 0;
border: none;
}
#sidebar ul.options {
color:#FFffff;
font-size:11px;
font-weight:bold;
list-style-position:inside;
list-style-image:url(/lib/yhst-51880503744781/bullet-sidebar.jpg);
height:688px;
margin: 0 0 0 10px; /*margin your ul over to make room for the bullets*/
/*deleted background-color and image*/
padding-top:20px;
}


#buttons is not styled, give it a width and clear the floats:
#buttons {
width: 590px;
overflow: hidden;
}

Hope that helps. You should check the validator too, see the link in my sig below.

cement hands
Apr 14th, 2007, 12:23 AM
Excavator:

Your suggestions weren't the final solution but really got me on the right track to figure out the problem here. It was a css bug that I was able to fix with some tweaking of div sizes and margins.

Thanks very much for your kind and generous help!