6 Replies - 2336 Views - Last Post: 20 November 2012 - 02:19 PM

#1 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

DIV size fit text different between Firefox and Chrome

Posted 20 November 2012 - 11:09 AM

#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:
Posted Image

This is Firefox result
Posted Image

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


Is This A Good Question/Topic? 0
  • +

Replies To: DIV size fit text different between Firefox and Chrome

#2 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: DIV size fit text different between Firefox and Chrome

Posted 20 November 2012 - 12:39 PM

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.
Was This Post Helpful? 1
  • +
  • -

#3 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Re: DIV size fit text different between Firefox and Chrome

Posted 20 November 2012 - 01:15 PM

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

Was This Post Helpful? 0
  • +
  • -

#4 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

Re: DIV size fit text different between Firefox and Chrome

Posted 20 November 2012 - 01:20 PM

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

Was This Post Helpful? 0
  • +
  • -

#5 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

Re: DIV size fit text different between Firefox and Chrome

Posted 20 November 2012 - 01:27 PM

View Postdrodriguez, 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
Was This Post Helpful? 0
  • +
  • -

#6 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: DIV size fit text different between Firefox and Chrome

Posted 20 November 2012 - 01:53 PM

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;
	}


Was This Post Helpful? 1
  • +
  • -

#7 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

Re: DIV size fit text different between Firefox and Chrome

Posted 20 November 2012 - 02:19 PM

View PostIJET, 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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1