[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/
