Jump to content

[SOLVED] What is the latest method for rounding corners of CSS buttons


DataRater

Recommended Posts

That is buttons created purely in CSS.This is my 3 button code and I want to round them.

 

  <ul id="nav">

    <li id="nav_viewall"><a href="ShopControl.php?TabbedPage=ViewAll">ViewAll</a></li>

    <li id="nav_viewone"><a href="ShopControl.php?TabbedPage=ViewOne">ViewOne</a></li>

    <li id="nav_login"><a href="ShopControl.php?TabbedPage=Insert">Login</a></li>

  </ul>

 

  I am assuming you are trying to do flexible round corner boxes/buttons.  I am no expert but I do have a cool book. It suggests that you use 3 images to make up a button/box/tab.  the solid background - I guess that could just be the background of the div and then at either end a round long round cornered piece that will make up the edges of the button/box.  You then put the link inside the solid div so it can be clicked on.  I couldn't find a web reference to exactly that but you could probably look up douglas bowman's sliding door technique.  It sort of shows you what I mean.

 

HTH

 

Kate

Presentational aspects should be covered by presentational code - so use css to do your bidding.

 

DON'T go adding extra markup to get these images in. Style a plain old button and use css properties for rounded corners - ie won't see it but so what?

Presentational aspects should be covered by presentational code - so use css to do your bidding.

 

DON'T go adding extra markup to get these images in. Style a plain old button and use css properties for rounded corners - ie won't see it but so what?

 

I don't think you understand that css can't full style everything. Sometimes it is needed to add extra markup. I don't like that and at times it is very frustrating.

I don't think you understand that css can't full style everything...

 

Really? What gives you impression that I don't understand?

 

ToonMariner, I didn't mean any disrespect, so don't take it the wrong way. I was simply stating that sometimes IT IS necessary to add extra markup to get the effect you are looking. There are obvious reasons, such as stupid IE and non-standardized use of CSS2 (across all platforms).

sometimes there are - sometimes however you just say well ie doesn't support the nice css I am using but it still looks really good so I am not going to bother with the extra markup or the hack or even the javascript that might make IE ball ball a litle better...

 

Just a thought for those progessive enhancement slackers out there...

DON'T go adding extra markup to get these images in. Style a plain old button and use css properties for rounded corners - ie won't see it but so what?

 

That's great if you're working on personal projects...but if you're building large websites for big clients then they couldn't give a shit about you having to stick an extra span in the html to get produce rounded corners. Ideally I wouldn't want to add "extra" markup just to create completely fluid/elastic rounded boxes...but that's why I wouldn't include them in my personal designs. Eventually css will allow those types of designs (complex "custom/rounded borders") to be realised without needed extra markup.

 

Where I do leave IE6 out in the cold is :first-child. I just use expressions to get the job done and those visiting the site with IE6 and js disabled are just going to have a minor aesthetic difference in a few instances.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.