chibineku Posted August 17, 2009 Share Posted August 17, 2009 Hi there,I'm in the early stages of designing a site, my first real one, and I've got a weird issue. My nav menu tabs begin a little in from the edge of the wrapper div. I have messed with every padding and margin setting on firefox firebug and nothing seems to fix it. When I was creating it initially, using firebug to check measurements live, I found one property of a selector made the tabs sit in from the edge, and I liked it, but I want the freedom to choose where they sit. Anyone have any ideas? The code is below and the site is here.Also, does anyone know why FF displays stuff smaller than every other browser? It makes my site look funny because I was developing it on FF. <style type="text/css" media="screen"> body {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#FFFFFF none repeat scroll 0 0;color:#000000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:80% !important;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;margin-left:10%;margin-right:10%;}#wrapper {min-width:500px;padding:0;position:relative;}#loginbasket {float:right;margin:20px 20px 0px 0px;}#loginbasket a:link, #loginbasket a:visited {color:#094C59;text-decoration:none;}#loginbasket a:hover, #loginbasket a:active {color:#9BD9E0;}#container {background-color:#9BD9E0;border-top:3px solid #000;clear:both;height:100%;position:relative;width:100%;}#header {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:white url(images/aromalogopng.png) no-repeat scroll 0 0;min-height:120px;width:100%;}h1 {left:-9999px;position:absolute;text-align:left;}#main {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#FFFFFF none repeat scroll 0 0;border-bottom:30px solid #9BD9E0;margin:30px 50px 30px 200px;padding:50px 80px 30px 50px;}#nav, #navWrap {font-size:93%;line-height:30px;margin:1em 0;padding:px 0px 0px 0px;}#navWrap {}#nav ul {list-style-type:none;margin:0;padding:0;}#nav li {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:transparent url(images/taboffright.png) no-repeat scroll right bottom;color:white;display:inline;float:left;padding:0;}#nav a:link, #nav a:visited {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:transparent url(images/tabffleft.png) no-repeat scroll left bottom;color:#FFFFFF;display:block;font-weight:bold;padding:0 1.5em;text-decoration:none;}#nav a:hover, #nav a:active {background:url(/images/tabonleft.png) no-repeat scroll left bottom;}#nav li:hover {background:url(/images/tabonright.png) no-repeat scroll right bottom;}#nav #cur {background-image:url(images/tabonright.png);}#nav #cur a {background-image:url(images/tabonleft.png);} </style> </head> <body onload="setCurPage()"> <div id="wrapper"> <div id="header"> <h1>AromaTherapeutics</h1> </div> <div id="loginbasket"> <a href="loginform.php5">login</a> | <a href="form.php5">register</a> | basket </div> <div id="navWrap"> <ul id="nav"> <li id="home"> <a href="home.html">Home</a> </li> <li id="catalogue"> <a href="home.html">Catalogue</a> </li> <li id="customproducts"> <a href="home.html">Custom Products</a> </li> <li id="news"> <a href="home.html">News</a> </li> <li id="myaccount"> <a href="home.html">My Account</a> </li> <li id="contact"> <a href="contact.php">Contact</a> </li> </ul> </div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.