citysoundman
10 Apr 2008, 12:19 AM
Hi everyone,
I'm working on a redo of my personal site and have recently learned table-less design using CSS. I came across the awesome Uberlink NavBar design which I've incorporated into my page. It is a CSS rollover-style navbar that uses a Javascript to automatically highlight the current page link. Please see http://projectseven.com/tutorials/css/uberlinks/index.htm.
When I preview my design locally (using Dreamweaver MX2004 - I'm on a Mac) I find that it's working fine on Firefox, IE and Opera but not on Safari v2 or Safari v3. In Safari the Javascript is not being recognized at all. I'm not an experienced web designer, but I did carefully check all my code etc.
I did modify the style of the Uberlink CSS to fit my design. I made it horizontal and used different colors & sizes, but I don't think this would make it not recognized by Safari.
I will provide the HTML and relevant CSS code here. I appreciate if anyone can offer help!
Bob K
Here's my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bob Kirschner | City Sound Productions</title>
<link href="CSS/csp2008b.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Java/p7uberlink.js"></script>
</head>
<body onLoad="P7_Uberlink('uberlink','NavList')">
<div id="BodyContainer">
<div id="HeaderTitle"><img src="images/HeaderTextBKCSP660x15.png"></div>
<div id="HeaderWave"><img src="images/HeaderWave660x23.png"></div>
<div id="NavContainer">
<ul id="NavList">
<li><a href="main%20page4cssnavAboutTest.htm">about</a></li>
<li><a href="#">reels</a></li>
<li><a href="#">services</a></li>
<li><a href="#">credits</a></li>
<li><a href="#">original music</a></li>
<li><a href="#">client access</a></li>
<li><a href="#">links</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<div id="BkgndTitleAbout"><img src="images/BkgndTitleAbout329x139_100.jpg" width="329" height="139"></div>
<div id="BkgndPic"><img src="images/BkgndPic331x139_100.jpg" width="331" height="139"></div>
<div id="BkgndText"><img src="images/BkgndText660x290_100.jpg" width="660" height="290"></div>
<div id="PictureBK"><img src="images/PictureBK129x79.jpg" width="129" height="79"></div>
<div id="TextContainer">I am a Manhattan-based sound designer, mixer, composer and <br>recording engineer.</div>
</div>
</body>
</html>
And here's the relevant navbar portion of my CSS:
#NavList {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
/*float: left;/*maybe not needed*/
/*width: 100%;/*maybe not needed*/
}
#NavList li {
font-size: 0.6875em;/*11px*/
line-height: 1em;/*equiv to current (11px) font)*/
letter-spacing: 0;
font-family: Arial, Verdana, Helvetica, sans-serif;
display: inline;
font-weight: 700;
padding: 0;
margin: 0;
}
#NavList a:link, #NavList a:visited {
padding: 2px 9px;/*this styles the tabs*/
margin: 0 0px;
color: #666666;
text-decoration: none;
/*background-color:#990066;/*for testing*/
float: left;/*this removes the spaces*/
width: auto;/*also required with float*/
}
#NavList a:hover {
color: #FFFFCC;
}
#NavContainer #NavList .uberlink {
background-color: #666666;
color: #FFCC33 !important;
cursor: default;
}
I'm working on a redo of my personal site and have recently learned table-less design using CSS. I came across the awesome Uberlink NavBar design which I've incorporated into my page. It is a CSS rollover-style navbar that uses a Javascript to automatically highlight the current page link. Please see http://projectseven.com/tutorials/css/uberlinks/index.htm.
When I preview my design locally (using Dreamweaver MX2004 - I'm on a Mac) I find that it's working fine on Firefox, IE and Opera but not on Safari v2 or Safari v3. In Safari the Javascript is not being recognized at all. I'm not an experienced web designer, but I did carefully check all my code etc.
I did modify the style of the Uberlink CSS to fit my design. I made it horizontal and used different colors & sizes, but I don't think this would make it not recognized by Safari.
I will provide the HTML and relevant CSS code here. I appreciate if anyone can offer help!
Bob K
Here's my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bob Kirschner | City Sound Productions</title>
<link href="CSS/csp2008b.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Java/p7uberlink.js"></script>
</head>
<body onLoad="P7_Uberlink('uberlink','NavList')">
<div id="BodyContainer">
<div id="HeaderTitle"><img src="images/HeaderTextBKCSP660x15.png"></div>
<div id="HeaderWave"><img src="images/HeaderWave660x23.png"></div>
<div id="NavContainer">
<ul id="NavList">
<li><a href="main%20page4cssnavAboutTest.htm">about</a></li>
<li><a href="#">reels</a></li>
<li><a href="#">services</a></li>
<li><a href="#">credits</a></li>
<li><a href="#">original music</a></li>
<li><a href="#">client access</a></li>
<li><a href="#">links</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<div id="BkgndTitleAbout"><img src="images/BkgndTitleAbout329x139_100.jpg" width="329" height="139"></div>
<div id="BkgndPic"><img src="images/BkgndPic331x139_100.jpg" width="331" height="139"></div>
<div id="BkgndText"><img src="images/BkgndText660x290_100.jpg" width="660" height="290"></div>
<div id="PictureBK"><img src="images/PictureBK129x79.jpg" width="129" height="79"></div>
<div id="TextContainer">I am a Manhattan-based sound designer, mixer, composer and <br>recording engineer.</div>
</div>
</body>
</html>
And here's the relevant navbar portion of my CSS:
#NavList {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
/*float: left;/*maybe not needed*/
/*width: 100%;/*maybe not needed*/
}
#NavList li {
font-size: 0.6875em;/*11px*/
line-height: 1em;/*equiv to current (11px) font)*/
letter-spacing: 0;
font-family: Arial, Verdana, Helvetica, sans-serif;
display: inline;
font-weight: 700;
padding: 0;
margin: 0;
}
#NavList a:link, #NavList a:visited {
padding: 2px 9px;/*this styles the tabs*/
margin: 0 0px;
color: #666666;
text-decoration: none;
/*background-color:#990066;/*for testing*/
float: left;/*this removes the spaces*/
width: auto;/*also required with float*/
}
#NavList a:hover {
color: #FFFFCC;
}
#NavContainer #NavList .uberlink {
background-color: #666666;
color: #FFCC33 !important;
cursor: default;
}