Fri, 2010-03-05 14:53
Hi Everyone
I need some help with my horizontal navbar.
I have 1 small problem.
This is code for my horizontal navbar:
#nav ul { float: left; list-style: none; background: #000000; width: 100%; padding: 0; margin: 0 0 0 0px; height: 32px; display: inline; text-transform: none; text-align: center; } #nav ul li { display: inline; margin: 0; padding: 0; } #nav ul li a { display: inline; float: center; width: auto; margin: 0; padding: 0 20px; border-top: 2px solid #ffffff; /*border-right: 1px solid #ffffff; */ /*border-left: 1px solid #ffffff; */ border-bottom: 1px solid #000000; color: #ffffff; font: bold 12px/52px Arial, Geneva, sans-serif; text-transform: none; text-decoration: none; letter-spacing: 1px; } #nav ul li a:hover, #nav ul li a:active { color: #fff; background-color: #fba50f; font: bold; }
It looks fine under firefox. Unfortunately looks very bad under IE7.
The problem is that when I’m using IE7 I can see lots of space under navigation buttons.
It looks like space for next line of buttons or something...
I don’t know what to do with this....
When I try to change height from 32 to 20 px then I have messed up with FF.
What should I do with this?
Fri, 2010-03-05 15:04
#1
hey guy, can you plz post a
hey guy, can you plz post a link to the site, or at-least all your css and html within code brackets. Oh, and float: center; doesnt exist.
Fri, 2010-03-05 15:34
#2
Hi CupidsToejam My site is at
Hi CupidsToejam
My site is at http://www.your-healthy-foods.com
CSS for my horizontal navbar:
/*this stylesheet is for you navigation panel*/ #navigator { } .housebutton { line-height: 90%; } .housebutton a { font-size: 89%; font-family: Arial, Verdana, sans-serif; } .housebutton a:hover { font-size: 89%; font-family: Arial, Verdana, sans-serif; } /* this part below is for the color on the background, surrounding the buttons. Change the color, and the border, if you like. For the border, you can use solid, dashed, or dotted*/ #navigator { background-color: transparent; border: transparent; width: auto; margin-top: auto; margin-left: 3px; margin-right: auto; padding: 2px; text-align: center; } /* want more space between your buttons? just increase the margins from 1px. Font weight can be bold if you prefer.*/ .housebutton { letter-spacing: 1px; font-weight: bold; text-align: left; margin-bottom: 0px; margin-top: 0px; } /* this part is for the colors of your buttons "at rest" so to speak.*/ .housebutton a { height: 14px; padding: 4px; text-decoration: none; display: block; color: #940a0a; /*this is where you change the button font color stary kolor 3e5a11*/ background-color: transparent; border-top: none; border-left: none; border-bottom: 2px solid #f6a40a; border-right: none; } /*this part is how the buttons look, once the pointer passes over them. */ .housebutton a:hover { color: #ffffff; /*-----this is where you change the button font color, when the button is hovered over*/ background-color: #fea520; border-top: none; border-left: none; border-bottom: none; border-right: none; } /*horizontal nav*/ #nav ul { float: left; list-style: none; background: #000000; width: 100%; padding: 0; margin: 0 0 0 0px; height: 32px; display: inline; text-transform: none; text-align: center; } #nav ul li { display: inline; margin: 0; padding: 0; } #nav ul li a { display: inline; float: center; width: auto; margin: 0; padding: 0 20px; border-top: 2px solid #ffffff; /*border-right: 1px solid #ffffff; */ /*border-left: 1px solid #ffffff; */ border-bottom: 1px solid #000000; color: #ffffff; font: bold 12px/52px Arial, Geneva, sans-serif; text-transform: none; text-decoration: none; letter-spacing: 1px; } #nav ul li a:hover, #nav ul li a:active { color: #fff; background-color: #fba50f; font: bold; } /*horizontal nav*/
I hope now is better 
Fri, 2010-03-05 16:06
#3
Strange. Start clearing this
Strange. Start clearing this up, and see if the problem persists.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.your-healthy-foods.com%2F
Fri, 2010-03-05 16:12
#4
ok, I will let you
ok, I will let you know
Thanks
