Problems with nav bar in IE

HTML & CSS
1

As is so often the case, I’ve created a mockup that works pretty nicely in Opera and Firefox, but when I open it in IE … boom goes the dynamite.

Today’s IE teethgrinder is the nav bar. It’s broken entirely in IE6, and doesn’t display correctly in IE7. (Don’t have access to IE8 to check it there.) I kinda shoved the social icons on the right into the HTML just to see if they would go on the nav bar, and in FF/Opera they do, but they break the bar layout in IE. I’m wondering not only how to fix it, but why those icons actually work in non-IE browsers – it doesn’t make sense to me that they would the way I shoved them into the layout. (!) (:

I cribbed the nav bar from this site, and the [url=“http://13styles.com/code/matte/”]demos don’t work in IE6 either, though they do work in IE7.

Anyone have any ideas on 1) making the nav bar display correctly in IE and 2) working the icons into the nav bar layout so that they display in IE?

2

Hi, for one thing, in IE6 you need a min/max width routine worked out for teh <body> element since you have min/max width set there.

ALso, to fix the navigation just float the anchors :).

Also…the rounded corners you are applying to teh navigation…you are doing #menu_wrapper.blue

You are concentating the classes and IE6 is buggy with that. It would be best for you to either use a unique class for the rounded corners and not try to concentate the classes together :slight_smile:

3

Ryan, I have a min/max snippet that I use in these layouts, and forgot to insert it. Duh.

Float the anchors left? The <li> element is already floated left.

It can’t be this simple…instead of

[highlight=“HTML 4.01 Strict”]<div id=“menu_wrapper” class=“blue”>



use this?

[highlight="HTML 4.01 Strict"]<div id="menu_wrapper">
<div class="blue">

Wow, that’s just too easy a fix… I’ll give this a spin and see what happens.

4

It is too simple…separating the ID and the class into two separate DIVs causes the nav bar to disappear entirely. And floating the anchors has no effect at all. :slight_smile:

5

Well you must have done something wrong because I had this working lcoally.

FLoating the anchor worked and I didn’t s uggest rearranging the HTML. I suggested just use a unique class or something instead of using the concentated classes :slight_smile:

In any case, can you upddate the link so I can see wehre you went wrong?

6

Off Topic: What font is that headline name Max?

7
Off Topic:

“Hammer Thin” I believe

8

:cookie: You’re just that good, Ninja Kid! Looks close enough to Helvetica Thin for my purposes, and it’s free to use. Stylish, ain’t it? :slight_smile:

What code did you use to get it working on your end? I can’t post anything new because I didn’t keep the changes. Obviously I didn’t know what the hell I was doing. Didn’t think about using a dedicated name for the class.

9

I just went to your Javascript file (the one with the word font in it) and I deciphered it :). Not that hard lol. It said font-family:“Hammer Thin” :). I thought it was Helvetica Thin at first but I realized you were using cufon and that font was just a backup for JS off :slight_smile:

What code did you use to get it working on your end? I can’t post anything new because I didn’t keep the changes. Obviously I didn’t know what the hell I was doing. Didn’t think about using a dedicated name for the class.

I’ll post up my code I have in a second. I deleted it all to do anotehr thread :slight_smile:

10

AH!!! What did you do? I’m testing and then all of a sudden the CSS and Javascript are gone??!!

11

Now it’s working…:). Besides the min/max script which you have, this gets it working :slight_smile:

#menu li a{float:left;}
#menu_wrapper{zoom:1;}
12

While we’re both tinkering, try this slightly different version. Meanwhile, I’ll try your code on the original version.

13

Hmmmm. In IE6, your code (in both versions) fixes the gap between the left (rounded) image, but doesn’t allow the right rounded image to display, nor does it place the icons in the nav bar.

Progress, nevertheless. :cookie: for late-night inspiration.

14

FYI: I don’t have IE8 here, but according to Browsershots, it looks fine. Damn old IE versions, arrggghhh. :headbang:

15

Hi, this is more complicated then it should be lol :).

First off, get rid of that concentated classes in the CSS. Make them seperate elements, aka pujt a space between #menu_wrapper and .blue

Then create a div with the class=“blue” and wrap it around the <ul>

Now, you set in general, <div>'s of #menu_wrapper to be floated/height:44px and 12px width. Reset them for the .blue class :slight_smile:

This is what you get for messing with IE6 and messy support :wink:

16

:lol: In one of my favorite vampire novels, when you staked one vampire, you killed all the other vampires that one had made. I wish I could take a stake to whatever misbegotten machine in Redmond spawned IE6 and kill all the iterations of that browser at once.

I will try this tomorrow, I have to tussle with wild kids in the AM. Thanks for sticking with it, Ryan.

17

I had to give it a quick try. No dice. What the heck am I missing?!?

More tomorrow.

18

Come on, guys, both me and my cats are stumped. I’m low on ibuprofen and they’re all out of catnip. My tabby is advising me to use a more IE-compatible navbar design. And I still want to know why that blunt-force “shoving” of icons over the navbar works perfectly cozily in everything but IE6 and 7.