Oversized images in CSS DIV Layers - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Oversized images in CSS DIV Layers

Images are resizing themselves inside the DIV layers

theloomis

12:45 am on Feb 17, 2008 (gmt 0)

10+ Year Member

I am having a big problem getting my images to display correctly in my DIV layers. They are resizing themselves, ending up huge and pixelated. I have validated the CSS script multiple times and it always passes with no errors.

I have created a Test page so you can see what is happening. There are supposed to be two thumbnail-link images on the left and one 350x345 image (of a street sign) in the center. Below is the code I am using on the Test Page. Thank you so much for any ideas you might have.

Here is the code from the Test Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Visuals TEST</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:280px; /*this value may require resetting*/
top:115px; /*this value may require resetting*/
z-index:2;
width:400px;
height:374px;
overflow:hidden;
}
#map_holder img {
position:absolute;
left:0;
top:0;
z-index:0;
width:800px;
height:550px;
border:0 solid;
}
</style>
</head>

<body>
<div id="map_holder">

<div id="layer1">
<p align="center"><a href="test1.htm">text link 1<br><img src="photo_icon2.jpg" width="90" height="90"></a></p><br><br>
<p align="center"><a href="test2.htm">text link 2<br><img src="video_icon2.jpg" width="90" height="90"></a></p>
</div>

<div id="layer2">
<img src="http://example.com/images/musician_street_pic_web1.jpg" width="350" height="345">
</div>
</div>
</body>
</html>

[edited by: tedster at 1:08 am (utc) on Feb. 19, 2008]
[edit reason] no personal links, thanks [/edit]

tedster

1:10 am on Feb 19, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

The problem is with this declaration:

#map_holder img {
position:absolute;
left:0;
top:0;
z-index:0;
width:800px;
height:550px;
border:0 solid;
}

That instructs the browser to render any image inside #map_holder at 800px wide and 550px high.

theloomis

4:41 am on Feb 19, 2008 (gmt 0)

10+ Year Member

Tedster,
Thank you so much. I've been racking my brain for weeks trying to figure that out.
I have removed the offending declaration and now the images are the proper size but for some reason only one of the two thumbnail images is showing up on the left (from "layer1"). The text is there from both links but only the second thumbnail image is appearing. Any ideas on that?

All the code is still the same, I just removed the "width:800px;
height:550px;" declaration per your suggestion.

#map_holder img {
position:absolute;
left:0;
top:0;
z-index:0;
border:0 solid;

tedster

6:03 am on Feb 19, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

That same set of rules tells the browser to display every img element inside the #map_holder div at 0,0 - only room for one visible image at that spot.

theloomis

7:33 am on Mar 1, 2008 (gmt 0)

10+ Year Member

Tedster,
You are the best! I have taken out the "left:0; top:0; z-index:0;" and now just have the following for my map_holder img element:

#map_holder img {
position:absolute;
border:0 solid;
}

The only problem now is that the image placement is funky in Safari. I've got it to look and work great in IE and Firefox but Safari is displacing the images in LAYER#1 to the left by about 200px. Once again I have validated the code but I cannot figure what makes Safari interpret the CSS code differently than every other major browser. I am trying my best to only use the bare essentials of code to clean up any confusion among browsers.

Here is what I have now:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Visuals TEST</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;
}
img {
border: 2px solid #ffffff;
}

#map_holder {
position:relative;
width:800px;
margin:auto;
}
#layer1 {
position:absolute;
left:-40px; /*this value may require resetting*/
top:120px; /*this value may require resetting*/
z-index:1;
width:190px;
height:324px;
overflow:auto;
}
#layer1 h1 {
font-size:24px;
color:#fff;
}
#layer1 p {
color:#fff;
}
#layer2 {
position:absolute;
left:310px; /*this value may require resetting*/
top:115px; /*this value may require resetting*/
z-index:2;
width:400px;
height:374px;
overflow:hidden;
}
#map_holder img {
position:absolute;
border:0 solid;
}

</style>
</head>
<body>

<div id="map_holder">
<div id="layer1">
<p align="center"><a href="http://test.com/test1.htm">text link 1<br><img src="http://example.com/images/photo_icon2.jpg" width="90" height="90"></a></p><br><br><br><br><br><br>
<p align="center"><a href="http://test.com/test2.htm">text link 2<br><img src="http://example.com/images/video_icon2.jpg" width="90" height="90"></a></p>
</div>

<div id="layer2">
<img src="http://example.com/images/musician_street_pic_web1.jpg" width="350" height="345">
</div>
</div>
<center><img src="http://example.com/visuals_template.jpg" border=0 usemap="#menu" alt=""></center>
</body>
</html>