...

View Full Version : Navigation text appears small in different browsers



sumeru
05-01-2011, 01:34 PM
Hello,

I am using CSS based navigation on one of my sites. I have set the text size as 11px but it reduces in size in a lot of browsers. Mainly IE 9 and Firefox 4.

It looks fine in Chrome and by using compatibility view in IE 9. Please help.

You can check it out at - http://205.234.232.6/menu_test/Untitled-2.html

Thanks,
Sumeru

Zyrotza
05-01-2011, 01:46 PM
Well for me it works fine in Firefox for me.

I don't know about the other browsers, maybe it's just your computer?

sumeru
05-01-2011, 01:59 PM
That's strange, I have tried it out on a lot of different computers and saw the difference. Just uploaded a second screenshot on the page. Check it out

AndrewGSW
05-01-2011, 04:05 PM
Have you set the text size (11px) specifically for the 'li' items?

I've read that if a text size is set in pixels and a zoom is used on the page, then browsers can behave differently.

sumeru
05-01-2011, 06:32 PM
Have you set the text size (11px) specifically for the 'li' items?

I've read that if a text size is set in pixels and a zoom is used on the page, then browsers can behave differently.

Yes, i have set the text size for the li items.

Here is the CSS -

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-size:11px;
font-weight:bold;
font-family: Georgia, "Times New Roman", Times, serif;
width: 1000px;
}
.menu ul{
background:#333333;
height:33px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:33px;
margin:0px;
text-align:center;
text-decoration:none;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:175px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:175px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:33px;
font-size:11px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}




I tried using em, percentage, pt but the result is the same, in one browser its fine and in the other its smaller/bigger.

AndrewGSW
05-01-2011, 07:31 PM
Try removing 'font-weight:bold' from the .menu class. it seems to be inherited in one browser but not the other. (If the browser doesn't contain a bold version of the available font it will try to emulate bold which can cause the font to distort.)

If this has an effect and you still want bold within .menu then you could set 'font-weight:normal' for the li.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum