CSS - Simple Navigation Not Working
Hi, I have a simple rollover navigation, which is as follows::
Code:
<ul id="nav"> <li><a href="about.html" class="about"></a></li> <li><a href="guestpics.html" class="guestPics"></a></li> <li><a href="staff.html" class="staff"></a></li> <li><a href="webcams.html" class="webcams"></a></li> <li><a href="parties.html" class="parties"></a></li> <li><a href="contact.html" class="contact"></a></li> </ul> Here is the CSS for the about link:: Code: #nav a.about{ background-image:url(images/nav/about_off.gif); width:77px; height:18px; } #nav a.about:hover { background-image:url(images/nav/about_on.gif);} I don't see what I am doing wrong? Can someone help? thanks Similar TutorialsHi I have used this drop down navigation as the main navigation on my website, it drops down perfectly in firefox but won't drop down in IE??? Is there something I am missing or could add to make it work?? My sites below and css byronyoga(dot)com byronyoga(dot)com(slash)templates(slash)css(slash)style.css (the style is down the bottom of the css) Thanks. I've been at this for hours and hours and I've tried about 50 different ways to get this to work but I'm totally stumped. I've switched the id and class around (in my site's theme.php and template.html) so often that I'm dizzy. I've searched Google and these forums (among others) for help but still, I'm getting nowhere. Maybe my CSS skills are lacking but this seems simple enough (or is it?). Anyway, here's the problem: The CSS (below) just won't work...so what's wrong with it? What am I missing? Code: ul#navigation { list-style: none; margin:0 auto; padding:0; font-family: Arial, Verdana, Serif; font-weight:bold; background:#32478A; text-transform:uppercase; height:25px; line-height:25px; font-size:12px; } ul#navigation li { float:left; margin:0; padding:0; list-style:none; white-space:nowrap; background:none; } ul#navigation li a { display:block; padding:0 15px; text-transform:uppercase; letter-spacing:1px; border:none; color:#fff; } ul#navigation li a:hover, ul#navigation li a:active, ul#navigation li.current_page_item a { color:#242169; background:#fff; } My template.html UL ID looks like this... Code: <ul id="navigation"> {SYS_MENU} </ul> ...and the theme.php CLASS (login link for example) looks like this: Code: <!-- BEGIN login --> <li><a href="{LOGIN_TGT}" title="Click here to log in" class="current_page_item"> Log in</a></li> <!-- END login --> Here's a link to my site: The hover and active bits seem to work but not the CURRENT...which is what I need to fix. Simply put, the current tab at the top of the page doesn't change to reflect what page you're on. I apologize in advance for the coding mess on my site but I'm just now getting around to cleaning things up. I could really use a hand fixing this little monster. Anyone with stellar CSS skills ready to school this lazy bum? Cheers. EDIT: The link (BBCode) above (to my site) doesn't work, so click my homepage in the drop-down menu under my user name. Thanks. I'm trying to create a tiered vertical navigation menu and I'm nearly there. Everything works correctly in FF but in IE the background-position property on the current menu item fails to position the bullet image. Removing the property displays it but at the margin which is set to 0px. I'm not that savvy with CSS so if there's a better approach to this I'm open to suggestions. Thanks for your help! Open in FF to see how it's supposed to work: Open in IE to see problem. Here's the HTML Code: <div id="Menu"> <div id="nav_header"> <div id="text"> Admissions & Financial Aid </div> </div> <ul id="nav_level_1"> <li id="submenu"><a href="../index.php">Applying to Union</a></li> <ul id="nav_level_2"> <li id="nav_active"><a href="index.php">Types of Admission</a></li> <ul id="nav_level_3"> <li><a href="Transfer.php">Transferring to Union</a></li> <li><a href="Early.php">Early Decission</a></li> <li><a href="Regular.php">Regular</a></li> <li><a href="international.php">International Admission</a></li> <li><a href="aop_heop.php">AOP/HEOP</a></li> <li><a href="Medical.php">Eight-year Medical</a></li> <li><a href="Law.php">Six-year Law</a></li> <li><a href="MBA.php">Five-year MBA</a></li> <li style="line-height:0px;font-size:0px;">*</li> </ul> <li><a href="../Applications.php">Apply Online</a></li> <li><a href="../Forms/index.php">Download Application Materials</a></li> <li style="line-height:0px;font-size:0px;">*</li> </ul> <li><a href="../../FAQs/index.php">Have a Question?</a></li> <li><a href="../../Financial_Aid/index.php">Financial Aid</a></li> <li><a href="../../Events/index.php">Events/Programs & Visiting</a></li> <li><a href="../../interviews.php">Interviews</a></li> <li><a href="../../PerfectSchool/index.php">Tips for College Search</a></li> <li><a href="../../About/index.php">Admissions Staff</a></li> <li><a href="../../AlumniAdmissions/index.php"></a></li> <li><a href="../../Media/index.php"></a></li> <li><a href="/union/admissions/Viewbook/index"></a></li> <li><a href="/union/admissions/Alumni/index"></a></li> <li><a href="../../sample.php"></a></li> <li style="line-height:0px;font-size:0px;">*</li> </ul> </div> Here is the pertinent CSS Code: /* Style for three levels of unordered lists */ #Menu #nav_level_1 { list-style-type:none; width: 200px; margin-left: 0px; padding-left: 0px; margin-top: 0px; padding-top: 0px; background-color: #d2c6aa; line-height:17px; word-wrap: break-word; } #nav_level_2 { list-style-type:none; width: 200px; margin-left: 0px; padding-left: 0px; margin-top: 0px; padding-top: 0px; background-color:#ded4bc; line-height:17px; word-wrap: break-word; } #nav_level_3 { list-style-type:none; width: 200px; margin-left: 0px; padding-left: 0px; margin-top: 0px; padding-top: 0px; background-color:#e5dece; line-height:17px; word-wrap: break-word; } /* End unordered list base styles */ /* To get indented, wrapping, text that's cross browser compatible we need to additionally style the unordered lists and line items under each top <ul> */ #nav_level_1 li { margin-left:20px; } #nav_level_1 li ul { margin-left:-20px; } #nav_level_2 li { margin-left: 40px; } #nav_level_2 li ul { margin-left:-40px; } #nav_level_3 li { margin-left:60px; } #nav_level_1 #nav_active { background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif); background-repeat: no-repeat; background-position: 4px; background-color: #f2ede1; margin-left:0px; padding-left: 20px; } #nav_level_2 #nav_active { background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif); background-repeat: no-repeat; background-position: 24px; background-color: #f2ede1; margin-left:0px; padding-left: 40px; } #nav_level_3 #nav_active { background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif); background-repeat: no-repeat; background-position: 44px; background-color: #f2ede1; margin-left:0px; padding-left: 60px; } #Menu #submenu { list-style-type: circle; padding-left: 0px; margin-top: 0px; padding-top: 0px; background-color:#d2c6aa; line-height:17px; word-wrap: break-word; } #submenu2 { list-style-type:circle; margin-left: 0px; padding-left: 0px; margin-top: 0px; padding-top: 0px; background-color:#ded4bc; line-height:17px; word-wrap: break-word; } Hi, I am designing this site for my Web Design class, and have made the big mistake of working only in FF and not checking IE until the end. The problem is with the Navigation. It is a UL-based Navigation with 5 items. The text of each LI is made "invisible" by using text-indent -9999px in CSS. I have 5 images that have 2 states used for each button. Here is the CSS code for the whole Navigation: #nav {list-style-type: none; margin: 0; padding: 0; background: #fff; width: 934px; height: 62px; position: absolute; top: 0;} #nav a {float: left; height: 62px; text-indent: -9999px; overflow: hidden;} #nav #home a {background: #fff url(home.jpg) no-repeat; height: 62px; width: 194px; float: left;} Here is the CSS that is used for the header and logo: #header {height: 62px; padding-bottom: 231px;} #logo {position: relative; top: 62px; left: 95px;} Here is the XHTML: <div id="container"> <div id="header"> <img id="logo" src="logo.gif" width="740" height="231" alt="Justin Cener Designs Logo 2008" /> <ul id="nav"> <li id="home"><a href="index.htm">Home</a></li> <li id="about"><a href="about.htm">About</a></li> <li id="services"><a href="services.htm">Services</a></li> <li id="portfolio"><a href="portfolio.htm">Portfolio</a></li> <li id="contact"><a href="contact.htm">Contact</a></li> </ul> </div>...............other code follows The above is then repeated for each button and again for each hover state. The problem seems to be in the first part of code. In FF, the buttons make up a full navigation bar and are flush next to each other. This is the way I want it to come out. Then, in IE 7, there are 2 huge differences. 1) The whole Navigation starts on the right of the header logo. 2) Each button drops down maybe 3-5 px from the next (see picture attached) I don't understand why it is like this? Can anyone point me in the right direction? Thanks! Sorry, screen caps don't work here. I dont understand what I am missing, the menu is suppose to be a drop down menu (and suppose to be horizontal, but i havent got that far yet) but its not dropping, its displaying everything? I would appreciate any help on making it work correctly, thanks much! -Sean nav_style.css file: Code: body { font-family: Arial, Helvetica, sans-serif; } #nav { width: 200px; font-family: Arial, Helvetica, Sans-serif; } #nav ul { list-style: none; margin: 0; padding: 0; } #nav li { border-bottom: 1px solid #ed9f9f; } #nav li a:link, #nav li a:visited { display: block; padding: 5px 5px 5px 0.5em; border-left: 12px solid #711515; border-right: 1px solid #711515; background-color: #b51031; color: #ffffff; text-decoration: none; } #nav li a:hover { background-color: #711515; color: #ffffff; } #nav ul ul { margin-left; 12px; } #nav ul ul li { border-bottom: 1px solid #711515; color: #ffffff; } #nav ul ul a:link, #nav ul ul a:visited { background-color: #ed9f9f; color: #711515; } #nav ul ul a:hover { background-color: #711515; color: #ffffff; } and here is the head_nav.php file: Code: <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?> <!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> <title>?</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="css_inc/nav_style.css" /> </head> <body> <div id="nav"> <ul> <li><a href="#">Services</a> <ul> <li><a href="#">Cinematography</a></li> <li><a href="#">Photography</a></li> </ul> </li> <li><a href="#">Video</a> <ul> <li><a href="#">Demo Reel</a></li> <li><a href="#">Music Video</a></li> <li><a href="#">Commercial</a></li> </ul> </li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">About Valliant</a> <ul> <li><a href="#">Biography</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li><a href="#">Links</a></li> <li><a href="#">Home</a></li> </ul> </div> </body> </html> Hi there, I'm haing a problem getting my navigation to appear correctly in Mac IE 5.2 and Safari 2.0.1. The dates on the right are supposed to pop you down to the date in the central box. It works correctly on a PC, all browsers. I replaced NAME with ID. Thanks for any help or suggestions! http://www.cofc.edu/~finchj/timeline_not_template.html http://www.cofc.edu/~finchj/style_timeline.css Jannette Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. All I want is a table centered on the page with an image on the left side of it. What I have is this and it does not center the elements, instead it looks like the table and image are just floated left. Code: body { text-align: center; } #wrapper { width: 900px; margin: 0px auto; } #table { width: 700px; margin-left: 100px; margin-right: 100px; text-align: left; } #image { float: left; } 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! Am I missing something? I am using the following code and it works if I put it in the head, but doesn't work if I put it in an external style sheet. I know I am sleep deprived but am I missing something simple? .m_isabel { display: block; width: 175px; height: 20px; background: url("jpg/m_isabel.jpg") no-repeat 0 0; } .m_isabel:hover { background-position: 0 -20px; } .m_isabel span { display: none; } In body: <a href="#" class="m_isabel" title="Isabel"><span>F. Isabel </span></a> Hello, I'm working on some really simple CSS and it's giving me wildly different results in Firefox and in IE. Here is the stylesheet: PHP Code: body { background-color: #DECFEF; } .example { background-image: url("images/example.gif"); border-width: thin; border-color: white; border-style: solid; padding: 35px 35px 35px 35px; } And here is the HTML file: PHP Code: <html> <head> <title>Chatterbox</title> <link rel="stylesheet" type="text/css" href="/teststyle.css"> </head> <body> <table class='example'><tr><td> hello </td></tr></table> </body> </html> All of this works (the image in the background, the white border, etc.) except the padding! In IE there is no padding at all, but in Firefox there is 35px padding, as specified in the stylesheet. You may see this yourself if you go to this URL in the two different browsers: http://www.chatterboxletters.com/test3.html Any help is greatly appreciated ~j. Hi, Im trying to make the orange column fixed width but it doesnt work, when I change the width of the browser window it still changes width. Here is the link: http://www.i3design.com/test/ Here is the CSS: Code: .left { float: left; } .right { float: right; } .clear { clear: both; } .center { margin-left: auto; margin-right: auto; text-align: center; } .hidden { display: none; } body { color: white; margin: 0; padding: 0; } /* Edited by Goldworker */ div.padded { display: block; } div.content { width: 75%; margin: 0% 12.5%; } /* Added by Goldworker */ div.login { background-color: black; padding: 0% 12.5%; } /* Edited by Goldworker */ div.logo { background-color: grey; height: 50px; padding: 0% 12.5%; } /* Edited by Goldworker */ div.subnavigation { background-color: brown; } div.main { color: black; background-color: orange; padding-left: 0px; padding-right: 0px; } div.main div.body { background-color: white; min-width: 75%; } div.main div.advertisements { width: 250px; display: inline; margin-right: 0px; } div.footer { background-color: grey; } Can anyone help. Also, is this well coded, or is it inefficient? James 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'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> 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! 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/ 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 all, I have a small problem with the new design for my website and after trying things for like 30 minuts and asking some other people I decided to give up and try here. It's probably going to be something very simple but I just can't figure out what Website: URL CSS: URL Explaination pictu URL The first part is how it shows in Internet Explorer, the second shows Firefox and the third how it is supposed to be. I hope somebody can help me with this. Thx in advance. Greetings, Sjoerd |