/    Sign up×
Community /Pin to ProfileBookmark

Bullet point positioning and visibility

Copy linkTweet thisAlerts:
Mar 17.2008

Hi there,

I’m using the following kinds of code in a CSS based page (within a div that contains paragraphs of text).

<ol class=”text-main”>
<li>Point 1</li>
<li>Point 2</li>
</ol>

And…

<ul class=”text-main”>
<li>Bullet 1</li>
<li>Bullet 2</li>
</ul>

The only CSS used on the above ordered and unordered lists is to control the look of the text (class=”text-main”) and not the bullet or number points.

In IE, the bullets and numbers are not visible. Also, the text is not in line with the paragraphs above or below the ordered and unordered lists – it has been pulled more to the left as if its not being controlled by the div that its supposed to be in.

In Firefox, I get the same problem except the bullets and numbers are visible.

Can anyone point me in the right direction please?

Thanks.

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@dtm32236Mar 17.2008 — I've seen some of the same problems with lists. With the indent problem, I find that adding margin-left:20px; will usually fix it.

If you don't like that solution, you can try list-style-position:inside;.

I don't know why the numbers or bullets aren't showing in IE... paste your CSS...
Copy linkTweet thisAlerts:
@riz-manauthorMar 17.2008 — There is no CSS with regard to the ordered and unordered lists.

The CSS coding with regard to the div that its in is as follows:-

.level-content-holder { left: 0px; top: 0px; width: 480px; margin-left: 21px; background-color: #FFFFFF; }

.level-content-holder p { margin:0px 0; }

.level-content-holder-1 { width: 480px; }

.level-content-holder-2 { width: 460px; margin-left: 10px; margin-right: 10px; }

.level-content-holder-2 p { margin: 10px; }

The ordered and unodered lists are within the div ".level-content-holder-2".

Is there any reason why IE doesn't show the actual bullet/number?
Copy linkTweet thisAlerts:
@dtm32236Mar 17.2008 — so, try this:

<ul style="margin-left:20px; list-style-type:disc;">...</ul>

<ol style="margin-left:20px; list-style-type:upper-roman;">...</ol>
Copy linkTweet thisAlerts:
@riz-manauthorMar 17.2008 — You beat me to it...but it's okay! I got it working. Thanks for your margin suggestion. By setting a margin-left, the list was moved to the right and the bullets became visible in IE.

It seems that ordered and unordered lists work a little differently if set within, say div B where the controlloing CSS is assigned to div A which contains div B (if that makes sense ? )

Thanks for your help dtm32236.
Copy linkTweet thisAlerts:
@dtm32236Mar 17.2008 — It seems that ordered and unordered lists work a little differently if set within, say div B where the controlloing CSS is assigned to div A which contains div B (if that makes sense ? )[/QUOTE]

hahahah. that kind of makes sense...

you can do something like:

<i>
</i>.outter inner ul {...}

...

&lt;div class="outer"&gt;
...
&lt;div class="inner"&gt;
&lt;ul&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;


if that makes sense.
Copy linkTweet thisAlerts:
@KDLAMar 17.2008 — If you've used a wildcard selector, such as * {margin: 0; padding: 0;} your lists will always have problems displaying because the margin and padding needed to display the "icon" are gone. Fx will attempt the display the "icon," however IE will omit it.

KDLA
Copy linkTweet thisAlerts:
@dtm32236Mar 17.2008 — Oh - gotcha. That's exactly why...
×

Success!

Help @riz-man 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.16,
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,
)...