Topic: Problem with Round Corners – CSS Layout (Page 1 of 1)

I am trying to create round corners in CSS based on the tutorial at ?A List Apart? ( http://www.alistapart.com/articles/customcorners2/). I made the graphics and coded the CSS & html. Distinction in the graphics and CSS do exist, hence the reason the copy & paste code did not work. The page does not render as expected in Firefox in particular the footer section. I have spent a week reviewing the CSS and have not discovered my misstep. It?s probably staring me in the face. I beg someone to review my CSS and lead me to a resolving the situation. I am having difficulty understanding margins, relative positioning, and padding in CSS.

I have uploaded a live site at geocities since this a personal endeavor without a web home. You could view the site here; http://www.geocities.com/robert_neville310/aquav1.html .
I placed border around the footer class and <p> tag to show the incorrect spacing associated with these styles. I was hoping the border would help align the element, but I have not found the logical pattern behind the spacing; changing the padding only makes hard to align the graphics. The padding of the h3 tag (top of the box) seems excessive as well. Let me know if you could lead me in the right direction and determine if a pattern exist. The padding logic will help when changing the graphic sizes. Please clarify suggestions with examples, links, or other generally useful information.

Hello and welcome in the Asylum.

I'm not fond of relying on additional markup to achieve a visual effect. Actually round corners can be done on a single HTML element with CSS2. Check the W3C CSS tips & tricks : Rounded corners and shadowed boxes and/or Rounded corners in CSS to see how it can be done.

Now as for your understanding of the margin and padding, you should read the : CSS2 specs : Box dimensions, and for visual explanation the CSS box model hierarchy and the Interactive Basic CSS Box Model Demo.

[edit] few clicks in the FAQ led me to How do I get rounded corners on my box/DIV using CSS and no tables? [/edit]

Hope that helps,



(Edited by poi on 01-25-2005 03:34)

Rounded corners made using only CSS are easily broken by increasing/decreasing the font size. Use php to generate them on-the-fly.

http://hardgrok.org/blog/item/20/

viol: While you're perfectly right about the methods involving the use of additionnal markup, AFAIK, the rounded corners made with :before and :after pseudo classes plus the content property are completely imune to the problem of font size you mention. At least, I've never met a problem with this method. On the other hand the rounded corners only appear with a CSS2 compliant browser, so it may be problematic

Can you please show me a page where your method is being used because I have searched the whole 8,000,000,000 pages of Google and couldn't find a rounded corner made only of CSS that would really work. The best approach, so far, was phpcorner, by hard grok.

The link entitled Rounded corners in CSS in my first message illustrate the fully CSS2 method. In Opera and Gecko based browsers it works like a charm and you can change the font-size at will, but in IE you must say bye bye to the rounded corners.

[edit] they forgot to add the line-height: 0.1; font-size: 1px; rules in the :before part. As it is now, if you go crazy on Ctrl+plus the top left corner can be misplaced if the height of character exceed the height of the :before part. [/edit]



(Edited by poi on 02-03-2005 19:43)

So, IE is not CSS2 compliant?

Well, although I don't like IE, I can't think of a site that doesn't support it. So, back to phpcorner.

Thanks anyway for the link, poi.

The Thrashbox that is linked to in the FAQ I have used quite a bit, it works great.

If you make your background images wide/tall enough you shouldn't have much of a problem with resizing fonts.

(Edited by Nathus on 02-03-2005 23:02)