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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Alignment in the Evil Browser (I.E. I.E.)

    Hi. Hope you enjoyed the pun.

    Anyway,

    My website at www.ironwhisk.com is showing up strangely in IE.
    I was able to fix most things by creating a seperate stylesheet but two relatively simple problems remain:

    1) There is horizontal scrolling. When I reduce the wrap div width, the scrolling decreases. After what I have now though, it ruins the layout. How can I get rid of this scrolling? Why is it so wide..

    2) The ad at the top is not aligned with the text. When I change the adtop div margin, nothing happens.

    Please advise!

    Thanks,

    Ilan

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Delete on line 815 of style.css:

    Code:
    #adtop {
          float: right !important;
          margin-left: 150px !important;
    }
    and replace with:
    Code:
    #adtop {
          margin-left: 20px;
    }
    The horizontal scroll in IE is caused by this ad.

  • #3
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi Sammy,

    Thanks a bunch for your suggestion - it totally fixed the ad problem.
    I'm still having trouble with the scrolling though. I tried decreasing the wrap div but it isn't working.

    Thank you!

  • #4
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks, that's very helpful and worked great.

    Quick question though, for the footer it's not aligned to the right of the secondary sidebar in IE like it is in chrome/mozilla.
    I can't just add padding since it will look different everywhere. Do you have a suggestion on how to fix it?

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    sec I'm just going to try to fix this layout

    Take out the:
    Code:
    html, body {
         width: 100%;
         overflow-x: hidden;
    }
    And add:
    Code:
    #wrap {
         width: 1000px !important;
         margin: 0 auto !important;
         padding: 0 !important;
         position: relative;
    }
    #sidebar-primary {
         position: static !important;
         margin: 0 !important;
         float: left !important;
    }
    #main {
         float: left !important;
         width: 738px !important;
         margin-bottom: 50px;
         overflow: hidden; *zoom: 1;
    }
    #adtop {
         margin-left: 20px !important;
         margin-bottom: 40px !important;
    }
    #content {
         width: 495px !important;
         margin: 0 !important;
         padding: 0 20px !important;
    }
    #footer-container {
         clear: both !important;
         overflow: hidden; *zoom: 1;
         margin: 20px 0;
    }
    Last edited by Sammy12; 09-07-2012 at 10:40 PM.

  • #6
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Oh wow, that works great!
    Fixed everything but the footer, should I just use margin for that then?

    Should I add that code to my other stylesheet?

  • #7
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks I added the code but it messed up all the formatting.

  • #8
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    So are you suggesting I add it to the head of the page instead of in the stylesheet?
    What's the difference?

  • #9
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Did I somehow add the code incorrectly then? It looks all messed up in IE.

  • #10
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I did add it. It's at the bottom of the stylesheet.
    Am I supposed to replace the code at the top currently there describing main, wrap, etc. or just paste this code at the bottom?

  • #11
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I have a seperate style sheet for IE.
    all-ie-only.css and I added it in there.

    That ie style sheet is simply the other one copied and pasted with a few changes because of ie's weird formatting

  • #12
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Alright, added the code. This happened:

    1) The entire website was shifted up
    2) The sidebar was shifted down
    3) It did not affect IE at all (it was not in the IE stylesheet so I'm not sure why it would).

    I'm leaving it up like this for now so you can see.

    Thanks

  • #13
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Here is a before and after screen shot
    Attached Thumbnails Attached Thumbnails Alignment in the Evil Browser (I.E. I.E.)-ba.jpg  

  • #14
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks. That works.

    These changes didn't affect IE at all though (the footer is still not aligned).

  • #15
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi Sammy,

    Just to clarify the problem is in IE not in any other browser.
    What code should I use in IE?


  •  
    Page 1 of 2 12 LastLast

    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
    •