|
|
|
Killersites.com Forum » List all forums » » Forum: CSS - Styling your pages with Cascading Style Sheets. » » » Thread: CSS: list-style-image: ? > Position is Whacked! |
|
| Print at Sep 5, 2010 10:04:17 PM | |
| Posted by shelfimage at Nov 15, 2005 11:09:45 PM |
CSS: list-style-image: ? > Position is Whacked!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 |
| Posted by admin at Nov 16, 2005 12:38:13 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! 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 |
| Posted by shelfimage at Nov 16, 2005 12:57:47 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! 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 |
| Posted by lm at Nov 16, 2005 4:23:42 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! 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 |
| Posted by shelfimage at Nov 16, 2005 6:58:34 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! 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 |
| Posted by tpattison at Nov 16, 2005 7:31:54 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! 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 |
| Posted by lm at Nov 16, 2005 7:56:42 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! 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 |
| Posted by tpattison at Nov 16, 2005 10:38:59 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! 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 |
| Posted by admin at Nov 16, 2005 10:53:01 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! 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 |
| Posted by OropheR at Nov 18, 2005 7:06:07 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! 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. |
| Posted by shelfimage at Nov 18, 2005 12:23:21 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! @OropheR: We would be better off IE to be honest... Did you mean to say "...better off without IE..." ? I'd have to disagree. I prefer using Firefox and sometimes Opera for browsing and surfing, etc., but IE has its place. I find too often IE and M$ are trashed because of the demands placed on developers to have web sites compatible in both mozilla and IE Aiming for cross-browser compatiblity while remaining true to your personal standards, or those of peers, can limit design flexibility (in some cases). And, that can be frustrating! Yet, historically, some great works were produced during times of strife. - ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
| Posted by JasonT at Nov 19, 2005 3:28:03 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! Try adding the image as a background on your list item, and using padding to so the text doesnt overlap the background image Example: http://css.maxdesign.com.au/listamatic/vertical05.htm Regards Jason |
| Posted by tpattison at Nov 20, 2005 10:56:31 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! Now that would be a good idea!  Then you can use background-position: left center; to align it just right. ---------------------------------------- Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen |
| Posted by davidmead at Nov 20, 2005 1:03:44 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! It could be happening as IE and FF use different things to position lists. One uses primarily padding and the other uses margin, though I can't remember which is which.. I always set everything to zero and usually put images as backgrounds to the <li><a>Hope this helps. Dave ---------------------------------------- Building quality, affordable web sites worldwide - DMWebsites.com |
| Posted by shelfimage at Nov 20, 2005 8:40:12 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! I think I'll try the background Image with positioning tomorrow. That'll probably be a good fix. I'll post back my results. Thanks guys! - ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
| Posted by GreenBeast at Nov 21, 2005 2:45:27 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! I forget the actual CSS, but something like align:text-top might provide the specificity you're looking for. I'm curious. To me it's looks fine either way. Why do they have to be dead-on exact? Mike ---------------------------------------- Portfolio|Blog|Hosting|CMS|Accessites |
| Posted by shelfimage at Nov 21, 2005 4:35:51 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! @ GreenBeast: Client is persnickety. THe .psd template I was given shows it in the middle, so I have to have to have it in the middle with html, or use image text... ugh.  ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
| Posted by Broc at Nov 21, 2005 5:44:04 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! Hehe... persnickety... that's a good word... ---------------------------------------- Broc High Tide Web Services High Tide Templates |
| Posted by shelfimage at Dec 22, 2005 12:57:50 AM |
Re: CSS: list-style-image: ? > Position is Whacked!I think I'll try the background Image with positioning tomorrow. That'll probably be a good fix. I'll post back my results. Thanks guys! - I implemented this for all UL, OL & DL for the entire website, including non-list blocks of text and any anchors requiring a bullet. The great thing is there was no IE hacks or IE Conditional statements needed. 1. HTML CODE: <div id="newsList"> <ul> <li><a href="/documents/default.asp">Issue 5 - October 12, 2005</a></li> <li><a href="/documents/default.asp">Issue 4 - August 22, 2005</a></li> <li><a href="/documents/default.asp">Issue 3 - July 27, 2005</a></li> </ul> </div> 2. CSS CODE: (comments added for post) #newsList ul { /* for positioning and styling preferences */ padding:0; margin:0; } #newsList li a, #newsList li a:visited { list-style-type:none; /* removes default bullet */ background-image:url(../img/arrow_red.gif); background-repeat: no-repeat; /* ONE bullet only please */ background-position: 0 .45em; /* .45em from top (vertical) */ padding-left:12px; /* space between bullet and text */ /* styling options below */ line-height:1.5em; font-weight:bold; color:#000; text-decoration:none; } Coding this is painless and it gives a lot of flexibility - For example, there were 10 unique styles* and types of lists that all required the same image and spacing between the bullet and text. And another 3 list styles that did not require the bullet. *element postioning, different line hieghts, and font styling among UL, OL and DL versions. I found it best to use unique ID's instead of classes. - ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
| Posted by tpattison at Dec 22, 2005 7:01:37 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! That should work - there is no reason why the backgrund position should be different in IE and FF. Just one thing, why use em's for vertical positioning instead of %... No, scrap that, just worked it out; multi-line text requires that the bullet is alligned with the first line only. Bingo! ---------------------------------------- Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen |
| Posted by billyboy at Dec 22, 2005 8:14:41 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! Good to see you got it worked out. I've yet to use an image for a bulleted list but I'll file that away for future reference. FYI you can save yourself a bit of typing by writing your background properties shorthand: background: url(../img/arrow_red.gif) no-repeat 0 45em; ---------------------------------------- Quiquid latine dictum sit altum viditur |
| Posted by shelfimage at Dec 22, 2005 9:19:00 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! @billlyboy - Thanks for the reminder - I always forget to use shorthand after playing with css - seeing it separately helps me to work it out. ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
| Posted by shelfimage at Dec 22, 2005 10:01:41 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! @Tpattison: The Santa hat looks great! ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
| Posted by tpattison at Dec 23, 2005 9:09:03 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! Thanks! Perhaps the bug should get a 500 post/1 year at KS makeover?  ---------------------------------------- Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen |
| Posted by shelfimage at Dec 24, 2005 11:52:58 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! we need the Killersites Avatar Makeover team (KAM team). I think Broc acting chief of operations, but he has his hands full... ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
| Posted by billyboy at Dec 24, 2005 12:26:53 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! Possibly, but he might just have a cute little pink outfit handy ---------------------------------------- Quiquid latine dictum sit altum viditur |
| Posted by constantlearner at Mar 28, 2008 11:28:26 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! I've sort of left list styles be and use background image for the li instead. Its far simpler and works in both IE and FF. Just give the list image as a background image in your "<li>" code, obviously you also need to specify position and no-repeat. I've used this many times and have had no problem with it. Hope this helps! |
| Posted by LSW at Mar 28, 2008 11:35:48 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! Did you notice this thread is 3 years old? |
| Posted by lwsimon at Mar 28, 2008 2:18:01 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! Paging Zombie... He should know how to handle a page returned from the dead :) ----------------------------------------  Simple is better. |
| Posted by LSW at Mar 28, 2008 2:29:58 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! I Imagine shelf could answer himself by now, I think this one of the first he posted... but traditionally a Headshot will work |
| Posted by shelfimage at Mar 28, 2008 5:31:39 PM |
|
Re: CSS: list-style-image: ? > Position is Whacked! LOL ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
| Posted by constantlearner at Mar 31, 2008 10:07:13 AM |
|
Re: CSS: list-style-image: ? > Position is Whacked! Did you notice this thread is 3 years old? Not really..does nevermind do justice for this? then, nevermind :) |
| Posted by seanom at Aug 21, 2008 7:26:22 AM |
Re: CSS: list-style-image: ? > Position is Whacked!I know this is very old thread but I also found that setting a min-height works for ie 7 /*edit found in google for this very problem which is the reason I have posted reply*/ background:url(/images/bullets/inner-bullet.gif) no-repeat 0px 4px; /* sets list backgorund for ff position */Have not checked the ie 6 but setting a min height is enough to get it to display correctly in ie |
|
Current timezone is GMT Sep 5, 2010 10:04:17 PM |