SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gap between images in IE.

    On http://www.westeros.org/Citadel/Citadel-Frames.html the images making up the menu display with a gap of 1 or maybe a few pixels in IE, rather than right on top of each other as they should.

    Does IE add in that gap when you close tags like <img /> as they should be closed under xhtml? I don't think I've noticed it before I started doing that.

  2. #2
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Could you post the css? It's hard to determine with css and css probably is the answer to your problem due to spacing issues.
    HTMLGuy

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since all the submenus behave the same as the main menu when unhidden, I'll just post the CSS relevant for the main menu:

    General:

    Code:
    #MenuMain {
    	height : 160px;
    	left : 14px;
    	margin-top : -80px;
    	top : 50%;
    	position : absolute;
    	width : 99px;
    }
    
    @media screen {
    	#LeftBorder > #MenuMain {
        	position : fixed;
    	}
    }
    IE specific:

    Code:
    #MenuMain {
    	left : -11px;
    	margin-top : -189px;
    }
    The files can be found here:

    http://www.westeros.org/Citadel/Citadel-Frames.css
    http://www.westeros.org/Citadel/Citadel-Frames-IE.css

  4. #4
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try adding this to your CSS:

    img {
    display: block;
    }


    Browsers treat images like text so they leave space for the descenders (like the letter y) ... telling the browser to display them as block stops it

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that seems to have fixed it. Breaks the centering of some other images, however, so I'll have to look at which is most efficient: setting the display to block on just the menu items, or setting it to inline on all other images.

    Which would you recommend? Is display : block the best 'base' setup for images?

  6. #6
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well there are two things I do to my CSS VERY FIRST THING when I create a new style sheet:

    body {
    margin: 0;
    padding:0;
    }

    and

    img {
    display: block;
    }

    It just makes life easier and levels the playing field... IF that screws up your other images I have to think you have some code problems there AND make sure you have a valid doctype in your page or god knows what kind of nonsense can happen... quirks mode (as its called) is the result of a non valid doctype (which many wysiwygs tend to use) .... and will make coding a living nightmare! If you use the valid doctype your chances of layouts that work properly in most browsers is a lot better!

    To find the right VALID doctype for you check this out:

    http://hsivonen.iki.fi/doctype/

  7. #7
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem that occured was with centered images, which suddenly weren't centered any longer.

    I am pretty sure, though, that the doctype is correct. I'm using this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    The bulk of the page (minus the includes drawn from the server since these haven't been converted yet) validates with this, and none of the errors I see have anything to do with the images that didn't come out centered.

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dc dalton
    well there are two things I do to my CSS VERY FIRST THING when I create a new style sheet:

    body {
    margin: 0;
    padding:0;
    }

    and

    img {
    display: block;
    }

    It just makes life easier and levels the playing field... IF that screws up your other images I have to think you have some code problems there AND make sure you have a valid doctype in your page or god knows what kind of nonsense can happen... quirks mode (as its called) is the result of a non valid doctype (which many wysiwygs tend to use) .... and will make coding a living nightmare! If you use the valid doctype your chances of layouts that work properly in most browsers is a lot better!

    To find the right VALID doctype for you check this out:

    http://hsivonen.iki.fi/doctype/
    This doesn't make sense.

    These are valid DOCTYPEs that trigger Quirks mode:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
    These are invalid DOCTYPEs that trigger Full Standards Mode:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "INVALID">
    <!DOCTYPE HTML>
    For more information about what triggers what mode, see Mozilla's DOCTYPE sniffing, The Opera 7 and 8 DOCTYPE Switches and CSS Enhancements in Internet Explorer 6.
    Simon Pieters

  9. #9
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    This doesn't make sense.
    what doesnt make sense? All I was saying was make sure they had a valid doctype that did NOT trigger quirksmode. Maybe I didnt make myself 100% clear... I didnt even look at their code..

  10. #10
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    quirks mode (as its called) is the result of a non valid doctype (which many wysiwygs tend to use)
    That doesn't make sense, because it isn't true. Most WYSIWYG editors I know about use valid DOCTYPEs (which may trigger quirks mode), and most (all?) DOCTYPEs that trigger quirks mode are valid.

    Any unknown DOCTYPE triggers standards mode.
    Simon Pieters


Bookmarks

Posting Permissions

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