10 replies [Last post]
Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 14 years 18 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

I encounterd this weird thing. I tried to apply a width to a link element with a strict xhtml doctype. But somehow this does not seem to work. When I leave out the dtd location it does work. What am I doing wrong? Or is it not possible to assign a width to a link element?

The XHTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content="#" />
	<meta name="keywords" lang="nl" content="#" />
	<style type="text/css">
		ul {margin:0; padding:0;}
		li {margin:0; padding:0;}
		a {width:500px; background:#f60;}
	</style>
</head>
<body>
	<ul>
		<li><a href="#"><b>Hello</b></a></li>
	</ul>
	
	<p><a href="#"><b>Hello</b></a></p>
	
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Width of &lt;a&gt; in xhtml strict

Have you tried setting the width to your <li> as well? And it would probably help if you specify li a { width: 500px; } as well.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Width of &lt;a&gt; in xhtml strict

<a> is an inline element. Inline elements have neither height nor width properties. If you wish to size the anchor element, you must declare it {display: block;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

drhowarddrfine
Offline
Leader
Last seen: 12 years 31 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Width of &lt;a&gt; in xhtml strict

And the only reason it appears to work to you without the doctype is because you used IE which gets it wrong by guessing at what you want rather than applying it correctly as Firefox and other browsers would.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 14 years 18 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Width of &lt;a&gt; in xhtml strict

I see, setting it to display:block does the trick. Lesson learned, inline elements do not have height and width properties.

Thanks all.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Width of &lt;a&gt; in xhtml strict

lesson learned - IE never works properly without a doctype.

Verschwindende wrote:
  • CSS doesn't make pies

drhowarddrfine
Offline
Leader
Last seen: 12 years 31 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Width of &lt;a&gt; in xhtml strict

Quote:
incomplete doctypes make baby jesus cry

IE kills little kitties.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 14 years 18 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Width of &lt;a&gt; in xhtml strict

is this the same reason why inline elements (like the <a>) do not accept a padding or margin?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Width of &lt;a&gt; in xhtml strict

Padding and margin are there, but they do not affect vertical spacing. See what happens;

<p>this <span style="padding: 10px; margin: 10px; border: 1px solid black;">is a line</span> of text.</p>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 13 years 44 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

Width of &lt;a&gt; in xhtml strict

Note that IE renders line breaks as text, resulting in an extra stupid line. I solve this by displaying the <li>'s as inline.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Width of &lt;a&gt; in xhtml strict

I believe you're talking about a special case of lists of block links. If so, see this.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.