/    Sign up×
Community /Pin to ProfileBookmark

Display bullets in IE

Copy linkTweet thisAlerts:
Mar 04.2008

The following code displays a bulleted list in FireFox, but IE doesn’t. Is possible to get IE to display bullets also?

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Untitled Document</title>
<style type=”text/css”>
<!–
ol {
margin: 17px;
padding: 7px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#nav {
width: 310px;
}
#nav li {
/* list-style: disc;*/
/* float: left;*/
}
#nav a {
/* float: left;*/
width: 102px;
height: 47px;
line-height: 47px;
background-color: #333333;
color: #DDDDDD;
text-transform: uppercase;
text-decoration: none;
font-size: 90%;
font-weight: bold;
text-align: center;

}
–>
</style>
</head>

<body>
<ul id=”nav”>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</body>
</html>[/CODE]

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@HydroMar 04.2008 — In ie you need to add the class tag to the element.

<i>
</i>&lt;ul id="nav" [b]class="nav"[/b]&gt;
&lt;li&gt;Item One&lt;/li&gt;
&lt;li&gt;Item Two&lt;/li&gt;
&lt;li&gt;Item Three&lt;/li&gt;
&lt;li&gt;Item Four&lt;/li&gt;
&lt;li&gt;Item Five&lt;/li&gt;
&lt;/ul&gt;

Copy linkTweet thisAlerts:
@TheBearMayMar 04.2008 — Problem appears to be the :
<i>
</i>#nav {
width: 310px;
}
If you move this to a <div> that contains the <ul> everything appears to work in both FF and IE....
Copy linkTweet thisAlerts:
@HydroMar 04.2008 — Ps, you might want to remove the comment from the css too from the nav li class.

[CODE]
#nav li {
list-style: disc;
float: left;
[/CODE]
Copy linkTweet thisAlerts:
@CentauriMar 04.2008 — By default, bullets are outside the <li> (to the left). In FF, the <li>s are moved to the right to display the bullets by a default left padding on the <ul>, whereas in IE the indent is done with margin on the <ul>, meaning the bullets are still to the left of the <ul> itself. Once you set a width to the <ul>, IE won't display any of the content that falls outside the <ul> - the bullets. To get consistancy with lists, you have to take control of both the margins and padding of the <ul> and adopt a common methiod of left padding to display the bullets :[CODE]#nav {
width: 310px;
[COLOR="Red"]margin: 0;
padding: 0 0 0 1em;[/COLOR]
}[/CODE]
×

Success!

Help @Dysan 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 5.19,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...