Forum Moderators: not2easy
many thanks in advance for your time
[edited by: SuzyUK at 12:01 pm (utc) on April 11, 2008]
[edit reason] Please No example URI's see charter [/edit]
Solution:
I put this at the top of my code:
<!--[if lt IE 7]>
<meta http-equiv="REFRESH" content="0; url=http://YOUR_SITE.com/upgrade.html">
<![endif]-->
Where upgrade.html is a page that explains that the user is using a shotty version of Internet Exporer and provides a direct link to the Microsoft IE7 upgrade page. Since less than 5% of all Windows operating systems can't do the upgrade, you're encouraging people to get with the program. If they can't upgrade, they can always view the page using ANY OTHER BROWSER IN THE WORLD.
JOIN ME IN THIS QUEST FELLOW WEBMASTERS!
Perhaps allow them to see the website, but warn them the site will look crappy due to their poor choice of browsers and the lack of bug fixes rom Microsoft.
<!--[if lt IE 7]>
<style type="text/css">
#ie
{
position:relative;
top:5px;
display:block;
}
</style>
<![endif]-->
Where #ie is originally {display:none;}. The message is then placed at the bottom of the site (and HUGE).
and yes, I do encourage using other browsers, such as Safari, Firefox, and Opera in these messages. However, I assume people are stuck in their ways and demand to use IE, so I point to the upgrade link before mentioning that.
Knowing this will help in determining what is happening.
was about to post the pertinent summarised code, because you actually have two issues so it needs the code for the header and menu posted.. if you don't get here before I get back then I'll post code in a bit.. sorry for delay
apologies for the delay and bad manners, I meant to mail you and post this code earlier as it's against our TOS to post test links - I got held up!
anyway here's the minimal code, not so minimal though :o like I said IE6 has two issues and because one of them wasn't obvious unless the "background image" is in place I've added a "fauximage" by way of an extra div (red strip)... here's the code swa, and the others should be able to help from here.. sorry gotta rush again!
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding:0;
background: #008;
}
#wrapper {
text-align: left;
margin: auto;
position: relative;
height: 850px;
width: 980px;
vertical-align: top;
left: 0;
top: 0;
padding: 0;
}
#title {
height: 99px;
width: 880px;
margin: 0 auto;
padding: 0;
}
#navholder {
height: 51px;
width: 880px;
padding: 0;
margin: 0 auto;
}
#mainText {
/*height: 541px; */
width: 960px;
background-color: #FF0; /* changed for visual */
padding: 0;
margin: 0 auto;
}
#maincontent {
/*height: 520px;*/
width: 856px;
text-align: justify;
line-height: 30px;
font-family: Calibri;
color: #333333;
text-decoration: none;
font-size: 13px;
margin: 0 auto;
padding-top: 12px;
}
.menu {
font-family: Calibri;
height:51px;
font-size:13px;
z-index:100;
width: 880px;
padding: 0;
}
.menu ul {
padding:0;
margin:0;
height:51px;
list-style: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li ul {position:absolute; left:-9999px;}
.menu ul li a {
display:block;
background:transparent;
text-decoration:none;
color:#fff;
width:140px;
height:51px;
text-align:center;
line-height:51px;
font-size:13px;
overflow:hidden;
padding-top: 2px;
}
.menu ul li a:hover {
color:#09467D;
white-space:normal;
background: #eee url(../images/navOn.jpg) no-repeat;
}
.menu ul li:hover > a {
color:#09467D;
background: #eee url(../images/navOn.jpg) no-repeat;
}
.menu ul :hover ul {
top:51px;
left:0;
width:140px;
height:auto;
border-right:0;
background:transparent;
}
.menu ul :hover ul li {
height:51px;
padding-top:0px;
background:transparent url(transparent.gif);
}
.menu ul :hover ul li a {display:block; background:#7D7D7D; color:#000; border:0;}
.menu ul :hover ul li a:hover {color:#000; background-image: url();}
#topleft {
float: left;
width: 400px;
margin-left: 20px;
height: 260px;
display:inline;
margin-top: 0px;
margin-bottom: 0px;
}
#topright {
float: right;
display:inline;
width: 400px;
height: 260px;
margin: 0 20px 0 0;
}
#topwrapper {
width:856px;
height:260px;
margin: 0 0 20px 0;
}
/* this div is to simulate the postion of a background image in the actual CSS */
#fauximage {height: 51px; background: #f00; width: 100%; position: absolute; left: 0; top: 100px;}
</style>
</head>
<body>
<div id="fauximage"> </div><!-- added to simulate background image position -->
<div id="wrapper">
<div id="title"><img src="images/heading.jpg" alt="# header" width="880" height="99" /></div>
<div id="navholder">
<div class="menu"><ul>
<li class="home"><a href="test.html">Home<!--[if gt IE 6]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
<div id="mainText">
<div id="maincontent">
<div id="topwrapper">
<div id="topleft">top left</div>
<div id="topright">top right</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
-Suzy
[edited by: SuzyUK at 4:11 pm (utc) on April 11, 2008]
#fauximage {height: 42px; background: #f00; width: 100%; position: absolute; left: 0; top: 108px;}
see when you're in a hurry things just go wrong :)
