I have a nice rounded div in IE with the following code:
The CSS:
But in Firefox, the two upper gifs don't stay at the top, so there's still a background coloured gap over them...
Any hints?
I wouldn't like to use the firefox moz-border-radius, it's still unstable.
Code:
<div id="adress">
<p><img src="images/tl.gif" width="15" height="15" class="imageleft" /><img src="images/tr.gif" width="15" height="15" class="imageright" /><br />
<span class="Style2">
SOME TEXT
</span>
<img src="images/bl.gif" width="15" height="15" class="imageleft" /><img src="images/br.gif" width="15" height="15" class="imageright" /></p>
</div>
Code:
img.imageleft{
float:left;
}
img.imageright{
float:right;
}
#adress {
position:absolute;
left:411px;
top:310px;
width:160px;
z-index:3;
background-color: #808080;
}
.Style2 {
margin-left:10px;
line-height: 1.5em;
font-size: .9em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align:justify;
width:160px;
float: left;
}
Any hints?
I wouldn't like to use the firefox moz-border-radius, it's still unstable.