PDA

View Full Version : CSS - Rounded corners - How do I get them to work



Morgenmuffel
15-04-2008, 07:20 PM
Exactly that, CSS and I are not the greatest of friends, and I can't figure out how to get rounded corners on my heading and menu boxes, I can probably do it using tables but would prefer a CSS solution as it seems more elegant


Thanks

sal
15-04-2008, 07:53 PM
There's a bunch of solutions to this which none so far AFAIK is better than all others in every situation so just check out this page which has a pretty good round up of rounded corner techniques with CSS -

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

beeswax34
15-04-2008, 08:29 PM
Awesome link Sal. Thanks!

Morgenmuffel
15-04-2008, 09:15 PM
Awesome link Sal. Thanks!

I agree

Morgenmuffel
16-04-2008, 03:40 PM
Ok, I'm Back

This is what I am trying to achieve (this is done in tables)

http://nigel.geek.nz/Test-corners/

For some reason it isn't working in IE6 (must have really muffed something for a table not to work properly), I am having issues with CSS based solutions that work across all browsers, I thinkf about 70 - 80% of site users are using IE6 or greater the majority of the rest are Firefox with a few Safari and Opera thrown in

I am slowly getting through those examples given by Sal, but all the ones that make sense to me (eg I understand them) don't seem to be cross browser compliant

Morgenmuffel
20-04-2008, 11:47 PM
I'm back again, i have almost got it sorted, It's not perfect but I do understand this, some of the other methods were beyong me

Heres the latest (http://nigel.geek.nz/Test-corners/index.html)

All three main browsers are showing it differently

Firefox and Opera are showing it correctly although opera has a line through the header image

IE 6 has an issue with the content section, this is the main problem i am having

Any help would be appreciated

davehartley
21-04-2008, 01:51 AM
IE 6 has an issue with the content section, this is the main problem i am having

I see in your HTML that you set the table width to be "80%". I think that the problem here is IE is interpreting the '80%' as 80% of the window, rather than the containing element? I had a bit of a play, and managed to get IE7 'behaving' simply by setting the width of the #content element to 100% in the CSS -- that seemed to be enough to get IE to play along.

I have had huge problems in the past, getting sites that are written to a standard, and that work fine in Firefox and Opera, to play nicely in IE. Nice of Microsoft to make it easy, eh! :groan:

kahawai chaser
21-04-2008, 03:06 AM
Maybe visit about com for a tutorial on css for I.E. vs Firefox (http://webdesign.about.com/od/internetexplorer/a/aa082906.htm), and the general css topics (http://webdesign.about.com/od/css/Cascading_Style_Sheets.htm) page. It's where I subscribe...

Morgenmuffel
21-04-2008, 08:12 PM
Ok i Have got it working fine in FF and IE6 however Safari 3.1.1 and Opera 9.25, both have the same issue a white line between the 2 spans in my header section, and i can't figure out how to get around it
the css


/* Header stuff starts here */
.headmenu {
/* background-color: #0099FF; causes lines around corners
*/ height: 66px;
}
div.row {
clear: both;
background-color: #0099FF;
/* padding-top: 2px; */
}
div.row span.left {
background-color: #0099FF;
float: left;
/* */ background-image: url(images/logo-bg.jpg);
background-repeat: no-repeat;
text-align: left;
font-weight: bold;
color: #FFFFFF;
width: 60%;
font-size: small;
height: 66px;
}
div.row span.right {
background-color: #0099FF;
float: right;
background-image: url(images/right.gif);
background-repeat: no-repeat;
background-position: right; /*ggghhhhhh */
text-align: right;
font-weight: bold;
height: 66px;
color: #FFFFFF;
width: 40%; /* */
font-size: small;
word-spacing: 1em;
}



The relevant html


<div class="headmenu">
<div class="spacer">
</div>
<div class="row">
<span class="left"><!-- <img src="images/logo-bg.jpg"> -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="images/logo2.gif" alt="logo thingie" width="287" height="63" align="middle">
</span>
<span class="right">
<a href="index.php">Home</a> <a href="Services.php">Services</a> <a href="Contact.php">Contact</a>
</span>
</div>
<div class="spacer">
</div>
</div>

sal
21-04-2008, 10:01 PM
If you're not overly worried about extraneous elements (what most solutions rely on) then this page has a pretty straight forward solution. It uses anaanimated image for the corners but simply replace this with a static one and you're sorted.

If only -moz-radius worked (http://nz.neopages.org/help/round-corners/) across all browsers, huh.

sal
21-04-2008, 10:12 PM
Forgot the link I was plugging in the first paragraph -

http://smhill.net/resources/silly/animated_borders/