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.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    31
    Thanks
    10
    Thanked 2 Times in 2 Posts

    IE completely ignores CSS rules

    Works perfect on Opera, Safari, FF and Chrome but when it comes to IE, CSS doesn't work.

    The website does not align to the center on IE, as well as the button background along with the width and height being completely ignored.

    In IE, everything is currently aligned to the left too (default setting I'm guessing).

    Here's my CSS:

    Code:
    #header {
    	width: 556px;
    	margin-right: auto;
    	margin-left: auto;
    	height: 140px;
    	background-image: url(bg.jpg);
    }
    #footer {
    	bottom: 0px;
    	width: 556px;
    	height: 60px;
    	background-image: url(footer.png);
    	margin: auto;
    }
    
    
    #body {
    	width: 556px;
    	height: 25';
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-image: url(bg2.png);
    	height: 500px;
    	margin: auto;
    	
    }
    .button {
    	width: 400px;
    	background-image: url(button2.png);
    	height: 149px;
    }
    #footerholder {
    	bottom: 0px;
    	position: fixed;
    	text-align: center;
    	width: 100%;
    }
    Thank you.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,259
    Thanks
    10
    Thanked 276 Times in 275 Posts
    Fix this random quote and see if that does it. Otherwise, give us a line to the site please.

    height: 25';

  • Users who have thanked tracknut for this post:

    Flames (06-08-2012)

  • #3
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Actually you should remove the height line ( in bold red ) entirely since you have already designated a height of 500px

    Code:
    #body {
    	width: 556px;
    	height: 25';
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-image: url(bg2.png);
    	height: 500px;
    	margin: auto;
    	
    }

  • Users who have thanked badwolf for this post:

    Flames (06-08-2012)

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    31
    Thanks
    10
    Thanked 2 Times in 2 Posts
    Thanks guys, problem solved for everything except the alignment. Can't believe I didn't see that mistake.

    Anyway, for the alignment, I thought I should have a wrapper and well..problem solved once again. This is what I used for the wrapper:

    Code:
    #wrapper {
    	width: 100%;
    	text-align: center;
    It fixed EVERYTHING.

    Once again thanks for spotting the mistake in the CSS.

    Why must IE be so complicated?

  • #5
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,259
    Thanks
    10
    Thanked 276 Times in 275 Posts
    Quote Originally Posted by Flames View Post

    Why must IE be so complicated?
    IE is very picky about invalid code. The other browsers seem to skip over mistakes a bit easier. The validator can help spot these things for you, if you're not using it.

    Dave

  • #6
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    Quote Originally Posted by Flames View Post
    The website does not align to the center on IE
    Quote Originally Posted by Flames View Post
    Thanks guys, problem solved for everything except the alignment. Can't believe I didn't see that mistake.

    Anyway, for the alignment, I thought I should have a wrapper and well..problem solved once again. This is what I used for the wrapper:

    Code:
    #wrapper {
    	width: 100%;
    	text-align: center;
    It fixed EVERYTHING.

    Once again thanks for spotting the mistake in the CSS.

    Why must IE be so complicated?
    If IE does not align to the center with margin:auto but need a text-align center to a wrapper in order to center properly, it's a sign that it is running in Quirks mode.

    Have you a valid Doctype on the very top of your document ? If not, adding a doctype should solve the problem without any need of the text-align:center wrapper.

    If you allready have a doctype, make sur you don't have any comment or space before the doctype or that you don't use the BOM in your document encoding.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •