[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 880
  • Last Modified:

CSS Display IE6 Difficulty, element not displayed but still taking up space.

I have a block element menu system so that I have a background that when certain parts are hovered over, they are links with an overlaying image.

The way I've done this is to have block elements in a container and use relative positioning and using list items with the link and a span for the link description, nested inside.

The problem is, even though the span isn't displayed for the list, IE6 is still making an 'invisible' list that is taking up extra space and pushing all of my elements after this menu, down the page because it's maintaining the height set for the link.

IE7 and firefox do not maintain the fixed height and therefore avoid the problem.

How do I hack IE6 in CSS to make the element not only not be displayed any longer and not take up the extra space :o)?

Here is the html code, CSS code is the attached code snippet

<!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>Fred Outa Foundation</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--

// -->
      </script>
</head>

<body bgcolor="white">
<div id="container">
<div id="myback">
<h1 id="header">Fred Outa Foundation</h1>
<ul>

      <li><a href="didyouknow.htm" name="didyouknow" title="Did you know?" class="image" id="didyouknow"><span>Did You Know?</span></a></li>
      <li><a href="who.htm" name="who" title="Who is Fred Outa?" id="who"><span>Gallery</span></a></li>
      <li><a href="gallery.htm" name="gallery" title="Photo Gallery" id="gallery"><span>Photo Gallery</span></a>      </li>
      <li><a href="founders.htm" name="founders" title="The Founders" id="founders"><span>The Founders</span></a></li>
      <li><a href="fundraise.htm" name="fundraise" title="Upcoming Fundraisers" id="fundraise"><span>Requirements</span></a></li>
      <li><a href="girls.htm" name="girls" title="About the Girls" id="girls"><span>About the Girls</span></a></li>

      <li><a href="mission.htm" name="mission" title="Mission Statement" id="mission"><span>Mission Statement</span></a></li>
      <li><a href="donation.htm" name="donation" title="Make a Donation" id="donation"><span>Make a Donation</span></a>      </li>
      <li></a><a href="help.htm" name="help" title="How Can I Help?" id="help"><span>How Can I Help?</span></a></li>
      <li><a href="academy.htm" name="academy" title="Spurgeon's Academy" id="academy"><span>Spurgeon's Academy</span></a></li>
      <li><a href="newsletter.htm" name="newsletter" title="Sign up for our Newsletter" id="newsletter"><span>Sign up for our Newsletter</span></a></li>
      </ul>

</div>
</div><center><table width="600px"><tr><td>
<marquee width="600px"><font color="white">Congratulations to Fred Outa Foundation for winning the <a href="http://www.house.gov/kirk/pdf/KIRK_HeroesHandout.pdf">International 10 for 10th Award!</a></marquee>
</td></tr></table><A HREF="http://www.goodsearch.com/?charityid=857224" TARGET="_top">
<IMG SRC="http://www.goodsearch.com/_gfx/gs-cause-120x60.gif" WIDTH="120" HEIGHT="60" ALT="GoodSearch: You Search...We Give!" BORDER="0"></A></body>
</center></html>
@charset "utf-8";
 
html .gainlayout { height: 1%; }
 
body {
	text-align:center;
	background-color:#000000;
	margin:0; 
	border:0; 
	pattern:0;
}
 
/* Hides the header and footer - this will show up when styles are removed */
#header {
	display:none;
}
 
 
#footer {
	display:none;
	vertical-align: bottom;
}
 
/* This is a container for the main picture, it helps with centering */
#container
{
	text-align:center;
	border: 0px;
	padding:0px;
	margin:0px;
	height: expression( this.scrollHeight > 438 ? "439px" : "auto" ); /* sets max-height for IE */
	max-height: 438px;
	
}
 
/* this is the main image */
 
#myback
{
	background: url(newbg.jpg);
	background-repeat: no-repeat;
	width: 800px;
	height: 438px;
	margin:auto;
	text-align:left;
	padding:0px;
	border:0; 
}
 
/* Remove formatting from the unordered list */
#myback ul
{
	padding:0px;
	margin:0px;
	list-style:none;
	border:0;
}
#myback ul li {
	padding:0px;
	margin:0px;
	list-style:none;
	border:0;
}
 
/* Make the links into block level elements to increase their size and then set their position as relative */
#myback ul li a {
	background: url(trans.gif);
	display:block;
	margin: 0;
	height: 60px;
	width: 115px;
	position:relative;
	border:0;
	pattern:0;
	background-image: url(trans.gif);	
}
 
ul, li, li a {box-sizing:content-box; vertical-align:bottom;}
 
/* Hide the internal text... this will show back up if styles are removed */
#myback ul li a span {
	display:none;
	position:absolute;
	height: 0;
	margin:0; 
	border:0; 
	pattern:0;
}
 
/* 
Button placement:
This will place the buttons, see the demostrated style for doing this.
Please note that this uses RELATIVE POSITIONING... this means that if you change the 
order of the links, it will mess up your positions... I recommend using dreamweaver
to help with the positioning....
 
The animated background images should be created inside the hover version of the link...
*/
#who
{
	top: -50px;
	left:2px;
	display:none;
}
 
#who:hover
{
	background:url(menuImages/who.gif) no-repeat top right;
	background-position: -2px 2px;
	margin:0; 
	border:0; 
	pattern:0;
	display:inline;
	
}
#didyouknow
{
	top: 138px;
	left: 0px;
}
 
#didyouknow:hover
{
	background:url(menuImages/didyouknow.gif) no-repeat top right;
	background-position: 0px -4px;
	visibility:visible;
	margin:0; 
	border:0; 
	pattern:0;
}
 
 
 
 
#founders
{
	top: -104px;
	left: 0px;
}
 
#founders:hover
{
	background:url(menuImages/founders.gif) no-repeat top right;
	background-position: 1px -6px;
	margin:0; 
	border:0; 
	pattern:0;
}
 
#gallery
{
	top: 80px;
	left: 10px;
}
#gallery:hover
{
	background:url(menuImages/gallery.gif) no-repeat top right;
	background-position: -10px -6px;
	margin:0; 
	border:0; 
	pattern:0;
}
#fundraise
{
	top: 24px;
	left: 0px;
}
 
#fundraise:hover
{
	background:url(menuImages/fundraise.gif) no-repeat top right;
	background-position: 0px -12px;
	margin:0; 
	border:0; 
	pattern:0;
}
 
#girls
{
	top: -24px;
	left: 129px;
}
 
#girls:hover
{
	background:url(menuImages/girls.gif) no-repeat top right;
	background-position: -4px 5px;
	margin:0; 
	border:0; 
	pattern:0;
}
 
#mission
{
	top: -330px;
	left: 633px;
}
 
#mission:hover
{
	background:url(menuImages/mission.gif) no-repeat top right;
	background-position: -6px -17px;
	margin:0; 
	border:0; 
	pattern:0;
}
 
 
 
 
#donation
{
	top: -316px;
	left: 665px;
}
 
#donation:hover
{
	background:url(menuImages/donation.gif) no-repeat top right;
	background-position: -19px -4px;
	margin:0; 
	border:0; 
	pattern:0;
}
 
#help
{
	top: -392px;
	left: 710px;
}
#help:hover
{
	background:url(menuImages/help.gif) no-repeat top right;
	background-position: -34px -6px;
	margin:0; 
	border:0; 
	pattern:0;
}
#academy
{
	top: -310px;
	left: 680px;
}
 
#academy:hover
{
	background:url(menuImages/academy.gif) no-repeat bottom right;
	background-position: -13px -11px;
	margin:0; 
	border:0; 
	pattern:0;
}
 
#newsletter
{
	top: -290px;
	left: 640px;
}
 
#newsletter:hover
{
	background:url(menuImages/newsletter.gif) no-repeat top right;
	background-position: -3px -14px;
	margin:0; 
	border:0; 
	pattern:0;
}
 
a:link.video
{
	color: #0066CC;
	font-style: normal;
	text-decoration: none;
	
}
 
a:hover.video
{
	color: #0066CC;
	font-style: normal;
	text-decoration: underline;
	
}
 
a:visited.video
{
	color: #0066CC;
	font-style: normal;
	text-decoration: underline;
	
}
 
a:link.bio
{
	color: #FFFFFF;
	font-style: normal;
	text-decoration: none;
	
}
 
a:hover.bio
{
	color: #FFFFFF;
	font-style: normal;
	text-decoration: underline;
	
}
 
a:visited.bio
{
	color: #FFFFFF;
	font-style: normal;
	text-decoration: underline;
	
}
h3.video
{
	color: #FFFFFF;
}
h4.video
{
	color: #FFFFFF;
}
h5.video
{
	color: #FFFFFF;
}
h2.bio
{
	color: #FFFFFF;
}
.error {
	color: #FF0000;
}

Open in new window

0
totse14
Asked:
totse14
  • 2
  • 2
1 Solution
 
obareeyCommented:
instead of
display:none
use
visibility:hidden
0
 
totse14Author Commented:
Tried that already...still didn't work...
0
 
obareeyCommented:
then you should hide it yourself, like that:

position:absolute;
left:-12367px; // enough lengths
top:-39489px;
0
 
David S.Commented:
Give "#myback ul" position:relative and then use absolute positioning on each <a> instead of relative positioning.

If I were doing it, I would probably put the IDs on the <li>s instead of the <a>s and positioned the <li>s.

To understand why it's doing that and why you can only tell it is in IE6, you'll need to read up on how relative positioning works and IE6's Expanding Box Bug.

http://www.dynamicsitesolutions.com/css/layout-techniques/#abs_rel_pos

http://www.positioniseverything.net/explorer/expandingboxbug.html
http://www.dynamicsitesolutions.com/css/min-height-for-msie/
http://www.quirksmode.org/css/overflow.html
0
 
totse14Author Commented:
Thank you very much for the detailed response, I definitely appreciate all of the references you gave as well, it helped immensely!
0

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now