Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    41
    Thanks
    4
    Thanked 0 Times in 0 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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    41
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote 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 -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •