|
CSS - Header Navigation Is Off In Ie
OK, my site looks good in every browser except IE.
Here's the site: here Can someone tell me how to fix the CSS for IE? thanks Similar TutorialsHello, My website yaou.org looks good in every browser except IE... The css for the menu can be checked here : yaou.org/website/menu.css Can someone tell me how to fix the CSS ? Thanks, I am trying to get the header image and navigation menus to align in the center. as well as centering the actual menu buttons. here is my sample: http://blurple.net/design/ Here is stylesheet Quote: body {color:#121212; margin:20px 0 0;background:#D3D3D3;} body, p, h1, h2, h3, table, td, th, ul, ol, textarea, input {font-family:Arial, Verdana, Tahoma; font-size:11px; line- height:140%;} /* Class For Headings */ h1 {padding:15px 5px 15px 25px; margin:0; border:1px solid #55B5FF; background:#C0E4FF;} h2 {font-size:18px; color:#394352; padding:15px 0 2px 5px; margin:0 0 5px; color:#7628BD; border-bottom:1px solid #E4DCFF;} h3 {font-size:14px; color:#F26C00; padding:0 0 3px 0; margin:0; text-align:center;} h4 {font-size:13px; color:#3A74B9; padding:0 0 3px 0; margin:0;} h5 {font-size:13px; color:#F26C00;} h6 {font- size:10px; } p {padding:2px 0 12px; margin:0;} ul {padding-top:3px; margin-top:3px;} input.homInp {background:#55B5FF; border:1px solid #fff; color:#fff; height:18px; width:110px; vertical-align:middle; padding:0; margin:0;} input.go {background:url (images/go.gif) left top no-repeat; height:22px; width:24px; border:0; vertical- align:middle; padding:0; margin:0 0 0 3px;} .mainTab {width:917px;} .logo { margin:5px 10px 0; float:left;} .paddmenu {padding:0 6px; background:#fff;} .paddFoot {padding:0 10px 0 25px;; background:#fff;} .paddMid {padding:5px 10px; background:#fff;} .topicon {float:right; margin:35px 20px 5px 0;} .topicon img { vertical-align:middle;} .blueBox {border:1px solid #55B5FF; background:#C0E4FF; padding:0 10px 0 0;} .homBlueBox {border:1px solid #437DCD; background:#C0E4FF; border-top:0; border-bottom:0;} .homBlueBox td { padding:3px 15px 2px 30px;} .homBlueBox td.homBlueBord { padding:0; border-top:1px solid #437DCD;} .homLftBord {border:1px solid #B9B9B9; background:#fff; border-top:0; border-bottom:0;} .homLftBord td { padding:5px; line-height:130%;} .slidetabsmenu{float:center;width:100%;background:url (images/menubg.gif) top repeat-x;} .slidetabsmenu ul{list-style- type:none;margin:0;padding:0;} .slidetabsmenu li{display:inline;margin:0;padding:0;} .slidetabsmenu a{float:center;background:url(images/slide-left.gif) no-repeat left top;margin:0;margin:0;padding:0 0 0 10px;text-decoration:none;BORDER-RIGHT:#D8BCED 1px solid;BORDER-left:#121212 1px solid; line-height:normal;} .slidetabsmenu a.hombord{BORDER- left:0; padding-left:0;} .slidetabsmenu a.contactbord{BORDER-RIGHT:0;} .slidetabsmenu a span {float:left;display:block;background:url(images/slide-right.gif) no-repeat right top;padding:14px 13px 13px;font-size:14px; font-weight:bold; font-family:Tahoma;color:#fff;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ .slidetabsmenu a span {float:none;} /* End IE5-Mac hack */ .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span {color:#fff;text-decoration:none;} .slidetabsmenu a:hover, .slidetabsmenu li.selected a {background-position:0% -125px;text-decoration:none;} .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{background-position:100% -125px;} html>/**/body .IEonlybr{ /*None IE browsers hack*/display:none; /*Hide BR tag in non IE browsers, since it's not needed*/} /* ######### Style for Drop Down Menu ######### */ .dropmenudiv_c {position:absolute;top:0;border:1px solid #fff; font:normal 13px Tahoma;line-height:18px;z- index:100;background-color:#9449CE;width:200px;visibility:hidden;} .dropmenudiv_c a {width:auto;display:block;text-indent:5px;border:0 solid #fff;border-bottom-width: 1px; /*THEME CHANGE HERE*/padding:2px 0;text-decoration:none;font-weight:normal;color:#fff;} * html .dropmenudiv_c a{ /*IE only hack*/width:100%;} .dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/background-color:#1798FF; color:#fff; text-decoration:none;} .dropmenudiv_c form {background-color:#B174E0; color:#000; padding:0 0 8px; margin:0;} a{color:#1963C0; text- decoration:none;} a:hover{text-decoration:underline;} .footerTxt {color:#7628BD;} .footerTxt a {color:#7628BD;} .middleTxt {padding:12px; font-size:12px;} .middleTxt p {font-size:12px;} .middleTxt td {font-size:12px; line-height:130%;} .middleTxt li {font-size:12px; line- height:130%;} a.readmore {background:url(images/readmore.gif) top left no-repeat;text- decoration:none; float:right; width:85px; height:20px; color:#121212; padding:2px 0 0 10px;} a.readmo hover {text-decoration:underline;} td.boxbgHost {padding: 5px 10px 8px 20px; background:url(images/hostingbg.jpg) bottom left no-repeat; font-size:10px;} .clr {clear:both;} .Tab{font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans- serif;width:100%;float:left;} .plans-head { font-family:"Trebuchet MS";color:#393939; line- height:28px; border:solid 1px #cdcdcd; font-size:16px; font-weight:bold; padding-left:10px; background:url(images/plans_head_bg.gif) repeat-x #cdcdcd;} #AKD_tab2 {border:1px solid #ccc; margin-left:20px;} .mainTable {width:917px; margin:0 auto; text-align:left; background:#fff;} .menubg {background:#500FA4 url(images/menubg.gif) top repeat-x; font-size:14px;} .footdotbg {background:#fff url(images/foot-dotbg.gif) top repeat-x; height:32px;} .grayheadbg {background:#CDCDCD url(images/grayheadbg.gif) top repeat-x; height:28px; border:1px solid #CDCDCD; border-bottom:0; padding-left:15px; font-size:16px; font- weight:bold; color:#000;} .grayshadbg {background:#fff url(images/grayshadbg.jpg) top right no-repeat; border:1px solid #CDCDCD; border-top:0; padding-left:15px;} .graybg {background:#F2F2F2; border:1px solid #CDCDCD; border-top:0; padding-left:15px;} .headBold {font-size:18px;} .slidetabsmenu{float:center;width:100%;background:url(images/menubg.gif) top repeat-x;} .slidetabsmenu ul{list-style-type:none;margin:0;padding:0;} .slidetabsmenu li{display:inline;margin:0;padding:0;} .slidetabsmenu a{float:left;background:url(images/slide-left.gif) no-repeat left top;margin:0;margin:0;padding:0 0 0 10px;text-decoration:none;BORDER-RIGHT:#D8BCED 1px solid;BORDER-left:#121212 1px solid; line-height:normal;} .slidetabsmenu a.hombord{BORDER-left:0; padding-left:0;} .slidetabsmenu a.contactbord{BORDER-RIGHT:0;} .slidetabsmenu a span {float:left;display:block;background:url(images/slide-right.gif) no- repeat right top;padding:14px 13px 13px;font-size:14px; font-weight:bold; font- family:Tahoma;color:#fff;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ .slidetabsmenu a span {float:none;} /* End IE5-Mac hack */ .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{color:#fff;text- decoration:none;} .slidetabsmenu a:hover, .slidetabsmenu li.selected a{background-position:0% -125px;text- decoration:none;} .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{background-position:100% - 125px;} html>/**/body .IEonlybr{ /*None IE browsers hack*/display:none; /*Hide BR tag in non IE browsers, since it's not needed*/} /* ######### Style for Drop Down Menu ######### */ .dropmenudiv_c{position:absolute;top:0;border:1px solid #fff; font:normal 13px Tahoma;line- height:18px;z-index:100;background-color:#9449CE;width:200px;visibility:hidden;} .dropmenudiv_c a{width:auto;display:block;text-indent:5px;border:0 solid #fff;border-bottom -width: 1px; /*THEME CHANGE HERE*/padding:2px 0;text-decoration:none;font- weight:normal;color:#fff;} * html .dropmenudiv_c a{ /*IE only hack*/width:100%;} .dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/background-color:#1798FF; color:#fff; text- decoration:none;} .dropmenudiv_c form{background-color:#B174E0; color:#000; padding:0 0 8px; margin:0;} * SLIDER */ .slider-wrap { width: 930px; /*position: absolute; top: 87px; left: 40px;*/ } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .stripViewer { position: relative; overflow: hidden; width: 930px; height: 276px; } .stripViewer .panelContainer { position: relative; left: 0; top: 0; } .stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 930px; } .stripNavL, .stripNavR, .stripNav { display: none; } .nav-thumb { border: 1px solid black; margin-right: 5px; } #movers-row { margin: 0; float: left; } #movers-row div { width: 30px; float: left; } #movers-row div a.cross-link { float: right; } .photo-meta-data { background: url(images/transpBlack.png); padding: 10px; height: 17px; position: relative; z-index: 9999; color: white; } .photo-meta-data span { font-size: 13px; } .cross-link { display: block; width: 23px; padding-top: 8px; z-index: 9999; float: left;} .active-thumb { background: transparent; } #fla_head img {width:917px;position:absolute;top:0;left:0;} #fla_head {width:930px;height:276px;overflow:hidden;position:relative;font-family:Arial, Helvetica, sans-serif, Calibri !important; } #fla_controls {width:917px;height:38px;font-family:Arial, Helvetica, sans-serif, Calibri ! important;} #fla_bgbar a{background:#fff url(images/imgmenubg.jpg) bottom repeat-x;} #fla_pages a{float:left;display:inline;font-size:11px;font-weight:bold;line- height:12px;border:1px solid #2d8ce6; width:28px;text-align:center;padding:2px 0 2px 0;color:#c0cfee;text-decoration:none !important;margin-right:3px;} #fla_pages {padding:11px 0 0 10px;display:block;height:20px;float:left;width:310px;} #fla_pages a:hover, #fla_pages a.active{border:1px solid #db7d0b; color:#fff;} #fla_other_controls {font-family:Arial, Helvetica, sans-serif, Calibri ! important;float:right;width:110px;padding-top:8px;} #fla_other_controls a{float:left;display:inline;font-size:10px;line-height:10px;text- decoration:none !important;color:#fff;text-align:center;padding:5px 0 1px 0;} #pause_scene {width:46px;margin:0 -5px;height:26px !important;} #pause_scene:hover {} #next_scene, #prev_scene {background: url(../images/header/next.png) no-repeat 0 0;width:26px;height:26px !important;} #next_scene:hover, #prev_scene:hover {} I am a beginner with CSS, so if this question is stupid, please don't pay it too much mind. I am attempting to put a heading in the center of my page around a navigation bar that I have floating to the left, but it is not working. When I clear the float, it is stuck in one spot below the float. I cannot position the heading where I want. And if I try to use a div align, I get it off center and pretty much unmovable. If I use positioning on the header, I can only move it up and down, not into the center. So how can I counter that pesky floating nav bar? Hi, I have a margin or spacing between the header image and the navigation bar. I'm unsure of how to remove it. I want the navigation to be directly underneath the header. This is the HTML Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="horses.html">Horses</a> <ul> <li><a href="stallions.html">Stallions</a></li> <li><a href="mares.html">Mares</a></li> <li><a href="geldings.html">Geldings</a></li> <li><a href="foals.html">Foals</a></li> </ul> </li> <li><a href="showteam.html">Show Team</a></li> <li><a href="showresults.html">Show Results</a></li> <li><a href="youths.html">Youths</a></li> <li><a href="sales.html">Sales</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </div> This is the CSS Code:
#header {
background:#ddd;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;
}
#navbar {
font-family: Edwardian Script ITC, Verdana, Arial, sans-serif;
font-size:36px;
width:100%;
margin-top:0px;
padding:0px;
height:63px;
background-color:#FFF;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 7px 8px;
background-color: white;
color: black;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 5em; /* Width to help Opera out */
background-color: white;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: white;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color:#FFC; }
Any help would be appreciated! It's really frustrating me. I've tried looking around other websites for help too. Kim Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. How is this navigation done on the top of the page? I looked at the CSS and all the javascript. I can't see how the drop down is created? I tried to replicate it and copied the background images. I can get the menu to show and rollovers work. Just the drop down won't work. http://jmadvertising.com/ I'm pretty new to CSS, but I've managed to put together a website based from a psd, that validates and everything has gone well. My menu, however, is pretty shoddy. I have everything positioned the way I want it, but what I want to do is convert the lists inside from dropping down to being horizontal parallell to the nav bar itself. From: --- --- --- --- | | To: _ _ _ --- --- --- --- The site is here. Ignore the issues with the absolute positioning; its because of the ads at the top, and it doesn't affect the nav bar. I am desperatefor some help, it is ridiculous to figure out. Anyone who can help me, I would be crazy grateful. Thanks, Tom Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
/*BEGINNING OF CSS*/
body{
padding: 0px;
background-color: #000000;
font-family: Verdana;
color: #FFFFFF;
text-align: center;
}
div.container {
margin: 0 auto;
padding: 0px;
width: 1024px;
text-align: left;
}
div.left {
float: left;
}
div.right {
float: right;
}
div.logo {
margin: 0 auto;
background-position: top center;
text-align: center;
}
div.header {
text-align: center;
padding-top: 0px;
}
div.navigation {
background-color: #000000;
background-image: url(http://i39.tinypic.com/igm16v.jpg);
overflow: auto;
}
div.content {
background-color: #000000;
background-image: url(http://i39.tinypic.com/2ce2qus.jpg);
overflow: auto;
height: 525px;
margin: 0 auto;
}
div.footer {
background-color: transparent;
background-image: url(http://i39.tinypic.com/2vjsbrp.jpg);
overflow: auto;
height: 290px;
padding: 0px;
margin: 0 auto;
}
p.head {
text-align: left;
font-size: 24px;
}
p.content {
position: relative;
font-size: 12px;
}
a.main {
text-decoration: none;
font-size: 18px;
padding: 8px;
color: #FFFFFF;
background-color: transparent;
}
a.sub {
font-size: 16px;
line-height: 150%;
text-align: left;
text-decoration: none;
color: #999999;
background-color: transparent;
}
a.plain {
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
background-color: transparent;
}
a.plainfoot {
text-decoration: none;
font-size: 12px;
color: #959595;
opacity: 90%;
background-color: transparent;
border-bottom: 1px solid #0d0f10;
opacity: 100%;
}
#nav, #nav ul {
margin: 0 auto;
padding: 0px;
list-style: none;
}
#nav a.main {
display: block;
margin-left: 5px;
}
#nav a.sub {
display: block;
width: 150px;
margin-left: 5px;
}
#nav li {
float: left;
width: 5em;
}
#nav li ul {
position: absolute;
width: 1em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li ul {
position: absolute;
padding: 7px;
width: 1em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
font-family: lucida grand;
}
h1.footer {
position: relative;
font-size: 18px;
color: #123712;
margin-bottom: 0%;
margin-left: 50px;
}
p.footer {
font-size: 12px;
color: #909090;
margin-left: 50px;
max-width: 200px;
text-decoration: none;
}
h1.main {
font-size: 28px;
font-weight: 200;
margin-left: 140px;
padding: 0;
text-shadow: #959595;
}
p.content {
font-size: 12px;
color: #FFFFFF;
line-height: 130%;
margin-left: 140px;
max-width: 450px;
text-decoration: none;
}
div.date {
background-color: transparent;
background-image: url(http://i39.tinypic.com/xnc3de.jpg);
background-repeat: no-repeat;
padding: 0px;
margin-top: 17px;
margin-left: 0px;
}
h1.main2 {
font-size: 28px;
font-weight: 200;
margin-left: 140px;
text-shadow: #959595;
}
p.content2 {
font-size: 12px;
line-height: 130%;
margin-left: 140px;
max-width: 450px;
text-decoration: none;
}
div.date2 {
background-color: transparent;
background-image: url(http://i39.tinypic.com/xnc3de.jpg);
background-repeat: no-repeat;
padding: 0px;
min-height: 100px;
margin: 0px;
}
div.sidebar {
background-color: transparent;
background-image: url(http://i41.tinypic.com/2r76kpu.jpg);
background-repeat: no-repeat;
background-position: top right;
padding: 0px;
min-height: 200px;
margin-top: 15px;
margin-right: 15px;
}
div.datetext1 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: 200;
color: #FFFFFF;
left: auto;
top: 382px;
padding-top: 262px;
padding-left: 44px;
}
div.dateid1 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 24px;
font-weight: 300;
color: #123712;
left: auto;
top: 382px;
padding-top: 281px;
padding-left: 47px;
}
div.datetext2 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: 200;
color: #FFFFFF;
left: auto;
top: 382px;
padding-top: 44px;
padding-left: 44px;
}
div.dateid2 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 24px;
font-weight: 300;
color: #123712;
left: auto;
top: 382px;
padding-top: 63px;
padding-left: 47px;
}
div.sidebarhead {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 18px;
font-weight: 200;
color: #123712;
text-align: center;
left: auto;
top: 400px;
padding-top: 15px;
padding-left: 630px;
}
div.sidebartext {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 10px;
color: #FFFFFF;
line-height: 130%;
text-align: left;
max-width: 168px;
left: auto;
top: 400px;
padding-top: 50px;
padding-left: 610px;
}
/*END OF CSS*/
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<title>Obsidian Recording Front Page</title>
</head>
<body>
<div class="container">
<div class="left">
<img src="http://i39.tinypic.com/14j6nsz.jpg" alt="left column"/>
</div>
<div class="right">
<img src="http://i40.tinypic.com/b4yir5.jpg" alt="right column"/>
</div>
<div class="logo">
<img src="http://i40.tinypic.com/2u77lua.jpg" alt="logo"/>
</div>
<div class="header">
<img src="http://i41.tinypic.com/1178qo6.jpg" alt="header"/>
</div>
<div class="navigation">
<ul id="nav">
<li><a class="main" href="http://www.obsidianrecording.com">Home</a></li>
<li><a class="main" href="#">Music</a>
<ul>
<li><a class="sub" href="http://www.obsidianrecording.com/featured">Featured</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/artists">Artists</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/artists/thisisthefall">My Band</a></li>
</ul>
</li>
<li><a class="main" href="http://www.obsidianrecording.com/design">Design</a></li>
<li><a class="main" href="#">Store</a>
<ul>
<li><a class="sub" href="http://www.obsidianrecording.com/store/recording">Recording</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/store/design">Design</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/store/music">Music</a></li>
</ul>
</li>
<li><a class="main" href="#">About</a>
<ul>
<li><a class="sub" href="http://www.obsidianrecording.com/about/rates">The Rates</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/about/studio">The Studio</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/about/tomhoneyman">Tom Honeyman</a></li>
</ul>
</li>
</ul>
</div>
<div class="content"
<div class="date">
<div class="sidebar"
<h1 class="main">Cast into Shadows</h1>
<p class="content">The first band ever to record at Obsidian Recording was Cast into Shadows. I'd like to shout out to Donnie, Evan, Josh, Brian, and J.T. for being the first group to come through here and for making a kickass record along the way. You can find more about them in the Artists section of the site.</p>
</div>
</div>
<div class="date2">
<h1 class="main2">Website Launched!</h1>
<p class="content2">After a looong time working on this site, I've finally finished just in time for summer! What you can expect is a lot of updates on what artists who record here are doing, free downloads, cool videos of their shows, special rates just for people who visit the site, and more. If you'd like to contact me, all my information and more is in the About section of the site. <br /><br /> Thanks for visiting, and I hope you enjoy!</p>
</div>
<div class="datetext1">Jun</div>
<div class="dateid1">1</div>
<div class="datetext2">Jun</div>
<div class="dateid2">7</div>
<div class="sidebarhead">New Website!</div>
<div class="sidebartext">Welcome to the all-new Obsidian Recording site! I will regularly update with news, special rates, videos, featured free downloads, and more.</div>
</div>
<div class="footer">
<br /><br /><br />
<h1 class="footer">Recent Projects</h1>
<p class="footer"><a class="plainfoot" href="www.obsidianrecording.com/artists/castintoshadows">Cast into Shadows</a><br /><br /><a class="plainfoot" href="http://www.obsidianrecording.com/artists/thisisthefall">This is the Fall</a></p>
</div>
</div>
</body>
</html>
Hey guys I am currently having an issue with a CSS Navigation. I was wondering if anyone was available to help me out. http://schoolwide.sgajewski.com/menu/ I am currently having an issue with IE 7. It seems to be working in every other browser but the second level of the navigation is offset lower in IE7. The spacing starts off 1 pixel two low and progressively the gap gets wider. Code:
ul.vertical, ul.vertical li {
margin:0;
padding:0;
list-style-type:none;
font-size:100%;
}
ul.vertical {
position:absolute;
z-index:1000;
cursor:default;
width:180px;
left:1em;
top:4.05em;
}
ul.vertical li {
position:relative;
text-align:left;
cursor:pointer;
cursor:hand;
width:180px;
margin:-1px 0 0 0;
padding-bottom:0px!important;
padding-bottom:1px;
float:left;
clear:both;
top:0;
left:0;
}
ul.vertical ul {
z-index:1020;
cursor:default;
position:absolute;
width:197px;
margin:0 0 0 179px;
top:-100em;
left:-1px;
padding:1px 0 0 0;
height:0px;
overflow:hidden;
}
ul.vertical ul li {
width:197px;
}
ul.vertical ul ul {
margin: 0 0 0 179px;
}
@media Screen, Projection {
ul.vertical li:hover > ul { top:0; height:auto; overflow:visible; }
}
ul.vertical a, ul.vertical a:visited {
display:block;
cursor:pointer;
cursor:hand;
background:url(images/bg.jpg);
padding:5px 7px;
font:normal normal bold 0.7em tahoma, verdana, sans-serif;
color:#008000;
text-decoration:none;
letter-spacing:1px;
}
ul.vertical a:hover, ul.vertical a:focus, ul.vertical a.rollover, ul.vertical a.rollover:visited {
background:url(images/bg_over.jpg);
color:#806020;
}
ul.vertical .outtop {background:url(images/bg_over_top.jpg);}
ul.vertical .outbg {background:url(images/bg_over_mid.jpg);}
ul.vertical .outbot {background:url(images/bg_over_bot.jpg);}
ul.vertical ul a,
ul.vertical ul a:hover,
ul.vertical ul a:visited,
ul.vertical ul a:active
ul.vertical ul a:hover,
ul.vertical ul a:focus,
ul.vertical ul a.rollover,
ul.vertical ul a.rollover:visited
{
background-image:none;
}
@media screen, projection {
* html ul.vertical li {
display:inline;
f\loat:left;
background:#ffffff;
}
}
* html ul.vertical li { position:static; }
* html ul.vertical a { position:relative; }
ul[class^="vertical"] ul { display:none; }
ul[class^="vertical"] ul { displa\y:block; }
Any help on why this is offset in IE7 would be great. Thanks in advance. Hello, I'm new to the forum and not very good with CSS yet. I'm slowly moving from tables to CSS. I set up a sample page to describe the problem I'm having but the forum won't allow me to post the URL here. I have a vertical CSS "LI" navigation section in the left hand sidebar of this web page and it works perfectly in every Mac browser I try it on (very latest Mac versions of Opera, Firefox, Safari, Chrome, Camino, Omniweb, etc.). There's a white, 1-pixel horizontal spacer/separator line between each link in the left sidebar which is supposed to be 220 pixels wide. It is 220 pixels wide on all the Mac browsers I try it on but for some reason, as soon as I try the web page in IE 7 or IE 8, the white horizontal 1-pixel divider line is shorter and ends up being only 195 pixels wide and throws the whole, nice and "even" look off. I don't understand where the 25 pixels are disappearing to in IE 7 and IE 8. Can anyone offer any insight as to what the fix may be or what I've done wrong? Below is the code I've used to create the navigation. Thanks so much. HTML Code: Code: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Home</A></li> <li><a href="#">On To Page 2</A></li> <li><a href="#">On To Page 3</A></li> <li><a href="#">On To Page 4</A></li> <li><a href="#">On To Page 5</A></li> </ul> </div> CSS Code: Code: #navlist {
padding-left: 25px;
margin-left: 0;
width: 220px;
}
#navlist li {
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid white;
}
#navlist li a {
background: transparent url(../images/list_off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: #277eb1;
text-decoration: none;
line-height: 30px;
}
#navcontainer ul li a:hover {
background: transparent url(../images/list_on.gif) left center no-repeat;
color: #da251c;
}
#navcontainer ul li a#current {
background: transparent url(../images/list_active.gif) left center no-repeat;
color: #999999;
}
hi, i was wondering if anyone knw any links to ultra super dooper cool websites for css navigations. I want to learn how to do ace ones. I have already googleed about, I found the sliding doors on ALA an stuff but i need that little bit more cool tutorials prefrably!! I did find one cool one athttp://www.bulkherbstore.com/ thanks tom. Hello. So I'm trying to make my html more semantic, so I'm trying to avoid divs and spans as much as possible. I'm trying to make an unordered list navigation, but it shows up really choppy in IE7. However, the moment I change it from <ul id="navigation"> to <div id="navigation">, it works perfectly. Just for semantics sake I'd like to see if I could keep the ul working. Here's the html code, it validates xhtml strict so you don't have to worry about that. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <title>Eagle Steel Buildings</title> </head> <body> <div id="wrapper"> <img id="banner" src="images/global/banner.jpg" alt="Eagle Steel Building"/> <ul id="navigation"> <li><a href="" class="selected">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">Our Work</a></li> <li><a href="">Free Quote</a></li> <li><a href="">Contact Us</a></li> </ul> <h1>Steel Building Construction</h1> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> <form id="quoteform" action="quote_home.php" method="post"> <fieldset> <label for="name">Name</label><input type="text" name="name" id="name" /> <label for="date">Date</label><input type="text" name="date" id="date" /> <label for="phone">Phone</label><input type="text" name="phone" id="phone" /> <label for="email">Email</label><input type="text" name="email" id="email" /> <label for="location_zip_code">Location Zip Code</label><input type="text" name="location_zip_code" id="location_zip_code" /> <label for="width">Width</label><input type="text" name="width" id="width" /> <label for="length">Length</label><input type="text" name="length" id="length" /> <label for="sidewall_height">Sidewall Height</label><input type="text" name="sidewall_height" id="sidewall_height" /> </fieldset> </form> </div> </body> </html> And here's the CSS, also validated. Code:
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, textarea
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Begin Page Styles */
.btest{border:1px solid #FFFFFF;}
body {
background: #CCCCCC URL('../images/global/steelbg.jpg') top left;
margin: 0px;
padding: 0px;}
#wrapper{
margin: 0px auto;
width: 1010px;
height: 1000px;
background: URL('../images/global/wrappershadow.png') repeat-y;}
#banner{
display: block;
margin: 0px auto;
width: 1000px;
height: 250px;
}
#navigation{
display: block;
margin: -2px auto 0px;
width: 1000px;
height: 38px;
list-style-type:none;
background: #000000 URL('../images/global/navbg.png') no-repeat;}
#navigation a{
float: left;
height: 39px;
line-height: 2.3em;
margin-top:3px;
padding-left: 13px;
padding-right: 13px;
font-size: 1.0em;
font-family: Verdana, serif;
text-decoration: none;
font-weight: bold;
color: #CCCCCC;
text-align: center;}
#navigation a:hover, #navigation a.selected{
text-decoration: underline;}
#navigation a.selected{
color: #ff0000;}
I have not finished styling the rest of the page, I am only concerned with the navigation right now. I appreciate your time and effort! I have a nice little vertical navigation block that I would like to use in multiple pages within the same website. I would like to use the nav block without repeating the code, but I can't figure out how to do it. I have put the code in navigation.htm. What do I do next? I have a bit of an issue with a drop down script I'm working on. It's a CSS menu built from ul/li/a tags with an iframe thrown in for IE6 sake. My problem is 2 fold. The first problem is in firefox. There is 2-3px of mystery padding/margining on my tags. I didn't put it there, nor does it show up in browsers other than firefox. My second problem is a safari 2 issue. The dropdowns appear to be hidden behind some kind of container, very weird if you ask me. I'm using jQuery for my script manipulation (if you don't know about it, learn about it. Its laziness is astounding!) [Edit: link updated] http://programmer .whipplehill .com/wes/newDD/list/getPageList.asp Any help would be great! Thanks --Wes I'm editing a CSS drop down navigation that uses <ul> and <li>. Is there a way to change the background color & rollover in just one of the dropdowns? The code is below in two sections. I've highlighted the list that I'd like to change the background color of. Thanks for your help! Code: <div id="wrap"> <ul id="navbar"> <!-- The strange spacing herein prevents an IE6 whitespace bug. --> <li><a href="#"><IMG SRC="d_images/navigation_01.gif" border="0"></a> </li> <li><a href="#"><IMG SRC="d_images/navigation_02.gif" border="0"></a> <ul> <li><a href="summit_09registration.cfm">Register</a></li><li> <a href="summit_09scholarship.cfm">Scholarships</a></li></ul> <li><a href="#"><IMG SRC="d_images/navigation_03.gif" border="0"></a> <ul> <li><a href="summit_09awards.cfm">Leadership Awards</a></li><li> <a href="summit_09party.cfm">Anniversary Party</a></li><li> <a href="summit_09work.cfm">Work Project</a></li><li> <a href="summit_09dine.cfm">Dine Arounds</a></li><li> <a href="summit_09jazz.cfm">Jazz Fesitval</a></li><li> <a href="summit_09networking.cfm">Networking</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_04.gif" border="0"></a> <ul> <li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li> <li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_05.gif" border="0"></a> <ul> <li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li> <li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_06.gif" border="0"></a> <ul> <li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li> <li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_07.gif" border="0"></a> <ul> <li><a href="summit_09hotel.cfm">Conference Hotel</a></li><li> <a href="summit_09travel.cfm">Travel</a></li><li> <a href="summit_09neworleans.cfm">New Orleans</a></li></ul> </li> </ul></div> Code:
<style type="text/css">
#navbar {
margin: 0;
padding: 0;
height: 0;}
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding-bottom:0px;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
border: 0px;
color: #fff;
font-family: helvetica;
font-size: 8pt;
font-style: bold;
font-color: #ffffff;
text-decoration: none;}
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-image: url(../images/summit_nav_back.gif);}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-image: url(../images/summit_nav_back.gif);
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-image: url(../images/summit_nav_red.gif); }
</style>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Hi, I have problem with my code here and need someone to tell me what i am doing wrong here is the url www.epicindex.com/newmain.shtml on the left hand side there is a link called history and when i select Husker power you will see the page for husker power now when you move your mouse on the history link it shows the sub links but those sub links are hidden behind the pic can someone tell me what i am doing wrong here is the code for the page for husker power Code:
<!-- #Include virtual="/webcontent/doctype.txt" -->
<html>
<head>
<!-- #Include virtual="/tagsm.htm" -->
<!-- #Include virtual="/webcontent/cssinclude.htm" -->
<title>EPIC Performance</title>
<SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/nav.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/verticalnav.js">
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="lefthandnav">
<!-- #Include virtual="/webcontent/lefthandfile.htm" -->
</div>
<div class="righthandnav">
<!-- #Include virtual="/webcontent/righthand.htm" -->
<h1>History of Talent Identification Index</h1>
<p class="imageleft"><img src="/images/histhusker.jpg"></p>
<p>Left :<b>Tom Osborne</b><br/> 255 wins as Nebraska Head Football coach<br/> Three National Championships</p>
<p>
Right:<b>Bob Devaney</b><br/>
101 wins as Nebraska HEad Football Coach<br/>
Two National Championships
</p>
</div>
</div>
</body>
</html>
and here is the code for the css Code:
body
{
margin: 0;
padding: 0;
font-family: arial;
color: #000;
}
#wrapper {
width: 900px;
height:605px;
}
.lefthandnav
{
float: left;
width: 145px;
background-color:white;
padding:0px 5px 0px 0px;
}
.righthandnav
{
float: left;
width: 745px;
background-color:white;
padding: 0px 0px 0px 5px
}
.headerimgleft
{
height:75px;
padding:0px 0px 5px 0px;
}
.clearing
{
clear:both;
}
.headingtitle
{
font-weight: bold;
font-size: 15;
text-align:center;
}
.topline
{
margin: 0;
padding: 0;
width:94.3%;
margin:0px;
color: #CC0000;
background-color: #CC0000;
height: 5px;
}
.bl {background: url(bl.gif) 0 100% no-repeat #e68200;}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; text-align:center;padding:5px}
.clear {font-size: 1px; height: 1px}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
padding:5px 0px 0px 0px;
}
#menu dl {
float: left;
width: 8.7em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: left;
font-weight: bold;
background: #CC0000;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 145px; /*WIDTH OF MAIN MENU ITEMS*/
background-color:#CC0000;
text-align:center;
}
.glossymenu li{
position: relative;
background-color:#CC0000;
}
.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}
.glossymenu li a{
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
}
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
.sponsordiv
{
background-color:#CC0000;
}
.sponsortexthead
{
text-decoration:underline;
font-weight:bold;
text-align:center;
}
.firstimage
{
float:left;
}
.secondfirstimage
{
float:left;
}
.thirdimage
{
float:left;
}
.mainpageholder
{
width:730px;
padding:30px 10px 10px 10px;
}
h1 {
color: #386cae;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 150%;
font-weight: bold;
margin: 20px 0 0 0;
padding:25px 0px 0px 0px;
}
.imageleft {
float: left;
margin: 10px 20px 10px 0;
position: relative;
}
.imageright {
float: right;
margin: 10px 0 10px 20px;
position: relative;
}
.noting {
background-color: #f7f5f6;
color: #000;
font-size: 80%;
margin-top: 10px;
padding: 5px 15px 0 5px;
border: 1px groove #000;
}
.noting p {
margin-top: 0;
}
i would appreciate any help i have spent a lot of time trying to figuring out what i am doing wrong thanks, todd My navigation displays correctly in IE 7+ and Mozilla Firefox, however in IE Under 7 the navigation places a double line and adds additional padding to the navigation. Does anyone have a remedy for this problem? Please look at this page in IE, http://www.atramember.com then in Firefox. THe navigation up at the top is all messed up and I can't figure out why (messed up in FF). Thanks. Tom I have ran into a bit of a problem getting the navigation to show all on one line when in a div set to 765px (The width I need the site to be...). The div is required for the rest of my site removing it is not an option. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Header</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-us" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="width: 765px;"> <ul id="nav-header"> <li id="zero-nav"><a href="#">Zero</a></li> <li id="one-nav"><a href="#">One</a></li> <li id="two-nav"><a href="#">Two</a></li> <li id="three-nav"><a href="#">Three</a></li> <li id="four-nav"><a href="#">Four</a></li> <li id="five-nav"><a href="#">Five</a></li> </ul> </div> </body> </html> CSS: Code: ul#nav-header li {
display:block;
float:left;
}
ul#nav-header li a {
display:block;
outline:none;
width:101px;
height:74px;
background:url(as_nav_header.gif) no-repeat 0 0;
text-indent:-9009px;
margin:0;
overflow:hidden;
}
ul#nav-header li a:hover {
background-position:0 -74px;
}
ul#nav-header li#one-nav a {
width:134px;
background-position:-101px 0;
}
ul#nav-header li#one-nav a:hover {
background-position:-101px -74px
}
ul#nav-header li#two-nav a {
width:134px;
background-position:-235px 0;
}
ul#nav-header li#two-nav a:hover {
background-position:-235px -74px
}
ul#nav-header li#three-nav a {
width:137px;
background-position:-369px 0;
}
ul#nav-header li#three-nav a:hover {
background-position:-369px -74px
}
ul#nav-header li#four-nav a {
width:122px;
background-position:-506px 0;
}
ul#nav-header li#four-nav a:hover {
background-position:-506px -74px
}
ul#nav-header li#five-nav a {
width:134px;
background-position:-628px 0;
}
ul#nav-header li#five-nav a:hover {
background-position:-628px -74px
}
Thanks, - Chris B. |
|||||||