css rounded corners

This is a discussion on "css rounded corners" within the Web Page Design section. This forum, and the thread "css rounded corners are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Jan 3rd, 2007, 09:12
Junior Member
Join Date: Jul 2006
Location: Cornwall
Age: 26
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
css rounded corners

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
Reply With Quote

  #2 (permalink)  
Old Jan 3rd, 2007, 11:02
JacobHaug's Avatar
SuperMember

SuperMember
Join Date: Dec 2005
Location: On Internet
Posts: 4,859
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rounded corners

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.
Reply With Quote
  #3 (permalink)  
Old Jan 3rd, 2007, 11:04
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rounded corners

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.
Reply With Quote
  #4 (permalink)  
Old Jan 3rd, 2007, 12:25
Junior Member
Join Date: Jul 2006
Location: Cornwall
Age: 26
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rounded corners

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
Reply With Quote
  #5 (permalink)  
Old Jan 3rd, 2007, 13:30
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rounded corners

Yes, that works. Also in Opera, IE6 & IE7.
Reply With Quote
  #6 (permalink)  
Old Jan 3rd, 2007, 15:19
Junior Member
Join Date: Jul 2006
Location: Cornwall
Age: 26
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rounded corners

Fantastic, thanks a lot!

Geoff
Reply With Quote
  #7 (permalink)  
Old Jan 3rd, 2007, 19:26
Ryan Fait's Avatar
SuperMember

SuperMember
Join Date: May 2006
Location: Las Vegas
Posts: 3,786
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rounded corners

If only browsers were smart enough to support CSS rounded corners already. *sigh
Reply With Quote
  #8 (permalink)  
Old Jan 4th, 2007, 16:03
moojoo's Avatar
Moderator
Join Date: Aug 2005
Location: Texas
Age: 31
Posts: 1,946
Blog Entries: 1
Thanks: 0
Thanked 29 Times in 29 Posts
Re: css rounded corners

CSS3 has a corner-radius: thingy.
__________________
I hate IE 6. Just sayin....
http://www.mevans76.com
Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Reply With Quote
  #9 (permalink)  
Old Jan 4th, 2007, 20:40
Ryan Fait's Avatar
SuperMember

SuperMember
Join Date: May 2006
Location: Las Vegas
Posts: 3,786
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rounded corners

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

Tags
rounded corners

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

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


All times are GMT. The time now is 13:47.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43