alijiwani
07-30-2006, 12:33 PM
Hi guys,
I have a form I am trying to code based and am having a few weird issues. Each label & field are contained in a list item with the label floated left. Some labels include 2 lines where there is example text.
However, that example text messes up the spacing and after many hours cannot seem to find a solution. I added a clear:both to every li and that solved one problem. Adding a empty span with a clear class at the end of the li that has a 2 line of text gives me some padding underneath the example text - but only in IE. In FF, the example text will still touch the bottom of the li looking horrible. Worse, if I need to add a second line of example text, I will probably be screwed.
Also, I have placed the two lists in within their own colums and floated them both to give the 2 column effect. However, this messes up the borders in the center if one column is shorter than another (see FF). Any ideas on how to get around this?
Oh and one other issue (in case anyone knows why) - the two columns+padding+borders+margins = 807. Yet only IE 6 requires a 810 container. I (think) I've got it running in Standards mode... so shouldnt the box model work correctly?(It makes the bottom border look funny)
The CSS: http://www.jiwani.net/test/standard.css
the IE only CSS: http://www.jiwani.net/test/ieonly.css
The HTML: http://www.jiwani.net/test/newcaseformsmockup.html
The Image of what it should look like: http://www.jiwani.net/test/images/newcaseformsmockup.gif
I have a form I am trying to code based and am having a few weird issues. Each label & field are contained in a list item with the label floated left. Some labels include 2 lines where there is example text.
However, that example text messes up the spacing and after many hours cannot seem to find a solution. I added a clear:both to every li and that solved one problem. Adding a empty span with a clear class at the end of the li that has a 2 line of text gives me some padding underneath the example text - but only in IE. In FF, the example text will still touch the bottom of the li looking horrible. Worse, if I need to add a second line of example text, I will probably be screwed.
Also, I have placed the two lists in within their own colums and floated them both to give the 2 column effect. However, this messes up the borders in the center if one column is shorter than another (see FF). Any ideas on how to get around this?
Oh and one other issue (in case anyone knows why) - the two columns+padding+borders+margins = 807. Yet only IE 6 requires a 810 container. I (think) I've got it running in Standards mode... so shouldnt the box model work correctly?(It makes the bottom border look funny)
The CSS: http://www.jiwani.net/test/standard.css
the IE only CSS: http://www.jiwani.net/test/ieonly.css
The HTML: http://www.jiwani.net/test/newcaseformsmockup.html
The Image of what it should look like: http://www.jiwani.net/test/images/newcaseformsmockup.gif