471,893 Members | 1,930 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,893 software developers and data experts.

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 16726
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
reply views Thread by zermasroor | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.