|
| Width of 100% |
 |
Tue, 19 Sep 2006 23:16:00 +020 |
Hello,
I'm trying to make the code at the bottom work as it does in IE 6. Opera
9.01 shows just the link text with orange bg, on hover only the text bg
changes. In IE, the bg along the entire width of the page changes. That is
what i want, and what the 'width: 100%' does (in my understanding). Am i
doing something wrong?
I don't want to change the <td> to <div> or anything else, since in
my
larger project i will need the table.
Thanks in advance,
Tom
Code of test.htm:
<html>
<head>
<title>Test</title>
<style type="text/css">
a:link, a:visited, a:active {
width: 100%;
text-decoration: none;
color: green;
background-color: orange;
}
a:hover {
background-color: green;
}
.blank_table {
border: 1px solid black;
width: 100%;
}
.blank_table th {
vertical-align: top;
}
.blank_table td {
text-align: center;
}
</style>
</head>
<body>
<table class="blank_table">
<tr><td><a
href="javascript:void(0);">text</a></td></tr>
</table>
</body>
</html>
|
| Post Reply
|
| Re: Width of 100% |
 |
Wed, 20 Sep 2006 20:32:05 +120 |
On Wed, 20 Sep 2006 09:16:00 +1200, Tominator
<Tom.Muylle@student.kuleuven.be> wrote:
> Hello,
> I'm trying to make the code at the bottom work as it does in IE 6. Opera
> 9.01 shows just the link text with orange bg, on hover only the text bg
> changes. In IE, the bg along the entire width of the page changes. That
> is
> what i want, and what the 'width: 100%' does (in my understanding). Am i
> doing something wrong?
> I don't want to change the <td> to <div> or anything else,
since in my
> larger project i will need the table.
add display:block; to the a element.
IE's behaviour is a bug (specifying a width for an inline element should
not automatically convert it to a block element).
> Thanks in advance,
> Tom
>
> Code of test.htm:
>
> <html>
> <head>
> <title>Test</title>
>
> <style type="text/css">
> a:link, a:visited, a:active {
> width: 100%;
> text-decoration: none;
> color: green;
> background-color: orange;
> }
> a:hover {
> background-color: green;
> }
>
> .blank_table {
> border: 1px solid black;
> width: 100%;
> }
>
> .blank_table th {
> vertical-align: top;
> }
>
> .blank_table td {
> text-align: center;
> }
>
> </style>
>
> </head>
>
> <body>
> <table class="blank_table">
> <tr><td><a
href="javascript:void(0);">text</a></td></tr>
> </table>
>
> </body>
> </html>
>
>
--
|
| Post Reply
|
|
|
|
|
|
|
|
|
|