Problem with css and firefox 1

[Qrosity]

I have a nice rounded div in IE with the following 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>

The CSS:

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

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.

 

[ca8msm]

There are lots of methods to create rounded corners, some use js, some use just css, some use images and some use a mixture of them all. I'd suggest visiting:

http://www.smileycat.com/miaow/archives/000044.php

as this has a roundup of all of the methods, so I'd pick one of these that is relevant to whichever method you want to use.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[Lowet]

It's caused by the P element which adds the space. Why use the P? It's not even a paragraph..

I removed the P tags and now it works in MSIE/NS/FF/OP..

Your 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>

New code:

<div id="adress">
<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" />
</div>

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[Qrosity]

Yeah, you are right, this <p> stuff remained there from ancient times, but I was too blind to notice it...
That's life.

Thanxxx a lot !!

 

[Lowet]

You're welcome

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[ChrisHunt]

I would strongly suggest you investigate some of the techniques on the page cat8msn recommended, rather than cluttering up your markup with a whole bunch of <img> elements.

If you change the way you want to present the address, or if browsers suddenly start supporting a consistent way of rounding corners, you should be able to just change the stylesheet rather than all the HTML.

Incidentally, I'm not sure why you're finding -moz-border-radius "unstable". I find it very stable, but obviously it only works on mozilla-based browsers. I'm not too bothered by this on most of my sites - IE users get square corners, Moz users get round ones, it's no big deal IMO.

A star to cat8msn for that link.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Qrosity]

The smileycat is already on my favourites and will stay there. It is a pretty good site.