Trying to 'undo' several CSS options with an inline statement

Question

I'm trying to 'undo' the style in an unnumbered list by putting an inline style statement in the 'li' tags. I have everything looking the way I want except that I'm missing the bullet.

Below is the original CSS and my inline style options to overwrite them:

#account_header li {
    border-bottom: 1px solid #888888;
    border-top: 1px solid #888888;
    display: inline;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0 10px 0 0;
    color: #AA2222;
    font-family: "arial","helvetica";
    font-size: 16px;
    font-weight: bolder;
}

Here's what I have inside my 'li' tag:

<li style="border: none;display: block;margin: 0;overflow: hidden;padding: 0;list-style:disc outside none;">

Thanks in advance...I've wasted plenty of time on this already!

Yes (sorry I wasn't too clear)...how do I get my bullets back? I thought the "list-style:disc outside none;" would have done it. The bullets don't show up at all. — ThorInSuburbia, May 09 '12 at 16:15
Oh, hmm, it would seem that your zero margin and padding are causing your bullet to be hidden because it's `outside`. — BoltClock, May 09 '12 at 16:26
BoltClock is right. You should set the margins back to what they would have been without the original stylesheet! To see what the defaults are, create a new HTML file without any styles, and inspect the ul and li elements. — Mr Lister, May 09 '12 at 16:36
It turned out to be the overflow-* options. I'll explain as soon as it will let me. — ThorInSuburbia, May 09 '12 at 18:30

score 1 · Answer 1 · answered May 09 '12 at 16:40

1

Remove display: block; and overflow: hidden; from your inline CSS and it will work.

answered May 09 '12 at 16:40

Libin

2,442
3
20
31

1

The default styles for `
` elements are `display: list-item;` and `overflow: visible;`.

BoltClock

May 09 '12 at 17:03

score 0 · Accepted Answer · answered May 10 '12 at 14:17

I don't think anyone's going to believe this one, but it turned out to be the overflow-x and overflow-y options. They were set to 'hidden,' and I had to look in the "computed" tab in Firebug to see it (I'm kind of a CSS newbie, so I've never heard of these before). Basically, I took Mr Lister's suggestion to do an extremely simple list, copied the computed styles into text files and used UltraStudio's compare feature to see the difference.

I wish there was an easier way to set things back to default!

Here's what I have at the moment:

<li style="border: none;display: list-item;margin: 0;padding: 0;visibility: visible;overflow-y: visible;overflow-x: visible;list-style:disc outside none;" >

Thanks for your help, everyone!

Congrats on the fix! When you are able, please make sure to mark your answer as 'accepted' so that others will be able to learn from your solution. Cheers~ — Andrew Kozak, May 10 '12 at 14:31

Trying to 'undo' several CSS options with an inline statement

2 Answers2