85 users online (0 members and 85 guests)  


  Results 1 to 6 of 6

Related

  1. How do I align Text in the same line?    Forum: HTML Forum
    Replies: 10
  2. Align text with an image link?    Forum: HTML Forum
    Replies: 2
  3. text-align center problem - only in ie6    Forum: CSS Forum
    Replies: 4
  4. Align text to Centered table    Forum: HTML Forum
    Replies: 6
  1. #1
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    IE 6 text-align center problem

    I have an unordered list displaying inline, which for some reason only will center in ie 7 and firefox. won't work in ie6.

    HTML CODE
    ---------------------------------------------------------------------------
    <!-- bottom-nav -->
    <div id="bottom-nav">

    <ul>
    <li><a href="terms_and_conditions.html">Terms &amp; Conditions</a>&nbsp;-&nbsp;</li>
    <li><a href="privacy.html">Privacy</a>&nbsp;-&nbsp;</li>
    <li><a href="legals.html">Legals</a>&nbsp;-&nbsp;</li>
    <li><a href="contact_us.html">Contact Us</a></li>
    </ul>

    <!-- end bottom-nav -->
    </div>

    css
    ---------------------------------------------------------------------------

    #bottom-nav {background-image: url(images/nav.jpg); background-repeat: repeat-y; text-align: center; padding: 0.2em 0em; border-top: 1px solid #000; height:20px;
    }
    #bottom-nav li {display: inline; white-space: nowrap; font-size:0.8em; text-align: center;
    }

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: IE 6 text-align center problem

    Try setting a width for #bottom-nav. That should help quite a bit.

  3. #3
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    Re: IE 6 text-align center problem

    tried that, that was the first thing that came to mind. but unfortunately still hasn't fixed the problem.

    this prob really got me stumped this time!!!!!

  4. #4
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: IE 6 text-align center problem

    ok, then the next thing to try is adding:

    margin: 0 auto 0 auto;

    to #bottom-nav. If that still does not work, I will need you to either post all your code (HTML and CSS) or post a link to the pages.

  5. #5
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    Re: IE 6 text-align center problem

    nope unfortunately didn't work.

    html code
    ---------------------------------------------------------------------------
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en">
    
    <head>
    	
    <title>Welcome to ....</title>
    
    <meta name="author" content="" />
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    
    <script type="text/javascript" src="js/preload.js">
    
    </script>
    
    <style type="text/css" media="screen">@import "a1c.css"; 
    
    </style>
    
    </head>
    
    <body onload="IMA_preloadImages('images/large/qc.jpg','images/large/ffs.jpg','images/large/jca.jpg','images/large/onl.jpg')">
    
    <!-- extra container -->
    <div id="extra-container">
    
    <!-- main container -->
    <div id="main-container">
    
    <!-- header -->
    <div id="header">
    
    <img src="images/logo.jpg" width="762" height="150" alt="" title="" class="logo">
    
    <!-- end header -->
    </div>
    
    <!-- top-nav -->
    <div id="top-nav">
    
    <ul>
    	<li id="current"><a href="#">Websites</a>&nbsp;-&nbsp;</li>
    	<li><a href="logos_graphics.html">Logos/Graphics</a>&nbsp;-&nbsp;</li>
    	<li><a href="domain_names.html">Domain Names</a>&nbsp;-&nbsp;</li>
    	<li><a href="hosting_services.html">Hosting Services</a></li>
    </ul>
    
    <!-- end top-nav -->
    </div>
    
    <!-- left-nav -->
    <div id="left-nav">
    
    <ul>
    
    <li><a href="index.html">Home</a></li>
    
    <li><a href="about_us.html">About Us</a></li>
      
    <li class="sf-vertical"><a href="our_services.html">Our Services</a>
    
    <ul>
    
    <li id="current"><a href="#">Websites</a></li>
    
    <li><a href="logos_graphics.html">Logos/Graphics</a></li>
    
    <li><a href="domain_names.html">Domain Names</a></li>
    
    <li><a href="hosting_services.html">Hosting Services</a></li>
    
    </ul>  
    	</li>
    
    <li><a href="testimonials.html">Testimonials</a></li>
    
    <li><a href="contact_us.html">Contact Us</a></li>
    
    </ul>
    
    <!-- end left-nav -->
    </div>
    
    <!-- main-content -->
    <div id="main-content">
    
    <!-- content -->
    <div id="content">
    
    <h1 class="toph1">Websites</h1>
    
    <!-- context -->
    <div id="context" class="clearfix">
    
    <!-- end context -->
    </div>
    
    <!-- end content -->
    </div>
    
    <!-- bottom-nav -->
    <div id="bottom-nav">
    
    <ul>	
    	<li><a href="terms_and_conditions.html">Terms &amp; Conditions</a>&nbsp;-&nbsp;</li>
    	<li><a href="privacy.html">Privacy</a>&nbsp;-&nbsp;</li>
    	<li><a href="legals.html">Legals</a>&nbsp;-&nbsp;</li>
    	<li><a href="contact_us.html">Contact Us</a></li>
    </ul>
    
    <!-- end bottom-nav -->
    </div>
    
    <!-- end main-content -->
    </div>
    
    <!-- end main-container -->
    </div>
    
    <!-- footer -->
    <div id="footer">
    
    <!-- end footer -->
    </div>
    
    <!-- end extra-container -->
    </div>
    
    </body>
    
    </html>
    -----------------------
    CSS CODE
    --------------------------------------------------------------------------
    Code:
    body 			{background-color: #a2a95c; padding: 0em; margin-bottom: 0em; 
    }
    #extra-container		{width: 766px; padding-top: 0em; margin: auto;
    }
    #main-container 		{margin: 0em; padding: 0em; border: 2px solid  #000000; background: #fff url(images/menu-wall.gif) repeat-y 0% 0%; 
    }
    h1 			{font-family: arial, helvetica, verdana, sans-serif; margin: 0em; padding-top: 0.5em; font-size:1.3em; text-align: center;  
    }
    h2 			{font-family: arial, helvetica, verdana, sans-serif; font-size:1em; text-align: center; padding: 0em; margin: 0em; 
    }
    .h2-2			{background-color: #a7aa6d; color: #66581f; border: 1px solid #534611; margin-bottom: 1em;
    }
    h3 			{font-family: georgia, "times new roman", times, serif; margin: 0em; padding: 0em 0em 0em 0em; font-size:0.9em; text-align: left; padding: 0em; margin-left: 1em;
    }
    .toph1			{padding-top: 0.5em;
    }
    .clear			{clear:both;
    }
    #header 			{margin: 0em; padding: 0em; border-bottom: 1px solid  #000000; width: 762px; height: 150px;  
    }
    .logo			{margin: 0em; border-style: none; margin-bottom: -5px;  
    }
    .main-imgs		{border-style: none; margin-bottom: -5px; zpadding-bottom: 1em;
    }
    form p			{margin: 0em;
    }
    .search			{border-bottom:1px solid #000; padding: 0px 4px 10px 4px; margin: 0px; 
    } 
    .input			{width: 150px; margin-bottom: 5px;
    }
    .choice		{border-style: none; float: left; margin-left: 35px;
    }
    label	 		{font-family: verdana, arial, helvetica, sans-serif; font-size: 0.9em;
    }
    .submit			{margin-top: 5px;
    }
    .a1c			{margin-left: -36px;
    }
    .web			{margin-left: -45px;
    }
    /* for Internet Explorer */
    /*\*/
    * html #content {
    height: 26em;
    }
    /**/
    
    #main-content 		{margin-left: 173.5px; border-left: 1px solid  #000000;
    }
    #content 			{min-height: 26em;
    }
    #context 			{margin: 0.5em 0em 0em 0em; padding: 0em;
    }
    #context a			{color: #534611; text-decoration: underline; font-weight: bold;
    }
    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    .clearfix {display: inline;}
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    .clearfix {display: inline;}
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    
    #lsmall			{zheight: 300px; overflow: auto;
    }
    .imgsmall			{width: 550px; zmax-height: 300px; 
    }
    #large			{width: 320px; height: 400px;
    }
    #top			{width: 550px; height: 285px; margin: 1.25em 17.5px; padding: 0em;
    }
    #homew			{float: left; width: 265px; margin-right: 0.75em; padding: 0em;
    }
    #homelg			{float: right; width: 265px; margin: 0em; padding: 0em;
    }
    #bottom			{clear: both; width: 550px; height: 285px; margin: 0em 17.5px 1.25em 17.5px; padding: 0em;
    }
    #homehs			{float: left; width: 265px; margin-right: 0.75em; padding: 0em;
    }
    #homed			{float: right; width: 265px; margin: 0em; padding: 0em;
    }
    #top-nav 		{background-image: url(images/nav.jpg); background-repeat: repeat-y; text-align: center; margin-left: 173.5px; padding: 0.2em 0em; border-bottom: 1px solid  #000000; border-left: 1px solid #000000; height: 20px;
    }
    #top-nav li 		{display: inline; white-space: nowrap; font-size:0.8em;
    }
    #bottom-nav		{background-image: url(images/nav.jpg); background-repeat: repeat-y; text-align: center; padding: 0.2em 0em; border-top: 1px solid #000; height:20px; margin: 0em text-align: center;
    }
    #bottom-nav li 		{display: inline; white-space: nowrap; font-size:0.8em; text-align: center;
    }
    a	{text-decoration: none; color: #7f3f10;
    }
    a:visited	{color: #4c4727;
    }
    a:hover	{text-decoration: underline; color: #b02707;
    }
    ul 			{white-space: nowrap; margin: 0em; padding: 0em; 
    }
    ol 			{
    }
    #current a		{font-weight: bold; text-decoration: none; cursor: default; color: #000000;
    }
    #wcurrent img		{border-style: none;
    }
    
    #normal	a		{font-weight: normal; cursor: pointer; color: #7f3f10;
    }
    #normal	a:visited	{color: #4c4727;
    }
    #normal	a:hover	{text-decoration: underline; color: #b02707;
    }
    #left-nav			{width: 175px; float: left; margin: 0em; padding: 0em; text-align: center;
    }
    #left-nav ul		{margin: 0em; padding: 0em; width: 175px;
    }
    #left-nav li		{padding-top: 0.2em; margin-top: 0.2em; border-bottom: 1px solid #b05c06; height: 29px; list-style: none;
    }
    #left-nav ul li a		{padding: 2px 25px 4px 25px; text-align: center; display: block;
    }
    #left-nav ul li 		{position: relative;
    }
    #left-nav li ul		{position: absolute; left: 174.5px; top: -4px; display: none; border-top: 1px solid  #000000; width: 175px; background: #fff url(images/menu-wall.gif) repeat-y 0% 0%; 
    }
    
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
    
    #left-nav li:hover ul, #left-nav li.over ul {display: block;
    }
    #context p		{margin: 1em 0em 1em 0em;
    }
    p			{font-family: verdana, helvetica, arial, sans-serif; margin: 0em 1em 1em 1em; padding: -1em; font-size:0.7em; line-height: 1.8em;
    }
    .mainp			{padding: 1em;
    }
    .ptop			{padding-top: 1em;
    }
    .pcenter			{text-align: center; line-height: 0.9em;
    }
    span			{
    }
    #footer 			{clear: both; text-align: right; margin: 0em; padding: 0em; font-size:0.8em; 
    }
    #footer a			{color: #534611;
    }
    #footer a:visited		{color : #ed4c06;
    }
    #footer a:hover		{color: #bbbbbb; text-decoration: underline; 
    }
    -----------------------------------------

    Hope you are able to help, this problem been annoying me for a while now. same prob for bottom and top nav.
    Last edited by HTML; 03-21-2009 at 06:32 PM.

  6. #6
    srydell's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2009
    Posts
    1

    Re: IE 6 text-align center problem

    In your CSS here:
    #bottom-nav {background-image: url(images/nav.jpg); background-repeat: repeat-y; text-align: center; padding: 0.2em 0em; border-top: 1px solid #000; height:20px; margin: 0em text-align: center;
    }

    You are missing a ; after margin:0em
    it should be ....margin: 0em; text-align:center;}

    That looks like the problem to me. IE 7 and Firefox are a little bit more forgiving about these things than IE6.

    I hope this helps.



Tags for this Thread