Divs centreing in Firefox/Chrome but not IE

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Chris Cordner
    New Member
    • Mar 2011
    • 1

    Divs centreing in Firefox/Chrome but not IE

    Good Evening

    I am building a website using DIVs and CSS.

    I have everything in a container DIV, which I want to centre on the page. The CSS is below:

    Code:
    #container{ 
    	width: 100%;
    	max-width: 1000px;
    	width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
    	float: center;
    	color: #fff;	
        margin-left: auto;
    	margin-right: auto;
    	padding: 0px;
    	border-width: 0px
            }
    Yet for some reason, in IE it won't center. Any idea why?

    On a similar vein, within the container I have a navigation bar. For some reason, it just won't center. I thought it was because it was a <ul> and then indented, but I have tried setting margin and padding to zero.

    Any ideas?

    Code below:

    Code:
    #navbar ul {
    	margin-left: 0px;
    	margin-right: 0px;
    	padding-left: 0px;
    	padding-right: 0px;
    	height: 27px;
        list-style-type: none;
    	text-align: center;
    	font-weight: bold;
    	font-size: 13px;
    	border-width: 0px
            } 
     
    #navbar ul li {  
    	display: inline;
    	height: 25px;
    	width: 100px;
    	text-align: center;
    	border-width: 0px
            } 
     
    #navbar ul li a { 
    	float: left;
    	width: 100px;
    	margin-left: 10px;
    	margin-right: 10px;
    	text-decoration: none;
        display: inline;   
        line-height: 25px;
        color: #fff; 
    	border-width: 0px;
    	background: url("buttons.jpg") no-repeat 0 0
            }
    Thanks
    Chris
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    In the first, there is no such thing as 'float:center'. Also, Microsoft dropped support for 'expression' in IE8.

    Comment

    Working...