#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    1
    Rep Power
    0

    Thumbs down Part of CSS not working in IE only.


    Hi All,

    I've recently set up my first website for my company and I've built it by reading tutorials mainly.

    for some reason my site looks how I want it to in firefox and chrome, but when viewed in internet explorer instead of the content being at the top of the page next to the sidebar, its drops below the sidebar.. in addition the header is kinda cut off.. its as if some parts of my css is being ignored..

    Can anyone help, I've read around and tried some things but it doesn't seem to be helping.

    the web address is poseidoncm.co.uk

    thanks in advance for any help.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Location
    On planet earth
    Posts
    101
    Rep Power
    10
    Its probably because you have stated a document type i.e. strict or transitional

    Comments on this post

    • f_nietzsche agrees
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Location
    On planet earth
    Posts
    101
    Rep Power
    10
    And there is no wrapping <html> tag at the top which probably is the problem

    It will be identified by a whole host of browsers, but come to IE which is a little bit more fussy than others and problems will arise
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Seattle, WA, USA
    Posts
    6
    Rep Power
    0
    Which version of IE are you using? It works fine in IE10.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Seattle, WA, USA
    Posts
    6
    Rep Power
    0
    I don't have earlier versions of IE around to test, but the only way I can reproduce what you are seeing is setting IE10's rendering mode back to IE5's quirks mode.

    The reason it is broken is because it is using the old IE5 quirks mode style rendering, where the box model used is the IE box model rather than the W3C model. This is more or less the same as what happens when you use box-sizing: border-box; in that the padding is included in the width, rather than added to the width. As you set explicit widths in a number of places and set padding, the elements are not as wide in old IE and run out of space. This cuts off the heading as it is 80px shorter (40px padding top and bottom) and pushes the main content down as page element is not wide enough.

    You can solve this by using the IE box model hack, or forcing IE to use a more recent browser mode if you have it using IE5 quirks mode for some reason.

    You can find info on the IE box model hack at http://tantek.com/CSS/Examples/boxmodelhack.html

IMN logo majestic logo threadwatch logo seochat tools logo