...

View Full Version : Image/Div positioning problem in IE6



jeffmc21
04-02-2009, 04:17 AM
Hey guys..

My link is http://www.ttownblockparty.com

This is a very simple page, basically an online poster, so I decided to take a shortcut and just slice an image of the design into 30 pieces and use them as images to display the page. Everything looks fine in IE7, FF, Safari, but in IE6 I'm getting an ugly green line across the page underneath the first row(div) of images. There's two images to a div and 15 divs.

Anyone have any idea how to get rid of that "space" in IE6? I had it in 7 until I went and made the margin and padding for each div = to 0.

Thanks for the help!

Excavator
04-02-2009, 04:51 AM
Hello jeffmc21,
I never understood the point of all the slices. Especially here... it's just an image. Why cut it up and then struggle to put it back together?

Look at your code at 78 lines of code that aren't working and this - http://nopeople.com/test/jeffmc21.html

jeffmc21
04-02-2009, 04:18 PM
I understand your point, and see the ease of your test page. However, there's also diminished image quality in the test page. The point of the slices, while it might not be the best solution, was to have hi-res images that will still load quickly. By slicing the image into smaller files, this was possible. I could always have one or two images total, but then the page would take much longer to load and/or the images would have to be of less quality to keep file size down.

Excavator
04-02-2009, 04:54 PM
. However, there's also diminished image quality in the test page.

Demo is just a low quality screen cap.
I still don't see what your gaining by slicing it up like that. It would be different if you were putting the lower quality background up and then positioning higher quality photos on top of it but you're not. You've just made random slices that you have to piece back together... how does that help image quality or loading speed?

Either way you do it, you don't need to have a div around each image. Try it like this once -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
width:1024px;
background: #00a9a0 url(images/bkgnd.jpg) top left repeat-x;
}
* {
margin:0px;
padding:0px;
}
#wrap {
width: 1024px;
overflow: auto;
}
img {
float: left;
}
#map {
position:absolute;
left:395px;
top:389px;
}
* html #map{
position:absolute;
top:393px;
left:395px;
}
</style>
</head>
<body>
<div id="wrap">
<img src="http://www.ttownblockparty.com/images/1.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/2.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/3.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/4.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/5.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/6.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/7.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/8.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/9.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/10.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/11.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/12.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/13.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/14.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/15.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/16.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/17.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/18.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/19.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/20.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/21.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/22.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/23.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/24.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/25.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/26.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/27.jpg" height="40" width="512" /><img src="http://www.ttownblockparty.com/images/28.jpg" height="40" width="512" />
<img src="http://www.ttownblockparty.com/images/29.jpg" height="41" width="512" /><img src="http://www.ttownblockparty.com/images/30.jpg" height="41" width="512" />
<div id="map">
<img src="http://www.ttownblockparty.com/images/smallMap.jpg" usemap="#Map" border="0" height="204" width="180" />
<map name="Map" id="Map">
<area shape="poly" coords="39,190,14,30,143,7,170,170" href="javascript:popUp('http://www.ttownblockparty.com/blockPartyMap.jpg')" />
</map>
</div>
<!--end wrap--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum