Nested CSS element issues in Safari and Chrome

On our website's homepage, http://www.myhomechannel.org, we have a #hov id that governs the a:hover attribute that displays information in the box to the right of the page when you rollover each icon to the left of it. In FF3.6 and IE8 it displays how it is supposed to. In Safari 4 and Chrome, it does not.

Please find the CSS code attached. Please note that the #hov a:hover span span#req is only one of the icons. The rest only have different values for the font-size and top/left positioning.

My guess is that there are too many nested elements. I know that FF and IE do not have an issue with that (at least this deep) but I think Safari and Chrome only "allow" for 3 nested elements.

Please offer recommendations on how to fix our CSS coding issues and include any applicable CSS snippets.


#hov a {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 13px;
	color: #000000;
}

#hov a:hover {
	
	background:#fff
}

#hov a span {
	display: none;
	}

#hov a:hover span {
	text-align:left;
	display: block;
	z-index: 100;
	position:absolute;
	float: right;
	top: 360px;
	width:400px;
	height:400px;
	margin-right: -487px;
	right: 50%;
}

#hov a:hover span p {
	text-align:left;
	margin: 45px;
	margin-left: 53px;
	width: 322px;
	height: 350px;
}


			#hov a:hover span span#req {
			text-align:left;
			display: block;
			z-index: 100;
			position:absolute;
			float: right;
			top: 155px;
			width:325px;
			height:400px;
			margin-right: -175px;
			font-size:26px;
			line-height:27px;
		}

Open in new window

kentcommunicationsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LZ1Commented:
I took the HTML & CSS apart in Firefox's Firebug and it looks as if the CSS you have applied above isn't even being posted.  
Another thing you may wish to consider is a reset sheet above the rest of your css.  

<style> 
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,
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;
}
ol, ul {
	list-style: none;
}
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;
}
</style>

Open in new window

0
kentcommunicationsAuthor Commented:
Thank you for the tip on the reset styles method, LZ1. That unfortunately did not fix the issue, but is something that I can use in the future and for this website just to keep things clean. Another curious bit is that when I check Firebug, I do see the styles being posted (screen shot attached). The css file in question here is css_landing.css which I have included as well. My guess is that it all comes back to too many elements being nested, but I don't know enough about the way Safari parses CSS to make an educated decision.

Thanks for your help!
Picture-9.png
css-landing.css
0
LZ1Commented:
I can see them listed in your CSS, but not being applied.  I'm just wondering if you have to target them either differently or more specifically.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

kentcommunicationsAuthor Commented:
Ah, I see what you're saying.

Here's a snippet from the home page where they're being applied. To try to adhere to CSS standards, heavy manipulation of span elements had to be done. It must just be that we need to find a better way to do this. Suggestions certainly welcome!
<div id="hov">
	<div id="size"><p><a href="#"><img src="images/index/icon_tools.jpg" align="left"/>Your Required &amp; Recommended Maintenance List for Home, Car, Lawn, & Garden 
       
       <span style="background:url(images/index/bg_lawnmower.jpg) no-repeat;color:#FFFFFF;font-size:36px;line-height:37px;">
       
      <p><b>Learn, Organize, Manage and Keep Track--For Free</b><br />
      <span id="req">
      myhomechannel.org creates your customized list based upon your needs and provides it to you in one          		
      centralized, easy to access, easy to remember location.</span></p>
	  </span></a></p>
  	</div>

  <!-- Email Alert Reminders -->
    <div id="size"><p><a href="#"><img src="images/index/icon_email.jpg" align="left"/>Email Alert Reminders
      <span style="background:url(images/index/bg_email.jpg) no-repeat;color:#FFFFFF;font-size:32px;line-height:33px;">
      <p><strong>We Know You Haven't Forgotten... But Just as a Quick Reminder</strong><br />
	  <span id="email">
      Reminder emails are generated from your account and offer added protection for your personal property and 
      home environment. Print them and they create your own customized to-do list.</span></p>
      </span></a></p>
     </div>
     
  <!--Save Money-->
   <div id="size"><p><a href="#"><img src="images/index/icon_money.jpg" align="left"/>Save Money
    <span style="background:url(images/index/bg_money.jpg) no-repeat;color:#FFFFFF;font-size:36px;line-height:37px;">
    <p><strong>Living Smarter Saves Money</strong><br />
	<span id="savemoney">
    Improved mpg, lower energy costs, greater efficiency and good 
    advice, all help save money. myhomechannel.org makes it easy to get focused and keep track of it all.</span></p>
    </span></a></p>
   </div>    
        
  <!--Shopping List-->
    <div id="size"><p><a href="#"><img src="images/index/icon_pencil.jpg" align="left"/>Shopping List
      <span style="background:url(images/index/bg_pencil.jpg) no-repeat;color:#FFFFFF;font-size:36px;line-height:37px;">
      <p><strong>An Interactive Grocery List For The Whole Family</strong><br />
	  <span id="shopping">
      Anyone can add to the grocery list from any computer...This means fewer trips to the grocery store. Just 
      click print and your list is prepared.</span></p>
      </span></a></p>
    </div>
    
 </div>

Open in new window

0
David S.Commented:
Block-level elements, such as <p> and <div>, may not be nested within inline elements, including <span> and <a>.  Different browsers are handling that error differently.

:hover works on more elements than just <a> (except in IE5-6). To support IE6 you can use "whatever:hover": http://www.xs4all.nl/~peterned/csshover.html


By the way, a list-item end tag is missing from the main navigation. One should immediately follow this section:

<li><a href="/lawn_garden.php">Lawn and Garden</a>

      <ul><li>
    <a href="http://www.myhomechannel.org/article_landscaping_home_value.php">Landscaping &amp; Home Value</a><br />
    </li>
    <li><a href="http://www.myhomechannel.org/list_lawn_springrepair_trans.php">Spring Lawn Repair</a><br /></li>
    <li><a href="http://www.myhomechannel.org/article_lawn_renovation_fall.php">Fall Lawn Rennovation</a><br /></li>
    </ul>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kentcommunicationsAuthor Commented:
Kravimir, that makes perfect sense. I will try that solution in a little bit. Thank you!
0
kentcommunicationsAuthor Commented:
LZ1's reset style sheet helped lay out the framework for the solution, but the real bread-and-butter was Kravimir's solution and letting me realize the fact that block elements may not be nested in inline elements. Kudos to all!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.