Preserved Topic: css (Page 1 of 1)

i am trying to put a border around a div. it works fine in IE 4 and up, netscape 6, and opera 5, but when i load it in netscape 4.7 there is a gap between the border and the div background. how do i get rid of this?
http://24.91.191.164/border.htm

Try this:

<DIV STYLE="position: absolute; top: 100px; left: 300px; width: 200px; border: 2px solid #FF8000; border-color: #FF8000; border-width: 2px; background-color: gray; layer-background-color: gray;">bla bla bla<BR>bla bla bla<BR>bla bla bla</DIV>

Actually, there's another way to do it to be sure that it looks exactly the same in every browser. Its a little trick that old twitchy boy showed me...

Make two divs. Your background div lets say, would be a 60 x 60 px square. So, if you want a 2px border, what you need to do is make a 56 x 56 px div and center it in the background div. That will do away with rendering issues between IE5.5, NN6, and the new IE6.

Like this:





[This message has been edited by kretsminky (edited 06-09-2001).]

The css would look like this...

.back {
position: absolute;
background: #f7941d;
top: 50px;
left: 50px;
width: 60px;
height: 60px;
}

.front {
position: absolute;
background: #0076a3;
top: 52px;
left: 52px;
width: 56px;
height: 56px;
}

Does z-index come into play here?

Well it could, but if you just write the code like this:

<div class="back"></div>
<div class="front">
bla bla bla<br>
</div>

You don't have to worry about it. But you could use some z-indexing if you really felt it necessary.

Cool

Nice tip Krets.

Thanks

- Resolutions, Of All My Fruitless Searches -