css rounded corners

geoffmuskett · #1 (**permalink**) Jan 3rd, 2007, 09:12

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 · #2 (**permalink**) Jan 3rd, 2007, 11:02

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 · #3 (**permalink**) Jan 3rd, 2007, 11:04

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 · #4 (**permalink**) Jan 3rd, 2007, 12:25

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 · #5 (**permalink**) Jan 3rd, 2007, 13:30

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

geoffmuskett · #6 (**permalink**) Jan 3rd, 2007, 15:19

Fantastic, thanks a lot!

Geoff

Ryan Fait · #7 (**permalink**) Jan 3rd, 2007, 19:26

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

moojoo · #8 (**permalink**) Jan 4th, 2007, 16:03

CSS3 has a corner-radius: thingy.

Ryan Fait · #9 (**permalink**) Jan 4th, 2007, 20:40

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Rounded Corners	Aaron1988	Web Page Design	22	Apr 18th, 2007 19:15
rounded corners question	camcool21	Web Page Design	22	Jan 29th, 2007 18:36
Css rounded div corners	AdRock	Web Page Design	2	Aug 7th, 2006 13:25
Please Help-->Problem with rounded corners in IE	SuperGrover1981	Web Page Design	6	Jul 8th, 2006 09:24
Rounded corners 1 pixel out in IE	hessodreamy	Web Page Design	1	Jan 17th, 2006 15:44

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
css rounded corners