December 12th, 2012, 06:37 AM
Part of CSS not working in IE only.
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.
December 12th, 2012, 08:43 AM
Its probably because you have stated a document type i.e. strict or transitional
Comments on this post
December 12th, 2012, 09:27 AM
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
December 20th, 2012, 07:24 PM
Which version of IE are you using? It works fine in IE10.
December 20th, 2012, 07:51 PM
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