Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Navigation text appears small in different browsers

    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
    Last edited by sumeru; 05-01-2011 at 02:37 PM.

  • #2
    New Coder
    Join Date
    May 2010
    Location
    Scotland, United Kingdom.
    Posts
    28
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well for me it works fine in Firefox for me.

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

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    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 -
    Code:
    .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.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •