Getting a Height Div Shadow to appear in IE

[reubenb]

Hey guys
I'm new here, so I apologise if I do something wrong or write something!

Anyway,

I have a small query regarding CSS on my website.
It is valid CSS before you ask and th eproblem is - I have a shadow which is meant to appear on my website and in IE6 it does not. It is an image that is a height of 2 and then i want it to be height 100% so it fill sup the container it is in.

So, border-left and border-right are in the container 'page' and do not show up (but they do in opera, firefox, safari, ie7 and netscape)

Another problem in IE6, is the 100% width issue, anyone know how to fix this too? (all the widths that are 100% on the page, i tried to fix it in the IE6 fixes but it didnt work)

Any ideas?

The code is below

#header {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background-image: url(images/headerbg.gif);
	background-repeat:repeat-x;
	height: 128px;
	z-index: 1;
}

#logo {
	position:relative;
	width:231px;
	height:94px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(images/logo.jpg);
}

#menuspacer {
	position: absolute;
	top:110px;
	left: 0px;
	height: 41px;
	width: 100%;
	z-index: 2;
	border-bottom: 1px solid #FF8000;
}

#menubg {
	position:relative;
	top:116px;
	height: 25px;
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	z-index: 3;
	border-left: 1px solid #FF8000;
	border-right: 1px solid #FF8000;
	border-bottom: 1px solid #FF8000;
		background-color:#FFFFFF;

}
#menufakeborder {
	position:relative;
	top:89px;
	height: 20px;
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	z-index: 4;
	border-left: 1px solid #ffcb9d;
	border-right: 1px solid #ffcb9d;
}

#menucontainer {
	position:relative;
	top:0px;
	height: 23px;
	width: 500px;
	margin-right: 0px;
	margin-left: 0;
	z-index: 5;
}

#menu li
{
	display: inline;
	list-style-type: none;
	padding-right: 9px;
	margin-left: auto;
	margin-right: auto;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	color: #550000;
	text-decoration: none;
	text-align:center;
	z-index:6;
	background-color:#FFFFFF;
}

#photobg {
	position:absolute;
	top: 152px;
	left: 0px;
	width:100%;
	height: 161px;
	background-image:url(images/horsebg.gif);
	background-repeat:repeat-x;
	z-index:2;
	
}

#horse {
	position: relative;
	top: 91px;
	margin-left: auto;
	margin-right: auto;
	background-image:url(images/horse2.jpg);
	width:1035px;
	height: 161px;
	z-index:2;
}

#border-right {
	position:absolute;
	top: 0px;
	right: 137px;
	width:22px;
	height:97%;
	background-image:url(images/border-right.gif);
	background-repeat:repeat-y;
	z-index:2324235;
	background-color:#003366;
}

#border-left {
	position:absolute;
	top: 0px;
	left: 137px;
	width:20px;
	height:97%;
	background-image:url(images/border-left.gif);
	background-repeat:repeat-y;
	z-index:512;
	
}

#border-left-end {
	position:absolute;
	bottom: -18px;
	left: 139px;
	width:18px;
	height:58px;
	background-image:url(images/border-left-end.gif);
	z-index:1;
}

#border-right-end {
	position:absolute;
	bottom: -18px;
	right: 141px;
	width:18px;
	height:58px;
	background-image:url(images/border-right-end.gif);
	z-index:1;
}

#horse-tail {
	position:absolute;
	top: 161px;
	left: 63px;
	width:94px;
	height:61px;
	background-image:url(images/horsetail.gif);
	z-index:1;
	
}

#footer {
	position:absolute;
	bottom: -175px;
	width:100%;
	height:22px;
	background-image:url(images/footerbg.gif);
	background-repeat:repeat-x;
	left: 0px;
	border-top: 1px solid #FF8000;
	z-index:0;
}

#footer-text {
	position:relative;
	bottom: 3px;
	width:420px;
	height:22px;
	margin:0 auto;
	z-index:2;
	border-right: 1px solid #FF8000;
	border-bottom: 1px solid #FF8000;
	border-left: 1px solid #FF8000;
	background-color:#FFFFFF;
}

#page {
	position: relative;
	top: 0px;
	left:0px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	width: 1035px;
	z-index: 0;
}

and the fixes for IE at present:

#header {
	width: 101.5%;
	left:0px;
}

#photobg {
	width: 101.5%;
	left:0px;
}

#menuspacer {
	width: 101.5%;
	left:0px;
}

#menu
{
	list-style-type: none;
	margin-right: auto;
	width: 498px;
	margin:auto auto;
	padding:0px 0;
}

#menu li {
	display: inline;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
	text-align:center;

}

#footer {
	width: 101.5%;
	left:0px;
}

#border-right {
	right: 136px;
}

and the HTML;

<div id="header">
  <div id="logo"></div>
</div>
<div id="menuspacer"></div>
<div id="menubg">
  <!--[if ! IE 6]><div id="menucontainer"><![endif]-->
  <!--[if IE 6]><div id="menucontainer" align="center"><![endif]-->
  <ul id="menu" align="center">
menu items
  </ul>
</div>
</div>
<div id="menufakeborder"></div>
<div id="photobg"></div>
<div id="horse">
  <div id="horse-tail"></div>
</div>
<div id="page">
  <div id="border-right"></div>
  <div id="border-right-end"></div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  content
   <p>&nbsp;</p>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div id="border-left"></div>
  <div id="border-left-end"></div>
</div>
<div id="footer">
  <div id="footer-text" align="center"><img src="images/footer.jpg" /></div>
</div>

Thanks so much and looking forward to a reply soon!!

[mwinter]

Thanks so much and looking forward to a reply soon!!

If you want a quick response, post a link to a simple example, not code snippets. Not only might we see a different result by reconstructing the document differently, but it is your problem and you should take the effort to make it as easy for us to help you as possible. Ten people shouldn't need to independently reproduce the document ten times, when you can do it once.

Mike

[reubenb]

hi.

sorry.
you can see the page at
http://www.lynxas.com/clients/bonnetts/test.html
you can see the border does not appear in IE6 (shadows, the end bit does though) and the 100% width issues are notable too.

thanks

(it looks as it should in all other browsers, incl IE7)

thanks and sorry again

[mwinter]

I didn't find out why these things occurred: your markup is poor and should be restructured, which would in turn require a style sheet rewrite.

The first point is that you're using XHTML. Worse still, you're using a Transitional document type. There is no point to serving XHTML to the Web at large - if you want to use it server-side, transform it to HTML before serving the document.

If you persist in using XHTML, you absolutely must removing the (markup) comment delimiters within the style element. They're useless enough in HTML (and in script elements, too), but under XHTML they literally mean to comment out the contents.

You've written "div soup". Whilst an unfortunate number of div elements are necessary to style the document, it only amounts to four, not the fourteen extraneous elements you've used (the three that group the various sections - header, content, footer - are acceptable).

There are an awful number of line breaks (br elements) and empty paragraphs. The latter should never occur. The br element is not meant to be used twice (or more) in a row, nor is it a vertical separator between block-level elements. It is meant to break sequences of in-line content, such as one finds in addresses, poetic verse, and so forth. The vertical separation of block-level elements should be achieved using margins or padding. In-line content should be split into separate block-level elements (which again, use margins). As it is, the first paragraph is just one paragraph, and should be rendered that way.

In your style sheet, you've used pixel lengths for font sizes. Not only is this a bad idea from a usability perspective - 12px at 800x600 is very different at 1600x1200 on the same monitor - but bad from an accessibility perspective, too: it cannot be resized in MSIE prior to version 7. Use percentages, with body text at 100%, and nothing smaller than about 85% of that default. If you feel the need to make things smaller when using Verdana, stop using Verdana. It has different characteristics in comparison to other fonts, so what might be readable with it, will be a mess in another font.

You seem to have overused absolute positioning, making your layout quite fragile. Try resizing the font and you should find overlap. Then again, try making the viewport smaller and the same thing should result.

You're missing an awful lot of alternative text. You also seem to rely on a default white background. That will be a disaster if someone uses a different default (as a result of a theme or accessibility option, for example).


I've produced an alternative implementation. It renders acceptably in Internet Explorer 5.01+ and Opera 7.0+. It renders well in Konqueror (I've only seen recent versions) and hopefully in Safari too as a result, Opera 9, Mozilla 1.0+, and Firefox. In decent browsers (and IE 7, which is semi-decent), the viewport can be shrunk to around 510 pixels wide without a horizontal scrollbar.

Prior to Opera 9, the gradient borders render strangely (your do, too). I can't say I know why. In IE, the ends of the borders are missing (when Microsoft supports generated content, they'll appear). In IE 6, though perversely not earlier versions, the racing image will shift to the right if the viewport is made smaller than around 715 pixels. This doesn't occur in IE 7.

Mike