rounding your tables corners

  • oblongintellect
  • Novice
  • Novice
  • oblongintellect
  • Posts: 28

Post 3+ Months Ago

I'm sure someone is going to make me feel really stupid here but I am at a loss. I want to make a table with rounded corners is there anyway to accomplish this in code without using a background image :?:
  • alpha5th
  • Newbie
  • Newbie
  • alpha5th
  • Posts: 8
  • Loc: Denmark

Post 3+ Months Ago

Looks like it can be done with CSS.

Look for "Pure CSS rounded corners" on this page http://www.markschenk.com/cssexp/
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Quote:
This technique works with browsers that support the :before and :after pseudoelements. This leaves MSIE out in the cold, but it should work fine in Opera and Mozilla.


Not really much use in real terms if it won't work in IE. Plus you still need to create the corner images.

I don't think you will be able to do it without images to be honest. How come you don't want to use images?
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

rtm223 wrote:
Not really much use in real terms if it won't work in IE. Plus you still need to create the corner images.

I don't think you will be able to do it without images to be honest.

Not true. There are no images used at all. Pure CSS only, and is cross-browser compatible as well (including IE browser). I don't think you read into it far enough.

Look at this page...
http://www.markschenk.com/cssexp/rounde ... edbox.html

Look at how the last (bottom) box displays in all browsers.

That page uses this stylesheet...

/* page layout */
body { background-color: black; margin: 0px; padding: 10px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify; }
h1, h2 { background-color: #A8A8A8; padding: 5px 10px; color: maroon; border-left: 10px maroon solid; }
h2 { border-left: 5px maroon solid; }
#content { background-color: #D3D3D3; padding: 20px 20px; margin: 0px 50px; }
.example { background-color: #C5C5C5; padding: 10px; margin: 10px 0px 10px 10px; }
ul { margin-top: -10px; padding-top: 0px; }
a:link, a:visited, a:hover, a:active { text-decoration:underline; color: maroon; }
div.spacer { clear: both; }

/* table for browser support */
table.support { background-color: silver; border: 1px solid black; font-size: 12px;}
table.support tr:first-child td { font-weight: bold; }
table.support td { text-align: center; border: 1px black solid; height: 15px; width: 15px; background-color:#BDB76B; padding: 2px; }
table.support caption { display: table-caption; caption-side: bottom; font-style: italic; text-align: left;}
table.support td.yes { background-color: Green; }
table.support td.no { background-color: Red; }
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

Woops! Posted the external stylesheet. I meant to post the style directly used on that page instead...

<style type="text/css">
<!--
/* general and specific styles for the boxes */
.box { width: 200px; height: 200px; position:relative; overflow: hidden; background-color: #B0C4DE; color: #000000; }
.box p { padding: 20px; color: #000000; }
.x { color: #B0C4DE; }

/* generated content in the boxes */
div.box p { content: "This experiment tries to create a rounded box with pure CSS. It uses bullets for the corner effects. This version only works in Opera 7 as it creates the bullets with CSS generated content."; }
div.box + div.box p { content: "This version also works in Mozilla, IE6 and Opera 6 as it has the bullets defined in the HTML code."; }
div.box + div.box + div.box p { content: "This box demonstrates how it would look in real life."; }

/* The actual corners */
.box div { height: 20px; width: 20px; background-color: #D3D3D3; font-family: Times, Times New Roman; font-size: 160px; line-height: 40px; position: absolute; overflow:hidden;}
.box span { position: absolute; content: "\2022"; }

/* accurate positioning */
.topleft { top: 0px; left: 0px; }
.topleft span { top: -1px; left: -9px; }
.topright { top: 0px; right: 0px; }
.topright span { top: -1px; left: -27px; }
.bottomleft { bottom: 0px; left: 0px; }
.bottomleft span { top: -19px; left: -9px; }
.bottomright { bottom: 0px; right: 0px; }
.bottomright span { top: -19px; left: -27px; }


/* My thanks to Sophia Kapterian for improving the accuracy of the positioning */
-->
</style>
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

Interesting - learn something new everyday! Thanks.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

:oops: :oops:

Sorry I looked at the page where it said the best solution for rounded boxes is here.

Sorry all.

It is still not that useful in a practical sense, only in an accademic sense, as most people will see a horrible mess.
  • oblongintellect
  • Novice
  • Novice
  • oblongintellect
  • Posts: 28

Post 3+ Months Ago

Thanks for the tips guys I'll give them a try and see what I come up with.

-OI
  • thecodman
  • Graduate
  • Graduate
  • User avatar
  • Posts: 171
  • Loc: CT, USA

Post 3+ Months Ago

Anyway to do this in plain html without images?
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

thecodman wrote:
Anyway to do this in plain html without images?


Errr... ?? :shock:
There are NO images used at all. That's the whole point. I suggest that you go back to my initial post in this thread and begin reading again.

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 81 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.