I have a navigation menu with this style. The menu is perfect on Chrome, but other browsers and some Firefox versions, the menu shows up as 2 lines, I can not get this line of CSS "padding: 0.73em;" To work on all browsers
.mainnav ul {list-style-type: none; Margin: 0; Padding: 0; Hidden flurry; }. Name name ul li {float: left; } .mainnav ul li a: link, .mainnav ul li a: visited {display: block; Font-size: 13px; font-weight: bold; Color: #FFFFFF; Background color: # B79527; Text-align: center; Padding: 4px; Text-decoration: none; Change text: uppercase; Margin: 0; Padding: 0.73em; Height: 28px; Line-height: 28px; Status: Relative; White-space: nowrap; }. Mainname ULL A: Hover, Menann UL Lee: Active {background color: # 9A7C1C; } #firstmenu {background: # 7A4AAD; Padding-left: 6px; } Here is HTML
& lt; Div class = "mainnav" & gt; & Lt; Ul & gt; & Lt; Li id = "first menu" & gt; & Lt; A href = "default.html" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "news.html" & gt; Group News & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "about_us.html" & gt; About us & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "vision.html" & gt; Vision Messaging & Mission & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "group_activities.html" & gt; Group activity & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "charmain.html" & gt; Chairman's message & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "jobs.html" & gt; Jobs & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "contacts.html" & gt; Contact us & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; Even Firefox gives me different results on different machines.
You know that: .mainnav ul li a: link, .mainnav ul li: Visited Dual padding are decalarations? -
Padding: 4px; -
Padding: 0.73em; You can add them:
Padding: 4px 0.73em; It seems that the issue with the navigation list is that there is a lot of difference between the amount of items between them, I have a lot of things, normal behavior is wrapping, Strong> You can reduce the difference , font-size to fix it.
No comments:
Post a Comment