Jump to content

Hover problem

Natechs

By Natechs
in CSS

Recommended Posts

Natechs Member

Natechs

Posted
Posted

Over on my site, my nav bar have a cool little hover feature. But on the first button, it doesn't hover let alone display the link.CODE: 

[i]<?xml version="1.0" encoding="utf-8"?>[/i]<!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 name="author" content="Nathan Chancellor" />    <meta name="keywords" content="web designer, nathan c, nathan's services, nathan's web design services" />    <meta name="description" content="Nathan C, a somewhat talented web designer, runs this site as a service and personal website" />    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon"/>    <link rel="stylesheet" type="text/css" href="styles.css" />    <link href="favicon.ico" type="image/x-icon" rel="icon"/>    <script type="text/javascript" src="over.js"></script>	  <meta name="robots" content="all" />    <title>Nathan C:: Web Designer</title></head><body><div id="container">	<div id="intro">            <ul class="list">                <li><a href="index.html" class="list">Main Page</a></li>                            <li><a href="about.html" class="list">About</a></li>                <li><a href="projects.html" class="list">Projects</a></li>                <li><a href="services.html" class="list">Services</a></li>                <li><a href="news.html" class="list">News</a></li>                <li><a href="http://ncwebdesign.getphpbb.com/" class="list">Forum</a></li>            </ul>        <br />		<div id="preamble">			<h2><span>Welcome...</span></h2>			<p>This is my web design site for Nathan's services as well as my personal web site. You fill out a form telling me what you want, I make it and give it to you. Please note that I don't host the pages. I just make them.</p>            <p>These links are to get certain web browsers.<br />            <img src="images/iconsbanner.png" width="250" height="100" usemap="#browsers" alt="Browser icon" />            <map id="none" name="browsers">            <area shape="rect" coords="1,21,54,77" href="http://www.apple.com/safari/download/" alt="Safari download" />            <area shape="rect" coords="57,22,120,83" href="http://www.opera.com/download/" alt="Opera download" />            <area shape="rect" coords="121,23,180,83" href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" alt="Internet Explorer download" />            <area shape="rect" coords="180,22,247,86" href="http://www.mozilla.com/en-US/firefox/?utm_id=Q108&utm_source=google&utm_medium=ppc&gclid=CI_f9tCtrJQCFQOjFQodjiSPtA" alt="Firefox download" />            </map>            </p>		</div>	</div>	<div id="supportingText">		<div id="explanation">			<h2><span>So What is This About?</span></h2>			<p class="p1"><span>There is clearly a need for <acronym title="Cascading Style Sheets">CSS</acronym> to be taken seriously by graphic artists. I aim to encourage participation in tabless web design. To begin <a href="http://www.csszengarden.com">go to the CSS Zen Garden</a>. Click a design to see it and view the code. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</span></p>            <p class="p2"><span><acronym title="Cascading Style Sheets">CSS</acronym> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.</span></p>		</div>		<div id="benefits">			<h2><span>Benefits</span></h2>			<p class="p1"><span>Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <acronym title="Cascading Style Sheets">CSS</acronym>-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.</span></p>		</div>		<div id="footer">		© 2008 Nathan C | <a href="mailto:natecdog@gmail.com">contact me</a> | <script type="text/javascript">//<![CDATA[        document.write("Document updated: " + document.lastModified);//]]></script>        <p class="icons"><a href="http://validator.w3.org/check?uri=referer" class="icons"><img src="images/xhtml1.png" alt="Valid XHTML 1.0 Strict" height="31" width="88" id="xhtml" onmouseover="mouseOverxhtml()" onmouseout="mouseOutxhtml()" /></a><a href="http://jigsaw.w3.org/css-validator/check?uri=referer" class="icons"><img style="border:0;width:88px;height:31px" src="images/css1.png" alt="Valid CSS!" id="css" onmouseover="mouseOvercss()" onmouseout="mouseOutcss()" /></a></p>		</div>	</div></div></body></html>

CSS:

* {margin:0pt;padding:0pt;}body {background:#48d1cc url(images/background2.png) repeat-x scroll left top;color:#191970;font-family:Verdana,Arial,Helvetica,sans-serif;font-weight:bold;}p {font-size:0.8em;line-height:2em;}h2 span {font-weight:bolder;line-height:1.3em;padding-top:2.5em;text-align:center;text-decoration:underline;}a:link, a:visited {background:transparent none repeat scroll;color:#000;text-decoration:underline;font-weight:bolder;}a:hover, a:active, a:focus {background:#48d1cc none repeat scroll;color:#fff;text-decoration:none;}#container {background:transparent url(images/background.png) repeat scroll left top;width:100%;}#intro, #supportingText {padding:0pt 69px 0pt 86px;width:545px;}#intro {background:transparent url(images/logo.gif) no-repeat scroll left top;padding-top:230px;}#preamble h3, #preamble p, #supportingText h3, #supportingText p {padding-left:10px;padding-right:40px;}#preamble, #explanation, #participation, #benefits, #requirements {border-bottom:1px solid #E4E1DB;padding-bottom:20pt;}#pageHeader, #pageHeader h1, #pageHeader h2, #quickSummary .p1, #linkList2 h3 span {display:none;}#quickSummary .p2 {background:url(images/background2.png) no-repeat scroll left top;display:block;font-size:0.6em;font-weight:bold;left:661px;line-height:1.4em;padding:40px 40px 0pt 30px;position:absolute;top:160px;width:141px;z-index:20;}#quickSummary .p2 a:link, #quickSummary .p2 a:visited {background:transparent url(images/background2.gif) repeat scroll;color:#000;text-decoration:none;}#footer {font-size:0.7em;line-height:1.5em;padding-bottom:40px;padding-top:10px;text-align:center;}ul.list {text-align:center;float:left;list-style-type:none;}li {display:inline;}a.list {float:left;text-decoration:none;color:#000;font-weight:bold;padding:0.2em 0.6em;border:1px solid #000;}a.list:hover {background-color:#fff;color:#000;text-decoration:underline;}img {border:none;}

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

I don't have a solution, because I don't have enuff energy. BUT I can tell you where to look. I played around and got your same results (plus inconsistent results with the second menu item). I tried eliminating all other anchor descriptors from your CSS. No change. Other tinkering. No change.Finally, I just deleted EVERYTHING in your body section EXCEPT for the list, which I kept from <ul> to </ul>. ALL the list items work fine.Conclusion: something else in your page is messing with your list. Maybe the div descriptors. I don't know. Thing is, I'd start looking at the containers. I'm not sure how they're messing things up, but that seems the place to go looking.

Link to comment
Share on other sites
Natechs Member

Natechs

Posted
  • Author
Posted 
<?xml version="1.0" encoding="utf-8"?>

Delete the xml line because it will put IE into Quirks mode, which usually is not a good thing.

It isn't just IE. It all of the major browsers. (Safari, Mozilla Firefox, IE, Opera) :)
Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

I'm pretty sure I have it. Follow my method. I was convinced the problem was caused by one of the divs the list is held by. I figured it was in the style declarations. So I left the divs in place, but proceeded to erase the IDs of the divs, one by one. Turned out to be the first div I tried, the one called "intro". Eliminating it's entire style definition fixes the list behavior. So I put the ID back and tackled the style declarations. Two mention "intro" specifically. I commented out the bottom one, since it looked the weirdest to me. The produced no change. So I restored it. I commented out the first one. Hah! The menu's working. I restored the whole declaration. As you can see below, it contains two lines. I commented out the padding. Nope. I restored it. I commented out the width. BINGO. Now don't ask me why, but that line messes up the :hover in the first 2 list items, mostly the first one.

#intro, #supportingText {	  padding:0pt 69px 0pt 86px;	  width:545px; /* DO SOMETHING WITH THIS */ }

It's a good lesson in debugging. Start broad and narrow your focus. Take out one section at a time. When you find an offensive section, break it into smaller sections. Again, remove one at a time. If that one's not the answer, put it back before you try the next. Soon you'll find the one that breaks the mechanism.CAVEAT: I did all my experimenting in Firefox and Safari. IE is across the hall and I don't feel like going there. But I think I nailed it. :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...