Forum Moderators: not2easy
I've got a pretty stupid problem, yet Google doesn't offer anything useful :(
The action is under FireFox 1.0.4 in XHTML mode.
There's a FORM. It contains thread-styled tree (made with UL/LI). Every thread is represented by a separate LI. Each LI contains a DIV (set to display:table), this one - another DIV (as display:table-row) this one - another DIV (display:table-cell). Now this DIV (the content DIV) has the following inline content:
* a text SPAN;
* a SELECT tag as combobox
* finally, one INPUT button.
The height of SPAN, SELECT and INPUT is set equal: 25px (even FireFox's DOM Inspector shows so). YET -
Content DIV is of 28px height!
After experimenting with heights of all three tags I discovered that SELECT is to blame: no matter what its height is, it adds 2px as top margin and 1px as bottom margin. BUT - I set margin:0px; padding:0px yet that parasitic margin STILL remains! It deforms the whole layout, and I can do nothing to remove it.
(The DOM Inspector faithfully shows that SELECT has padding and margins of exactly zero pixels....)
So it is apparent that SELECT tag has something gone awry with positioning / bounding box.
Anyone has any ideas what's there to do?
Thanks in advance,
Tomas Z.
It seems it is not padding and margin, but border that is the secret for helping to bring these into line.. Note: select elements are windowed controls and is not always easy to style, it's more a user control than a stylable one..
Try experimenting with a 1px border around them to see if it helps, you could always make that border the same color as the background to the button if it works for you, transparent would be the best, but IE doesn't support that yet..
Suzy
Border setting had no effect on me at all... still the same ol' 2px on all sides. Maybe it would be easier to code a custom combobox control with javascript...
Yet...
After lots of blind experimentation I've found a solution of a sort:
Use CSS instruction "float:left" on SPAN, SELECT, INPUT elements. Of course, they form a line, aligned to the left, as it should be (they look the same without this CSS instruction), yet there's a bonus: SELECT tag totally loses top and bottom margins.
Go figure...
I've got no idea why is it so, yet it works... oh well. C++ was definitely more fun :((
