SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Messed up in IE

  1. #1
    SitePoint Addict yourhostnow's Avatar
    Join Date
    Apr 2005
    Location
    New York
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Messed up in IE

    Hello.

    I have a page I'm working on, and it looks perfect in Firefox, but it's messed up in IE... anyone have any suggestions on how to fix this?

    The design is validated w/ w3 html validator, with the only errors being from the YPN ad code because the YPN code is not w3 compliant.

    Anyone care to help?

    Thanks

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Absolutely, provided you a. give us something to look at, and b. be more specific with the problems ('messed up' isn't).

  3. #3
    SitePoint Addict yourhostnow's Avatar
    Join Date
    Apr 2005
    Location
    New York
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol ooops! Sorry I forgot to give you the URL...

    http://www.flavicon.com/browse

    If you look at it in IE and FF you'll know what i'm talking about.

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your css, you don't have units, such as px, on some height attributes.

  5. #5
    SitePoint Addict yourhostnow's Avatar
    Join Date
    Apr 2005
    Location
    New York
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok fixed... but it dosn't fix the problem.

  6. #6
    SitePoint Addict yourhostnow's Avatar
    Join Date
    Apr 2005
    Location
    New York
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ugh I'm about to pull my hair out!

  7. #7
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, first off since you have rows and columns of data, if you wanted them to appear predictably in a fixed number of rows and columns that's what a table is for.

    The culprit in this case is the 'infamous' 3 pixel jog error in IE, where IE tends to put an extra 3 pixels around floats.

    the 'common' fix for this would be to add this to your code:
    * html .display {margin-right:-3px}

    or add to your display element
    _margin-right:-3px;

    I would also make another suggestion, right now you are nesting

    DIV ANCHOR IMG /ANCHOR /DIV
    DIV ANCHOR IMG /ANCHOR /DIV
    DIV ANCHOR IMG /ANCHOR /DIV

    Might I suggest changing to
    DIV
    ANCHOR IMG /ANCHOR
    ANCHOR IMG /ANCHOR
    ANCHOR IMG /ANCHOR
    /DIV

    and styling the anchor instead of the DIV - there's no actual NEED for using a DIV there for assigning the float.

    Code example coming... gimme a minute.

  8. #8
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    addendum - you are also saying height="16px" in your html, you don't specifiy a metric there as html only accepts px as the height for a image... it's just 'height="16", you aren't specifying a border meaning IE is adding one because you're inside an anchor...

    and it appears using the anchor tag we DON'T have to correct for the jog...

  9. #9
    SitePoint Addict yourhostnow's Avatar
    Join Date
    Apr 2005
    Location
    New York
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks guys... fixed

  10. #10
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here's a version that works cross browser without resorting to 'compatability hacks'

    The CSS
    Code:
    .display a {
    	display:block;
    	float:left;
    	background:url('http://www.flavicon.com/img/display.PNG') 3px 3px no-repeat;
    	padding:0px;
    	margin:10px;
    	width:32px;
    	height:32px;
    	border:none;
    	text-decoration:none;
    }
    .display img {
    	width:16px;
    	height:16px;
    	padding:8px;
    	border:none;
    	vertical-align:middle;
    }
    The HTML
    Code:
    <div class="display">
    	<a href="./favicons/420-Pill">
    		<img src="http://www.flavicon.com/favicons/18.png_4184.ico" alt="" />
    	</a>
    	<a href="./favicons/419-Pills">
    		<img src="http://www.flavicon.com/favicons/17.png_9143.ico" alt="" />
    	</a>
    	<a href="./favicons/418-Tape_Measure">
    		<img src="http://www.flavicon.com/favicons/16.png_4432.ico" alt="" />
    	</a>
    </div>
    Those should wrap and size consistantly across all the major browsers, and validate XHTML strict... all without resorting to any real 'browser specific' hacks, just stating the CSS that is different by default between the browsers.

    You'll notice I moved the image sizing into the CSS, set the padding there instead of in your anchor - this lets the background get positioned properly as it tended to drift about in Opera and Firefox (but not IE); common problem... hence the inclusion of vertical-align on the images (VERY important) and the px offsets on the background.

    Oh, and you are using a 27x26 background when you should be using a 26x26 - that's why there's a extra 1 pixel 'padding' to the right of the image. 32-27=5, half of 5 is 2.5 pixels - there is no such thing as half a pixel, so I rounded up to three. 26x26 would be a difference of six, making that three pixel padding correct.

    Hope this helps.

  11. #11
    SitePoint Addict yourhostnow's Avatar
    Join Date
    Apr 2005
    Location
    New York
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used the CSS and it fixed the alignment problem in IE, but when I used the HTML you gave it messed it up,.. but it seems to work fine without that html. Thanks

    Now in IE I have 2 listings going to a 3rd line when there are only 2 lines in IE... trying to fix that now


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
  •