IE5 and borders?

[vdonatiello]

.box1 { 
border:1px solid #666666; 
padding:0px 10px; 
background-color:white; 
}

<div class="box1"> 
some text 
</div>

it is ok on IE6 but the borders are NOT applied on IE5

is that correct? is there any work-around?

Thanks for your time

[SuzyUK]

vdonatiello

this should work OK
and I tested this in IE5. No problems here.. borders are showing fine

try validating your CSS file [jigsaw.w3.org]

anyone else know of any issues?

Suzy

[vdonatiello]

doctype> html 4.01 strict

here is the exact HTML and CSS code:

<div class="footer">
<span class="button"><a href="javascript:window.close();">close window</a></span>
</div>

...
.footer {
border-top:1px solid #666666;
text-align:right;
padding:10px;
height:30px;
}
.button, .button a, .button a:link, .button a:visited, .button a:hover, .button a:active {
border:1px solid #666666;
padding:0px 10px;
background-color:white;
color:#666666;
text-decoration:none;
}
...

on IE6 no problem, but on IE5/Win the border and the padding is NOT taken into account, while last 3 attributes (background, text-decoration and color are OK)

thanks very much for your time

[SuzyUK]

hi..

ahhh ...the problem is the <span> (or so I thought ;))

I tried changing the span to a div.. but that didn't work..

what did work was to change the <span> (inline) to a <div> (block) then make the .button a into display: block; float: right;

not sure why this is .. I haven't worked with IE5's foibles for a while ;) (kinda like NN4 really)

but it suggests that it needs the <a> anchor element to be block level (it's inline by default) before it will apply the borders?

If you just make it display: block; it will take up 100% of the page.. so giving it a width will make it into the button.. floating right would do it too.. but floated elements are supposed to have widths.. but of a catch 22 ;)

change span to div

then this CSS works.. but note what I said above about widths..

.button a {
border: 1px solid #666666;
padding: 0px 10px;
background-color: #ffc;
color:#666666;
text-decoration:none;
display: block;
float: right;
}

Suzy