/    Sign up×
Community /Pin to ProfileBookmark

List Style Image Problem

Hi there,

I’m using CSS1 for IE7 and am having trouble using a custom image for my UL bullet.

(My text-editor is NoteTab Light, version 5.7.)

Problem is, when I view my page in IE, my image is getting nearly completely cut off from the left side, and I’m going crazy trying to fix this.

Here’s my CSS1 code:

ul.services{
list-style-image: url(../Images/ChkMark.png);
z-index: 10;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: absolute;
top: 330px;
left: 380px;
width: 275px;
font-size: large;
text-indent: 15px;
}

ul.services li{
margin: 5px 0px 0px 5px;
padding: 10px 0px 0px 10px;
width: 275px;
height: 46px;
border: 0;
}

ul.services a{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: Verdana, Arial, sans serif;
color: black;
}

And, here’s my corresponding HTML code:

<ul class=”services”>
<li>Marketing;</li>
<li>Brochures;</li>
<li>Business Letters;</li>
<li>Sales Promotions;</li>
<li>Print/Radio Ad Copy;</li>
<li>Direct Mail Pieces;</li>
<li>Attention-Grabbing Flyers;</li>
<li>Press Releases;</li>
<li>Speeches;</li>
<li>Newsletters;</li>
<li>Corporate Image Profiles;</li>
<li>Non-Profit Grants;</li>
<li>And Much More…</li>
</ul>

I’ve tried using list-style-position and list-style-type elements to fix this problem, to no avail. Oddly enough, at first, when I’ve used one or both of these elements, the page appears to be fixed; but when I open it in IE later, I still have the original problem.

I don’t know what I’m doing wrong here. Can someone please clue me in?

Any help would be greatly appreciated! Thanks!

–CatBnovice

to post a comment
CSS

17 Comments(s)

Copy linkTweet thisAlerts:
@KDLAOct 16.2008 — margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;


You need to apply a margin to the left. Else, put the list-style-position on the inside.
Copy linkTweet thisAlerts:
@CatBnoviceauthorOct 16.2008 — KDLA,

Won't putting a left margin inside the text (ul.services.a) tag only effect the text of the list (something I don't want to mess up again)?

Isn't there some image block element that I can put inside the ul.services tag that can define my image's size so it won't get cut off?

It's only the bullet image itself that gets cut off, not the text.

Or am I simply not uderstanding what the tags mean?
Copy linkTweet thisAlerts:
@KDLAOct 16.2008 — Right, but IE is goofy about list items and shoves them up to the margin of the block element. Also, certain versions of IE do not correctly render the list-style-image correctly.

INSTEAD (and this is much easier to handle), I suggest you change the list-style-type to none, get rid of the list-style-image, and apply a background image to the <li>. You'll need to apply padding to the left of the <li>, but you'll get a much more consistent rendering of the placement of your image.
<i>
</i>li {list-style-type: none; padding-left: 15px; background: url(../Images/ChkMark.png) no-repeat left center;}
Copy linkTweet thisAlerts:
@CatBnoviceauthorOct 16.2008 — Hopefully, this really worked!

Here's what I did:

I added "display: inline;" to my ul.services tag in CSS1.

Now, the code looks like this:

ul.services{

list-style-image: url(../Images/ChkMark.png);

display: inline;

z-index: 10;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

position: absolute;

top: 330px;

left: 380px;

width: 275px;

font-size: large;

text-indent: 15px;

}

I'm going to re-check the effect by re-opening my Web page in IE.

Done! The effect is PERFECT!

Thank you SO MUCH for your help!

--CatBnovice
Copy linkTweet thisAlerts:
@KDLAOct 16.2008 — If you have the <ul> set to display inline, the width styling will not apply. Also, your list items will inherit the inline setting.
Copy linkTweet thisAlerts:
@CatBnoviceauthorOct 21.2008 — KDLA, you were right.

I went back and looked at my page in IE7 again, and still had the original problem.

I'll try using your method today, and see if that fixes the problem.

Thanks for your help!

--CatBnovice
Copy linkTweet thisAlerts:
@CatBnoviceauthorOct 21.2008 — Ok, KDLA,

I tried your method, but now I've got a problem I had earlier, and don't remember how I originally fixed this problem. (I'm "learning" CSS as I go, but via trial and error.)

Here's the code I have now:


ul.services{

list-style-type: none;

margin: 0px 0px 5px 0px;

padding: 0px 0px 10px 0px;

position: absolute;

top: 330px;

left: 360px;

width: 285px;

font-size: large;

text-indent: 55px;

}

ul.services li{

background-image: url(../Images/ChkMark.png);

background-repeat: no-repeat;

background-position: left center;

margin: 0px 0px 5px 0px;

padding: 0px 0px 10px 0px;

width: 285px;

height: 46px;

border: 0;

}

ul.services a{

margin: 5px 0px 0px 5px;

padding: 15px 0px 0px 10px;

font-family: Verdana, Arial, sans serif;

color: black;

}

And, the PROBLEM is, the text of my list is WAY too high--as in, NOT vertically centered on the "bullet" image. I need to FINISH this page already; I've been working on it for 2 weeks now.

What am I doing wrong???

--CatBnovice
Copy linkTweet thisAlerts:
@KDLAOct 21.2008 — If your text does not wrap, apply a line-height the height of the <li>.
Copy linkTweet thisAlerts:
@CatBnoviceauthorOct 22.2008 — If your text does not wrap, apply a line-height the height of the <li>.[/QUOTE]

Hi, KDLA,

I don't know where you got the idea my list text was not wrapping, as I did not say it was or wasn't wrapping.

I said the [B]location[/B] of the text was NOT VERTICALLY CENTERED on the background bullet image--a problem I had experienced earlier, which is why I hesitated to use your first "fix;" I knew it would screw up my bulleted list. The height of the line is FINE.

Please, let's not confuse the issue. I just need to find a way to VERTICALLY CENTER the text on the bullet images. I've tried everything I could think of, without results.

Again, I'm using CSS1 strict (for IE7), in an attempt to ensure it works in IE7.
Copy linkTweet thisAlerts:
@KDLAOct 22.2008 — Well, that was quite a snippy reply, but I will continue to help you.

The reason I asked about the text wrapping is that the method I suggested is dependent upon that answer. If your text does not wrap, then the line-height application should help you with the vertical positioning of your image. See, if your line-height is smaller than the height of your containing element, the text will automatically rise to the top.

If your text does wrap, then the line-height would break the layout in that the text spacing would essentially double the height of the div once the text wraps below the first line of text.
<i>
</i>li {height: 46px; line-height: 46px; background: url(images/file.gif) no-repeat left center;}
Copy linkTweet thisAlerts:
@CatBnoviceauthorOct 22.2008 — Sorry, KDLA,

But, I'm rather frustrated with this issue, and I already tried specifying the same line-height as the image height, and it did not work.

I thought, when I positioned the background image to "left center" it would have worked, but now I need a command that would place the text in vertical center as well.

The reason why my text does not wrap is simple: My bullet items are single-word "names" of services I provide, so they should not, and cannot wrap.

I thought you would understand my problem when I placed my code inside my original posts.

What I really need is a complete tutorial on CSS1, instead of the tiny little "tidbits" I've been finding on the Internet. It seems that no one provides complete rules for CSS, making it very difficult to learn. I've even scoured the www.w3.org Website (supposedly the authority on Internet languages) and still can't find any difinitive answers to my questions.

I'm sorry that my frustration is showing, but I've already spent way too much time trying to write my Website from scratch. For me, writing code is like doing math--and I hate math.

Needless to say, "Webmaster" is not one of the services I provide! LOL!
Copy linkTweet thisAlerts:
@KDLAOct 22.2008 — Perhaps you need to supply a link to the page. There could be other issues at play.
Copy linkTweet thisAlerts:
@CatBnoviceauthorOct 22.2008 — Ok, KDLA,

However, I can only provide the html and css files as .txt attachments, as I can't post the Website to the Internet until it is finished.

They are titled, "CSS-page.txt," and, "SvcsHtml-page.txt." Save them as .css and .html respectively, and you can view them via Internet Explorer, and see what I'm seeing (at least I hope so!).

Then perhaps you'll understand my dilemna.

Let me know if you have any difficulties.

Thanks!

--CatBnovice

[upl-file uuid=d90b393c-8dd4-4f17-a147-44cdfcfffe36 size=4kB]CSS-page.txt[/upl-file]

[upl-file uuid=bc0ac925-6852-4d14-b72e-f06b381ad3d8 size=3kB]SvcsHtml-page.txt[/upl-file]
Copy linkTweet thisAlerts:
@CatBnoviceauthorOct 22.2008 — KDLA,

I figured out a way to get this problem page online, via my ISP's "personal web space."

You can view this page, and the issue I'm having by going to this link:

Catabird

I think you'll see the problem right away! LOL!

--CatBnovice
Copy linkTweet thisAlerts:
@joseph_liuOct 24.2008 — Try applying a <p> tag to each of the text items in the list and adding padding-top to them. For example <li><p style="padding-top: 10px;">Brochures;</p></li>
Copy linkTweet thisAlerts:
@CatBnoviceauthorOct 24.2008 — Sounds like an interesting fix. I'll try it!

Thanks for your help, Joseph. ?

--CatBnovice
Copy linkTweet thisAlerts:
@CatBnoviceauthorOct 24.2008 — Now, check out my Services page via this link--remembering this is a temporary Site, as I'm using personal Web space from my ISP.

Catabird

WHOOPIE!!!

I've never been so glad to be finished with something in my life!

--CatBnovice
×

Success!

Help @CatBnovice 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.21,
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,
)...