How to check the link background width

Get Started
1

As far as I know each browser is differ from other. And the also the font size is differ from browser to browser. If I m wrong simple say You are wrong to make me happy. Because my problem is, I am creating a new HTML/CSS design, In which I am having a background image for link and hover link. The Text for the link is almost equal to the width of the Image. So My question is is there any browser can display my link text bigger than the width of the background image… Please help me??

2

You are never in control of text size. People using any browser can change their default font and text size, and you always need to allow for the fact that some people will have larger text than you.

There are various techniques to get around this, one is to use an expandable image with the ‘sliding doors’ technique, so that it stretches to fit whatever size of text you have. If you can give us a bit more detail of what you need, we might be able to come up with a solution.

3

Thanks for your quick reply. I have attached the link view image with this post.

My css code for the link is


.navlink:link, .navlink:visited, .navlink:active{
	background:url(img/lbg.jpg) no-repeat;
	line-height:19px;
	font-size:15px;
	margin:2px 5px 0 5px;
	padding:6px 0 0 0;
	display:inline-block;
	text-align:center;
	width:100px;
	height:31px;
	text-decoration:none;
	vertical-align:text-bottom;
	color:#000000;
	border:none;
}
.navlink:hover{
	background:url(img/lbg_hover.jpg) no-repeat;
}

From your reply I understand that the there are possibilities for the text can be displayed out of the background image. Please help me to fix this for any browser. The text should be inside the background image on all browsers. In my chrome, Opera, Firefox and Iexplorer it is ok to see. If i zoom the page the background image also gets zoomed. But I have the fear, if any browser may display the text bigger than the background Image.

Thanks.