W3C home > Mailing lists > Public > www-style@w3.org > January 2011

Re: width and height

From: Gérard Talbot <www-style@gtalbot.org>
Date: Wed, 26 Jan 2011 07:34:24 -0800
Message-ID: <133d726fe325ca543acbfb838f266dbb.squirrel@cp3.shieldhost.com>
To: "Bruno" <bruno5544@gmail.com>
Cc: "Alan Gresley" <alan@css-class.com>, "W3C style mailing list" <www-style@w3.org>

Le Mer 26 janvier 2011 4:48, Bruno a écrit :
> In this sample :hover doesn't work properly, it moves down for 1px,

In which browser and browser version do you see this vertical 1px offset?
Can you upload your example somewhere and give us an url?

> what would be solution to this?
> <html>
> <head>
> <style type="text/css">
> #css {
> 	text-align:center;
> 	font-size:20px;
> 	background-color:white;
> 	width:400px;
> 	height:100px;
> 	border: 1px solid red;
> 	-moz-border-radius:20px;
> }
> #css a {

If you want to make parsing faster, then often it is better to use the
child selector instead of the descendant selector.

> 	text-align:center;

text-align is inherited
So, there is no need to redeclare again text-align: center since you set
it on your #css container.

> 	font-size:20px;

font-size is inherited
So, here too, there is no need to redeclare again font-size:20px;  since
you already set it on your #css container..

> 	text-decoration:none;
> 	color:blue;

blue is best for unvisited links because it is the default color in
browsers for unvisited links. Here, your design will change override the
normal, default color for visited links.

8. Non-standard link colors (score: severe)
(...) users rely on the link colors to understand what parts of the site
they have visited. I often see users bounce repeatedly among a small set
of pages, not knowing that they are going back to the same page again and
again. (Also, because non-standard link colors are unpleasantly frequent,
users are now getting confused by any underlining of text that is not a
"Top Ten Mistakes" Revisited Three Years Later

Change the Color of Visited Links

> }
> #css a:hover {
> 	display:inline-block;
> 	text-align:center;
> 	font-size:20px;
> 	background-color:yellow;
> 	width:400px;

Setting a width on an inline-block is not always best or required. By
default, inline-block "shrink-to-fit" the content. Here, I bet you would
be better with display: block and then not declare width at all, not set
width at all.

E.g.: In this testpage
the links in the navigation menu in the left column are styled as display:
block, not as display: inline-block.

> 	height:100px;
> 	text-decoration:none;

Setting text-decoration: none for links is, in my opinion, not a good
user-friendly decision. It's not a pro-accessibility design choice in my

> 	border: 1px solid red;
> 	-moz-border-radius:20px;
> }

IMO (just a hunch but a strong one), you are most likely over-declaring
and over-defining.

> </style>
> </head>
> <body>
> <div id="css"><a href="#">test</a></div>
> </body>
> </html>

If we knew exactly for what you are doing this (say, a vertical navigation
menu of links, non-DHTML, not javascript driven), then we would be able to
better help you. Knowing that, we could then realize that inline-block may
not be what would be best for your webpage goals/requirements.

regards, Gérard
CSS 2.1 Test suite RC5 (January 11th 2011)

Contributions to CSS 2.1 test suite

Web authors' contributions to CSS 2.1 test suite
Received on Wednesday, 26 January 2011 15:35:00 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:55 UTC