Closed Thread Icon

Preserved Topic: css Pages that link to <a href="https://ozoneasylum.com/backlink?for=16041" title="Pages that link to Preserved Topic: css" rel="nofollow" >Preserved Topic: css\

 
Author Thread
randy
Paranoid (IV) Inmate

From: Blackstone, Ma, USA
Insane since: Jan 2001

posted posted 06-09-2001 09:25

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

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

posted posted 06-09-2001 10:13

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>

kretsminky
Maniac (V) Inmate

From: A little lower... lower... ahhhhhh, thats the spot
Insane since: Jun 2000

posted posted 06-09-2001 16:54

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).]

kretsminky
Maniac (V) Inmate

From: A little lower... lower... ahhhhhh, thats the spot
Insane since: Jun 2000

posted posted 06-09-2001 17:11

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;
}

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

posted posted 06-09-2001 18:24

Does z-index come into play here?

kretsminky
Maniac (V) Inmate

From: A little lower... lower... ahhhhhh, thats the spot
Insane since: Jun 2000

posted posted 06-09-2001 18:47

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.

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted posted 06-09-2001 21:46

Cool

Nice tip Krets.

Thanks

- Resolutions, Of All My Fruitless Searches -

« BackwardsOnwards »

Show Forum Drop Down Menu