display: block problem in IE6 vertical menu

Forum Moderators: not2easy

Message Too Old, No Replies

display: block problem in IE6 vertical menu

terrybarnes

5:20 pm on Jan 3, 2009 (gmt 0)

I've got a blog and the css in the navigation is set up as:

#sidebar ul li a {
border-bottom: 1px solid #ccc;
color: #F37134;
display: block;
text-decoration: none !important;
margin: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 25px;
background-image: url(images/navbulle.png);
background-repeat: no-repeat;
background-position: 10px 50%;
}

The problem with this is when I view it in IE6 there's a huge horizontal gap at the top of the all the menu items - in all other browsers it's absolutely fine.

I've tried removing the display: block element and everything is lined up correctly so I know that that's the problem. What I don't know is how to resolve the issue.

Any help would be very much appreciated.

4css

9:10 pm on Jan 3, 2009 (gmt 0)

Have you tried display: inline-block;

terrybarnes

10:45 pm on Jan 3, 2009 (gmt 0)

That sort of works but the bottom border only stretches as far as the text that's contained and not the entire length of the column? It's also doing some weird spacing things in Camino but I'll worry about that later.

4css

6:44 pm on Jan 4, 2009 (gmt 0)

Have you given your list a size? Say something like 100px wide? And don't forget that you have padding added, this is going to add to your size of the list as well. Though I am sure you understand the padding, so maybe what you need to do is add a bit of width to cover how wide you want the navigational sections to be.

terrybarnes

7:19 pm on Jan 4, 2009 (gmt 0)

Thanks for your help with this... I've gone ahead and added this to the stylesheet:

* html #sidebar ul li a {
width: 213px;
display: inline-block;
}

So it looks the same across all browsers now.

4css

8:25 pm on Jan 4, 2009 (gmt 0)

No problem on the help, glad that I could assist you.

Happy that you have put in what you have done for others to see and that it works cross browser for you.

Have a terrific day!

swa66

9:13 pm on Jan 4, 2009 (gmt 0)

Using parser based hacks in CSS is a risky business at best. What happens if a future browser on e.g. a device you can;t have (do you have all pda's phones with a browser in use around the world, game consoles, fridges, ...?)
Even IE8 when released will remain a guess what version it'll do with these things till it is released (and every time it gets patched).

It's far safer to use conditional comments IMHO. That way the code to make a specific IE version work is hidden in a comment and far better documented to any future maintenance.

terrybarnes

9:21 pm on Jan 4, 2009 (gmt 0)

Thanks for this - I'm not accustomed to conditional comments - can you please give me an example.

swa66

9:35 pm on Jan 4, 2009 (gmt 0)

Conditional comments are only parsed by MSIE. Other browsers see it as a comment.
You can have code this way in your html that applies only to IE, or a specific version of IE. Since IE8 is promised to be standards compliant I'd advise not to target it yet.

See e.g.:
[webmasterworld.com...]

I use it e.g. as follows:


<!DOCTYPE ...
<html ...
  <head>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="/style/style.css" />
<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="/style/ie6.css" />
<![endif]-->
<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="/style/ie7.css" />
<![endif]-->
...

The style.css is applied to all browsers (and developed only looking at FF, safari and opera). The ie6.css and ie7.css files are added to it on top of the standards file (sometimes they can be large). They include the workarounds to the stuff the specific version of IE does wrong, without any worry from my end on what it might do to other browsers (saving time and probably more importantly: frustration).

terrybarnes

9:37 pm on Jan 4, 2009 (gmt 0)

Fantastic - thanks for this, I shall implement this method.

4css

10:14 pm on Jan 4, 2009 (gmt 0)

Sorry swa66 I should have reminded terry about the conditional statements. I should have questioned as to the usage of them.

They are really easy to use. I just would not have thought about inline block as something being a hack for this though.

swa66

11:50 pm on Jan 4, 2009 (gmt 0)

4css, no need to say sorry. We're many with many different things we spot, with different ideas and opinions. It's actually the many ideas and eyes what makes a forum like this work.

The hack in there was the "* html" construct.