son Posted September 2, 2010 Share Posted September 2, 2010 Rounded corners for container holding main content for web pages are causing issues as I cannot find a common ground for all browser (IE 7 and above, Firefox, Safari, Chrome). My code is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Website</title><style type="text/css">* {margin:0; padding:0;}#content {background-color:#CFC78A;width:475px; float:left;margin-top:4px; margin-right:43px;}#content li {list-style:circle; margin-left:15px;}#contentTop {background:#CFC78A url(layout/contentTopRight.gif) right top no-repeat; padding:0 15px 0 0; min-height:150px; }#contentTop h1 { float:left; width:450px;background:#CFC78A url(layout/contentTopLeft.gif) left top no-repeat; padding:15px 0 0 15px;}#contentTop h2, #contentTop ul {padding-left:15px;}#contentTop p {padding-left:15px;}#contentTop a {font-weight:bold;}#contentBottom {text-align:right;background:#CFC78A url(layout/contentBottomLeft.gif) left bottom no-repeat; padding-bottom:15px;}#contentBottom p {display:inline;background:#CFC78A url(layout/contentBottomRight.gif) right bottom no-repeat;font-size:10px; padding:15px 15px 15px 0;}</style></head><body><div id="content"><div id="contentTop"><h1>Heading</h1><br clear="left" /><p>main text</p></div><div id="contentBottom"><p><a href="link.php" title="Link text">Link text</a></p></div></div></body></html> #contentBottom p is not at the bottom of #contentBottom. Although there are no margins, it always adds a little bit under #contentBottom p. Changing it to padding-bottom:13px solves it for Firefox, but does not work for other browser...Son Link to comment Share on other sites More sharing options...
es131245 Posted September 6, 2010 Share Posted September 6, 2010 http://www.css3.info/preview/rounded-border/or my codediv {border:thin solid #999;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;-khtml-border-radius:15px;behavior:url('source/br.htc');background-color:black;} behavior:url('source/br.htc');will help if css wont helphttp://code.google.com/p/curved-corner/dow...rder-radius.htc Link to comment Share on other sites More sharing options...
Mark H Posted September 6, 2010 Share Posted September 6, 2010 I had a similar problem trying to create rounded corners using a graphic.The bottom graphic would detatch from the bottom as soon as I entered text.I found that this was solved by adding a <br /> immediately after all the text.I'm not sure if this is an "acceptable" way of doing it, though, but it did work for me.Mark.P.S. Note that browser specific code will not validate with W3C. If you want validation, do not use a series of browser specific code. Link to comment Share on other sites More sharing options...
son Posted October 8, 2010 Author Share Posted October 8, 2010 I had a similar problem trying to create rounded corners using a graphic.The bottom graphic would detatch from the bottom as soon as I entered text.I found that this was solved by adding a <br /> immediately after all the text.I'm not sure if this is an "acceptable" way of doing it, though, but it did work for me.Mark.P.S. Note that browser specific code will not validate with W3C. If you want validation, do not use a series of browser specific code.Thanks Mark. I use now:border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;which seems to do the trick. Yeah! Seems that the solution is so much easier than I thought. It is great that you can now created rounded corners via css...SonBy the way, just to say: sorry for getting back so late. Cought (again) a nasty something that took ages to fade away (and so does my money;-) Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.