40 users online (0 members and 40 guests)  


  Results 1 to 5 of 5

Related

  1. How do I align Text in the same line?    Forum: HTML Forum
    Replies: 10
  2. IE 6 text-align center problem    Forum: HTML Forum
    Replies: 5
  3. Align text with an image link?    Forum: HTML Forum
    Replies: 2
  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

    text-align center problem - only in ie6

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

    Hope someone's able to help, this problem been annoying me for a while now. the problem occurs in the #bottom-nav and #top-nav.

    I have left my html and css code below

    thanks.

    Html 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">About Us</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
    --------------------------------------------------------------------------
    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;
    }
    -----------------------------------------
    Last edited by Bigmous; 01-15-2009 at 07:08 AM.

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: text-align center problem - only in ie6

    You need to set a width for the div, and then add the following:

    Code:
    margin: 0 auto 0 auto;

  3. #3
    Bigmous's Avatar
    Junior Member

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

    Re: text-align center problem - only in ie6

    I've tried that before, still didn't work. I know you shouldn't but the only thing i can think of that may work, is to surround the ul tags with a p tag.

  4. #4
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: text-align center problem - only in ie6

    Sorry about the delay getting back to you. Been a busy weekend.

    If that will work, use it.

  5. #5
    Bigmous's Avatar
    Junior Member

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

    Re: text-align center problem - only in ie6

    its ok tell me about it, been very busy myself. yeah it worked perfectly. sometimes when you work on websites and programming for a while, you just need to look away and take a break.

    anyways a few more tweaks and inserting some simple info and my site will be up and running.

    thanks, take care



Tags for this Thread