css rounded corners

[geoffmuskett]

Hello, happy new year to all!

I'm attempting to use css to get rounded corners, which I have done: http://www.bluetomatoes.co.uk/testbox.htm

The only problem is I want the arrow to be touching the left hand side, like it is in firefox, but in IE there is an annoying little 3 or 4 pixel gap, here's the code, has anyone got any ideas? To be honest the code was generated through a website.

Code: Select all

<div class="rbroundbox">
    <div class="rbtop"><div></div></div>
        <div class="rbcontent">
            <p><img align="left" src="images/logo17_arrow.gif">Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Duisornare ultricies libero. Donecfringilla, eros at dapibus fermentum,tellus tellus auctor erat, vitae portamagna libero sed libero. Mauris sed leo.Aliquam aliquam. Maecenas vestibulum.</p>
        </div><!-- /rbcontent -->
    <div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->

Code: Select all

body {background:#0066FF;}

/* set millions of background images */
.rbroundbox { background: url(nt.gif) repeat;  background:white; }
.rbtop div { background: url(images/corner_top_left.gif) no-repeat top left; }
.rbtop { background: url(images/corner_top_right.gif) no-repeat top right; }
.rbbot div { background: url(images/corner_bottom_left.gif) no-repeat bottom left; }
.rbbot { background: url(images/corner_bottom_right.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 0px;
}
.rbcontent { margin: 0 7 7 0px;}
.rbroundbox { margin: 1em auto; }

To be honest the code was generated through a website, but I do now understand it.

Thanks,

Geoff

[JacobHaug]

Where you said...img align="left", change that to valign="left". That should get you started on the right path. Did not check the results but I am sure it would move that over for you....let us know if their is anything else we can do.

[ukgeoff]

That gap is most likely caused by diferrences in default margin/padding.

To avoid this kind of issue, always start your css with:

Code: Select all

* {
   margin: 0;
   padding: 0;
}

That way you know where you are starting from and any margin and padding are down to what you have specified.

You have another problem with the way you have done things.

Because of my personal settings in Firefox, the height of the text box is such that the red arrow obscures the bottom-left corner.

[geoffmuskett]

Thanks for your replies. I've tweeked it so the arrow is now a background image. valign worked except the text was no longer central.

How does this look with your preferences ukgeoff?

http://www.bluetomatoes.co.uk/testbox.htm

Thanks,
Geoff

[ukgeoff]

Yes, that works. Also in Opera, IE6 & IE7.

[geoffmuskett]

Fantastic, thanks a lot!

Geoff

[Ryan Fait]

If only browsers were smart enough to support CSS rounded corners already. *sigh

[moojoo]

CSS3 has a corner-radius: thingy.

[Ryan Fait]

That's what I mean, but it's not widely supported yet