Support » Themes and Templates » Not displaying correctly on I.E

  • Hello,

    Im not really sure if this is an issue with WP or my code, but my site renders correctly on firefox and chrome but not on IE8, 7, 6.

    Maybe someone with a little more knowledge knows what I did wrong?

    I have a feeling it may be my css, but I am not certain.

    Here it is:

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator t-p


    look at these markup error and see if sorting out one or some may help solve the problem.

    Also try validating your theme’s css

    I appreciate the help and will thoroughly check to see if the error lies here. Thank you once again.

    Well, I have just successfully validated my site and this has not fixed the issue. Any one else that may have ideas?


    Moderator Mark Ratledge


    Forum Moderator

    You still have errors, esp. “Byte-Order Mark found in UTF-8 File.” Be sure your files are saved as Unicode no-BOM. And get rid of the extra xmlns name spaces.

    Unfortunately this did not solve the problem. It seems like it is a css problem though. I really have no idea why it is loading so awfully.


    Moderator Mark Ratledge


    Forum Moderator

    [Invalid] Markup Validation of – W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.

    I have made all modifications to make my site validate, yet, the styling is still completely off, it only works on IE9.

    Any other IE browser displays incorrectly. Would anyone have a clue where the problem lies?

    At the moment, Im not too concerned with border styles or shadows, I just want to get the page alignment for divs working.

    After that, I know there are some CSS properties that I am using that are not IE compliant, which dont really bother me that much

    At a quick look it could be the misssing left and right margins for #primary

    Not sure about your theme but if we look at twenty ten #main, #wrapper and #container, two are set in the first instance to margin: 0 auto;

    /* The main theme structure */
    #access .menu-header,,
    #wrapper {
    	margin: 0 auto;
    	width: 940px;

    Then the margin-top is reset after

    #wrapper {
    	background: #fff;
    	margin-top: 20px;
    	padding: 0 20px;

    Then the #container later has margins to shift the #content area left leaving space for the sidebar #primary

    #container {
    	float: left;
    	margin: 0 -240px 0 0;
    	width: 100%;
    #content {
    	margin: 0 280px 0 20px;

    Without getting the structure and margins right, you will not get validation errors just odd floats in the layout.

    This is the construction of twenty ten if it helps.

    <div id="wrapper">
    	<div id="header">
    		Header Content
    	<div id="main">
    		<div id="container">
    			<div id="content">
    				Loop Page or Post
    		</div><!-- container -->
    		<div id="primary">
    			Sidebar Content
    		</div><!-- primary -->
    	</div><!-- main -->
    	<div id="footer">
    		Footer Content
    	</div><!-- footer -->
    </div><!-- wrapper -->



    I appreciate the help but that did not solve the issue. It seems to definitely be an issue with css margins or div width, but Ive gone over and modified the code over 100 times and I dont see it. Theres definitely something I am overlooking.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Not displaying correctly on I.E’ is closed to new replies.