Jump to content
Stef's Coding Community
rsrwebs

(EDIT: RESOLVED!)Horizontal NavBar goes vertical in IE

Recommended Posts

I want to thank everyone who has helped me on this problem. I found the coding I needed on this site http://www.rayswoodworks.com/test_files/Navbars/inline-block-dropdown.html that Eric suggested to me. I did :D

 

Thanks again everyone! I love this forum. X3

 

Original Message:

 

Hello,

 

I have a horizontal navigation bar, and like always it looks right in FireFox, but not in IE.

What it does is it displays all of the buttons like a list(one below the other), when they should all be side by side.

 

I have been looking all over the place for a solution for this, and in the end I only found a couple things that I haven't tried and they didn't work.

 

So far, all I've managed to change was instead of the buttons aligning left in IE, they're centered and the padding is screwed up. It's all very frustrating. :mad:

 

The navbar links:

></pre>
<ul>
Home
News
About
Music
Tour Dates
Fan Club
Genres
Media
Shop
Login

 

The CSS:


 

Thanks a lot for reading, and I appreciate any help given. :)

-Raven

Edited by rsrwebs

Share this post


Link to post
Share on other sites

Try float: left; instead of display: inline:-

ul#list-nav li{

float: left; /*display: inline-block;*/

list-style-type:none;

}

Share this post


Link to post
Share on other sites

i had pretty exactly the same setup, Wickham's suggestion is exactly what i'd have come up with (more or less, mine would have just been 'use float')

I also don't think I've used 'float: auto' anywhere

I would also like to suggest a few ideas to you. I found I could make something much cleaner without sacrificing a lot of time by using the GUIstuff com Flash Navibar generator.

I also had (but had forgot) a copy of the Amara - Flash Menu Builder and then found a friend with the AllWebMenus program. I used AWM in the end cuz it looked best, but I honestly wanted to change because I felt like there was too much extra work in the css/html style

 

 

ok, time for bed, i was trying to submit by hitting ctrl+s. i've been editing waaay too much tonight

Edited by AndaleTheGreat

Share this post


Link to post
Share on other sites

@andaleTheGreat

Just remember that Flash tends to be less accessible to disabled users than regular HTML, and consider too that not everyone has up to date computers (with the most recent version of Flash), or they may not have Flash at all. A lot of the fancy effects that you can do with Flash are also possible to do (though, yes, with a little bit more work) in Javascript. Also, other simple things, like being able to right click on a menu item and have it open in a new tab/window are disabled if you use Flash.

 

Yes, I suppose the code is cleaner if you use Flash, but there are other factors to consider too.

Share this post


Link to post
Share on other sites
Try float: left; instead of display: inline:-

ul#list-nav li{

float: left; /*display: inline-block;*/

list-style-type:none;

}

 

The reason why I'm not using float: left; is because it aligns the navbar to the left, but I need it to be centered. :(

Share this post


Link to post
Share on other sites
i had pretty exactly the same setup, Wickham's suggestion is exactly what i'd have come up with (more or less, mine would have just been 'use float')

I also don't think I've used 'float: auto' anywhere

I would also like to suggest a few ideas to you. I found I could make something much cleaner without sacrificing a lot of time by using the GUIstuff com Flash Navibar generator.

I also had (but had forgot) a copy of the Amara - Flash Menu Builder and then found a friend with the AllWebMenus program. I used AWM in the end cuz it looked best, but I honestly wanted to change because I felt like there was too much extra work in the css/html style

 

 

ok, time for bed, i was trying to submit by hitting ctrl+s. i've been editing waaay too much tonight

 

If I can help it, I'd like to stick to the usual CSS and HTML code that I know for this.

I know what I'm trying to do isn't impossible, I've seen it done before. :/

Share this post


Link to post
Share on other sites
@andaleTheGreat

Just remember that Flash tends to be less accessible to disabled users than regular HTML, and consider too that not everyone has up to date computers (with the most recent version of Flash), or they may not have Flash at all. A lot of the fancy effects that you can do with Flash are also possible to do (though, yes, with a little bit more work) in Javascript. Also, other simple things, like being able to right click on a menu item and have it open in a new tab/window are disabled if you use Flash.

 

Yes, I suppose the code is cleaner if you use Flash, but there are other factors to consider too.

 

As I said to AndaleTheGreat, I think I just want to stick to the code that I'm used to. It's worked before on other people's sites, I've seen it, but I can't figure out what I'm doing wrong.

Share this post


Link to post
Share on other sites

If you have a page with a fixed width then you can use the float: left; I suggested and put a margin-left in the first link to move it along so that the whole menu is centered (only if your page has a fixed width).

 

ul#list-nav li{

float: left; /*display: inline-block;*/

list-style-type:none;

}

 

ul#list-nav_pri li#first { margin-left: 200px; }

 

markup:-

 

Share this post


Link to post
Share on other sites

Here is an example from Ray that works croos browser with inline block... http://www.rayswoodworks.com/test_files/Navbars/inline-block-dropdown.html I'll let you make sense of the "hows". And here is how to center a widthless float (also rays)... http://www.rayswoodworks.com/test_files/Navbars/center-float-nav.html

Share this post


Link to post
Share on other sites
If you have a page with a fixed width then you can use the float: left; I suggested and put a margin-left in the first link to move it along so that the whole menu is centered (only if your page has a fixed width).

 

ul#list-nav li{

float: left; /*display: inline-block;*/

list-style-type:none;

}

 

ul#list-nav_pri li#first { margin-left: 200px; }

 

markup:-

 

Home

News

About

Music

Tour Dates

Fan Club

Genres

Media

Shop

Login

 

I had this problem only yesterday on another forum and it worked because the nav bar was contained within a fixed width.

 

I don't know what it means to have a page in a fixed width. But one thing I do know is whenever I make the float: left, it pushes all of the content (which is all in one table) off to the side, the entire width of the navbar, and the bar itself is not centered.

Share this post


Link to post
Share on other sites
Here is an example from Ray that works croos browser with inline block... http://www.rayswoodworks.com/test_files/Navbars/inline-block-dropdown.html I'll let you make sense of the "hows". And here is how to center a widthless float (also rays)... http://www.rayswoodworks.com/test_files/Navbars/center-float-nav.html

 

I tried the widthless float code, and so far I haven't figured out how to get it to work.

 

Thanks though. :)

Share this post


Link to post
Share on other sites
Why not the inline block? Thats what you wanted to begin with. You probably only need two hacks - one for IE6 and one for FX2.

 

I am using display:inline-block, and I don't see why I would need a hack for firefox since it views the navbar properly.

I actually found this code last night (display: -moz-inline-box;) and now the padding around the buttons looks right in IE, where before it was cutting off the active BG on the top and bottom. Still, they're all shown as a list and they're not horizontal.

 

My code now is:

 


 

Thanks for the help. :)

Share this post


Link to post
Share on other sites

I gave you the link that shows inline block working cross browser. Go study that (the same as I would have too!). I always just use float, so I'm not very familiar with the in's and out's of inline block. And yes, you would need the -moz hack for FX2 (it should have no effect on IE) that much I know.

Share this post


Link to post
Share on other sites
Here is an example from Ray that works croos browser with inline block... http://www.rayswoodworks.com/test_files/Navbars/inline-block-dropdown.html I'll let you make sense of the "hows". And here is how to center a widthless float (also rays)... http://www.rayswoodworks.com/test_files/Navbars/center-float-nav.html

 

I copied over the inline block code, and after editing it a bit, it works!!! :D

Thanks again! The bar looks great in BOTH both browsers now!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...