#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    3
    Rep Power
    0

    Exclamation CSS positioning problem


    Hi, please view my site www.zambiheadshop.com where you can see the bottom right hand box headed For Sale, is too far down the page. I just cant work out why as it is positioned in the same style as the other boxes on the page.

    It is the div id #bottomNavRight that seems to be a problem

    Here is my index.php file

    Code:
    <!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>AquaTradeHub.com Low Low Prices</title> <link href="css/stdtheme.css" rel="stylesheet" type="text/css" /> <meta name="description" content="Buy and sell your fish and aquatic equipment here at low low prices. Extensive information about all fish can be found here.">   </head> <body> <div id="wrapper"> <div id="header"> <h1><a href="index.html" title="Return to home page"></a></h1> </div> <div id="topNav"> <? 	include_once("bannerAds.php"); 	echo"$bannerAd"; 	?> </div> <div id="mainNav"> <h6>Navigation</h6> <a href="index.htm" title="Home Page" class="index">Home</a></br> <a href="register.htm" title="register" class="register">Register</a></br> <a href="contact.htm" title="contact" class="contact">Contact</a></br> </div>  <div id="mainNavBottomLeft"> <h6>Care Guides</h6>  </div>  <div id="rightNav"> <h6>Login</h6>   </div>  <div id="middleNavRight"> <? 	include_once("banners.php"); 	echo"$bannerAd1"; 	?> </div>  <div id="bottomNavRight"> <h6>For Sale</h6> </div>    <div id="mainContent">  <p>Welcome to the Aqua Trade Hub, where you can buy and sell fish and other aquatic equipment. We also have a wide range of fish care guides for all the different species.</p> <br> <br> </div>     </body> </html>
    and here is my css file

    Code:
    @csscharset "UTF-8";  /*style sheet for aquatradehub.com*/  /* Copyright @2012 aquatradehub.com*/  html{overflow-y:scroll;}  /* Controls the gradient of background */  body { 	font-size:12px; 	color:#000000; 	text-align:center; 	margin:0px; 	margin-top:25px; 	background: -webkit-gradient(linear,left top,left bottom,color-stop(.25, rgb(27,57,224)), color-stop(0.65, rgb(27,188,224))); 	background: -moz-linear-gradient(center top, rgb(27,57,224) 25%, rgb(27,188,224) 65%); 	margin-top: 25px; }  /* Controls body and text attributes */  body,p,h1,h2,h3,h4,table,td,th,ul,ol,textarea,input { font-family:verdana,helvetica,arial,sans-serif; }  h1 {font-size:190%; margin-top:0px; font-weight:normal} h2 {font-size:160%; margin-top:10px; margin-bottom:10px; margin-left:3px; font-weight: normal; text-align: left} h3 {font-size:120%; font-weight:normal} h4{font-size:100%;} h5{font-size:90%;} h6{font-size:80%;}  /* Makes the text background transparent */  h1,h2,h3,h4,h5,h6 { background-color:transparent; color:#000000; }  /* Controls the wrapper layout */  #wrapper { 	position: relative; 	width: 960px; 	height: 900px; 	margin: 0 auto; 	background: #fff; 	-webkit-border-top-left-radius: 20px; 	-webkit-border-top-right-radius: 20px; 	-webkit-border-bottom-right-radius: 20px; 	-webkit-border-bottom-left-radius: 20px; 	-moz-border-radius-topleft: 20px; 	-moz-border-radius-topright: 20px; 	-moz-border-radius-bottomright: 20px; 	-moz-border-radius-bottomleft: 20px; 	border-top-left-radius: 20px; 	border-top-right-radius: 20px; 	border-bottom-right-radius: 20px; 	border-bottom-left-radius: 20px; 	}  body#home #wrapper { 	background: #fff; }  body#home #mainContent { 	padding-top: 234px; 	} 	 /* header */  #header { 	width: 900px; 	height: 100px; 	position: absolute; 	top: 25px; 	left: 35px; 	background: url(../images/logo.png) no-repeat; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; 	}  /* Banners */ #topNav { 	border: 1px solid #000000; 	float: left; 	width: 468px; 	height: 60px; 	margin-top: 150px; 	margin-left: 250px; 	} /* Top Nav */   	 /* mainNav */  #mainNav { 	display: block; 	border: 1px solid #000000; 	float: left; 	width: 100px; 	height: 150px; 	margin-top: 250px; 	margin-left: -700px; 	background-color: #1B39E0; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; } 	#mainNav  a:link {color:#FFFFFF; font-weight:bold;}      /* unvisited link */ 	#mainNav a:visited {color:#668866; font-weight:bold;}  /* visited link */ 	#mainNav a:hover {color:#FCF405; font-weight:bold;}  /* mouse over link */ 	#mainNav a:active {color:#0000FF; font-weight:bold;} 	 	/* mainNav */  #mainNavBottomLeft { 	display: block; 	border: 1px solid #000000; 	float: left; 	width: 100px; 	height: 300px; 	margin-top: 450px; 	margin-left: -700px; 	background-color: #1B39E0; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; } 	#mainNavBottomLeft  a:link {color:#FFFFFF; font-weight:bold;}      /* unvisited link */ 	#mainNavBottomLeft a:visited {color:#668866; font-weight:bold;}  /* visited link */ 	#mainNavBottomLeft  a:hover {color:#FCF405; font-weight:bold;}  /* mouse over link */ 	#mainNavBottomLeft a:active {color:#0000FF; font-weight:bold;} 	 /* rightNav */  #rightNav { 	display: block; 	border: 1px solid #000000; 	float: right; 	width: 100px; 	height: 150px; 	margin-top: 250px; 	margin-right: 20px; 	background-color: #1B39E0; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; } 	#rightNav  a:link {color:#FFFFFF; font-weight:bold;}      /* unvisited link */ 	#rightNav a:visited {color:#668866; font-weight:bold;}  /* visited link */ 	#rightNav a:hover {color:#FCF405; font-weight:bold;}  /* mouse over link */ 	#rightNav a:active {color:#0000FF; font-weight:bold;} 	 	/* rightBottomNav */  #middleNavRight { 	display: block; 	border: 1px solid #000000; 	float: right; 	width: 100px; 	height: 150px; 	margin-top: 450px; 	margin-right: -100px; 	background-color: #1B39E0; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; }  #bottomNavRight { 	display: block; 	border: 1px solid #000000; 	float: right; 	width: 100px; 	height: 150px; 	margin-top: 500px; 	margin-right: -100px; 	background-color: #1B39E0; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; }   	 	 /* Main Content */  #mainContent { 	padding-right: 50px; 	float: absolute; 	width: 400px; 	margin-bottom: 45px; 	} 	 #mainContent p { 	font: normal 2.5em  Georgia, Times, serif; 	font-size: 18px; 	color: #666666; 	position: absolute; 	text-align: left; 	top: 225px; 	left: 170px; 	width: 650px; }
    Can anyone see what I have done wrong?

    Many Thanks
    Last edited by pcwithers; September 25th, 2012 at 04:58 PM. Reason: add info
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    3
    Rep Power
    0

    Question


    Ok, I got that sorted. Now I want to add a search bar underneath my banner ad, but the page text has got jumbled with it. Any help is mych appreciated.

    PHP Code:
    <!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>AquaTradeHub.com Low Low Prices</title> <link href="css/stdtheme.css" rel="stylesheet" type="text/css" /> <meta name="description" content="Buy and sell your fish and aquatic equipment here at low low prices. Extensive information about all fish can be found here.">   </head> <body> <div id="wrapper"> <div id="header"> <h1><a href="index.html" title="Return to home page"></a></h1> </div> <span> <div id="topNav"> <?     include_once("bannerAds.php");     echo"$bannerAd";     ?> </div> </span>  <span> <div id="topSearch"> This is a search </div> </span>  <span> <div id="mainNav"> <h6>Navigation</h6> <a href="index.htm" title="Home Page" class="index">Home</a></br> <a href="register.htm" title="register" class="register">Register</a></br> <a href="contact.htm" title="contact" class="contact">Contact</a></br> </div> </span>  <span> <div id="mainNavBottomLeft"> <h6>Care Guides</h6> </div> </span>  <span> <div id="rightNav"> <form action="login.php"> <p>Login</p> <p>Username:<input type="text" size="10" name="username"> Password: <input type="password1" size="10" name="password1"></p> <input type="submit" value="Submit"> <a href="fgtpasswd">Forgot Password</a>  </div> </span>  <span> <div id="middleNavRight"> <?     include_once("banners.php");     echo"$bannerAd1";     ?> </div> </span>  <span> <div id="bottomNavRight"> <h6>For Sale</h6> </div> </span>  <span> <div id="mainContent">  <p>Welcome to the Aqua Trade Hub, where you can buy and sell fish and other aquatic equipment. We also have a wide range of fish care guides for all the different species.</p> </span> </div>     </body> </html>
    and the css is

    Code:
    @csscharset "UTF-8";  /*style sheet for aquatradehub.com*/  /* Copyright @2012 aquatradehub.com*/  html{overflow-y:scroll;}  /* Controls the gradient of background */  body { 	font-size:12px; 	color:#000000; 	text-align:center; 	margin:0px; 	margin-top:25px; 	background: -webkit-gradient(linear,left top,left bottom,color-stop(.25, rgb(27,57,224)), color-stop(0.65, rgb(27,188,224))); 	background: -moz-linear-gradient(center top, rgb(27,57,224) 25%, rgb(27,188,224) 65%); 	margin-top: 25px; }  /* Controls body and text attributes */  body,p,h1,h2,h3,h4,table,td,th,ul,ol,textarea,input { font-family:verdana,helvetica,arial,sans-serif; }  h1 {font-size:190%; margin-top:0px; font-weight:normal} h2 {font-size:160%; margin-top:10px; margin-bottom:10px; margin-left:3px; font-weight: normal; text-align: left} h3 {font-size:120%; font-weight:normal} h4{font-size:100%;} h5{font-size:12px; font-weight:bold; color: #ffffff;} h6{font-size:80%;}  /* Makes the text background transparent */  h1,h2,h3,h4,h5,h6 { background-color:transparent; color:#000000; }  p span  {     display: block; }   /* Controls the wrapper layout */  #wrapper { 	position: relative; 	width: 960px; 	height: 1000px; 	margin: 0 auto; 	background: #fff; 	-webkit-border-top-left-radius: 20px; 	-webkit-border-top-right-radius: 20px; 	-webkit-border-bottom-right-radius: 20px; 	-webkit-border-bottom-left-radius: 20px; 	-moz-border-radius-topleft: 20px; 	-moz-border-radius-topright: 20px; 	-moz-border-radius-bottomright: 20px; 	-moz-border-radius-bottomleft: 20px; 	border-top-left-radius: 20px; 	border-top-right-radius: 20px; 	border-bottom-right-radius: 20px; 	border-bottom-left-radius: 20px; 	}  body#home #wrapper { 	background: #fff; }  body#home #mainContent { 	padding-top: 234px; 	} 	 /* header */  #header { 	width: 900px; 	height: 100px; 	position: absolute; 	top: 25px; 	left: 35px; 	background: url(../images/logo.png) no-repeat; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; 	}  /* Top Nav */  #topNav { 	border: 1px solid #000000; 	float: left; 	width: 468px; 	height: 60px; 	margin-top: 150px; 	margin-left: 250px; 	}  	 /* Top Search */  #topSearch { 	border: 1px solid #000000; 	float: left; 	width: 468px; 	height: 30px; 	margin-top: 20px; 	margin-left: 250px; 	background-color: #1B39E0; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; 	}    /* mainNav Left Hand Side*/  #mainNav { 	display: block; 	border: 1px solid #000000; 	float: left; 	width: 100px; 	height: 150px; 	margin-top: 250px; 	margin-left: -700px; 	background-color: #1B39E0; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; } 	#mainNav  a:link {color:#FFFFFF; font-weight:bold;}      /* unvisited link */ 	#mainNav a:visited {color:#668866; font-weight:bold;}  /* visited link */ 	#mainNav a:hover {color:#FCF405; font-weight:bold;}  /* mouse over link */ 	#mainNav a:active {color:#0000FF; font-weight:bold;} 	 	/* mainNav Left Hand Side Bottom  */  #mainNavBottomLeft { 	display: block; 	border: 1px solid #000000; 	float: left; 	width: 100px; 	height: 300px; 	margin-top: 430px; 	margin-left: -700px; 	background-color: #1B39E0; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; } 	#mainNavBottomLeft  a:link {color:#FFFFFF; font-weight:bold;}      /* unvisited link */ 	#mainNavBottomLeft a:visited {color:#668866; font-weight:bold;}  /* visited link */ 	#mainNavBottomLeft  a:hover {color:#FCF405; font-weight:bold;}  /* mouse over link */ 	#mainNavBottomLeft a:active {color:#0000FF; font-weight:bold;} 	 /* rightNav Top*/  #rightNav { 	display: block; 	border: 1px solid #000000; 	float: right; 	width: 100px; 	height: 220px; 	margin-top: 250px; 	margin-right: 20px; 	background-color: #1B39E0; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; } 	#rightNav  a:link {color:#FFFFFF; font-weight:bold;}      /* unvisited link */ 	#rightNav a:visited {color:#668866; font-weight:bold;}  /* visited link */ 	#rightNav a:hover {color:#FCF405; font-weight:bold;}  /* mouse over link */ 	#rightNav a:active {color:#0000FF; font-weight:bold;} 	#rightNav p{font-weight:bold; color: #ffffff;} 	 	/* right Middle Nav */   #middleNavRight { 	display: block; 	border: 1px solid #000000; 	float: right; 	width: 100px; 	height: 150px; 	margin-top: 490px; 	margin-right: -100px; 	background-color: #1B39E0; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; }  /* Right Bottom Nav */  #bottomNavRight { 	display: block; 	border: 1px solid #000000; 	float: right; 	width: 100px; 	height: 150px; 	margin-top: 680px; 	margin-right: -100px; 	background-color: #1B39E0; 	-webkit-box-shadow: 2px 2px #000; 	-moz-box-shadow: 2px 2px #000; 	box-shadow: 2px 2px #000; 	-webkit-border-radius: 5px; 	-moz-border-radius: 5px; 	border-radius: 5px; }   	 	 /* Main Content */  #mainContent { 	padding-right: 50px; 	margin-top: 40px; 	float: absolute; 	width: 400px; 	margin-bottom: 45px; 	} 	 #mainContent p { 	font: normal 2.5em  Georgia, Times, serif; 	font-size: 18px; 	color: #666666; 	position: absolute; 	text-align: left; 	top: 200px; 	left: 170px; 	width: 650px; }
    it is the #mainContent that seems to be the problem
  4. #3
  5. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    I am not sure in what kind of editor you made this, but you might as well sue their *** of if you paid anything for it.
    Your whole page consists of span's (inline elements) with block elements (like a div) inside them. Thats the world up side down.

    Make sure you first fix this.

    This is bad:
    Code:
    <span><div><p></p></div></span>
    this is good
    Code:
    <div><p><span></span></p></div>
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    3
    Rep Power
    0
    Im afraid it would be my own *** that I would be suing, as I am the one who wrote it in Notepad++ lol

    I just want the bar that says "This is a search bar, to be positioned directly under the Banner, and the two sidemenus to appear either side of the text.

    When I changed the settings to position the search bar, the menus move out of position.

    I have corrected the <div><span> as you recommended but it did not help
  8. #5
  9. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    I hope you understand that before one can build a house one needs a foundation.

    The reason why I asked you to remove block elements from inside inline elements is because its not valid an can lead to unexpected behaviour. In order to save both our time. Its best to first lay a foundation before fixing the initial problem.

    Could you be so kind as to do what the forum rules ask you to do and fix this .

    There are quite some errors, and you still have block elements inside inline elements.

    Once you fixed it I am happy to have a look.
    The short version of the answer than will. be: Use float:left on the block elements you want on 1 line.

    (a decent editor would indicate that your mark up is invalid, give Netbeans a try its free)


    -edit: I am looking through your code and css, and it kind of over-complicated. It can be done much easier. I would suggest (apart from validating) that you remove all the margins, and all the positions absolute and relative in your stylesheet. You are abusing them and it overcomplicating things. Once you have done that I can give you a very quick mock up of a framework. that should give you an idea of how to make a template without over abusing properties like margin, and positions absolute.
    Last edited by aeternus; September 26th, 2012 at 06:39 PM.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    lets see

    all the <br /> are wrong
    your not closing your images
    you missed the ending div for your wrapper
    your <h6>'s are not allowed inside span tags
    your meta tag is wrong
    you can't put forms inside spans but can put spans inside forms
    your not closing any of your form options and password1 is not an input type
    and you can't put a <p> inside a span



    now your css
    Code:
    html{overflow-y:scroll;}
    is redundant as it does that by default

    @csscharset "UTF-8"; is wrong

    Code:
    background: -webkit-gradient(linear,left top,left bottom,color-stop(.25, rgb(27,57,224)), color-stop(0.65, rgb(27,188,224)));
    is wrong

    float: absolute; is wrong

    and you could be doing this much more easily then you are now

    and last but not least all of your
    Code:
    -moz-border-radius
    are not real style attributes or that's just what google chrome, firefox and the css validator are telling me and this as well
    Code:
    -moz-box-shadow
    Last edited by jack13580; September 26th, 2012 at 07:22 PM.
  12. #7
  13. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    here mate use this and pay attention to the comments in the code.

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="nl">
        <head>
            <meta charset="UTF-8" />
            <link type="text/css" rel="stylesheet" href="css/style-min.css" />
            <link rel="icon" type="image/x-icon" href="favicon.ico"/>
        </head>
        <body>
            <div id="wrapper">
                <div id="header">
                    <h1>this is the header</h1>
                </div><!-- end header -->
                <div id="middle">
                    <div id="mid-left">
                        <ul class="menu">
                            <li>
                                <a href="#">link</a>
                            </li>
                            <li>
                                <a href="#">link</a>
                            </li>
                            <li>
                                <a href="#">link</a>
                            </li>
                        </ul>
                    </div><!-- end mid-left -->
                    <div id="mid-mid">
                        <h2>this is the main page</h2>
                        <p>some text here</p>
                    </div><!-- end mid-mid -->
                    <div id="mid-right">
                        <p>some stuff here</p>
                    </div><!-- end mid-right -->
                </div><!-- end middle -->
                <div id="footer">
                    <h3>this is the footer</h3>
                </div>
            </div><!-- end wrapper -->
        </body>
    </html>
    css:
    Code:
    /* you might want to place a reset.css above this */
    /* just make sure you style elements like h1-5 and paragraphs after that */
    /* ## structure ## */
    body,html,h1,h2,h3,h4{margin:0;padding:0;} /*resetting the very basics*/
    h1,h2,h3,h4,p{padding:10px;} /* all stuff inside a paragraf or h-element is geven the same space */
    #wrapper{
        width:960px;
        overflow:hidden; /* this is to give it 'layout' google it! */
        margin: 0 auto; /* this is to center the stuff */
    }
    #header, #footer{
        height:120px;
        background:#95deff;
        clear:both;
    }
    #middle{
        background: #fff;
        overflow:hidden; /* this is to give it 'layout' google it! before you mis use it */
    }
    #mid-left, #mid-mid, #mid-right{ /* here we set some stuff the all have in common */
        float:left;
        min-height:400px;
    }
    #mid-left, #mid-right{
        width:150px;
        background:#333;
    }
    #mid-mid{
        width:600px;
        margin:0 30px; /* 600 + (30*2) + (150*2) = 960 */
    }
    /* simple styling below */
    P.s. just as a note, this code above is to show structure not aesthetics Notice no weird positioning is used just some floats
    Last edited by aeternus; September 26th, 2012 at 07:27 PM.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    Jack makes some good points, however there are a few that I can't agree with.
    Originally Posted by jack13580
    now your css
    Code:
    html{overflow-y:scroll;}
    is redundant as it does that by default
    No, it's not redundant. A bit silly perhaps but not redundant. IE7 and IE6 have that by default while other browsers (effectively) use this by default:
    Code:
    html{overflow-y:auto;}
    Originally Posted by jack13580
    Code:
    background: -webkit-gradient(linear,left top,left bottom,color-stop(.25, rgb(27,57,224)), color-stop(0.65, rgb(27,188,224)));
    is wrong
    It's fine. That's used for older versions of Webkit browsers. The syntax for more recent versions of Webkit browsers is shown here.

    Originally Posted by jack13580
    and last but not least all of your
    Code:
    -moz-border-radius
    are not real style attributes or that's just what google chrome, firefox and the css validator are telling me and this as well
    Code:
    -moz-box-shadow
    They are "non-standard" properties that correctly use a vendor prefix. Using them is perfectly fine.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo