Results 1 to 6 of 6

Thread: [RESOLVED] IE white space issue

  1. #1
    Join Date
    Apr 2013

    resolved [RESOLVED] IE white space issue

    I've been trying to setup a page where the entire screen is divided into 3 sections, each section is going to cycle through it's own directory of images. I've got everything working correctly in every browser I've tried so far, with one small problem. In IE I get a small white space to the right of the image.

    Here is how I have the CSS setup:

    #myslides1 {position:absolute; top:0; left:0; width:50%; height:100%; overflow:hidden}
    #myslides1 img{height:100%; width:100%}

    #myslides2 {position:absolute; top:0; left:50%; width:50%; height:50%; overflow:hidden}
    #myslides2 img{height:100%; width:100%}

    #myslides3 {position:absolute; top:50%; left:50%; width:50%; height:50%; overflow:hidden}
    #myslides3 img{height:100%; width:100%}

    Like I said, works great in other browsers, just not IE for some reason.... btw I've tried adding margin:0 padding:0 and display:block with no luck

    Any ideas would be greatly appriciated!

  2. #2
    Join Date
    Apr 2013
    Here is a visual of what i'm seeing:


    Internet Explorer

    The white space to the right side of each image with IE.

  3. #3
    Join Date
    Aug 2006
    We need a link to your site so we can see the code...


  4. #4
    Join Date
    May 2005
    Gold Coast (MS)
    Make sure you have a proper document type. IE gets more "upset" at times than other browsers when none are present.


    Why Validate?: http://validator.w3.org/docs/why.html
    CSS Validator: http://jigsaw.w3.org/css-validator/
    HTML Validator: http://validator.w3.org/#validate_by_uri+with_options
    Unicorn - W3C's Unified Validator: http://validator.w3.org/unicorn/

  5. #5
    Join Date
    Apr 2013
    The site is not hosted yet, so I can't post a link, but here is the html code I have for it:



    <title>Event Display</title>
    <link rel="stylesheet" href="scripts/screen.setup.css">

    <body scroll="no">

    <script language="javascript" type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="scripts/jquery.cycle.all.js"></script>
    <script language="javascript" type="text/javascript" src="scripts/load.imgs.js"></script>

    <div id="myslides1"><img src="/images\left/test1.jpg" /><img src="/images\left/.jpg" /><img src="/images\left/smile.jpg" /><img src="/images\left/test2.jpg" /><img src="/images\left/TV2.jpg" /></div>
    <div id="myslides2"><img src="/images\top-right/TV.jpg" /><img src="/images\top-right/ops.jpg" /></div>
    <div id="myslides3"><img src="/images\bottom-right/logo.jpg" /></div>

    <META HTTP-EQUIV="refresh" CONTENT="900">


    note* The input of the actual images in the body is done by a php script in order for it to pull the images out of specified directories.

  6. #6
    Join Date
    Apr 2013
    I figured it out... I had some comments above the doctype that I didn't paste into the posted code. Removed my comments and it removed the white space in IE.... makes no sense to me but at least I got it. Thanks for the help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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