Rounded corners in Validate CSS

Discussion in 'CSS' started by ziffa27, May 21, 2009.

0
  1. #1
    Hi all,

    I would like to create a menu that has the following:
    current - top left rounded corner, top right rounded corner and background of the same colour (see the below image for example).
    These have to be in Validate CSS and without images
    I have found the following but it is not a Validate CSS and those not work in IE

    Any help please?

    Underneath please find the following:

    1. What I have found (not CSS Validate)
    2. Link for the webpage (work only in Firefox - rounded corners)
    3. Image (example)
    4. CSS (code)
    5. XHTML (code)

    Thanks in advance

    Ziffa27

    1
    
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
    Code (markup):
    2
    http://www.amaze.com.mt/menu/index.html

    3
    [​IMG]

    4
    
html, body, header, menu, ul, li {
	margin: 0;
	padding: 0;
}

#header {
	background: #000000;
	height: 120px;
}

#menu {
	background: #000000;
	height: 40px;
	padding-left: 100px;
}

#menu ul {
	list-style: none;
}

#menu li {
	float: left; width: inherit;
	margin: 0 0.4em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 10px;
}

#menu li a {
	color: #999999;
	display: block;
	padding: 15px 10px;
	text-decoration: none;
}

#menu li a:hover {
	color: #FFFFFF;
}

#menu ul li.current a {
	background-color: #FFFFFF;
	-moz-border-radius-topleft: 5px;	/*work only in Firefox*/
	-moz-border-radius-topright: 5px;	/*work only in Firefox*/
	color: #000000;
}

#menu ul li.current a:hover  {
	color : #000000;
}
    Code (markup):
    5
    
<html>
<head>
<title>Welcome to Amaze! - Menu</title>
<style type="text/css" media="all">@import url(style.css);</style>
</head>
<body>
	<div id="header">
	</div>
	<div id="menu">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li class="current"><a href="#">Services</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</div>
</body>
</html>
    HTML:
     
    ziffa27, May 21, 2009 IP
  2. Cameljourney

    Cameljourney Prominent Member

    Messages:
    1,731
    Likes Received:
    107
    Best Answers:
    0
    Trophy Points:
    300
    #2
    border radius will not work on non-mozilla browser. If you don't want to use image for rounded corner, then most likely the solution is using javascript to handle that.

    I've heard about CurvyCorners Script, but i never try it.
     
    Cameljourney, May 23, 2009 IP
  3. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #3
    Though the validator flags the vendor extensions as invalid (-moz -webkit etc.) they ARE valid markup and defined by the W3C spec so you can feel free to use them. Webkit has rounded corners now but I don't recall if Opera does. Forget IE. It could take another 3 years or more.
     
    drhowarddrfine, May 24, 2009 IP
  4. ziffa27

    ziffa27 Greenhorn

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    Thanks to all :)
     
    ziffa27, May 25, 2009 IP
  5. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #5
    For smooth rounded corners, using image or script. The script uses anti-aliased technology, which blends the edges colors look smooth.
     
    unigogo, May 30, 2009 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Non-image css rounded corners that works in all browsers? Gotcha covered.

    http://battletech.hopto.org/html_tutorials/rounded_css_borders/

    Though really - just suck it up and use an image... given the simplicity that's one markup hook and one image via sliding doors... even with hover/current states that's one simple image.

    BTW, I'm seeing little to no good reason for that wrapping DIV.
     
    deathshadow, May 31, 2009 IP
  7. ziffa27

    ziffa27 Greenhorn

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #7
    Hi Unigogo / Deathshadow
    Unigogo - I want them to be CSS Validate so script it is not good
    Deathshadow - Erik J already show me that code in sitepoint.com
    Thanks to all
     
    ziffa27, Jun 1, 2009 IP