CSS Styling for IE and Chrome

[alyssa.wilkins.77]

I am trying to style my ordered lists and unordered lists to appear the same in Firefox. I have all my text centered. In firefox, the bullets and numbers appear right next to the items. I have done some css styling but it requires for teh text to be aligned left to make sure every lines up fine with the bullets and numbers. But it looks awkwards on IE and Chrome. What can I do to make it not look so awkward?

This is my css 

/*This is my container that I can use to contain everything I want for the middle of of my webpage*/
/*I set how far the container will fill the webpage, the color and that I want the text centered*/
#container {
        margin: 10px auto;
        width: 95%;
        background:#6495ED;
        text-align:center;
    }


/* I create the header of my webpage. This is where the name of the store is put and where the image logo can go*/
#header {
        padding: 3px;
    }


/* I create a container to be the navigation bar under my header. I do some padding and give it a color*/
#topnav-container {
        padding: 4px 0;
        background: #DCDCDC;
    }
/* I am saying how much I want this nagivation bar to be padded on my webpage*/  
#topnav {
    margin:0;
    padding: 0;
    }
/* This allows me to make my links in the navigation bar to be horizontanl*/     
#topnav li { display:inline;
         list-style:none;

       }
/* This gets rid of the underline for links and I can space them apart*/
#topnav li a {

        text-decoration: none;
        padding: 0px 5px;
        color: #333;
    }


/* Here I am specifying what colors I want the links not touched, visited, or hovered over*/         
#topnav a:link{color:#0000CD;}
#topnav a:visited{color:#4B0082;}
#topnav a:hover{color:#FF0000;}


/*Changing the color of the border of my table*/   
#table{color:#000000;}


h1.underline{text-decoration: underline;}


/* Here is where I am setting the background of the content of the webpage. Also centering all text,doing
padding and using font family*/  
#content
     {
        background:#87CEEB;
        text-align: center;
        margin-left: auto; 
        margin-right:auto;
        padding: 1em;
        font-family:  "Times New Roman",sans-serif ,arial, helvetica;
        font-size: 1.0em;
        line-height: 1.6em;

    }

/* Creating the footer of my website. This is where the copyright of my website goes.*/
#footer {
        clear:both;
        text-align: center;
        margin-left: auto; 
        margin-right:auto;
        padding: 0 3px;
        background:#6495ED;

    }


/* Here I am styling my breabcrumbs to how I want them to appear on all webpages.*/
/*The links for my breadcrumbs when not touched, visited, and hovered over are styled to be certain colors. */
/*I use the coding content:"/" to have the symbol appear between all breadcrumbs when needed*/
#crumbs{
        height:2.3em;
    list-style:none;
    }
#crumbs li{
        float:left;
        line-height:2.3em;
        color:#777;
    }
#crumbs li a:after{
    padding:0 8px 0 8px;
    color:#000;
    content:"/";
}
#crumbs li a{
        display:block;
        padding:0 0 0 0;
        }
#crumbs li a:link{
          text-decoration:none;
          color:#008000;
             } 
#crumbs li a:visited{
            text-decoration:none;       
            color:#9400D3;
    }
#crumbs li a:hover{
            text-decoration:none;
            color:red;
    }


/* Here is where all classes are located that are used in my website*/

/*Using class so that I can take all other links and style them to all appear the same */
.normal a:link {text-decoration:none;color:#0000CD;}
.normal a:visited {text-decoration:none;color:#4B0082;}
.normal a:hover {text-decoration:none;color:#FF0000;}

/*This class is called to underlined and to change the color of all h1 headings in the container. */
h1.underline{text-decoration: underline;color:blue;}

/* This class is to change the color of all h1 headings in the header. */
h1.header{color:#330099;}

/*Having all h2 headings to be this color on my website. */
h2.color{color:#153E7E;}

/*All h4 headings will be styled to have an underline and overline. */
h4.decoration{text-decoration:underline overline;color:#25587E;}


/* Here is where I am stying diferent paragraphs with different things depending on how I am using the <p> </p> tags. */
/*Any paragraphs that have this class with now be italic. */
p.italic {font-style:italic;}

/* This is used where I have pararaphs that I want to be bolded only. */
p.strong{font-weight: bold;}

/* This is what I have so far to fix the bullets for IE and Chrome.*/   
.Centering{
    width:200px;
    margin:0 auto;
    text-align:left;
}

Here is a page that I working on to get it right for all my other pages.

<!doctype html>
<html>
<body>
    <head>
        <title>Contact Us</title>
    </head>
    <link rel="stylesheet" type="text/css" href="Base.css">

<div id="container">
          <div id="header">
            <img src="RoseLogo.jpg" align="left"> 
            <h1 class="header">Ye Olde Soap</h1>
          </div>
        <div id="topnav-container">
            <ul id="topnav">
            <li> <a href="index.html">Home</a></li>
            <li> <a href="About Us.html">About Us </a></li>
            <li> <a href="Contact Us.html">Contact Us</a></li>
            <li> <a href="Login.html">Login Page</a></li>
            <li><a href="Products/Index.html">Products</a></li>
        <li><a href="Billing.html">Billing</a></li>  
            </ul>
        </div>
         <div id="content">
            <ul id="crumbs">
                <li><a href="index.html">Home</a></li>
            <li class="active">Contact Us</li>
            </ul>
            <h1 class="underline">Contact</h1>
            <img src="http://www.veganbeautyreview.com/wp-content/uploads/2009/10/soap.jpg"/>
             <h2 class="color">The Store Numbers</h2>
    <ul class="Centering">
        <li>Alabama</li>
                <ul>
                    <li>Store Number</li>
                        <ul class="square">
                            <li>[phone]</li>
                        </ul>
                </ul>                
            <li>California</li>
            <ul>
                <li>Store Number</li>
                    <ul>
                        <li>[phone]</li>
                    </ul>
            </ul>

        <li>Michigan</li>
            <ul>
                <li>Store Number</li>
                    <ul>
                        <li>[phone]</li>
                    </ul>
            </ul>
        <li>Pennsylvania</li>
            <ul>
                <li>Store Number</li>
                    <ul>
                        <li>[phone]</li>
                    </ul>
            </ul>    
    </ul>    
    <h2 class="color">How to contact Main Office</h2>
        <ol class="Centering">
            <li>By Phone</li>
                Office:[phone]
            <li>By Email</li>
                <span class="normal">
                    <a href="mailto:[e-mail]">Email Us</a>
                </span>
            <li>By Mail</li>
                414 Fairgrove Ave, Royal Oak MI 48067
        </ol>
    <h2 class="color">Tell Your friends to find us on these Websites</h2>
        <ol class="Centering">
            <li>By Google</li>
                <span class="normal">
                    <a href="http://www.google.com">Google</a>
                </span>
            <li>By Bing</li>
                <span class="normal">
                    <a href="http://www.bing.com">Bing</a>
                </span>
        </ol>


</div>
         <div id="footer">
            <p class="italic"><small>Copyright &copy; 2000 Ye Olde Soap</small></p>
         </div>
       </div>
</body>
</html>

[paulkd]

Hi,

They look very similar to me in all but IE7.

But, may I make some suggestions about the layout?

Remove the "Store Number" line, and if you are not too fussed about the numbers lining up vertically put them to the right of the city e.g. Alabama [phone].

Remove the "By" and just list Phone: (nnn)nnn-nnnn, Email: [e-mail].

Remove the "By search engine" and just link the search engine name in your list e.g. 1. Google, 2 Bing.

[alyssa.wilkins.77]

That is not really styling it how I want because I have othe pages that use lists. I am looking for more of something that uses my base css to get the desired look.