Welcome to the MacNN Forums.

insha · Feb 16, 2006, 10:18 PM

Hi all,

I created a web page for adding fabrics into a database (MySQL). I have two versions of the layout both of them are very simple (see Ver-1 and Ver-2), done using CSS (not Tables).

-Ver-1 looks as it should in Firefox (1.5, Mac and windoze); but breaks in Safari (2.0.3 on 10.4.5).
-Ver-2 looks as it should in Safari; but breaks in Firefox

What gives?

For those of you who don't want to click on the link, please see the pics below:

Ver-1: Safari (the fieldset boxes are not properly aligned)

Ver-1: Firefox (works fine)

Ver-2: Safari (works fine)

Ver-2: Firefox (the fieldset boxes are not properly aligned)

Thanks in advance.

Cheers.

Super Mario · Feb 18, 2006, 04:52 PM

Make all your ID's margin's set to auto maybe

insha · Feb 18, 2006, 08:27 PM

Originally Posted by Super Mario

Make all your ID's margin's set to auto maybe

Nope. That didn't work.

I turned on the borders for the <label> and it seems that the <fieldset> tag is being wraped; even though there is ample space in the "container" div to hold both the <label> and <fieldset> tags side-by-side.

I didn't think I would be spending this much time...

Super Mario · Feb 19, 2006, 07:35 PM

I have found a tutorial in a book. I will type it out for you tomorrow.

insha · Feb 19, 2006, 10:00 PM

Originally Posted by Super Mario

I have found a tutorial in a book. I will type it out for you tomorrow.

That would be wonderful. Thank you.

Super Mario · Feb 20, 2006, 12:56 PM

Looks like they used tables for their form. The chapter after they have tutorials for behaviours and after that one CSS layers. Download the tutorial files and look at the source code here.

http://dreamweaverunleashed.com/resources.htm

The chapters you might want to look at are:

Chapter 9 - HTML Forms
Chapter 10 - Behaviours
Chapter 11 - CSS Layers

If you want to keep it CSS did you try to surround the whole form in an iFrame?

If you need xtra help I have heard Stu at http://www.cssplay.co.uk/ is the most helpful person on the net.

Diggory Laycock · Feb 20, 2006, 01:11 PM

Sorry - it's not directly helpful to your problem, but you've got several elements with the same id (specfically divs with id of 'row'.)

id specifies an unique id for an element - and therefore no two elements on the same page should share an id.

You probably want to use 'class' instead - that allows styling across multiple elements (of the same class.)

insha · Feb 20, 2006, 06:34 PM

I found a tutorial on at http://www.realworldstyle.com/forms.html using CSS for form layout. The tutorial used <spans> to enclose each column and using this technique the layout is functional in both Firefox (Mac/Windows) and Safari; but breaks in IE 6 (I'm not surprised, but I'll fix that later on; already spent way too much time on this).

I have updated Ver-1 with the new CSS using the spans.

Diggory you are right. I should have used class. Thanks.

Thanks all.

LiquidGuy · Feb 20, 2006, 06:57 PM

Version 1 does not have a declared DOCTYPE. Thus, the browsers are entering quirks mode, and are rendering your code as best they can. Always declare a DOCTYPE to check errors.

Version 2 is rendering as intended. As Diggory said, you have some errors in your code. You should always validate your code whenever you come across a problem. Also, I think you're suffering from a bit of Divitis, Classitis, and Iditis

.

A couple of tips: You should get in the habit of thinking semantically, sometimes a lot of <div> tags are not necessary. Use <label for=""> to associate labels with inputs.

Lastly, I don't know why you were using child selectors in your CSS. Were you hiding styles from IE?

Try this (tested in FF 1.5, Safari):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Data Entry Screens</title>
	<style type="text/css">
		#container {
			font-family: Arial, Tahoma, sans-serif;
			font-size: .8em;
			width: 680px;
		}
		label, input, textarea, fieldset {
			display: block;
			float: left;
		}
		fieldset {
			clear: both;
			margin: 0 0 20px 103px;
			width: 300px;
		}
		textarea {
			margin-bottom: 20px;
		}
		label {
			width: 80px;
			text-align: right;
			padding-right: 10px;
			border: 1px solid #CCC;
			margin: 2px 10px 20px 0;
			clear: both;
		}
		#bmf label {
			text-align: left;
			margin: 2px 0;
			border: none;
		}
		#bmf input {
			margin-top: 0;
		}
	</style>
</head>
<body>
<div id="container">	
		<form id="frmfabric" action="#">
		<label for="fabricname">Fabric Name</label><input type="text" id="fabricname" name="fabricname" size="20" value="" />

		<label for="fabricdesc">Description</label><textarea id="fabricdesc" name="fabricdesc" cols="40" rows="5"></textarea>

		<label for="fabriccontent">Contents</label><input type="text" id="fabriccontent" name="fabriccontent" size="30" value="" />

		<label for="fabricwidth">Width</label><input type="text" id="fabricwidth" name="fabricwidth" size="10" value="" />

			<fieldset id="bmf">
				<legend>Use BMF</legend>
				<label for="fabricuseb"><input type="checkbox" id="fabricuseb" name="fabricuseb" value="b" /> Bride</label>
				<label for="fabricusem"><input type="checkbox" id="fabricusem" name="fabricusem" value="m" /> Maid</label>
				<label for="fabricusef"><input type="checkbox" id="fabricusef" name="fabricusef" value="f" /> Flower Girl</label>
			</fieldset>

			<fieldset>
				<legend>Vendor Info</legend>
						<label>Name</label>
					<select id="vendors">
						<optgroup label="Vendors">
							<option value="0">Vendor 1</option>
							<option value="1">Vendor 2</option>
							<option value="2">Vendor 3</option>
						</optgroup>
						<optgroup label="Actions">
							<option value="new">Add a new vendor...</option>
						</optgroup>
					</select>
		
						<label for="fabricprice">Price</label><input type="text" id="fabricprice" name="fabricprice" size="8" value="000.00" />
		
						<label for="fabricshiptime">Ship Time</label><input type="text" id="fabricshiptime" name="fabricshiptime" size="8" value="2wks" />
		
			</fieldset>

	</form>
</div>
</body>
</html>

insha · Feb 20, 2006, 08:16 PM

Originally Posted by LiquidGuy

Version 1 does not have a declared DOCTYPE. Thus, the browsers are entering quirks mode, and are rendering your code as best they can. Always declare a DOCTYPE to check errors.

Version 2 is rendering as intended. As Diggory said, you have some errors in your code. You should always validate your code whenever you come across a problem. Also, I think you're suffering from a bit of Divitis, Classitis, and Iditis

.

A couple of tips: You should get in the habit of thinking semantically, sometimes a lot of <div> tags are not necessary. Use <label for=""> to associate labels with inputs.

Lastly, I don't know why you were using child selectors in your CSS. Were you hiding styles from IE?
<SNIP>

LiquidGuy, thank you. As you can probably tell I'm new to CSS. I do have question about the code you posted: What does <label for=""> do? and will it work across browsers?

As for Divitis (hehe... did not know this term), The tutorials that I used as my base info all used divs for "rows" for form layout. In any case I like your solution much better and more elegant.

Thanks you.

LiquidGuy · Feb 20, 2006, 08:49 PM

insha,

The [FONT="Courier New"]for[/FONT] attribute is used to relate a label with a specific input or textarea element. (It targets the [FONT="Courier New"]id[/FONT] attribute, btw, not the [FONT="Courier New"]name[/FONT] if that was confusing you...) It's compatible with all browsers.

It helps screen readers decipher which label is for what element. Added plus: it makes markup that much easier to understand. Labels can be used one of two ways:

Code:
<label for="someinput">Some Input:</label>
<input type="text" name="someinput" id="someinput" />

or:

Code:
<label for="someinput">Some Input:<input type="text" name="someinput" id="someinput" /></label>

Note that on the latter case, the [FONT="Courier New"]for[/FONT] attribute is optional, because the input element is already inside the label.

In your case, since you wanted a border around only the label text, the first option was the better one.

To check your code for errors, I recommend the Firefox HTML Validator plugin. Great little icon at the bottom of your browser that will show you all your warnings and errors.

Happy to help. Feel free to ask or PM any more questions.

insha · Feb 21, 2006, 12:13 AM

Originally Posted by LiquidGuy

insha,

The [FONT="Courier New"]for[/FONT] attribute is used to relate a label with a specific input or textarea element. (It targets the [FONT="Courier New"]id[/FONT] attribute, btw, not the [FONT="Courier New"]name[/FONT] if that was confusing you...) It's compatible with all browsers.

It helps screen readers decipher which label is for what element. Added plus: it makes markup that much easier to understand. Labels can be used one of two ways:

Code:
<label for="someinput">Some Input:</label>
<input type="text" name="someinput" id="someinput" />

or:

Code:
<label for="someinput">Some Input:<input type="text" name="someinput" id="someinput" /></label>

Note that on the latter case, the [FONT="Courier New"]for[/FONT] attribute is optional, because the input element is already inside the label.

In your case, since you wanted a border around only the label text, the first option was the better one.

To check your code for errors, I recommend the Firefox HTML Validator plugin. Great little icon at the bottom of your browser that will show you all your warnings and errors.

Happy to help. Feel free to ask or PM any more questions.

Thank you for taking the time out to explaining the<label for="">. This might seem a bit corny, but your code above got the gears turning in my head.

Thank you for your offer (and the cool extension) and I will take you up on that; but I promise not to hound you with inane questions; though I can't guarantee that...

Cheers.