/    Sign up×
Community /Pin to ProfileBookmark

why is list not the same in IE and mozilla?

Copy linkTweet thisAlerts:
Apr 17.2007

I have the following testing code for list:

[code=php]

<head>
<title></title>

<style type=”text/css”>

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
padding-left:5px;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;

}
a:link:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #e27901;

}

ul { list-style-type:none;margin:15px;}
li {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
background: transparent url(bullet1.gif) no-repeat 0px 1px;
padding-right:10px;
padding-bottom:2px;
padding-left:3px;
margin-top:7px;
line-height:10px;
}
–>

</style>
</head>

<body>
<table cellpadding=”2″ cellspacing=”2″ border=1>
<tr><td>&nbsp;</td><td><b>Sample List</td></b></tr>
<tr><td><li><a href=””>bla, bla, bla, bla, bla, bla, bla</a></li></td><td valign=”bottom”><a href=””>bla, bla, bla, bla, bla, bla, bla
</a></td></tr>
<tr><td><li><a href=””>bla, bla, bla, bla, bla, bla, bla</a></li></td><td valign=”bottom”><a href=””>bla, bla, bla, bla, bla, bla, bla
</a></td></tr>
<tr><td><li><a href=””>bla, bla, bla, bla, bla, bla, bla</a></li></td><td valign=”bottom”><a href=””>bla, bla, bla, bla, bla, bla, bla

</a></td></tr>
</table>

</body>

</html>

[/code]

  • 1. there should be the same in IE and mozilla space between list text like ,,bla, bla, bla” and bullet image.

  • 2. there is bullet.gif and also bullet circle. How to remove bullet circle that there will be only image bullet.gif?
    Need help.thank you.

    • to post a comment
    CSS

    11 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @bathurst_guyApr 17.2007 — 
  • 1. you'll have to play around with the padding

  • 2. add list-style-type: none;
    • Copy linkTweet thisAlerts:
    @toplisekauthorApr 17.2007 — Hi,

    number 2 is solved. thank you

    number 1 is problem that there is different result in IE and Mozilla.

    Is there any solution as padding-left will not solve different result.

    I enclose design in IE and mozilla.

    [upl-file uuid=54d4e4fc-94da-43cc-aeb6-d5e589b2d093 size=3kB]bulletList_IE1.gif[/upl-file]

    [upl-file uuid=8a0bb59e-03f7-48fd-b614-976879dd95c0 size=3kB]bulletList_Mozilla1.gif[/upl-file]
    Copy linkTweet thisAlerts:
    @WebJoelApr 17.2007 — Hi,

    number 2 is solved. thank you

    number 1 is problem that there is different result in IE and Mozilla.

    Is there any solution as padding-left will not solve different result.

    I enclose design in IE and mozilla.[/QUOTE]

    I still can't quite understand what you are after here... -do you want space between the bullet image and the text? Have you tried "[B]list-style-position: outside;[/B]" or "[B]list-style-position: inside;[/B]" on the list-item?

    If this doesn't work, try adding a margin-left; to the anchor in the list-item... that should shove the anchor-text 'to the right', creating virtual 'space' between the visible bullet and the actual text..

    Does the <li> have a defined width?
    Copy linkTweet thisAlerts:
    @toplisekauthorApr 17.2007 — Hi,

    sorry not to be very clear.

    I'm new to this problem.

    So, I would like to have the same space between bullet.gif and text.

    Have not found solution as you quoted. Maybe I'm wrong.

    Regards
    Copy linkTweet thisAlerts:
    @toicontienApr 17.2007 — Going on the code you posted:

  • * The Table cell for the "Sample List" text is improperly closed. The </b> tag should come before the </td> tag. The order in which you open and close tags matters.


  • * You have LI tags, but that are not contained in UL or OL tags. They need to be in a UL or OL tag. Or remove them in this case.


  • * In your a:link style declaration, you add a 5px left padding to it. If you click the link (and make it a visited link, hover over it, or tab to it, that 5px of padding will disappear. Do you want this 5px of left padding on all links all the time?
    • Copy linkTweet thisAlerts:
    @drhowarddrfineApr 18.2007 — IE uses margin the list items while FF and the rest of the world, I think, uses padding. Or is it vice-versa? Running out the door. Sorry.
    Copy linkTweet thisAlerts:
    @toplisekauthorApr 19.2007 — Going on the code you posted:

  • 1. * The Table cell for the "Sample List" text is improperly closed. The </b> tag should come before the </td> tag. The order in which you open and close tags matters.

    DONE

  • 2. * You have LI tags, but that are not contained in UL or OL tags. They need to be in a UL or OL tag. Or remove them in this case.

    DONE

  • 3. * In your a:link style declaration, you add a 5px left padding to it. If you click the link (and make it a visited link, hover over it, or tab to it, that 5px of padding will disappear. Do you want this 5px of left padding on all links all the time?

    DONE

    • [/QUOTE]

    I enclose code which is changed as you suggested.

    Please see whole code and kindly ask you to test how to fix that there will be the same result.

    [code=php]
    <head>
    <title></title>

    <style type="text/css">

    a:link {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    }
    a:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;

    }
    a:link:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #e27901;


    }


    ul { list-style-type:none;margin:15px;}
    li {list-style-type:none;
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
    background: transparent url(bullet1.gif) no-repeat 0px 1px;
    padding-right:10px;
    padding-bottom:2px;
    padding-left:3px;
    margin-top:7px;
    line-height:10px;
    }
    -->

    </style>
    </head>

    <body>
    <table cellpadding="2" cellspacing="2" border=1>
    <tr><td>&nbsp;</td><td><b>Sample List</b></td></tr>
    <ul>
    <tr><td><li><a href="">bla, bla, bla, bla, bla, bla, bla</a></li></td><td valign="bottom"><a href="">bla, bla, bla, bla, bla, bla, bla
    </a></td></tr>
    <tr><td><li><a href="">bla, bla, bla, bla, bla, bla, bla</a></li></td><td valign="bottom"><a href="">bla, bla, bla, bla, bla, bla, bla
    </a></td></tr>
    <tr><td><li><a href="">bla, bla, bla, bla, bla, bla, bla</a></li></td><td valign="bottom"><a href="">bla, bla, bla, bla, bla, bla, bla
    </ul>

    </a></td></tr>
    </table>

    </body>

    </html>
    [/code]

    [upl-file uuid=49bdd60e-cd13-462c-850f-450073a55f18 size=29kB]Listbox.jpg[/upl-file]
    Copy linkTweet thisAlerts:
    @toicontienApr 19.2007 — The only thing you are missing is removing those wayward LI tags from inside the TABLE. LI tags can only be used thusly:
    [code=html]<ol>
    <li><!-- block, table and inline elements --></li>
    </ol>

    <ul>
    <li><!-- block, table and inline elements --></li>
    </ul>[/code]
    Since you are putting that text in a TABLE, just remove the LI tags inside the TD tags.
    Copy linkTweet thisAlerts:
    @toplisekauthorApr 19.2007 — Hi, I have put and removed table code with new one:
    [code=php]

    <ul>
    <li><a href="">bla, bla, bla, bla, bla, bla, bla</a></li><a href="">bla, bla, bla, bla, bla, bla, bla

    <li><a href="">bla, bla, bla, bla, bla, bla, bla</a></li><a href="">bla, bla, bla, bla, bla, bla, bla
    </a>
    <li><a href="">bla, bla, bla, bla, bla, bla, bla</a></li><a href="">bla, bla, bla, bla, bla, bla, bla
    </a> </ul>
    [/code]

    You are correct, now is almost the same result but problem is

    1. how to fix margin

    ul { list-style-type:none;margin:15px;}


    It is different result in IE and Mozilla.

    2. I need text in the same line but in IE is OK but in Mozilla gives second row.

    Is possible to do with table also that I will control after tag LI like:

    <a href="">bla, bla, bla, bla, bla, bla, bla

    </a>
    Copy linkTweet thisAlerts:
    @toicontienApr 20.2007 — 
  • 1. ul { list-style-type:none; margin:15px; [B]padding: 0;[/B]}


    • Internet Explorer uses margins for the left gap in UL and OL lists. All other browsers use padding. Setting the padding to 0 should get you what you want.

  • 2. Changing the padding to zero might fix this.


    • Is possible to do with table also that I will control after tag LI like:

    <a href="">bla, bla, bla, bla, bla, bla, bla

    </a>[/QUOTE]
    I'm not quite following what you mean. You can format your code for lists any way you like, except you need a certain markup structure:
    [code=html]<ol>
    <li>text goes here</li>
    </ol>

    <ol>
    <li>
    text goes here
    </li>
    </ol>[/code]
    Both code snippets above work the same on all browsers.
    Copy linkTweet thisAlerts:
    @sitehatcheryApr 20.2007 — Because of the differences with IE and FF, I often will manually set both margin and padding on ul tags.
    ×

    Success!

    Help @toplisek spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...