View Full Version : A couple of CSS questions on proper methods

05-11-2007, 05:52 PM
first one - I've heard it's not proper to use a lot of br tags and trying to figure out a way to set something like this up with out the br tag in between the label and the input field (I'd rather use CSS then BRs that way if I change the layout so label and input are on the same line it would just be changing the CSS file).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<title>Form Lookup</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 0; padding: 0; font-family: verdana; font-size: 12px; }
fieldset { width: 500px; margin: 0 0; padding: 0 0; }
p { padding: 0 10px 0; }
p input { width: 125px; }
p label {width: 75px; }
p.submit input{width: 50px; }
<form method="post" action="" >
<p><label for="fname">First Name<br /></label><input type="text" name="fname" id="fname" /></p>
<p><label for="lname">Last Name<br /></label><input type="text" name="lname" id="lname" /></p>
<p><label for="form_id">Form ID<br /></label><input type="text" name="form_id" id="form_id" /></p>
<p class="submit"><input type="submit" name="submit" value="Find" /></p>

Second question - I have a two column layout left column is just a logo, right column has background image with text and input. is it better/proper to:
1. Set it up as a two col layout with logo as a css background image.
2. Set it up as a two col layout with logo as a image inside the div.
3. One col layout with image positioned to the left and all text/input padded to the right.

Last question - I have a link and I'm using a small image rather then text in the link which method is better/proper
<a href="#"><img src="image.jpg" /></a>2.
.doit { background: url(image.jpg; }
<a href="#" class="doit"></a>

05-11-2007, 06:43 PM
Hey Jim, howís it going? :) How are the huskies? :D
I just happen to be around and thought I might be the one to answer your questions:

#1: Your layout is pretty good already. However, since the input fields arenít actually paragraphs I wouldnít mark them as such. Iíd probably rather go with an unordered list (i.e. what is currently a paragraph would be a list element then): http://alistapart.com/articles/prettyaccessibleforms.

As to the line breaks: Just remove them from the HTML and set the labels and/or inputs to display: block; in the CSS.

#2: That is really a matter of preference, I guess. But it also depends on how complex the rest of the layout is. I think either way is alright (while method 1 could as well be a one column layout with the logo as background applied to the container and left padding for the container to move the content to the right. depends on how many bg images you have to put).

#3: Also either way has its pros and cons. What I definitely donít recommend is to use an empty element. So at least put a text link into the anchor and hide it with one of the numerous CSS image replacement techniques (http://www.mezzoblue.com/tests/revised-image-replacement/) (however, all of them have drawbacks). The method with the image as link works well but remember to put an alt attribute and alternative text if the image canít be displayed for whatever reason. I.e. if the image would be a button linking to the home page put ďhomeĒ as alternative text. If the image is a photo put a short description on the content of the photo so people that canít see it will know what that is. And put a title in the anchor that describes where the link will take them.

Good luck and take care! ;)

05-11-2007, 06:56 PM
Hey Stephan been awhile, thanks for the help.
Things are going good, The kids (huskies) are doing well other then shedding all over the place now since the warm weather has finally gotten here (gotta love all the dog hair).
I started a new job about a month ago doing web development for Marathon Multimedia (mainly php stuff), so Husky Zone is on hold a bit until the two boys get out of the military in about 6 months.

So how things going over on your end of the world????

05-11-2007, 07:12 PM
So far so good over hereÖ Iím relatively busy playing music (which is good) and the German economy is boosting currently so my existence as freelance web designer looks promising (while the disadvantage is that the Euro is getting stronger compared to the Dollar (or Dollar getting weaker) which has a slightly negative impact on the export of my skills to non-Euro countries). :)

Congrats on the new job. And even just around the corner from what I read? I hope Husky Zone will keep you busy as well (in a positive manner)? You canít leave your clients in the lurch! :)

Take care and see you around!