SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Location
    Malta
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded corners in Validate CSS

    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
    Code CSS:
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    }

    2
    http://www.amaze.com.mt/menu/index.html

    3


    4
    Code CSS:
    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;
    }

    5
    Code HTML4Strict:
    <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>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    1) You are missing a doctype which means you are in quirks mode.

    If you want rounded borders for all you have to create images (dno't HAVE to but it's best) and place them on the corners.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    -moz-border-radius-topleft

    Properties like this will not validate, but that does not mean you can't use them. You can also use the -webkit- (Chrome & Safari) versions, and the css3 property border-radius to future-proof it.
    http://www.css3.info/preview/rounded-border/

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    What about -khtml-?
    2) Tell us when you cross-post in another forum
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I neglect Konqueror because I haven't worked with a site with enough Konqueror users (<0.1&#37; currently on my main site). I mention Chrome because the same declaration works with Safari, and Safari I usually get about 5%, so why not?

    Your mileage may vary .

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I played a little with your code.

    Here is the result as a stand alone, not very semantic but that's the backside not using images (or decent browsers).
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Untitled</title>
    <style type="text/css" media="all">
    html,body, header, menu, ul, li {
    	margin: 0;
    	padding: 0;
    }
    #header {
    	height: 120px;
    	background: #000;
    }
    #menu {
    }
    #menu ul {
    	margin: 0;
    	padding-left: 100px;
    	height: 40px;
    	background: #000;
    }
    #menu li {
    	float: left;
    	margin: 0 0.4em;
    	list-style: none;
    	font: 87.5%/1 Arial, Helvetica, sans-serif;
    	font-size: 14px;
    }
    #menu b{
    	float: left;
    	position: relative;
    	font-weight:normal;
    }
    #menu .current b{
    	margin: 0 3px;
    	border: solid #999;
    	border-width: 0 2px;
    	height: 1px;
    	background: #fff;
    }
    #menu .current b b{
    	margin: 1px -3px 0;
    	border-width: 0 1px;
    	border-color: #ccc;
    }
    #menu .current b b b{
    	margin: 1px -2px 0;
    }
    #menu .current b b b b{
    	border-color: #999;
    	height: 2px;
    }
    #menu li a {
    	float: left;
    	position: relative;
    	margin: 2px -1px -35px;
    	padding: 11px 11px 0;
    	height: 24px;
    	color: #999;
    	text-decoration: none;
    }
    #menu .current a {
    	padding: 8px 10px 0;
    	height: 27px;
    	background: #fff;
    	color: #000;
    }
    #menu a:hover {
    	color: #fff;
    }
    #menu .current a:hover {
    	color: #000;
    }
    </style>
    </head><body>
    	<div id="header">
    	</div>
    	<div id="menu">
    		<ul>
    			<li><b><b><b><b><a href="#">Home</a></b></b></b></b></li>
    			<li><b><b><b><b><a href="#">About Us</a></b></b></b></b></li>
    			<li class="current"><b><b><b><b><a href="#">Services</a></b></b></b></b></li>
    			<li><b><b><b><b><a href="#">Contact Us</a></b></b></b></b></li>
    		</ul>
    	</div>
    </body></html>
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Location
    Malta
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Erik J,
    Wow man what a code
    Your's the best reply so far!
    I think this is the only way to do it with Validate CSS?
    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •