[Solved] background colour appears in Divs when I hover links in IE7

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
djkirstyjay
Forum Members
Forum Members
Posts: 206
Joined: Tue Oct 25, 2005 4:50 pm

[Solved] background colour appears in Divs when I hover links in IE7

Post by djkirstyjay »

Now... may latest occurance in IE7 is strange to say the least!

Take a look at THIS page in IE7...

Now... hover over a link and see the bottom of the pink & yellow speech bubbles... the pink & yellow backgrounds appear from the content div section above!

WHY oh why oh why oh why? ???

Can anyone shed any light?

PS: I HATE IE :(

Here's all the relevant code :

Template

Code: Select all

<!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" xml:lang="en" >

<head>
<title>Vanessa Viagra :: Entertainer, Comedienne & Compere in Tenerife! - {title}</title>
{metadata}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="robots" content="all">

{stylesheet}

<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
<!-- The above JavaScript is required for CSSMenu to work in IE -->

</head>

</__body>
<div id="container">


<div id="header" class="clearfix"></div>

<div id="menu" class="clearfix">
        {menu template='cssmenu.tpl' start_page='home-vanessa-viagra-entertainer-comedian-compere-tenerife' show_root_siblings='1'}
</div>
<div id="main" class="clearfix">

<div id="right">
<div id="right-top" class="clearfix"></div>
<div id="right-main" class="clearfix">
	<h2>News</h2>
        {global_content name='Vanessa Viagra News'}
        <p></p>
</div>
<div id="right-bottom"></div>
</div>

<div id="content">
<div id="content-top" class="clearfix"></div>
<div id="content-main">
	<h2>{title}</h2>
        {content}
        <p></p>
</div>
<div id="content-bottom"></div>
</div>

</div>


<div id="footer" class="clearfix">© 2008
   - <a href="http://www.vanessaviagra.com">Vanessa Viagra</a> | Design by <a title="WebMania Website Design Tenerife" href="http://www.webdesigntenerife.com">WebMania Website Design Tenerife</a></div>

</div>
<__body>

</__html>
Stylesheet

Code: Select all

body {
	background-color: #000000;
	background-image: url(http://www.vanessaviagra.com/style/bg-body-vanessa-viagra-cabaret-entertainer-comedian-tenerife.gif);
	background-repeat: repeat-y;
	background-position: center top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
        line-height:1.2em;
	color: #FFFFCC;
	top: 0px;
	margin: 0;
}

div#container {
	width: 800px;
	margin: 0 auto;
}

div#header {
	width: 800px;
	height: 224px;
	background-image: url(http://www.vanessaviagra.com/style/header-vanessa-viagra-cabaret-entertainer-comedian-tenerife.gif);
	padding: 0;
	margin: 0 auto;
	background-repeat: no-repeat;
}

div#menu {
	background-image: url(http://www.vanessaviagra.com/style/bg-menu-vanessa-viagra-cabaret-entertainer-comedian-tenerife.gif);
	height: 36px;
	padding: 10px;
	margin: 0 auto;
	background-repeat: repeat-x;
	width: 780px;
}

div#main {
	background-color: inherit;
	padding: 10px;
        width: 780px;
	margin: 0 auto;
}



div#content {
	background-color: inherit;
	width: 536px;
	margin: 0;
}

div#content-top {
   background-color: inherit;
   background-image: url(http://www.vanessaviagra.com/style/bg-main-top.gif);
   background-repeat:no-repeat;
   height: 36px;
   margin: 0px;
}

div#content-main {
   background-color: #fff2bf;
   padding: 0 10px;
   color: #000;
   margin: -20px 0 0 0;
}

div#content-bottom {
   background-color: inherit;
   background-image: url(http://www.vanessaviagra.com/style/bg-main-bottom.gif);
   background-repeat:no-repeat;
   height: 136px;
   margin: -13px 0 0 0;
}

div#right {
   float: right;
   width: 226px;
   background-color: inherit;
   text-align: center;
   margin: 0;
}

div#right-top {
   background-color: inherit;
   background-image: url(http://www.vanessaviagra.com/style/bg-news-top.gif);
   background-repeat:no-repeat;
   height: 25px;
   margin: 0px;
}

div#right-main {
   background-color: #ffabee;
   padding: 0 10px;
   color: #000;
   margin: -19px 0 0 0;
}

div#right-bottom {
   background-color: inherit;
   background-image: url(http://www.vanessaviagra.com/style/bg-news-bottom.gif);
   background-repeat:no-repeat;
   height: 76px;
   margin: -1px 0 0 0;
}

div#footer {
	width: 800px;
	text-align: center;
	font-size: x-small;
	background-color: inherit;
        margin: 0 auto;
	padding: 10px 0;
}

/* clearing */
	
.stretch,
.clear {
	clear:both; 
	height:1px; 
	margin:0; 
	padding:0; 
	font-size: 15px;
	line-height: 1px;
}
	
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
}
	
* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
}

/* end clearing */

/* MENU */

#menu {
   padding-left: 1px;
   margin-right: 0px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   background-color: #fff;
   width: 100%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li { 
   width: 100px; 
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
}
#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none; 
}
#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px; 
}
	
#primary-nav li { 
   margin-left: -1px;
   float: left; 
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   margin: 0px; 
   padding: 0px 10px; 
   font-weight: bold;
   text-decoration: none; 
   color: #ff00CC;
}
#primary-nav li a { 
}
#primary-nav li li a { 
   border: 1px solid #fff;
}	
#primary-nav li, #primary-nav li.menuparent { 
   background-color: #fff; 
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
   background-color: inherit;
   color: #2aff00;   
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; 
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   color: #fff;
   background: inherit;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both; 
}
#primary-nav li li a { 
   height: 1%; 
}

dfn {
   display: none
}

/* END MENU */

/* STYLING */

/*headings */

h1 {
   color: #FF00CC;
   text-size: large;
   border-bottom: #FF00CC 3px double;
}

h2 {
   color: #FF00CC;
   text-size: medium;
   border-bottom: #FF00CC 3px double;
}

h3 {
   color: #FF00CC;
   text-size: medium;
   border-bottom: #FF00CC 1px solid;
}

h4 {
   color: #FF00CC;
   text-size: medium;
}

h5 {
   color: #FF00CC;
   text-size: small;
   border-bottom: #FF00CC 3px double;
}

h6 {
   color: #FF00CC;
   text-size: small;
   border-bottom: #FF00CC 1px solid;
}

#right h1 {
   color: #FFF;
   text-align: left;
   text-size: large;
   border-bottom: #FFF 3px double;
}

#right h2 {
   color: #FFF;
   text-align: left;
   text-size: medium;
   border-bottom: #FFF 3px double;
}

#right h3 {
   color: #FFF;
   text-align: left;
   text-size: medium;
   border-bottom: #FFF 1px solid;
}

#right h4 {
   color: #FFF;
   text-align: left;
   text-size: medium;
}

#right h5 {
   color: #FFF;
   text-align: left;
   text-size: small;
   border-bottom: #FFF 3px double;
}

#right h6 {
   color: #FFF;
   text-align: left;
   text-size: small;
   border-bottom: #FFF 1px solid;
}

/* links */

#menu a:link, #menu a:active, #menu a:visited {
   color: #FF00CC;
   text-decoration: none;
}

#menu a:hover {
   color: #61004e;   
   text-decoration: none;
}

#content a:link, #content a:active, #content a:visited {
   color: #FF00CC;   
   text-decoration: none;
   border-bottom: #FF00CC 1px dashed;
}

#content a:hover {
   color: #ff9aeb;   
   text-decoration: none;
   border-bottom: #ff9aeb 1px dashed;
}

#right a:link, #right a:active, #right a:visited {
   color: #8b006f;   
   text-decoration: none;
   border-bottom: #8b006f 1px dashed;
}

#right a:hover {
   color: #61004e;   
   text-decoration: none;
   border-bottom: #61004e 1px dashed;
}

#footer a:link, #footer a:active, #footer a:visited {
   color: #b0ffa1;   
   text-decoration: none;
   border-bottom: #b0ffa1 1px dashed;
}

#footer a:hover {
   color: #2aff00;   
   text-decoration: none;
   border-bottom: #2aff00 1px dashed;
}

/* images */

img {
   padding: 5px;
   border: #2aff00 3px solid;
   margin: 10px;
}

/* text */

p {

}

/* END STYLING */
Last edited by Anonymous on Thu Aug 21, 2008 10:36 am, edited 1 time in total.
Top
baresi
Forum Members
Forum Members
Posts: 129
Joined: Fri Jul 27, 2007 4:15 pm

Re: Strange happenings in IE7; background colour appears in Divs when I hover links

Post by baresi »

Perhaps something to do with using 'inherit' in div#footer and div#content and then using the same #content and #footer to define links (a:link, etc.)
Top
djkirstyjay
Forum Members
Forum Members
Posts: 206
Joined: Tue Oct 25, 2005 4:50 pm

Re: Strange happenings in IE7; background colour appears in Divs when I hover links

Post by djkirstyjay »

Nope. tried removing all those link definitions and it's still the same. :(
Top
baresi
Forum Members
Forum Members
Posts: 129
Joined: Fri Jul 27, 2007 4:15 pm

Re: Strange happenings in IE7; background colour appears in Divs when I hover links

Post by baresi »

Strange, I will try to play around with your css locally and if I get an answer soon I will post. Unless of course one of the pros around can see something I am missing :)
Top
djkirstyjay
Forum Members
Forum Members
Posts: 206
Joined: Tue Oct 25, 2005 4:50 pm

Re: Strange happenings in IE7; background colour appears in Divs when I hover links

Post by djkirstyjay »

Thanks a lot that would be fantastic, as I've tried all sorts!
Top
baresi
Forum Members
Forum Members
Posts: 129
Joined: Fri Jul 27, 2007 4:15 pm

Re: Strange happenings in IE7; background colour appears in Divs when I hover links

Post by baresi »

Take out those two instances "" and re-check, they must be creating extra blocks that IE decides to abuse. Now if you need them there you could style them at the end of your css where you have an empty declaration already
Top
djkirstyjay
Forum Members
Forum Members
Posts: 206
Joined: Tue Oct 25, 2005 4:50 pm

Re: Strange happenings in IE7; background colour appears in Divs when I hover links

Post by djkirstyjay »

Thanks! That's it! and there I was messing with css...

You're a star. :)
Top
Post Reply

Return to “Layout and Design (CSS & HTML)”