Web Analytics Made Easy -
StatCounter Image/Div positioning problem in IE6 - CodingForum


No announcement yet.

Image/Div positioning problem in IE6

  • Filter
  • Time
  • Show
Clear All
new posts

  • Image/Div positioning problem in IE6

    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!

  • #2
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


    • #3
      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.


      • #4
        Originally posted by jeffmc21 View Post
        . 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">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <style type="text/css">
        body {
        	background: #00a9a0 url(images/bkgnd.jpg) top left repeat-x;
        * {
        #wrap {
        	width: 1024px;
        	overflow: auto;
        img {
        	float: left;
        #map {
        * html #map{
        <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')" />
        <!--end wrap--></div>
        Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
        Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad