Jump to content

menu background not working in IE

macosx101

By macosx101
in CSS

Recommended Posts

macosx101 Newbie

macosx101

Posted
Posted
http://daemonstudios.x10hosting.com/restyle.php (not xhtml valid atm)Hi could some one please help me understand why the menu navigation background doesn't show up in IE and only in FF.here is the xhtml and php code
<?php session_start(); ?><!DOCTYPE htmlPUBLIC "-//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" lang="en"><head><meta name="description"content="Daemon Studios Web Design"/><meta name="keywords"content="Daemon Studios Web Design cheap myspace Callum Hubbarde Alex Hutson"/><?phpif(isset($_GET['css'])){switch ($_GET['css']) {case 'purple':$stylesheet = '<link rel="stylesheet" type="text/css" href="purple.css">';$_SESSION['switchcss']=$stylesheet;break;case 'green':$stylesheet = '<link rel="stylesheet" type="text/css" href="green.css">';$_SESSION['switchcss']=$stylesheet;break;case 'blue':$stylesheet = '<link rel="stylesheet" type="text/css" href="blue.css">';$_SESSION['switchcss']=$stylesheet;break;// Our default stylesheetdefault:$stylesheet = '<link rel="stylesheet" type="text/css" href="blue.css">';$_SESSION['switchcss']=$stylesheet;}}?><?php echo ($_SESSION['switchcss'])? $_SESSION['switchcss']: '<link href="blue.css" type="text/css" rel="stylesheet">';?><!--[if lte IE 7]><style>#menuwrapper, #menu ul a {height: 1%;}a:active {width: auto;}</style><![endif]--><script type="text/javascript" src="p7exp.js"></script><title>DaemonStudios Web Design</title></head><body bgcolor="#000000" onload="Dropmenu()"><div id="wrapper">	<div id="header">		<br /><br /><br /><br /><br /><br /> <!--Pushes menu below the header--><br /><br /><br /><div id="menuwrapper"><ul id="menu"><li><a href="index.htm">Home    </a></li><li><a class="trigger" href="#">Web Design</a><ul><li><a href="websites.htm">Web sites</a></li><li><a href="myspace.htm">Myspace</a></li><li><a href="graphics.htm">Graphics</a></li><li><a href="domains.htm">Domains</a></li><li><a href="hosting.htm">Hosting</a></li></ul></li><li><a class="trigger" href="#">Process </a><ul><li><a href="step1.htm">Step 1</a></li><li><a href="step2.htm">Step 2</a></li><li><a href="step3.htm">Step 3</a></li></ul></li><li><a class="trigger" href="#">E-Portfolio</a><ul><li><a href="#">Coming soon</a></li><li><a href="#">Coming soon</a></li></ul></li><li><a href="purchase.htm">Purchase</a></li><li><a href="faq.htm">FAQ    </a></li><li><a href="vacancies.htm">Vacancies  </a></li><li><a href="contactus.htm">Contact us </a></li></ul><br class="clearit"/></div></div><div id="color"><br />Select Colour <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=default"><img border="0" src="blue.jpg" alt="blue"/></a>  <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=purple"><img border="0" src="purple.jpg" alt="purple"/></a>  <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=green"><img border="0" src="green.jpg" alt="green"/></a> </div>	<div id="container">		<div id="side-a">			<!--See CSS--->		</div>		<div id="content">		<h2> Home</h2>	<div id="desleft"><br /><br /><a href="websites.htm"><img border="0" src="web1.jpg" alt="Web Design £24" width="240px" height="75px" /></a> <br /><a href="graphics.htm"><img border="0" src="web2.jpg" alt="Web Graphics £6" width="240px" height="75px" /></a> <br /><a href="myspace.htm"><img border="0" src="web3.jpg" alt="Myspace layours £11" width="240px" height="75px" /></a> <br /></div><div id="desright"><p> Daemon Studios are a professional web solution offering Web Design, Myspace, and Graphics packages. We offer superior designs at affordable prices.</p><p> Daemon Studios are a web design company made up of Alex Hutson (specialty graphics) and Callum Hubbarde (specialty web code).We currently operate as a cheap but unique design solution offering cheap bespoke webdesign. We started out in July 2008 and made this website. We came together through our realisation of each others different skills.Since then we have been working together on several projects.We hope to get Daemon Studios operating as a long term project that will help develop our skills in web design.We offer Myspace layouts, webdesign and graphics packages.</p></div></div>		</div><!--Footer-->	<div id="footer">	<!--empty footer Don't delete-->	</div> <!--closes footer-->	</div> <!--closes page wrapper--><div id="footer2"> <!--Proper footer--><span><a href="contactus.htm" title="contact Daemon Studios">Contact us</a> | <a href="http://validator.w3.org/check?uri=referer" title="Check the xhtml markup" target="blank" >Valid XHTML 1.0</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" target="blank" title="Check the Css">Valid CSS2</a> | <a href="http://www.mozilla-europe.org/en/firefox/" target="blank" title="Get Mozilla Firefox, a safer, faster, smarter browser!">Get Firefox!</a></span></div> <!--Close footer 2--></body></html>

here is the css for one of the stylesheets (all are the same except load different header images and text colours)

body { text-align:center;font-family: calibri,sans-serif,times;}#wrapper {                width: 700px;        margin-left:auto;	margin-right:auto;        text-align:left;	padding: 0px;	border:0px;	color:#FFFFFF;	background-color:#000000;       }#header {	      height:200px;	      background-image:url("restyleh.jpg");        text-align:center;        z-index:1;	}#color {text-align:center;}#menuwrapper {		background-color: #909090;	background-image: url("testbar2.jpg");	background-repeat: repeat-x;	z-index:2;}.clearit {	clear: both;	height: 0;	line-height: 0.0;	font-size: 0;}#menu, #menu ul {	padding: 0;	margin: 0;	list-style: none;	font-family: Arial, Helvetica, sans-serif;}#menu a {	display: block;	text-decoration: none;	padding: 5px 10px 5px 10px;	border-right: 1px solid #333;	font-size: .85em;	color: #ffffff;}#menu a.trigger {	padding: 5px 16px 5px 10px;	background-image: url(p7PM_dark_south.gif);	background-repeat: no-repeat;	background-position: right center;}#menu li {	float: left;	width: 9em;}#menu li ul, #menu ul li  {	width: 7em;}#menu ul li a  {	color: #ffffff;	border-right: 0;	padding: 3px 12px 3px 16px;}#menu li ul {	position: absolute;	display: none;	background-color: #FFFFFF;	border-right: 1px solid #333333;	border-bottom: 1px solid #333333;	background-image: url(redropbar.jpg);	background-repeat: repeat-x;}#menu li:hover a, #menu a:focus,#menu a:active, #menu li.p7hvr a {	color: #ffffff;	background-color: #b20000;}#menu li:hover ul, #menu li.p7hvr ul {	display: block;}#menu li:hover ul a, #menu li.p7hvr ul a {	color: #ffffff;	background-color: transparent;}#menu ul a:hover {	background-color: #b20000!important;	color: #FFFFFF!important;}#menu li {width: auto;}p {     font-family: calibri,sans-serif,times;        font-size:14px;        color:#41B8FE;}h2 {     font-family: calibri,sans-serif,times;        font-size:24px;        text-align:center;         color:#41B8FE;}#reccomendl li a {    text-decoration:none;                      font-family: calibri,sans-serif,times;                      text-align:left;                      font-size:16px;                      color:#FFFFFF;}#b         {         font-weight:bold;                     font-family: calibri,sans-serif,times;}  #desleft { float:left;            width:290px;            text-align:left; }#desright { float:right;            width:290px;            text-align:left;}#side-a {	      float: left;	      width: 110px;        height: 450px;        text-align:left;        background-image:url("read.jpg");        background-repeat:no-repeat;}#content { 	float: left;	width: 585px;        height: 500px;        text-align:left;        margin-left:5px;      }#footer2 {background-image: url("testbar2.jpg");font-size: 14px;color:#ffffff;margin-right:auto;margin-left:auto;width:700px;text-align:Center;clear:both;}#footer2 a {font-size: 14px;color: #ffffff;text-decoration: none;border: none;}#footer2 a:hover {color: #ffffff;text-decoration:underline;}#footer2 span {font-size: 14px;padding: 5px;display:block;}#footer {font-size: 14px;color:#ffffff;margin-right:auto;margin-left:auto;width:800px;text-align:Center;clear:both;}

Thankyou for your time.

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

Confirmed. It does work in IE6 but not in IE7 in WinXP.Just to try it out, remove the IE7 Conditional Comment and see what happens.And if you have HTML validation errors, well... fix them, your problem may perfectly lay there.

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...