Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    Ok I'm using a list for a basic text menu in a practice site and I've got it to display inline like I want and the fonts and everything are cool but...

    If I set no left margin for <ul> it becomes indented by about 30px. Ok, fine so I set a left margin of 5px and this sorts it in IE but not in Firefox!!! it just indents it by another 5px!!!

    WTF!?!

    I'm used to seeing this solved by clear definition of margins but it isn't in this case...

    Code:
    #container {
        border-color: #808080;
        border-left-style: solid;
        border-right-style: solid;
        border-width: 1px;
        height: 1000px;
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        position: relative;
        width: 800px;
    }
    
    #mainnav {
        background-image: url(../images/menubg.jpg);
        background-repeat: no-repeat;
        height: 40px;
        left: 0px;
        margin: 0px;
        padding: 0px;
        position: absolute;
        top: 0px;
        width: 800px;
    }
    
    #menu {
        left: 5px;
        padding: 0px;
        position: absolute;
        text-indent: 0px;
        top: 15px;
    }
    
    #menu ul {
        display: inline;
        margin-top: 15px;
        text-indent: 0px;
    }
    
    #menu li {
        background-position: center;
        display: inline;
        font-family: Verdana, "Trebuchet MS", Arial;
        font-size: small;
        margin-right: 10px;
        margin-top: 15px;
        text-decoration: none;
        text-indent: 0px;
    }
    
    #menu li a {
        background-position: center;
        color: #808080;
        display: inline;
        margin-right: 10px;
        margin-top: 15px;
        text-decoration: none;
        text-indent: 0px;
    }
    
    #menu li a:hover {
        background-position: center;
        color: #000000;
        display: inline;
        margin-right: 10px;
        margin-top: 15px;
        text-decoration: none;
        text-indent: 0px;
    }
    
    #header {
        background-image: url(../images/yellowflower.jpg);
        background-repeat: no-repeat;
        height: 194px;
        left: 0px;
        position: absolute;
        top: 40px;
        width: 800px;
    }
    
    body {
        margin: 0px;
    }

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="styles/minute.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div id="container">
            <div id="mainnav">
                <div id="menu">
                    <ul>
                        <li><a href="index.htm"> Home</a></li>
                        <li><a href="about.htm"> About Us</a></li>
                        <li><a href="locations.htm"> Locations</a></li>
                        <li><a href="contact.htm"> Contact</a></li>
                        <li><a href="info.htm"> Info</a></li>
                    </ul>
                </div>
            </div>
            <div id="header">
            </div>
            <div id="content1">
            </div>
            <div id="content2">
            </div>
        </div>
    </body>
    </html>
    Anyone know of any work-around for this problem...?
    No ma'am, we in IT don't have a sense of humor we're aware of.

  2.  

  3. #2
    Junior Member
    Join Date
    Jun 2005
    Posts
    22
    Member #
    10305
    Sometimes things show different in IE and FF, you should use this hack to fix theese problems

    (example)

    margin-left: 10px!important;
    margin-left: 5px;

    What happens here is that Firefox uses the first and IE will ignore it and use the code below.

  4. #3
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    Sorry, no dice!

    I think the problem lies in the div containing the list. (#menu) I can't figure out what attribute I need to change though....

    It's like when I tell <ul> to have a left margin of 0 IE sorts it out and put's it in the correct place but FF totally ignores me. BUT... when I give <ul> a left margin of 5 FF DOES move the list 5 px to the right, so it would apper it's not positioning the div#menu in the right place...

    Any Ideas?
    No ma'am, we in IT don't have a sense of humor we're aware of.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:50 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com