htaccess htpasswd no prompt - .htaccess

I'm trying to protect a folder using '.htaccess' and '.htpasswd'.
I used http://www.tools.dynamicdrive.com/password/ to generate the files.
Copied them to the corresponding folders.
When I attempted to access the protected folder, I got a login prompt.
Input incorrect login details, get sent to error page.
All good.
Now, without any changes, I revisit the page to try and login again to access the protected folder, and it just throws an error, there's no login box.
If I delete the .htaccess, I can get into the folder again without errors.
Upon replacing the .htacces, I get the error again, still no login box.
I have tried to regenerate a new set of files, user/pass combo, and slight modifications to .htaccess just to try get some form of response back.
I have checked for any bytemark, both files are clean UTF-8.
What's going on? Why am I not getting a prompt anymore?
On a side note, where should the log be? All I managed to find was some access logs with nothing useful in them.
Site location on server
/home/labvccom/
/home/labvccom/public_html/admin/.htaccess
AuthName "Restricted Area"
AuthType Basic
AuthUserFile /htpasswords/.htpasswd
AuthGroupFile /dev/null
require valid-user
/home/labvccom/htpasswords/.htpasswd [user: admin | pass: password]
admin:02yd6IWnPes66
This is the page that i get when it throws the error with NO login prompt
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, webmaster#labvc.com.au and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 mod_fcgid/2.3.5 Phusion_Passenger/2.2.15 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at labvc.com.au Port 80

Your browser remembers the first login attempt and send the credentials in the Authorization header - that is why you do not get a new login prompt.
Try to clear the authorization cache.
The underlying problem is most likely as #openscript.ch suggests.

I think your path to the .htpasswd-File is wrong. If it is not absolute, it is treated as relative to the ServerRoot.
Try to use an absolute path to your .htpasswd-File.

You need to create login/pass .htaccess inside the folder that you want to protect... otherwise the trick will not work as wanted! I created some days ago a simple php tool that creates login/pass for you. It's a part of another my project... so I extracted it from my archive for you. Pay attention that under windows the password is sent clear... is not a bug of my script but a request by windows servers. So use only it in remote hosting with unix, linux running apache. Put apache-ht.php inside the folder you want to protect and then execute it. Be prompted to create user/pass! After done delete apache-ht.php from folder. You fail because you are trying to set relative path. This kind of .htaccess needs full path! I hope this helps:
apache-ht.php
<?php
############################################
# Created By Alessandro Marinuzzi [Alecos] #
# apache-ht.php - Version 1.5 - 07/04/2015 #
# WebSite: ---> http://www.alecos.it/ <--- #
############################################
if ((isset($_POST['username']) && (!empty($_POST['username']))) && ((isset($_POST['password'])) && (!empty($_POST['password'])))) {
$username = $_POST['username'];
$password = $_POST['password'];
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Apache - Username :: Password Generator</title>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Oswald);
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
html {
display: table;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: lightgray;
display: table-cell;
vertical-align: middle;
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
.mainbox {
border-radius: 7px;
border: 1px solid gray;
background-color: darkgray;
width: 420px;
height: auto;
margin-top: 50px;
margin-bottom: 50px;
vertical-align: middle;
text-align: center;
margin: 0 auto;
padding: 20px;
}
.title {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 24px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.save {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
border-radius: 3px;
border: 1px solid black;
background-color: darkviolet;
cursor: pointer;
box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
vertical-align: middle;
text-align: center;
padding: 10px;
}
.data {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.doit {
vertical-align: middle;
text-align: center;
}
.user {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
.pass {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
</style>
</head>
<body>
<?php
if ((substr($_SERVER['DOCUMENT_ROOT'],-1,1) == "/") && (substr($_SERVER['PHP_SELF'],0,1) =="/")) {
$path = $_SERVER['DOCUMENT_ROOT'] . substr(dirname($_SERVER['PHP_SELF']),1) . "/.htpasswd";
} else {
$path = $_SERVER['DOCUMENT_ROOT'] . dirname($_SERVER['PHP_SELF']) . "/.htpasswd";
}
$tmp1 = fopen(".htaccess", "w");
$tmp2 = "AuthType Basic\n";
$tmp2 .= "AuthName \"Restricted Area\"\n";
$tmp2 .= "AuthUserFile \"$path\"\n";
$tmp2 .= "Require valid-user\n";
fwrite($tmp1, $tmp2);
fclose($tmp1);
unset($tmp1);
unset($tmp2);
if (strtoupper(substr(PHP_OS,0,3) == 'WIN')) {
$tmp1 = fopen(".htpasswd", "w");
$tmp2 = "$username:$password\n";
fwrite($tmp1, $tmp2);
fclose($tmp1);
unset($tmp1);
unset($tmp2);
} else {
$tmp1 = fopen(".htpasswd", "w");
$tmp2 = "$username:" . crypt($password,'$6$rounds=5000$usesomesillystringforsalt$') . "\n";
fwrite($tmp1, $tmp2);
fclose($tmp1);
unset($tmp1);
unset($tmp2);
}
exit("<div class=\"mainbox\">\n<span class=\"title\">Apache - Username :: Password Generated!</span>\n</div>\n</body>\n</html>");
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Apache - Username :: Password Generator</title>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Oswald);
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
html {
display: table;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: lightgray;
display: table-cell;
vertical-align: middle;
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
.mainbox {
border-radius: 7px;
border: 1px solid gray;
background-color: darkgray;
width: 420px;
height: auto;
margin-top: 50px;
margin-bottom: 50px;
vertical-align: middle;
text-align: center;
margin: 0 auto;
padding: 20px;
}
.title {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 24px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.save {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
border-radius: 3px;
border: 1px solid black;
background-color: darkviolet;
cursor: pointer;
box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
vertical-align: middle;
text-align: center;
padding: 10px;
}
.data {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.doit {
vertical-align: middle;
text-align: center;
}
.user {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
.pass {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
</style>
</head>
<body>
<div class="mainbox">
<span class="title">Apache - Username :: Password Generator</span><br>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<span class="data"><label for="username">Username:</label> <input type="text" class="user" id="username" name="username"></span><br>
<span class="data"><label for="password">Password:</label> <input type="text" class="pass" id="password" name="password"></span><br>
<span class="doit"><input type="submit" class="save" value="Create Username & Password"></span><br>
</form>
</div>
</body>
</html>

Related

Button text color won't change

I've recently just integrated some buttons into my code but it wont' let me change the font-color with color-parameter. Everything else can be changed, but not the font-color. its black 'normal' and white on hover. Can someone maybe help?
Thats the CSS
.button {
border: none;
padding: 0.7em 2.6em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 0.8vw;
margin: 1.2em 0 3em 0;
cursor: pointer;
font-family: "Gill Sans", Sans-Serif;
font-weight: 600;
background-color: #b9b9b9;
color: #?????
}
.button:hover {
background-color: #b9b9b9;
text-decoration: underline;
color: #?????
}
And the HTML
<button class="button" onclick="window.location.href='http://www.XXXX.xx/‚;“>Button-Text</button >

How do I find this span with selenium in python?

Just wondering how to get the span text out of this div when using selenium in python.
<div class="clsFrameworkElement"
id="ManagedQuestionViewer.brdrQuestion1.QuestionRenderer.MultiChoiceQuestionViewer.sp.StackPanel.RadioTextRegionViewer2.LayoutRoot.Panel.text.sp.rich.LayoutRoot.TextBlock" style="overflow: visible; display: inherit; text-shadow: white 0px 1px; left: 46px; top: 105px; border-width: 0px; width: 186px; height: 15px; text-align: left; color: rgb(0, 0, 0); font-family: Tahoma; font-weight: normal; font-size: 9.6pt; text-overflow: clip; overflow-wrap: break-word; white-space: normal; user-select: none;">
<span style="">Get a non-disclosure agreement.</span>
</div>
Thanks.
You can use xpath to get the span element.
Please see below snippet:
from selenium import webdriver
driver = webdriver.Chrome()
html_content = """
<html>
<head></head>
<body>
<div class="clsFrameworkElement" id="ManagedQuestionViewer.brdrQuestion1.QuestionRenderer.MultiChoiceQuestionViewer.sp.StackPanel.RadioTextRegionViewer2.LayoutRoot.Panel.text.sp.rich.LayoutRoot.TextBlock" style="overflow: visible; display: inherit; text-shadow: white 0px 1px; left: 46px; top: 105px; border-width: 0px; width: 186px; height: 15px; text-align: left; color: rgb(0, 0, 0); font-family: Tahoma; font-weight: normal; font-size: 9.6pt; text-overflow: clip; overflow-wrap: break-word; white-space: normal; user-select: none;">
<span style="">Get a non-disclosure agreement.</span>
</div>
</body>
</html>
"""
driver.get("data:text/html;charset=utf-8,{html_content}".format(html_content=html_content))
node = driver.find_element_by_xpath("//div[#class='clsFrameworkElement']/span")
print(node.text)
This will print :
Get a non-disclosure agreement.
You can read more about xpath here: https://selenium-python.readthedocs.io/locating-elements.html

My menu bar will not resize when window resizes

I'm having problems with my code. I have a fixed menu bar that works as it should but it doesn't resize when I change the size of the window. I need it to resize because if you change the window size, it will will not scroll horizontally and some buttons are cut off. How can I fix this?
Also feel free to make optimization or input on unnecessary code
Thanks
body {
margin: 0px;
padding: 0px;
background: url(images/gradient.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
section {
margin: 0 auto;
border: 1px solid #000000;
border-radius: 8px;
background:#E5E7E9;
width: 958px;
height: 800px;
}
.bpic {
width: 200px;
height: 350px;
margin: 0px;
}
.biopic {
border: 2px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 350px;
margin: 40px 40px 40px 375px;
}
.bio {
margin: 40px;
font-family: verdana;
text-align: center;
}
#biography {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#assignments {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#projects {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#contact {
font-family: arial black;
font-size: 100%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
.email {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 150px;
height: 96px;
margin: 3px 40px 3px 400px;
}
.banner {
width: 960px;
height: 143px;
margin: 0 auto;
padding: 0px;
background: url(images/banner.png) no-repeat;
}
.banner h2 {
font-family: vollkorn;
font-size: 350%;
color: white;
text-transform: uppercase;
margin: 0;
position: relative;
top: -40%;
left: 83%;
transform: translate(-50%, -50%);
}
.menu {
list-style-type: none;
margin: auto;
background-color: #333;
width: 100%;
background: url(images/menu.jpg) repeat-x;
position: fixed;
min-width: 1080px;
z-index: 1;
display: inline-block;
}
.menu ul {
float: left;
margin: 0px;
padding: 0 0 0 30%;
list-style: none;
}
.menu ul li {
padding: 0px;
display: inline;
}
.menu ul li a {
position: relative;
float: center;
display: inline-block;
height: 30px;
width: 180px;
text-align: center;
padding: 12px 0 0 0;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline: none;
min-height: 24px;
}
.menu li a:hover, .menu li .current {
position: relative;
color: #ffffff;
background: url(images/menuhoverright.jpg) top right no-repeat;
}
.menu li a:hover span, .menu li .current span {
position: absolute;
display: inline-block;
width: 15px;
height: 42px;
top: 0;
left: 0;
background: url(images/menuhoverleft.jpg) no-repeat;
}
.jprop {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 195px;
margin: 40px;
}
.jprop:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<!-- Homepage
My Biography Page
Author:
Date: 01/29/2017
-->
<meta charset="UTF-8" />
<title>Homepage</title>
<script src="modernizr-1.5.js"></script>
<link href="homestyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<img src="images/menu.jpg" alt="menu" />
<ul>
<li><span></span>Biography</li>
<li><span></span>Assignments</li>
<li><span></span>Projects</li>
<li><span></span>Contact</li>
</ul>
</div>
<div class="banner">
<img src="images/banner.png" alt="banner" />
<h2>K V</h2>
</div>
<section>
<div id="biography">
<a name="biography"><h1>Biography</h1>
</div>
<div class="biopic">
<img src="images/biopic.jpg" width="230" height="490" alt="biopic" class="bpic"/>
</div>
<article>
<div class="bio">
<p>Hello, my name is &&&&&&. --
</p>
<p>I am currently pursuing my A.S. degree in computer information technology at?I plan to start
working in the field of IT, once I obtained my A.S. degree and certifications. While working, I plan on
continuing my education to obtain my bachelor’s degree in IT at UCF. I have always had a passion for
technology, especially computers. To be able to work in the field that I enjoy is one of my life goal.
</p>
</div>
</article>
</section>
<br>
<section>
<div id="assignments">
<a name="assignments"><h1>Assignments</h1>
</div>
<div class="jprop">
<a href="Jprop/basic.html">
<img src="images/jprop.JPG" alt="jprops">
</a>
</div>
</section>
<br>
<section>
<div id="projects">
<a name="projects"><h1>Projects</h1>
</div>
</section>
<br>
<section style="max-height: 210px;">
<div id="contact">
<a name="contact"><h1>Contact</h1>
</div>
<div class="email">
<a href="mailto:REDACTED">
<img src="images/email.png" alt="emails">
</a>
</div>
</section>
<br>
</body>
</html>
This bit of css from your style sheet is going to keep the menu from resizing below 1080px. So it will be too wide for many tablets and phones for example.
.menu {
min-width: 1080px;
}
Remove the min-width property, and see if that fixes it for you.

CSS3; keep caption width the same as the image

I'd like to have the caption text stay the same width as the image (without setting one fixed width). I've tried playing around with , etc., but that's even harder to control.
Here's a sample of the CSS. Hope this is the proper way to ask questions here!
<head>
<style type="text/css">
<!--
#floatrightphoto {
float:right;
padding: 6px;
margin-left: 2px;
margin-top: 3px;
margin-bottom: 2px;
margin-right: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCEE77;
border-right-color: #AFE165;
border-bottom-color: #AFE165;
border-left-color: #CCEE77;
background-color: #CCFF99;
}
#floatrightphoto p{
font-weight: normal;
color: #889260;
float: left;
margin-bottom: -3px;
margin-top: 0px;
margin-right: 1px;
margin-left: 0px;
text-align: right;
font-family: "Comic Sans MS", Ariel;
font-style: oblique;
font-size: 14px;
line-height: 16px;
position: static;
display: inherit;
}
body {
width: 750px;
}
-->
</style>
</head>
<body>
<div id="floatrightphoto">
<img src="somephoto" width="180" height="180">
<br>
<p>Caption Caption Caption Caption Caption Caption Caption
Caption Caption</p>
</br>
</img>
</div>
</body>
Whoa that's a whole lotta extra fluff. I'm looking for the same solution.
I came across this solution (modified to reflect what you are wanting):
#img-right{display: table; min-width: 1px; float:right; margin-left: 10px;}
#img-right p {display: table-caption; caption-side: bottom;}
However, this works in most all browsers except IE where in IE my #img-right spans the full width of the caption (the caption being longer than the image itself and it doesn't wrap). I am still trying to figure out how to make IE behave, as it works perfectly in other browsers.
As for your other code, I suggest simplifying it a bit to reduce load time. I modified your CSS a little bit...I'd suggest renaming the ID's to be smaller and easier to read, please, don't EVER use Comic Sans... ever. :)
body { width: 750px; }
#img-right {
float:right;
padding: 6px;
margin: 3px 2px 2px 0px;
border-top: 1px solid #ccee77;
border-left: 1px solid #ccee77;
border-bottom: 1px solid #afe165;
border-right: 1px solid #afe165;
background: #ccff99;
}
#img-right p{
font: italic 14px/16px Helvetica, Arial, Lucida Sans, Verdana;
color: #889260;
float: left;
margin: 0px 0px -3px 1px;
text-align: right;
}

unwanted navigation stack with browser resize

It's my first time here on the forum. I am a beginner in webdesign and encountered a problem I could not find correct answer to. So far I searched for my answer on mutliple sites but the closest to my problem was this;
Horizontal to vertical menu, on browser window resize.
My problem is as followed: my nav ul list gets stacked when I resize my browserwindow to small....I know it must be possible to let it all stay horizontally on a desktopscreen as it is...like on the page of APPLE store for example. I just have no clue what I am doing wrong.
Underneath is my code....hopefully someone can help me and filter out my errors.
HTML
<div id="navcontainer">
<div id="navlist">
<ul>
<li id="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
CSS
body {
margin: 200px 0px 10px 0px;
padding: 0px;
text-align: center;
background-image:url(../images/bg.jpg);
background-repeat: repeat;}
/***** HEADER *****/
#header {
width: 900px;
text-align: center;
font-family: Raleway;
font-size: 30px;
font-weight: bolder;
font-variant: normal;
color: rgba(51,51,51,1);
position: absolute;
display: block;
top: 0px;}
/***** NAVIGATION *****/
#navcontainer {
position: relative;
background-image: url(../images/navbar.png);
background-repeat: repeat-x;
height: 37px;
-o-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-moz-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-webkit-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-ms-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
font-family: Raleway;
display: block;
width: 100%; }
#navlist {
float:left;
position:relative;
left:50%;
padding-top: 1.5px;}
#navlist ul {
float:left; /* IE6 needs this */
position:relative;
left:-50%;
list-style:none;
margin: 0 auto;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 100%;
font-style: normal;
font-weight: bolder;
font-variant: normal;
text-decoration: none;
padding: 0px; }
#navlist li {
float:left;
display: inline;
padding-top: 6.8px;
padding-right: 25px;
padding-bottom: 6.8px;
padding-left: 25px;}
#navlist li a {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 19px;
padding-bottom: 6.8px;
padding-left: 19px;}
#navlist li a:hover {
background-image: url(../images/navbar3.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
paddin-left: 19px;}
#navlist li a:active {
background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1); }
#navlist li a:visited {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 0px;
padding-bottom: 6.8px;
padding-left: 0px;}
#navlist li a:focus {
background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
padding-left: 19px;
border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1);
text-shadow: 1px 1px #FFF, -0.3px -0.3px #000;}
I had this same problem with my navigation. My nav wasn't structured exactly like the solution below but applying the CSS accordingly worked great.
Here is the solution I found.
http://jsfiddle.net/9x7Am/5/
HTML
<ul id='navbar'>
<li><a href='#'> 1 </a></li>
<li><a href='#'> 2 </a></li>
<li><a href='#'> 3 </a></li>
<li><a href='#'> 4 </a></li>
<li><a href='#'> 5 </a></li>
<li><a href='#'> 6 </a></li>
</ul>
CSS
#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li {width:100%}
li a {padding: 6px 0; float:left; width:16%; text-align:center;}

Resources