Forums

buckycat7

Least surprising subject line of the day I'm sure...

I have a bug in IE6 and below that I can't seem to find an answer, I'm hoping this is really easy and it's just because of my lack of sleep over the past 5 days in trying to finish up a site is the reason I can't figure it quickly. I'm attaching a screen shot of the problem in IE6 because I really doubt there is a lot of people on this forum with it still installed.

As you should be able to see my problem is the menu bar rounded "cappers" where there is a white line between the menu and were the image for the rounded corners start.

Here is the CSS I used:


.left_end{margin: 0px; padding: 0px; height: 25px; width: 12px; background: url('images/left.jpg') no-repeat; float: left;}
.right_end{margin: 0px; padding: 0px; height: 25px; width: 12px; background: url('images/right.jpg') no-repeat; float: right;}
 ul#dropnav {margin: 0; list-style: none; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color: #fff; background: url(images/menubg.jpg) repeat-x; height: 25px; padding-top:1px;}

Then here is the HTML:


<div class=\"left_end\"></div>
<div class=\"right_end\"></div>
<ul id=\"dropnav\" class=\"clearfix\">
	<li><a href=\"/demo\">Online Demo</a></li>
   <?php wp_list_pages('exclude=3,2,7,4,8,9&title_li=')?>
</ul>

Not the best way to do it, but I needed to do something quickly. Any ideas?

koewnet

What about setting left/right-padding on ul#dropnav to zero (0)? Like this:

ul#dropnav {margin: 0; list-style: none; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color: #fff; background: url(images/menubg.jpg) repeat-x; height: 25px; padding: 1px 0 0;}

Then ul#dropnav will have top-padding of 1px and the rest will be 0 px.

Also remember that the <li>-items will have default paddings/margins if you do not set them yourself.

buckycat7

All of the margins and paddings are reset in my code. Sorry that I didn't note that, but I tried that left and right padding to 0 already and still end up with the same bars.

daGUY

What if you make everything float left and then order it like this?

<div class=\"left_end\"></div>
<ul id=\"dropnav\"></ul>
<div class=\"right_end\"></div>

Just wondering if that would make a difference. It seems weird to me to have the code in the order of left_end, right_end, ul, when visually the ul is in the middle.

buckycat7

That didn't work either.

box

"buckycat7" said:
...I'm attaching a screen shot of the problem in IE6 because I really doubt there is a lot of people on this forum with it still installed.

A lot of people on this forum are web developers, so its our duty to have IE6 installed ;)
If you could post a link to a page displaying the problem then that might make it easier to diagnose.

buckycat7

I can't post a link to it because it's only setup on my company's local development server. So thats way I tried to post everything that was needed and all of the details with the code and the zoomed in screen shot.

treehouse : what would you like to learn today?

Forums

IE6 Issues