469,288 Members | 2,353 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,288 developers. It's quick & easy.

width and height styles on <a> tag

Hello,

I just encountered a strange thing when switching the doctype
on and off in the following html testpage (with IE 6.0):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>
Testpage
</title>
<style type="text/css">
p {
width: 50%;
background-color: #dddddd
}
a {
height: 200px;
width: 500px;
background-color: #cccccc
}
a:hover {
background-color: #cccc00

}
</style>
</head>
<body>
<h1>
Testpage
</h1>
<p>
<a href="#">Testlink</a>
</p>
</body>
</html>

With doctype xhtml-strict turned on, the height / width on the <a> tag is
ignored.

My question is: Is this the desired behaviour? Does xhtml-strict not allow
reformatting of the <a> tags with regard to width / height?

My problem is, that I would rather like to switch background color in a
larger
area than only behind the text when hovering over the link. I could easily
embed the <a> tag in a paragraph <p> of appropriate size, but then color
switching while hovering is only performed on the small <a> tag.

Any help is appreciated.

TIA

Bye

Clemens Quo
Jul 24 '05 #1
2 16604
Clemens Quoss wrote:
I just encountered a strange thing when switching the doctype
on and off in the following html testpage (with IE 6.0):
a {
height: 200px;
width: 500px;
background-color: #cccccc
}
With doctype xhtml-strict turned on, the height / width on the <a> tag is
ignored.

My question is: Is this the desired behaviour?
Yes.
Does xhtml-strict not allow
reformatting of the <a> tags with regard to width / height?
CSS doesn't allow it. The width and height properties do not affect
inline elements like <a>.

The doctype you used is one of those that triggers standards mode in
which the standards are obeyed. Other doctypes, or no doctype at all,
triggers quirks mode in which all sorts of strange things are done.
My problem is, that I would rather like to switch background color in a
larger
area than only behind the text when hovering over the link.
Use the display property to make the link a block level element. Then
width and height will be applied.
I could easily embed the <a> tag in a paragraph <p> of
appropriate size, but then color switching while hovering
is only performed on the small <a> tag.


If you want to change the background of an entire p element then you
need to use p:hover instead of a:hover, but IE only supports :hover on
links. :-(

Steve

Jul 24 '05 #2
"Clemens Quoss" <Cl***********@Dresdner-Bank.com> wrote:
With doctype xhtml-strict turned on, the height / width on the <a> tag is
ignored.


http://www.w3.org/TR/CSS21/visudet.h...eight-property
Applies to: all elements but non-replaced inline elements, table
columns, and column groups

Same wrt width.

--
Spartanicus
Jul 24 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Zbigniew Lisiecki | last post: by
2 posts views Thread by Donald Firesmith | last post: by
3 posts views Thread by ajay2552 | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.