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

[DataRater]

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>

 

[rhodesa]

if you are just doing buttons, why not use a <button> tag?

[kate_rose]

  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

[DataRater]

rhodesa,

 

If you mean why don't I use an image, its due to bandwidth and also I like CSS style 'buttons'.

 

 

[ToonMariner]

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?

[TheFilmGod]

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.

[ToonMariner]

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

 

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

[TheFilmGod]

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).

[ToonMariner]

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...

[bronzemonkey]

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.