Email conversation
| From | Jeremy Warren |
|---|
| To | Me |
|---|
| Subject | changing the width of the inline-block inside collapseList |
|---|
| Date | 26 April 2005 00:02 |
|---|
| Attachment | screenshot of the desired behaviour |
|---|
http://www.howtocreate.co.uk/jslibs/listpics/
Short Version:
The goal is to format the list so that a colored box surrounds each element
which goes all the way across the screen (not just the length of the item
text like your samples using inline-block).
Although I have made inline-block accept the width paramater in some test
files, I cannot seem to get it to be accepted when sending through
collapseList.
Long Version:
As an aside: while doing some playing (read flailing) I did acheive the
desired goal with the style info below which seems to work in Firefox/and
i.e. 5.5 and also seems to get rid of the gap between elements you
mentioned in the readme (even when expanding and reducing text size).
.lev0link { display: block;
margin-left: 2px;
margin-top: 0px;
margin-right: 45px;
margin-bottom: -1em;
background-color: #6a6a51;
color: #ffffff;
width: auto;
padding-left: 13px;
border-left: 10px;
border-top: 1px;
solid #133;
}
.lev0plain { display: block;
background-color: #6a6a51;
margin-left: 2px;
margin-top: 0px;
margin-right: 45px;
margin-bottom: -1em;
width: auto;
padding-left: 13px;
border-left: 10px;
solid #668;
}
etc..
Attached is a screen shot of the desired goal that was created using the
above definitions.
The problem I have is that we have some Mozilla 1.1 machines that need
access to this page. Note: Those machines properly display your sample
using inline-block and the collapse functions work as expected.
When I switch to my block method above however, it draws the properly
formated display as if all elements were expanded (even though they are set
to be collapsed at the start), it correctly shows the ± icon as collapsed
(even though all the elements are actually shown expanded). but clicking
on the ± doesn't do anything except change the icon from + to - and vice
versa. (Always leaving the fully expanded list displayed). I am sure this
is some goofy Mozilla/block bug but I could not find a specific hit. So it
seems like I am stuck with inline-block but again I can't seem to change
the width.
Any advice you can give on getting the desired result would be greatly
appreciated.
Many thanks in advance!
Jeremy Warren
| From | Me |
|---|
| To | Jeremy Warren |
|---|
| Subject | Re: changing the width of the inline-block inside collapseList |
|---|
| Date | 26 April 2005 09:58 |
|---|
| Attachment | a script that should perform the requested function |
|---|
Jeremy,
> Although I have made inline-block accept the width paramater in some test
> files, I cannot seem to get it to be accepted when sending through
> collapseList.
For reasons best known to themselves, the Mozilla developers _removed_
support for inline-block. Apparently they think we don't need it ...
> The problem I have is that we have some Mozilla 1.1 machines that need
> access to this page. Note: Those machines properly display your sample
Not here ... Mozilla 1.1 displays my example just like Firefox, as support
for inline-block was removed in 1.1 alpha. That said, they did produce an
alternative via a CSS extension (why they didn't do it properly is anyone's
guess). It's unfortunte, but it works:
.lev0link {
display: -moz-inline-block;
display: inline-block;
...
You can then remove all those margins you added. Browsers will ignore the
styles they do not understand, so as long as your page remains in IE's
quirks mode rendering, this will work. This should have the desired effect,
and I will add this workaround to my page.
Hope this is what you wanted.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Jeremy Warren |
|---|
| To | Me |
|---|
| Subject | Re: changing the width of the inline-block inside collapseList |
|---|
| Date | 26 April 2005 18:35 |
|---|
You are a life-saver, that works perfectly on all 3 platforms thanks again!
Jeremy