need help? css staircase effect

Discussion in 'Web Design and Development' started by rusty813, Mar 14, 2010.

  1. rusty813 macrumors newbie

    Joined:
    Mar 14, 2010
    #1
    i have a staircase effect i cant figure to resolve

    HTML:
    <html>
    <head>
    	<title>Cicilia The Blondie</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    	<ul id="nav">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">About me</a></li>
    		<li><a href="#">Contact me</a></li>
    		<li><a href="#">Reservation</a></li>
    		<li><a href="#">Calendar</a></li>
    		<li><a href="#">Photos</a></li>
    		<li><a href="#">Members</a></li>
    	</ul>
    </body>
    </html>
    
    CSS:
    {
    	margin: 0;
    	padding: 0;
    	}
    
    body {
    	font-size: 62.5%;
    	font-family: Bickham Script Pro, Chaparral Pro, Times New Roman;
      	background: url(images/body-bg.jpg) repeat-y;
    	}
    
    ul#nav {
    	height: 186px; width: 976;
    	margin-left: 134px;
    	background: url(images/header-bg.jpg) no-repeat;
    	}
    	ul#nav li a {
    		display: inline;
    		width: 130px;
    		float: left;
    		margin-top: 150px;
    	}
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I have not heard of the staircase effect and a quick search mainly led me to articles talking about a bad effect in IE. You'll need to be more clear with what you're doing. Also, be sure to use the code blocks (# button) to make your code more readable.

    In your CSS, you need to quote your fonts.
    Code:
    font-family: "Bickham Script Pro", "Chaparral Pro", "Times New Roman";
    On ul#nav, you forgot your unit measure on width. You can discover most of this on your own by validating your CSS.
     
  3. noelister macrumors 6502

    Joined:
    Jan 15, 2005
    #3
    Also, try adding this property to the "ul#nav" style

    list-style: none;


    ul#nav {
    height: 186px; width: 976;
    margin-left: 134px;
    background: url(images/header-bg.jpg) no-repeat;
    list-style: none;
    }
     

Share This Page