[Jay0830]

#myoutfitTitle{
	float:left;
	font-style:italic;
	font-size:50px;
	position:relative;
	margin-left:10px;
	margin-bottom:0px;
	padding-top:0px;
	bottom:0px;
	border:1px solid black;
}
<s:a href="%{home}">
	TESTING
</s:a>

the same code but different display in chrome and firefox
This is chrome result:


This is Firefox result


If I take out the <a> tag, the div would fit the text in chrome.

How can I make the DIV fits the <a> tag text in chrome?

Thanks for the help.

This post has been edited by Jay0830: 20 November 2012 - 11:14 AM

[IJET]

Well, there is always going to be inconsistencies between how browsers render code. Try using Eric Meyer's Reset in your CSS file and see if that helps.

As his page says: "The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on."

Give it a try and let me know.

[drodriguez]

remove browser specific margins and paddings by using

*
{
margin:0px;
padding:0px;
}

i had the same problem between firefox and safari and this fixed it for me. just place it at the top of your css file.

This post has been edited by drodriguez: 20 November 2012 - 01:23 PM

[Jay0830]

I copied the CSS code into my page, it changed other things but not <a> tag and text in <a> tag.

Thanks IJET for the information.

This post has been edited by Jay0830: 20 November 2012 - 01:20 PM

[Jay0830]

drodriguez, on 20 November 2012 - 01:15 PM, said:

remove browser specific margins and paddings by using

*
{
margin:0px;
padding:0px;
}

i had the same problem between firefox and safari and this fixed it for me. just place it at the top of your css file.

I added this css code in to my page, but still no luck. it doesn't change in chrome and firefox.

Thanks for the help

[IJET]

Okay, then play around with the line-height.

#myoutfitTitle{
		display: inline;
	float:left;
	font-size:50px;
	position:relative;
	margin-left:10px;
	margin-bottom:-4px;
	padding-top:0px;
	bottom:0px;
	border:1px solid black;
	line-height: 40px;
	}

[Jay0830]

IJET, on 20 November 2012 - 01:53 PM, said:

Okay, then play around with the line-height.

#myoutfitTitle{
		display: inline;
	float:left;
	font-size:50px;
	position:relative;
	margin-left:10px;
	margin-bottom:-4px;
	padding-top:0px;
	bottom:0px;
	border:1px solid black;
	line-height: 40px;
	}

it's not working in #myoutfitTitle but works in <a> tag
so I changed it to

#myoutfitTitle a{
	display: inline;
	float:left;
	font-size:50px;
	position:relative;
	margin-left:10px;
	margin-bottom:-4px;
	padding-top:0px;
	bottom:0px;
	border:1px solid black;
	line-height: 40px;
	}

Thanks for your help!! problem solved

This post has been edited by Jay0830: 20 November 2012 - 02:20 PM