logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 08-31-2012, 03:55 AM   #1
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default styling a list with an image as bullet

hey guys,
it's been a while...Cheers

I need a little help guys. I am trying to style a list that uses an image as a bullet. All works fine in Chrome, Firefox and Opera, but IE is not helping at all.

Code:
/* styles */

.go-list{ 
		margin-left:10px; 
		padding:0; 
		list-style-type:none;
		
} 
.go-list li{ 
		background:url(../images/gobullt1.gif);
		background-repeat:no-repeat;
		background-position:left top; 
		background-position:0 20%;
		background-color:transparent;
		padding-left:35px;
		list-style-type:none;
		display:block;}

<ul class="go-list">
		<li>one</li>
		<li>two</li>
		<li>three</li>
</ul>
The problem is that the image is showing above the text at least 4px off

It aligns properly is I add a break and a second line to the list element.

the image I'm using is 28 wide by 10 high.

Any ideas how I can solve this. See attachment for a visual
Attached Images
File Type: jpg bullets.jpg (37.0 KB, 2 views)
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Old 08-31-2012, 02:29 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Hi mangofreak, good to see you again!

Can you post the whole thing somewhere online.
domedia is offline   Reply With Quote
Old 08-31-2012, 06:27 PM   #3
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Hey mangofreak... been a while indeed.

I see you've declared the background-position twice. You can delete the 'left top' one and change from the other the 20% to 50%. The 50% should place the image vertically centered. You might need to add overflow: hidden as well to that CSS block, cause there is no height set.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 08-31-2012, 08:44 PM   #4
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default

Thanks for the replies guys, Domedia and Gentleone. Yes, I am dealing with a joomla website that is using a bought template. I think the changes I am trying to do are affected by the code of the template. The CSS files has over 3000 lines of code. I have never seen something like it. I guess there is always a first time.

Getting back to my issue. Even if I clean up the code to the basics, I noticed that IE renders the bullet and the text too close together. If I try to separate them adding some padding the whole list moves.

have a look at the following:

http://jcacreative.com/test/list-test.html
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Old 09-01-2012, 08:01 AM   #5
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

cool book: the css pocket guide.
p.172
list-style-image:url(blah);
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 09-01-2012, 08:02 AM   #6
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

by the way, I used this in IE long ago. have not tried in IE6 - that could be tested using adobe browserlab.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 09-04-2012, 02:30 AM   #7
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default

Sorry for the delay. Thanks again for the reply. After lengthy consideration I decided to avoid using list-style-image, because it just makes no sense and doesn't render equally in all browsers. I have opted to use image backgrounds and left the list aside for what is supposed to be used, lists.

Also, what happens if your list has various levels and long sentences that need to wrap around... my head hurts

So, thanks for your help and response.
Cheers to all.
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Old 09-04-2012, 04:11 AM   #8
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

the list image replaces a bullet point. one appears before every list element like a standard bullet disc. nothing different. I am surprised you had a problem rendering list-style-image. I didn't with ie7,8 and many older versions of browsers. maybe it's the way it's rendered. you use about a 15x20 or so size image. really small.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 09-04-2012, 04:13 AM   #9
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

I was going to switch to drupal if I ever do another CMS. joomla was a royal headache to configure.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 09-04-2012, 04:27 PM   #10
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default

Well, Joomla is great, I suppose if it is the core joomla and a couple of plugins. The site I'm working on has Joomla, Open Journal System, Open Conference System and Moodle, all with one integrated login, plus nearly 35 plugins, some commercial some free.

My head is about to fall off...but hey, I need to pay the bills so I just keep at it... However, Drupal is the next step as well...
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:31 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com