2009/8/20 Christian Montoya <[email protected]>:
>
> Hello all,
>
> If you have IE 6 or 7 on Windows and a bit of free time, I'd like to
> ask you to read this bug report:
>
> http://blueprintcss.lighthouseapp.com/projects/15318/tickets/15-ie-clips-the-numbers-in-an-ordered-list
>
> See the attached screenshot:
>
> http://blueprintcss.lighthouseapp.com/projects/15318/tickets/15/a/72883/Screenshot.png
>
> And let me know if you have ever observed the same thing, or if you
> know of a fix. I think we just need to modify the padding in IE, but I
> am having trouble testing IE at the moment.
>
In screen.css we have
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
and padding is set to 0 with reset CSS.
-----------------------------------------------------------------------------
By default ordered lists have padding-left:40px; and
list-style-position:outside; set which puts enumeration outside the
content area and into the padding area.
In BP margins are used (1.5em which is 18px) to push the list from the
left to create space for numerals but only one digit fits in that
amount of spave.
Stuff that overflows is not visible in IE6 for some reason (bug
maybe?) and will not be visible in other browsers if you use for
example overflow:hidden property on parent elements and have more then
9 items in list.
-----------------------------------------------------------------------------
One way of dealing with this would be setting 3.333em (is 40px @ 75%
font-size) padding on the left side of lists instead of margin (left
should be set to 0) giving plenty of space to hold two and three digit
numbers.
This goes well with default column width too.
ol, ul {margin-left:0;padding-left:3.333em}
-----------------------------------------------------------------------------
Another solution would be to set list-style-position:inside; in
screen.css thus making browsers render enumeration inside of content
area.
ol {list-style-position:inside;}
-----------------------------------------------------------------------------
With both solutions you would want to remove this property from ie.css
as it would not be necessary anymore.
ol {margin-left:2em;} added @ a5f7d0bf142b Fixed incorrect ol margin in IE6/7.
-----------------------------------------------------------------------------
I've done some test with IE6 and both fixes seem to work ok, but i'll
try to test other IE versions and browsers at work over the weekend
and if it seems ok i can push the changes to github.
--
I for one welcome our Oracle overlords.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en
-~----------~----~----~----~------~----~------~--~---
