rsrwebs Posted July 30, 2009 Report Share Posted July 30, 2009 (edited) 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 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 July 31, 2009 by rsrwebs Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 30, 2009 Report Share Posted July 30, 2009 Try float: left; instead of display: inline:- ul#list-nav li{ float: left; /*display: inline-block;*/ list-style-type:none; } Quote Link to comment Share on other sites More sharing options...
AndaleTheGreat Posted July 30, 2009 Report Share Posted July 30, 2009 (edited) 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 July 30, 2009 by AndaleTheGreat Quote Link to comment Share on other sites More sharing options...
falkencreative Posted July 30, 2009 Report Share Posted July 30, 2009 @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. Quote Link to comment Share on other sites More sharing options...
rsrwebs Posted July 30, 2009 Author Report Share Posted July 30, 2009 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. Quote Link to comment Share on other sites More sharing options...
rsrwebs Posted July 30, 2009 Author Report Share Posted July 30, 2009 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. :/ Quote Link to comment Share on other sites More sharing options...
rsrwebs Posted July 30, 2009 Author Report Share Posted July 30, 2009 @andaleTheGreatJust 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 30, 2009 Report Share Posted July 30, 2009 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted July 30, 2009 Report Share Posted July 30, 2009 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 Quote Link to comment Share on other sites More sharing options...
rsrwebs Posted July 31, 2009 Author Report Share Posted July 31, 2009 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. Quote Link to comment Share on other sites More sharing options...
rsrwebs Posted July 31, 2009 Author Report Share Posted July 31, 2009 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted July 31, 2009 Report Share Posted July 31, 2009 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. Quote Link to comment Share on other sites More sharing options...
rsrwebs Posted July 31, 2009 Author Report Share Posted July 31, 2009 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted July 31, 2009 Report Share Posted July 31, 2009 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. Quote Link to comment Share on other sites More sharing options...
rsrwebs Posted July 31, 2009 Author Report Share Posted July 31, 2009 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!!! Thanks again! The bar looks great in BOTH both browsers now! Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted July 31, 2009 Report Share Posted July 31, 2009 Your welcome, glad to help. :~) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.