PDA

Click to See Complete Forum and Search --> : Form align problems in firefox

Drummer_si
03-14-2006, 09:38 AM
I seriously hate firefox (Awaits flaming).

Anyway.. I'm trying to create a form and align everything so it's all nice and pretty. By code is below:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
<!--
label
{
width: 10em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}
-->
</style>
</head>

<body>

<p><label>Information name:</label>
<input name="txtName" type="text" maxlength="50" style="width: 300px"/></p>
<p><label></label>
<input name="txtName2" type="text" maxlength="50" style="width: 300px"/></p>

</body>
</html>

In IE this results in the text boxes being exactly alligned, following the labels, however, Firefox chooses to ignore any labels that don't have text inside them. If there anyway I can get around this problem, so taht all my form fields are aligned in all browsers?.. But still retain this 'label' type of system?

Big thanks for all you can help


EDIT: You can view the page here: http://rockmanageronline.com/test.htm
drhowarddrfine
03-14-2006, 09:41 AM
A link is always easier to help with.
General rule: If it works in IE but not Firefox then the code is wrong. Never design using IE first due to bugs and quirks.
drhowarddrfine
03-14-2006, 09:45 AM
First problem, you use same id name twice. You can only use the same id name once per page. Make it a 'class'. Changing that error alone 'fixes' IE and makes it perform like Firefox.
Drummer_si
03-14-2006, 09:51 AM
Sorry drhowarddrfine you're wrong.


I admit I made a slight mistake in this test page I knocked togethor, but that has no effect - I've gotten rid of all ID's and classes, and the problem is still clear.

I've re-uploaded the page for all to see
drhowarddrfine
03-14-2006, 09:54 AM
But now you are changing the code. Before you aligned things with the CSS and now you aren't.

I have to leave in five minutes but let me see if I can find what needs to be fixed.

btw, it's <style type="text/css">
drhowarddrfine
03-14-2006, 09:58 AM
IE is still wrong. You have text before the input and it's a separate p than the next one, so the second one should be up against the left of the browser until you put text into that area.

I have to leave to meet with a client.
Drummer_si
03-14-2006, 09:59 AM
The onlything css is controlling is the width of my labels, the input boxes come directly after it.

I thought i'd even try th eold table command "empty-cells: display", but that doesn't work on labels :(

Appreciate your suggestions though :)
Drummer_si
03-14-2006, 10:09 AM
no. I still blame Firefox :p

It's seems it's because i'm using EM as my unit of spacing for my labels... If I change it to PIXELS the damn things aligns perfectly in both browsers.

So why won't the damn piece of s**t that is Firefox recognise that Em is a valid use of measurement when the CSS standard clearly recognises that 1em is equal to whatever text size the browser is set to... IE adheres to this by expanding the spacing when the text size increased, Firefox displays no spacing what-so-ever!

Grr! i do hate Firefox! It's NOT the best thing to ever happen to the web!
drhowarddrfine
03-14-2006, 04:27 PM
You're still wrong. The problem is IE is applying the inheritance of the 'em' font size to both paragraphs while there is no text in the second label. 'em' size is a relationship to whatever it was set as and it hasn't been set in your second paragraph. To prove this, put some text into the second paragraph and Firefox properly uses that text as the reference for 'em' while IE only assumes, which is improper behavior.
pcthug
03-14-2006, 06:35 PM
It's always IE's fault :) :
http://www.howtocreate.co.uk/wrongWithIE/
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
http://www.positioniseverything.net/explorer/peekaboo.html
http://www.positioniseverything.net/explorer/expandingboxbug.html
http://www.positioniseverything.net/explorer/percentages.html
http://www.positioniseverything.net/explorer/lineheightbug.html
http://www.positioniseverything.net/explorer/border-chaos.html
http://www.positioniseverything.net/explorer/ie-listbug.html
http://www.positioniseverything.net/explorer/guillotine.html
http://www.positioniseverything.net/explorer/unscrollable.html
http://www.positioniseverything.net/explorer/dup-characters.html
http://www.positioniseverything.net/explorer/italicbug-ie.html
http://www.positioniseverything.net/explorer/doubled-margin.html
http://www.positioniseverything.net/explorer/floatIndent.html
http://www.positioniseverything.net/explorer/threepxtest.html
http://www.positioniseverything.net/explorer/escape-floats.html
http://www.positioniseverything.net/explorer/creep.html
http://www.positioniseverything.net/explorer/firstletter.html
http://www.positioniseverything.net/explorer/inlinelist.html
http://www.webstandards.org/action/acid2//

Need I say more
ray326
03-14-2006, 10:30 PM
So put a &nbsp; in the empty label.
Drummer_si
03-15-2006, 04:07 AM
So put a &nbsp; in the empty label.

Ray man you're a lifesaver! I never even thought of that!

Thanks a million!

Thanks to all you posted too! :D