Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

underline thickness on h# tags in firefox 6

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
I've noticed that if you underline a heading tag in FF the line thickness is massive, very nasty indeed.

How do you control the thickness of the underline.

Cheers,

1DMF.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Sort by date Sort by votes
You can't.
Click to expand...
huh, but FF is making the page look awful with its big ass lines.

Made no different either, it's a h4 tag left @ default font size and the line is about 3px thick.

Why people prefer FF as a browser is beyond me, things look much nicer in IE.

Personal preference I guess.

Thanks for trying though Vragabond!


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Remove the link underline with CSS and then apply a bottom border of the thickness that you want

For instance

Code: 
h1 a { 
   text-decoration:none;
   border-bottom:1px solid #f00;
}

You can't alter the built in link underlines since these are a browser/os thing.

The line is in proportion to the font size I think (not tested) which makes more sense to me than a standard line thickness regardless of font size.

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
This got me thinking... perhaps if you reset the font size of the headings down, then back up again inside a span in the headings, you might get something standard.

I came up with this basic test, which seems to be good in Fx 3, and IE 7, and Safari 3/Win, at least. The top headings are 'regular' ones, and the bottom ones are 'fixed' ones:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
	<title>Underline test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<style type="text/css">
		html>body {
			font-size: 16px;
		}
		body {
			font-size: 100%;
		}
	</style>

	<!--[if gt IE 6.9999]>
	<style type="text/css">
		html>body {
			font-size: 100%;
		}
	</style>
	<![endif]-->


	<style type="text/css">
		h1 {
			font-size: 2em;
			text-decoration: underline;
		}

		h2 {
			font-size: 1.5em;
			text-decoration: underline;
		}

		h1.underlined,
		h2.underlined {
			font-size: 15px;	/* 1px less than the 'reset' value */
		}

		h1.underlined span.fontSizeReset,
		h2.underlined span.fontSizeReset {
			font-size: 16px;
		}

		h1.underlined span.fontSize {
			font-size: 2em;
		}

		h2.underlined span.fontSize {
			font-size: 1.5em;
		}
	</style>

</head>

<body>
	<h1>First heading</h1>
	<h2>Second heading</h2>

	<h1 class="underlined"><span class="fontSizeReset"><span class="fontSize">First heading</span></span></h1>
	<h2 class="underlined"><span class="fontSizeReset"><span class="fontSize">Second heading</span></span></h2>
</body>
</html>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
The line is in proportion to the font size I think (not tested) which makes more sense to me than a standard line thickness regardless of font size.
Click to expand...
I agree to a point, but then surely you should be able to control the thickness yourself? Maybe in CSS3 eh?

Anyways, it doesn't work because it puts a border on the H# tag block element and not on the text.

The only way round that I guess is to add a span wrapper tag around the text.

Extra tags just to change the text underline thickness in FF, doesn't sound very semantic to me!


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Here's the same CSS, but reworked to put common values together:

Code: 
<head>
	<title>Underline test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<style type="text/css">
		html>body,
		h1.underlined span.fontSizeReset,
		h2.underlined span.fontSizeReset {
			font-size: 16px;
		}

		body {
			font-size: 100%;
		}

		h1.underlined,
		h2.underlined {
			font-size: 15px;	/* 1px less than the 'reset' value above */
		}
	</style>

	<!--[if gt IE 6.9999]>
	<style type="text/css">
		html>body {
			font-size: 100%;
		}
	</style>
	<![endif]-->


	<style type="text/css">
		h1,
		h1.underlined span.fontSize {
			font-size: 2em;
		}

		h2,
		h2.underlined span.fontSize {
			font-size: 1.5em;
		}

		h1, h2 {
			text-decoration: underline;
		}
	</style>

</head>

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
looks like you came to the same conclusion as me, the only way round this is to wrap a span around the text and style it that way!

ok you're remapping the actual heading tag fonts, but isn't putting a span around the text and adding a border to the span simpler?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
That depends if you want a border or an underline. I've used no borders. You can see the difference when the text wraps:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
	<title>Underline test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<style type="text/css">
		h1.border {
			color: red;
			border-bottom: 1px solid red;
		}

		h1.underline {
			color: red;
			text-decoration: underline;
		}
	</style>

</head>

<body>
	<div style="width:200px; border:1px solid black;">
		<h1 class="underline">This H1 has an underline which goes over all lines of the text</h1>
		<h1 class="border">This H1 has a border which goes over the last lines of the text</h1>
	</div>
</body>
</html>

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
no you need to wrap the heading text in a span, then it works great...

Code: 
h4 {
    margin:10px 0px;
    text-decoration:none;
    color:#00bef3;
}    

h4 span.h4 {
    border-bottom:1px solid #00bef3;
}

and
Code: 
<h4><span class='h4'>Text goes here and can wrap, it works fine</span></h4>

demo page here....
Code: 
[URL unfurl="true"]http://www.propertyfinanceltd.co.uk/about.html[/URL]

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
no way, I beat Dan the Man!

Wow you guys really have taught me well haven't you!!!

Pat yourselves on the back, you deserve it!!!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
......1 Day My Friend

;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
712
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
174
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
648
3esolar
3
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
649
bdwilcox
bdwilcox

Part and Inventory Search

Sponsor

Back
Top