CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

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

https://forum.cmsmadesimple.org/viewtopic.php?t=24943

Page 1 of 1

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

Posted: Wed Aug 20, 2008 6:38 pm
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 */

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

Posted: Wed Aug 20, 2008 7:58 pm
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.)

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

Posted: Wed Aug 20, 2008 8:19 pm
by djkirstyjay
Nope. tried removing all those link definitions and it's still the same. :(

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

Posted: Wed Aug 20, 2008 10:05 pm
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 :)

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

Posted: Wed Aug 20, 2008 10:47 pm
by djkirstyjay
Thanks a lot that would be fantastic, as I've tried all sorts!

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

Posted: Thu Aug 21, 2008 12:26 am
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

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

Posted: Thu Aug 21, 2008 7:36 am
by djkirstyjay
Thanks! That's it! and there I was messing with css...

You're a star. :)
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited