[css-d] List bullet sizes
Hi, I have a site that was using list-style-type: disc for a list bullet. The QA team noted that in IE8, the list bullets were smaller than in IE7 or Firefox. All three browsers were accessing the same CSS property: li {list-style-type: disc; font-size: 12px; line-height: 160%; } >From reading the CSS spec and some forums, is it correct that each browser has a different way of implementing the size of the bullet, so that there is no direct way to control is in CSS? I know the list-style-image property is available, but I have run into problems with vertical positioning of an image-based bullet (since list-style-position isn't precise). Thanks, Stephen __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List bullet sizes
At 5:00 PM -0400 7/7/09, Stephen Tang wrote: >Hi, >I have a site that was using list-style-type: disc for a list bullet. >The QA team noted that in IE8, the list bullets were smaller than in >IE7 or Firefox. All three browsers were accessing the same CSS >property: >li {list-style-type: disc; font-size: 12px; line-height: 160%; } > >>From reading the CSS spec and some forums, is it correct that each >browser has a different way of implementing the size of the bullet, so >that there is no direct way to control is in CSS? I know the >list-style-image property is available, but I have run into problems >with vertical positioning of an image-based bullet (since >list-style-position isn't precise). > >Thanks, >Stephen Stephen: When I see a post like yours, I can't help but offer this advice: http://sperling.com/four-things-clients-should-know.php Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List bullet sizes
Hi Daniel, Thanks for this interesting idea, but I still need to support IE6. I also can't use a background image, because the list might be on the right side of a floated image, and I've already experienced problems with that. I ended up calling an ie8.css file using an IE conditional statement and fiddling with the line-height and font-size a little to get it close enough. Thanks for your input. --Stephen On Tue, Jul 7, 2009 at 6:34 PM, Daniel Navarro wrote: > Hi, > > li { > list-style-type: none; /* remove default bullets */ > } > > li:before { > content: "\2022"; /* hex codification • */ > color: blue; > margin-right: 0.3em; > } > > (this doesn't work in IE6) > > or you may use background property to place an image. > > 2009/7/7 Stephen Tang : >> Hi, >> I have a site that was using list-style-type: disc for a list bullet. >> The QA team noted that in IE8, the list bullets were smaller than in >> IE7 or Firefox. All three browsers were accessing the same CSS >> property: >> li {list-style-type: disc; font-size: 12px; line-height: 160%; } >> >> >From reading the CSS spec and some forums, is it correct that each >> browser has a different way of implementing the size of the bullet, so >> that there is no direct way to control is in CSS? I know the >> list-style-image property is available, but I have run into problems >> with vertical positioning of an image-based bullet (since >> list-style-position isn't precise). >> >> Thanks, >> Stephen >> __ >> css-discuss [cs...@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List bullet sizes
Hi Tedd, I presume by your URL that the answer is "No." :-) --Stephen On Tue, Jul 7, 2009 at 5:50 PM, tedd wrote: > At 5:00 PM -0400 7/7/09, Stephen Tang wrote: >> >> Hi, >> I have a site that was using list-style-type: disc for a list bullet. >> The QA team noted that in IE8, the list bullets were smaller than in >> IE7 or Firefox. All three browsers were accessing the same CSS >> property: >> li {list-style-type: disc; font-size: 12px; line-height: 160%; } >> >>> From reading the CSS spec and some forums, is it correct that each >> >> browser has a different way of implementing the size of the bullet, so >> that there is no direct way to control is in CSS? I know the >> list-style-image property is available, but I have run into problems >> with vertical positioning of an image-based bullet (since >> list-style-position isn't precise). >> >> Thanks, >> Stephen > > Stephen: > > When I see a post like yours, I can't help but offer this advice: > > http://sperling.com/four-things-clients-should-know.php > > Cheers, > > tedd > > -- > --- > http://sperling.com http://ancientstones.com http://earthstones.com > __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List bullet sizes
At 23:30 -0400 on 07/07/2009, Stephen Tang wrote about Re: [css-d] List bullet sizes: >On Tue, Jul 7, 2009 at 6:34 PM, Daniel Navarro wrote: >> Hi, >> >>li { >> list-style-type: none; /* remove default bullets */ >>} >> >>li:before { >> content: "\2022"; /* hex codification • */ >> color: blue; >> margin-right: 0.3em; >>} >> > > (this doesn't work in IE6) Broken IE6 strikes again. Since this is IMO the correct solution/way to insure the correct bullet gets used, why not use it and use a conditional statement to tell IE6 to just do its own thing by not doing these overrides. -- Bob Rosenberg RockMUG Webmaster webmas...@rockmug.org www.RockMUG.org __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List bullet sizes
On Jul 8, 2009, at 1:21 PM, Bob Rosenberg wrote: > At 23:30 -0400 on 07/07/2009, Stephen Tang wrote about Re: [css-d] > List bullet sizes: > >> On Tue, Jul 7, 2009 at 6:34 PM, Daniel Navarro >> wrote: >>> Hi, >>> >>> li { >>> list-style-type: none; /* remove default bullets */ >>> } >>> >>> li:before { >>> content: "\2022"; /* hex codification • */ >>> color: blue; >>> margin-right: 0.3em; >>> } >>> >>> (this doesn't work in IE6) > > Broken IE6 strikes again. Since this is IMO the correct solution/way > to insure the correct bullet gets used, why not use it and use a > conditional statement to tell IE6 to just do its own thing by not > doing these overrides. Note that the code above won't work in IE 7 either... IE only supports generated content (:before/:after) starting with IE 8. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List bullet sizes
At 5:50 PM -0400 7/7/09, tedd wrote: >At 5:00 PM -0400 7/7/09, Stephen Tang wrote: >>Hi, >>I have a site that was using list-style-type: disc for a list bullet. >>The QA team noted that in IE8, the list bullets were smaller than in >>IE7 or Firefox. All three browsers were accessing the same CSS >>property: >>li {list-style-type: disc; font-size: 12px; line-height: 160%; } >> >>>From reading the CSS spec and some forums, is it correct that each >>browser has a different way of implementing the size of the bullet, so >>that there is no direct way to control is in CSS? I know the >>list-style-image property is available, but I have run into problems >>with vertical positioning of an image-based bullet (since >>list-style-position isn't precise). >> >>Thanks, >>Stephen > >Stephen: > >When I see a post like yours, I can't help but offer this advice: > >http://sperling.com/four-things-clients-should-know.php > >Cheers, > >tedd Stephen: My apologies to the list -- in retrospect my post looks like I'm trying to promote my site rather than address the question. That was not my intent -- my article is too lengthy to be posted here. That's my defense and I'm sticking to it. :-) So... to address the question, each browser has it's own "rule's" as to how it handles and displays html. Some browsers are very similar while others aren't. The box-model problem is one example. Browsers handle zooms differently and a first order zoom in one browser does not guarantee that the size/position of elements will be the same is another example. Browser default fonts are yet another example -- the list goes on and on. In short, there are many differences between browsers with respect how they display html. If you don't like the size of a disc displayed in one browser as compared to another, then you have two choices: 1) live with it; 2) or browser sniff and change the code accordingly. However, browser sniffing brings it's own set of problems to the table and is generally frowned upon as bad practice. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List bullet sizes
Hi Tedd, No harm done. :-) Thanks for confirming that the browsers each have their own way of rendering bullets. In the end, I did "browser-sniff" using an IE8 conditional statement and modifying the CSS until that bullet was close in size to the other browser's rendering. IE8 appears to render a standard bullet a little smaller than IE7/Firefox 3.x. --Stephen On Thu, Jul 9, 2009 at 12:29 PM, tedd wrote: > At 5:50 PM -0400 7/7/09, tedd wrote: >> >> At 5:00 PM -0400 7/7/09, Stephen Tang wrote: >>> >>> Hi, >>> I have a site that was using list-style-type: disc for a list bullet. >>> The QA team noted that in IE8, the list bullets were smaller than in >>> IE7 or Firefox. All three browsers were accessing the same CSS >>> property: >>> li {list-style-type: disc; font-size: 12px; line-height: 160%; } >>> From reading the CSS spec and some forums, is it correct that each >>> >>> browser has a different way of implementing the size of the bullet, so >>> that there is no direct way to control is in CSS? I know the >>> list-style-image property is available, but I have run into problems >>> with vertical positioning of an image-based bullet (since >>> list-style-position isn't precise). >>> >>> Thanks, >>> Stephen >> >> Stephen: >> >> When I see a post like yours, I can't help but offer this advice: >> >> http://sperling.com/four-things-clients-should-know.php >> >> Cheers, >> >> tedd > > Stephen: > > My apologies to the list -- in retrospect my post looks like I'm trying to > promote my site rather than address the question. That was not my intent -- > my article is too lengthy to be posted here. That's my defense and I'm > sticking to it. :-) > > So... to address the question, each browser has it's own "rule's" as to how > it handles and displays html. Some browsers are very similar while others > aren't. The box-model problem is one example. Browsers handle zooms > differently and a first order zoom in one browser does not guarantee that > the size/position of elements will be the same is another example. Browser > default fonts are yet another example -- the list goes on and on. > > In short, there are many differences between browsers with respect how they > display html. If you don't like the size of a disc displayed in one browser > as compared to another, then you have two choices: 1) live with it; 2) or > browser sniff and change the code accordingly. However, browser sniffing > brings it's own set of problems to the table and is generally frowned upon > as bad practice. > > Cheers, > > tedd > > -- > --- > http://sperling.com http://ancientstones.com http://earthstones.com > __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List bullet sizes
---[snip]--- In short, there are many differences between browsers with respect how they display html. If you don't like the size of a disc displayed in one browser as compared to another, then you have two choices: 1) live with it; 2) or browser sniff and change the code accordingly. However, browser sniffing brings it's own set of problems to the table and is generally frowned upon as bad practice. ---[/snip]--- Hi Ted, What I do is develop my HTML/CSS to Firefox and the other browsers, then use IE conditional comments to make things display properly in IE. Browser sniffing javascript is not usually preferred -- it adds significant page weight and opens the page slower. My recommendation is to get an application that will let you test how things look across the IE browsers (I use IETester). Good luck and feel free to email me directly if you have any questions. Kevin __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/