Forum Home
Press F1
 
Thread ID: 88935 2008-04-15 07:20:00 CSS - Rounded corners - How do I get them to work Morgenmuffel (187) Press F1
Post ID Timestamp Content User
659023 2008-04-15 07:20:00 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 		Morgenmuffel (187)
659024 2008-04-15 07:53:00 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 -

www.cssjuice.com 		sal (67)
659025 2008-04-15 08:29:00 Awesome link Sal. Thanks! beeswax34 (63)
659026 2008-04-15 09:15:00 Awesome link Sal. Thanks!

I agree 		Morgenmuffel (187)
659027 2008-04-16 03:40:00 Ok, I'm Back

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

nigel.geek.nz

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 (187)
659028 2008-04-20 11:47:00 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 (nigel.geek.nz)

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 		Morgenmuffel (187)
659029 2008-04-20 13:51:00 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: 		davehartley (3487)
659030 2008-04-20 15:06:00 Maybe visit about com for a tutorial on css for I.E. vs Firefox (webdesign.about.com), and the general css topics (webdesign.about.com) page. It's where I subscribe... kahawai chaser (3545)
659031 2008-04-21 08:12:00 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: color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> #0099FF; causes lines around corners
*/ color: #444444; font-style:italic; "> height: color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> 66px;
}
div.row {
clear: both;
background- color: color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> #0099FF;
/* padding-top: 2px; */
}
div.row span.left {
background- color: color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> #0099FF;
color: #444444; font-style:italic; "> float: color: #444444; font-style:italic; "> left;
/* */ background-image: url(images/logo-bg.jpg);
color: #444444; font-style:italic; "> background-repeat: color: #444444; font-style:italic; "> no-repeat;
text-align: color: #444444; font-style:italic; "> left;
color: #444444; font-style:italic; "> font-weight: color: #444444; font-style:italic; "> bold;
color: #FFFFFF;
width: 60%;
font-size: small;
color: #444444; font-style:italic; "> height: color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> 66px;
}
div.row span.right {
background- color: color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> #0099FF;
color: #444444; font-style:italic; "> float: color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> right;
background-image: url(images/right.gif);
color: #444444; font-style:italic; "> background-repeat: color: #444444; font-style:italic; "> no-repeat;
background-position: color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> right; /*ggghhhhhh */
text-align: color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> right;
color: #444444; font-style:italic; "> font-weight: color: #444444; font-style:italic; "> bold;
color: #444444; font-style:italic; "> height: color: #444444; font-style:italic; "> color: #444444; font-style:italic; "> 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> 		Morgenmuffel (187)
659032 2008-04-21 10:01:00 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 (nz.neopages.org) across all browsers, huh. 		sal (67)
1 2