Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

absolute div stacking problem 1

Status
Not open for further replies.

PerlIsGood

Programmer
Jan 24, 2002
154
US
I have a site with a couple stacking absolute divs. In FF it's working fine, but IE isn't liking it too much. You can view the example here: and the css file
Any ideas why IE isn't displaying the divs? Main.css is what's being used, ie.css has no elements declared at the moment (it's blank).

html
Code:
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<title>WGI Underground Utilities</title>
<link rel="stylesheet" href="main.css" type="text/css" media="screen" />
<!--[if lte IE 6]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body>

<div id="head">
	<img src="picts/logo.jpg" alt="WGI Underground Utilities" width="274px" height="150px" />
</div>
<div id="menu">
	<?php
	    readfile('tab_menu.txt');
	?>
</div>
<div id="flash">
	<?php
	    readfile('header.txt');
	?>
</div>
<div id="content">
	<h1>Welcome</h1>
	<p></p>
	<p></p>
	<p></p>

	<h1>Mission</h1>
	<p></p>
</div>

<div id="sub1">
	<?php
	    readfile('sidebar1.txt');
	?>
</div>
<div id="sub2">
	<?php
	    readfile('sidebar2.txt');
	?>
</div>
<div id="pipe">
	<?php
	    readfile('menu.txt');
	?>
</div>
<div id="footer">
	<?php
	    readfile('copyright.txt');
	?>
</div>

</body>
</html>

Notorious P.I.G.
 
P.I.G-

I am not absolutly sure about this, but try giving the div#menu a width and height. It might be that because you have overflow:hidden and no height/width, ie is assuming that the div is of size 0x0. You could also try removing the overflow definition for testing.

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô
 
I gave div#menu a width/height in the ie.css file, as well as removing the overflow: hidden attribute. Still no go. I forgot to mention that the flash div is not showing IE either. Still tweaking the settings, but can't get those two elements to render in IE.

Any other ideas?

Notorious P.I.G.
 
Here's another update. I've verified this on 3 separate systems, but the #menu and #flash divs will load in IE only on the initial load of a fresh session. Once you refresh the page, then the #menu and #flash disappear.

It makes me think this is a caching problem in IE. I tried adding 'no-cache' meta tags but that didn't help. This is just weird problem and doesn't make any sense to me. Would really appreciate any other thoughts/ideas.

Notorious P.I.G.
 
P.I.G-

I noticed the same thing. However its not a cache problem because when I disabled the cache it didnt change anything.

First thing...and I should have pointed you to this earlier... check and see if the website validates against the xhtml standards:
It looks like something is being put over the top of your meun and your flash. Try using [tt]visibility:hidden[/tt] to hide your elements one by one until you can see the menu.

I would bet that the reason that this is happening is because you are using z-index. IE doesnt handle z-index well sometimes. Try making a layout that doesnt rely on position and z-index. Search on google for css layouts and you will probably find something that will work well.

Other than that, I noticed some things about your source code that could be improved. I checked your source code and you use your stylesheets alittle wierd, but it is easily simplified (and an easy mistake to make).

Here is something I would change:
Code:
<div id="menu">
<a href="about.php" [COLOR=red] class="amenu" [/color]>About</a>
<a href="service.php" [COLOR=red] class="amenu"[/color]>Services</a>
<a href="clients.php" [COLOR=red] class="amenu"[/color]>Clients</a>
<a href="contact.php" [COLOR=red] class="amenu"[/color]>Contact</a>
<a href="index.php" [COLOR=red] class="amenu"[/color]>Home</a>
</div>
---------and your stylesheets-------------------------------

[COLOR=red].amenu[/color] { 
	font-family: arial, verdana, helvetica, sans;
	font-size: 9pt;
	text-decoration: none;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 7px;
	padding-right: 7px;
	font-weight: bold;
	text-align: center;
	line-height: 24px;
	border-width: 1px 1px 0px 1px;
	border-color: #cccccc;
	border-style: solid;
	-moz-border-radius-topleft: 2em;
	-moz-border-radius-topright: 2em;
}


[COLOR=red]a.amenu:link [/color]{
	background-color:#0f4174;
	color: #ffffff;
}

...

and here is what I would change this type of code to:
Code:
<div id="menu">
<a href="about.php">About</a>
<a href="service.php">Services</a>
<a href="clients.php">Clients</a>
<a href="contact.php">Contact</a>
<a href="index.php">Home</a>
</div>
------------------------------------------------------
#menu a { 
	font-family: arial, verdana, helvetica, sans;
	font-size: 9pt;
	text-decoration: none;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 7px;
	padding-right: 7px;
	font-weight: bold;
	text-align: center;
	line-height: 24px;
	border-width: 1px 1px 0px 1px;
	border-color: #cccccc;
	border-style: solid;
	-moz-border-radius-topleft: 2em;
	-moz-border-radius-topright: 2em;
}	
	
#menu a:link {
	background-color:#0f4174;
	color: #ffffff;
}

This relies on an important bit of information. Instead of using classes explicitly everywhere, you can use the nesting order of elements to specify your styles.

Explicitly classing everything on your page will work, but its too much work. Using the nesting order of the elements on your page can simplify your syntax and make your page download time less.

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô
 
Thanks eclipse. I went back and started rebuilding the page one-by-one and stumbled onto a solution. I accidentally added an extra #break div right after the header and the #flash and #menu divs came back onto the screen. If I take out that extra #break they go away...

I still can't explain it, but at least everything is working now :)

Notorious P.I.G.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top