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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh Problem with positioning divs in IE...

    Hi, I am having an issue with my image map on my website. When I view it in firefox it looks great and is in the correct position, to the left, but when I view it in IE it is in the center of the page behind the rest of the content. I would love some help with this... I'm not the most experienced person so any ideas would be wonderful. Thank you

    Here is the URL: http://www.spfdskateworld.com/version3

    Becky
    Last edited by rebeccajanet; 10-24-2009 at 07:43 PM. Reason: fixing something

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    You're doctype is incorrect and puts IE into quirks mode. Use this one:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm.... I tried that, and now all of the content is overlapped on the left side of the page...

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    With a doctype added, which you do need if you want IE to behave, you need to explicitly state all your top and left positioning on your layout divs in pixels.

    So for example:

    Code:
    <div
       style="
          top: 35;
          left: 235;
          position: absolute;
          z-index: 1;
          visibility: show;">
    needs to be:

    Code:
    <div
       style="
          top: 35px;
          left: 235px;
          position: absolute;
          z-index: 1;
          visibility: show;">
    Without these the browser will ignore the top and left settings, and hence the three layout divs all end up on top of each other.

  • #5
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok thank you!

  • #6
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok... so that was a huge help and it works in IE and firefox now, BUT now for some reason all of the text is double spaced in both browsers, and I have no idea why and can't figure out how to get it back to single spacing...

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Quote Originally Posted by SB65 View Post
    Code:
    <div
       style="
          top: 35px;
          left: 235px;
          position: absolute;
          z-index: 1;
          visibility: show;">
    Just for the records: it must be visibility: visible;. “show” is not a valid value.

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    now for some reason all of the text is double spaced in both browsers
    Assuming you mean in the right hand pink column, this is due to the repeated:

    Code:
    <font face="arial" color="000000" size="5">
    appearing at the start of each of the sections: No School Skate, Halloween Skate etc.

    It's better not to use the <font> element at all as it is deprecated, and it would really be better to rewrite this section using <h2>, <h3> elements...and get rid of the table while you're at it.

    If you don't want to do this, try removing the size="5" from these sections. Just leave it on the very top "Upcoming events".

  • #9
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, it's not just the right side column, it's also the middle table, so I don't think that's the reason. I have to specify the font size because the line below it is a smaller size, and it alternates, so each new line has to specify the size.

    It wasn't "double spaced" until I added the pixel clarification for the alignment of the tables... so I have no idea what is causing this. I just want it to go back to how it was =/

  • #10
    Regular Coder
    Join Date
    Dec 2007
    Posts
    107
    Thanks
    0
    Thanked 3 Times in 3 Posts
    try removing the <p> tag that appears before the <font> tag.

    In the html version of the page I can see.


    <p align="left">
    <font face="arial" size="2"> Welcome to the <b>Springfield Skate World</b> website!


    Try removing the <p> tag. Also make sure you use proper HTML. like every open tab should have a closed tag.

    Hope it helps
    Programming & Webmaster Forum - AdSense Revenue Sharing forum

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Well, it's not just the right side column, it's also the middle table, so I don't think that's the reason.
    That is the reason on your right hand column. You are setting font size = 5 for every paragraph, which is not affecting the font size of the text because you are setting this as well for each lot of text, but it is affecting the space between the lines. Try removing the size="5" bits.

    Your middle column looks fine to me, not double spaced at all, it just looks like a nicely set out set of paras. Since this text is in a table, you could remove the <p> tags as technica suggests.

    These problems you are now seeing are not as a result of adding the pixel positioning, but as a result of applying a doctype to the page, which is now making your page display as it is written (which might not be exactly as you want it to look).

  • #12
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    thank you for the clarification. finally got it figured out


  •  

    Tags for this Thread

    Posting Permissions

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