|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
CSS - Styling your pages with Cascading Style Sheets.
Thread: CSS: list-style-image: ? > Position is Whacked!
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 33
|
|
| Author |
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
Hi!  Has anyone encountered this before? I'm using list-style-image: in a css file and noticed that IE likes to place the bullet slightly higher than the middle of the list item, while Mozilla likes to position it slightly lower. The image is a precise cut - no white space top, right, bottom or left. I've tried list-style-postion:xxx ; vertical-align:xxx ; and other stylings that came to mind and can't seem to find a fix. Any thoughts? Screen Shots: (left=IE, right=ff)   CSS Code: #subCopy ul { list-style-image:url(../img/arrow_red.gif); margin-top:10px; margin-left:35px; padding:0; } #subCopy li { color:#000000; font-size:80%; line-height:1.5em; text-decoration:none; } HTML Code: <ul> <li><a href="RedSky_Accelerates_Growth_into_VoIP_with_Funding.pdf" rel="external">Understanding Texas E911 Legislation and Corporate Policy</a></li> <li><a href="Network_Discovery_on_RedSky_E911_Manager.pdf" rel="external">Understanding Florida E911 Legislation and Corporate Policy</a></li> <li><a href="Minnesota_E911_Law_and_Liability_Webinar.pdf" rel="external">Taking Action: Implementing an E911 plan for your Organization</a></li> </ul> With a div="subCopy" referenced earlier in the page. TIA! - ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
|||
|
||||
|
admin
Advanced Member Joined: Jun 14, 2003 Post Count: 2940 Status: Offline |
Hi, Yes I've seen that before but never tried too hard to fix. That being said I would just use IE conditional comments to load another image for your bullets that compensates for the off-center positioning that you get with IE. Bulley images don't weight much anyway ... ---------------------------------------- Stefan Mischook Video Tutorial Store | Web Templates |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
Ok, I'll check that out - thanks! That might be a good fix b/c if I add a few pixels of white space to the top of the bullet to "push" it down for IE, this will casue problems in Mozilla and vice versa. So, I guess it's 2 separate style sheets after all with two different bullets. And, this hasn't changed with IE7 btw. IE7 users see the bullets in the same position as IE6. This must have something to do with how IE interpets the baseline or bottom position of an image. - ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
lm
Advanced Member Joined: Oct 27, 2004 Post Count: 2550 Status: Offline |
hi, i used list-style-image for quite a while now and prefer workarounds - just set the position of the image in px and look what happens. Quite a job everytime i should say - moving it around to get the same look in IE and Firefox. But the same amount of time i'd spend on hacks or extra css -whatever else could be. If you have enough patience to dive into my messy css ( "messy' in a form of writing - it validates at least  ) you can pick up some tips pixelwise from there:http://www.unquantifiable.com/ and in my css : .textlist li { font-size: 0.7em; text-decoration: none; text-align: left; list-style: none url("liding.gif"); display: list-item; margin-left: 10px; padding-left: 15px } a.textlist { text-decoration: none; list-style-image: none } a.textlist:link { text-decoration: none; list-style-image: none } cheers ---------------------------------------- My blog ---------------------------------------- [Edit 1 times, last edit by lm at Nov 16, 2005 4:32:37 AM] |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
list-style: none url("liding.gif"); I'll try that too. - Thanks, lm! ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
tpattison
Advanced Member UK Joined: Dec 29, 2004 Post Count: 1662 Status: Offline |
I've scoured the web to find an answer to this one. I don't think there's any fix apart from adding whitespace to the image itself. To be honest, it only looks bad when you compare IE and FF side-by-side. Text size would also be a factor so it's almost impossible to get it pixel-perfect. Where I use lists, I always like to make my own bullets, makes the design look complete.  ---------------------------------------- Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen ---------------------------------------- [Edit 1 times, last edit by tpattison at Nov 16, 2005 7:34:02 AM] |
||
|
|
lm
Advanced Member Joined: Oct 27, 2004 Post Count: 2550 Status: Offline |
exactly. You set your fontsize on say 0.8em and then make your bullet's size so that it seems to fit more or less in a center in both browsers. ---------------------------------------- My blog |
||
|
|
tpattison
Advanced Member UK Joined: Dec 29, 2004 Post Count: 1662 Status: Offline |
I know, but users can set default sizes, so there's no perfect way of doing it. ---------------------------------------- Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen |
||
|
|
admin
Advanced Member Joined: Jun 14, 2003 Post Count: 2940 Status: Offline |
The Web by its very nature is fluid, you need to build websites that are that way in terms of the layout. ---------------------------------------- Stefan Mischook Video Tutorial Store | Web Templates |
||
|
|
OropheR
Newbie Lithuania Joined: Oct 18, 2005 Post Count: 47 Status: Offline |
We would be better off IE to be honest... Got a similar issue on my site, but it is not so critical, so i will leave it. |
||
|
|
|
|
Current timezone is GMT May 25, 2013 5:39:27 PM |
