Strange Div Layer positioning and image pixelation

I have been having strange problems with getting images inside DIV Layers to display correctly. For some reason when I close-bracket my 2nd DIV Layer script the thumbnail image inside the 1st DIV Layer blows up to a huge, pixelated size. I know this sounds weird but here is what I mean. (By the way, yes, I have checked the code in CSS Validator and it passed with no errors.)

This how it should be with the { at the beginning and the } at the end. But this gives me the big pixelated images in DIV Layer 1.

EXAMPLE 1:
#layer2 {
position:absolute;
left:265px; /*this value may require resetting*/
top:100px; /*this value may require resetting*/
z-index:0;
width:430px;
height:376px;
overflow:auto;
}

However if I leave off the last } bracket of DIV Layer 2 and continue on with my code like this, then it works fine in IE and Firefox but not in Apple's Safari, where the 2nd Layer will not sit on top of the background image like the previous DIV Layer does. Note the missing } before "#map_holder" starts.

EXAMPLE 2:
#layer2 {
position:absolute;
left:265px; /*this value may require resetting*/
top:100px; /*this value may require resetting*/
z-index:0;
width:430px;
height:376px;
overflow:auto;

#map_holder img {
position:absolute;
left:0;
top:0;
z-index:2;
width:800px;
height:550px;
border:0 solid;
}
</style>
</head>

Here is the entire code that I am using for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PAGE 1 ~ Visuals</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:#552b00;
}
a:link {
color:#ffc;
}
a:visited {
color:#ff9;
}
a:hover {
color:#fff;
}
a:active {
color:#ff9;
}
#map_holder {
position:relative;
width:800px;
margin:auto;
}
#layer1 {
position:absolute;
left:5px; /*this value may require resetting*/
top:120px; /*this value may require resetting*/
z-index:1;
width:169px;
height:324px;
overflow:auto;
}
#layer1 h1 {
font-size:24px;
color:#fff;
}
#layer1 p {
color:#fff;
}
#layer2 {
position:absolute;
left:265px; /*this value may require resetting*/
top:100px; /*this value may require resetting*/
z-index:2;
width:430px;
height:376px;
overflow:auto;
}
#map_holder img {
position:absolute;
left:0;
top:0;
z-index:0;
width:800px;
height:550px;
border:0 solid;
}
</style>
</head>

<p align="center"><a href="http://example.com/visuals_video2.htm">TITLE 1<br><i>"Nowhere Left to Run"</i><br><img src="http://example.net/01798/47/41/1798081474_thumb1.jpg" border=0 width="100" height="90"></a></p>
<p align="center"><a href="http://example.com/visuals_video.htm">TITLE 2<br><i>"Simple Kind of Dissonance"</i><br><img src="http://img.example.com/vi/iyW_ZtNPedg/default.jpg" border=0 width="100" height="90"></a></p>
<p align="center"><a href="http://example.com/visuals_video1.htm">TITLE 3<br><i>"Can't Stop Saying Yes"</i><br><img src="http://img.example.com/vi/cGO5FCtg8vQ/default.jpg" border=0 width="100" height="90"></a></p><br>
</div>

</div>
</div>
</div>
</body>
</html>

Strange Div Layer positioning and image pixelation

Safari isn't displaying multiple DIV Layers correctly & brackets problems.

theloomis

tedster

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week