1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

What fix should I use to make my HTML page look right in IE?

Discussion in 'CSS' started by cancuncss, Mar 30, 2008.

  1. #1
    My page looks fine in Firefox but in IE, the palm tree graphic is not positioned correctly (please see below). What fix should I use? Any code I can use? Any tutorials on the web?

    Use IE to see the palm tree graphic : http://testingarea.proyectoclave.com/

    I'd like the graphic to be positioned correctly as it's here:
    http://testingarea.proyectoclave.com/layout.gif
    SEMrush
     
    cancuncss, Mar 30, 2008 IP
    SEMrush
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    Your doctype is incorrect and IE is in quirks mode. You should use a strict doctype but you are using old, deprecated markup. So you have to use a transitional doctype till you can come into 2008 standards. Use this one:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
     
    drhowarddrfine, Mar 30, 2008 IP
  3. Ejudicator

    Ejudicator Member

    Messages:
    95
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    48
    #3
    Have you tried the leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" in the body yet, as well as align="top" for the palm.jpg image yet?

    Visually looking at it, the flash logo seems to be offsetting your palm image as the "under border" looks like extra white space in IE and not in Firefox. I'll take a closer look in the morning, it's midnight where I am...
     
    Ejudicator, Mar 30, 2008 IP
  4. cancuncss

    cancuncss Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks!! I have set leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" in the body of index page. The palm graphic still looks incorrectly positioned in IE.

    I also tried the following (align="top") but it didn't have any effect on the position:
    <!-- PALM TREE -->
    <div id="palm">
    <img src="picts/palm.jpg"
    width="138" height="178" alt="Cancun Fresh Mexican Grill" align="top">
    </div>
    <!-- END PALM TREE -->


    Thanks again and I hope you can help me a bit more so I can get the graphic to appear correctly on IE.
     
    cancuncss, Mar 31, 2008 IP
  5. cancuncss

    cancuncss Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks. I tried it but the change had no effect on the graphic.
     
    cancuncss, Mar 31, 2008 IP
  6. cancuncss

    cancuncss Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    The difference seems to be 2 pixels. In IE 7 the graphic is positioned 2 pixels below the position the graphic is on Firefox.

    The graphic looks perfect in IE 7 when I use:
    #palm { position: absolute; top: 97px; left: 400px;}

    The graphic looks perfect in Firefox 2.0 when I use:
    #palm { position: absolute; top: 99px; left: 400px;}

    Any ideas?
    How can I get IE to position the graphic correctly without affecting its positioning in the other browsers?
     
    cancuncss, Mar 31, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    It looks completely off in FF1.5. The palm tree on my machine is halfway down the page. In Opera it looks to be well in place.

    Your doctype isn't completely correct, you're missing the second line.

    What I think is happening is the palm tree is using the body as a parent. When you absolutely position something, it needs to know who it's absolutely positioned in relation to (the nearest positioned parent) and when you don't say, then it uses the body or the viewport as its reference. IE and FF have different default margins and padding, which we would normally set to 0, and I think IE is still in Quirks mode because of the missing second line
    "http://www.w3.org/TR/html4/loose.dtd">
     
    Stomme poes, Mar 31, 2008 IP
  8. cancuncss

    cancuncss Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    The second line has been added to index page but it didn't change anything. Thanks.
     
    cancuncss, Mar 31, 2008 IP
  9. mr_wonderful

    mr_wonderful Peon

    Messages:
    128
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #9
    if you can't figure it out, you can always try it as a background image instead (remove img from your html):

    #palm { height:178px; width:138px; position:absolute; top:99px; left:400px; background-image:url(picts/palm.jpg);}
     
    mr_wonderful, Mar 31, 2008 IP
  10. mr_wonderful

    mr_wonderful Peon

    Messages:
    128
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #10
    or try adding border:0; to your image
    #palm img {border:0;}
    or
    <img src="picts/palm.jpg" width="138" height="178" alt="Cancun Fresh Mexican Grill" border="0">
     
    mr_wonderful, Mar 31, 2008 IP
  11. cancuncss

    cancuncss Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    It didn't work either ): Thanks anyway.
     
    cancuncss, Mar 31, 2008 IP
  12. cancuncss

    cancuncss Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    This didn't work either ): Thanks anyway.
     
    cancuncss, Mar 31, 2008 IP
  13. mr_wonderful

    mr_wonderful Peon

    Messages:
    128
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #13
    hmm... last try:

    are you using a global reset? You could try adding this to the top of your css:

    * {margin:0; padding:0; border:0;}
     
    mr_wonderful, Mar 31, 2008 IP
  14. cancuncss

    cancuncss Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    I don't know what a global reset is. I'll add the line to the top of CSS.
     
    cancuncss, Mar 31, 2008 IP
  15. cancuncss

    cancuncss Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    It didn't work either but thank you for trying to help.
     
    cancuncss, Mar 31, 2008 IP
  16. 007c

    007c Peon

    Messages:
    611
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #16
    jw why don't you just put it as background like stated a lil earlier and use background positioning?
     
    007c, Mar 31, 2008 IP
  17. mr_wonderful

    mr_wonderful Peon

    Messages:
    128
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Ok, I was way off, the problem is in your top white section, it's 2px too short which is prob a border or something

    see screen shots:
     

    Attached Files:

    mr_wonderful, Mar 31, 2008 IP
  18. cancuncss

    cancuncss Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    I did but it didn't work. I have tried everything that has been suggested before your post.
     
    cancuncss, Mar 31, 2008 IP
  19. cancuncss

    cancuncss Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Thanks. That's correct. Do you know how I can fix it?
     
    cancuncss, Mar 31, 2008 IP
  20. cancuncss

    cancuncss Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    I will pay $10 via PAYPAL to whoever comes up with a solution that works.
     
    cancuncss, Mar 31, 2008 IP