Form Field Alignment in IE - Help please!

Discussion in 'HTML & Website Design' started by Guthix121, Jun 23, 2010.

  1. #1
    Hey guys,

    I'm making a new template for my website here: http://www.guardtunnel.com/newtemplate/

    Everything looks perfect as it should in all browsers except IE.

    In IE, there are two issues:

    The advertisement boxes are overlapping the heading beneath them. I put margin-top:15px in the h2's style to combat that, but its not working on IE.

    The form textbox isn't aligning with the submit button. I added vertical-align:middle and margin-top: -6px to fix that in all other browsers, but it needs a lot more margin in IE (is there another way to fix it without needing IE-only css?)

    Thanks guys! :)
     
    Guthix121, Jun 23, 2010 IP
  2. Tigerbiz

    Tigerbiz Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi,

    I'm not much of an expert at this but I think the problem is your css style sheet is conflicting with the html code you have on the page.

    If it was me first I would put the two advert blocks inside a two column table, instead of the code you have, and probably I would write the entire page in html, its a small page any way, your JavaScript appears to be ok, that way you would be ok with any browser, I think :)
     
    Tigerbiz, Jun 24, 2010 IP
  3. leksa

    leksa Active Member

    Messages:
    432
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #3
    What IE version?

    btw, .. nice number in your post count! lol :D
     
    leksa, Jun 24, 2010 IP
  4. Guthix121

    Guthix121 Well-Known Member

    Messages:
    1,078
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    105
    #4
    All versions. I temporarily added in IE only stylesheets and an extra <br /> to fix it, but I prefer not having it.

    And haha, 1000 posts! :D
     
    Guthix121, Jun 24, 2010 IP
  5. Team-Allita-Inc.

    Team-Allita-Inc. Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You can use a transparent .png image and replace the space you are giving with the css stylesheet positioning of the blocks (and play with the height and width attributes, this trick should work for those little browser compatibility issues with css positioning) and it should work across all browsers just fine.

    By the way I have IE 8 and i see everything just perfect like in Google Chrome... just there is no advertisement in the red boxes :)

    Happy coding!
     
    Team-Allita-Inc., Jun 25, 2010 IP