4 replies [Last post]
Andrewk
Andrewk's picture
User offline. Last seen 1 year 48 weeks ago. Offline
newbie
Joined: 2010-03-05
Posts: 3
Points: 4

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?

CupidsToejam
CupidsToejam's picture
User offline. Last seen 2 weeks 1 day ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

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.


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Andrewk
Andrewk's picture
User offline. Last seen 1 year 48 weeks ago. Offline
newbie
Joined: 2010-03-05
Posts: 3
Points: 4

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 Wink

CupidsToejam
CupidsToejam's picture
User offline. Last seen 2 weeks 1 day ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

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


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Andrewk
Andrewk's picture
User offline. Last seen 1 year 48 weeks ago. Offline
newbie
Joined: 2010-03-05
Posts: 3
Points: 4

ok, I will let you

ok, I will let you know

Thanks