CSS FORM Layout

I'm having trouble positioning my form elements how I want them. The following code shows correctly in Mozilla but in IE, there are spaces around the form elements. How can I get rid of all the spacing?

Take a look at this comparision image:


Thank you!

By the way, I've also tried using a table and was still unable to get rid of all the spacing.

Try adding something like:

to see if that solves your problem.

Thanks, I have tried that. It doesn't help.

Anyone else have an idea?

This may be a stupid idea, but have your tried removing whitespace?:



Or having the second part of each line relative to the first?

Well, I have seen that fix problems in the past, but doesn't do anything for this.

Thanks for the ideas...anyone else?

Hey, it was a stupid question!

You have two unformatted <div> tags in there surrounding your <input> tags. Move the style to the <div> tags and see what it does.

Well that does seem like an obvious answer that would work, but theoretically the div should conform to it's contents...right? Anyway, in practice it doesn't work either. I'm really starting to think this is impossible to do, but I know I'm missing something. I've even taken out the input tags an still get the same layout. I've tried just about everything.

If anyone can post a solution, I'd be very grateful.

Thanks for the replies.

Use a table, but keep the FORM tag outside of the TD tags. For some blasted reason, the FORM tag adds some kind of linebreak which messes up some vertical formatting. The trick is that keeping the code outside of the TD tags to define a cell's contents removes that irritating linebreak.

Hey

Most bowsers, although compliant with css and css2 etc, will rnder the same page using the same css in a different way, something to do with counting the pixels if memory serves.

Sounds like what you need is a script to detect the browser version and adjust the css automatically!

E.G.

<-- Begin JavaScript -->
function OpMoz() {

// Detect the browser name
browsername=navigator.appName;
if (browsername.indexOf("Netscape")!=-1) {browsername="NS"}
else
{if (browsername.indexOf("Microsoft")!=-1) {browsername="MSIE"}
else
if (browsername.indexOf("Opera")!=-1) {browsername="opera"}
else {browsername="N/A"}};

// Detect the version
browserversion="0";
if (navigator.appVersion.indexOf("2.")!=-1) {browserversion="2"};
if (navigator.appVersion.indexOf("3.")!=-1) {browserversion="3"};
if (navigator.appVersion.indexOf("4.")!=-1) {browserversion="4"};
if (navigator.appVersion.indexOf("5.")!=-1) {browserversion="5"};
if (navigator.appVersion.indexOf("6.")!=-1) {browserversion="6"};

// Detect and add code to the header part of the
// XHTML document.

if (browsername=="NS") {document.write("<style>#right \{position: absolute;right: 0px;top: 80px;width: 300px;background-color: #EEE;border: 1px solid #CCCCCC;\}<\/style>")};
if (browsername=="MSIE"){
if (browserversion<4){document.write("Update your Browser Please.")}
else {document.write("")}}
if (browsername=="opera") {document.write("<style>#right \{position: absolute;right: 8px;top: 89px;width: 300px;background-color: #EEE;border: 1px solid #CCCCCC;\}<\/style>")}
if (browsername=="N/A") {document.write("")};

}
<-- End JavaScript -->



just mess about with the code, so the css properties are controlledby this script once the browser has been detected!

script source: http://www.risingdragon.org.uk

Hope this helps!
MostDef