CSS HTML Floating Wrong?

P

Paul

New member
Im doing this fake website out of web design book, and i cant seem to get the fields to line up correctly. It happen when after I wrote in the css source file:

form.contact label.fixedwidth {
display: block;
width: 240px;
float: left;
}

The area where the its labeled "Contact Name" and the text input field line up properly. But the rest of the label names and fields are all over the place. Can someone help please. Heres the css source code, there some css coding in here that apply to other pages. But the css coding that apply to this page in particular are mostly at the bottom.

CSS Source code:
@charset "utf-8";
/* CSS Document */
/* CSS for Bubble Under site */

h1{
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: navy url(background/header-bg.jpg) repeat-y right;
}

h2{
color: navy;
font-size: 130%;
font-weight: normal;
padding-top: 15px;
}

h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}

body{
background-color: #e2edff;
font-family: Verdana, Geneva, sans-serif;
line-height: 125%;
padding: 0;
margin: 0;
}

p{
font-size:small;
color: navy;
}

em{
text-transform: uppercase;
}
/* links */
a{
font-weight: bold;
}

a:link{
color: black:
}

a:visited{
color: navy;
}

a:hover{
text-decoration: none;
color: white;
background-color: navy;
}

a:active {
color: aqua;
background-color: navy;
}

/* Slogan, Style, Background */
#tagline p{
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
background: #bed8f3 url(background/tagline-fade.jpg) repeat-y right;
}

/* Header style */
#header {
border-top: 3px solid #7da5d8;
}

.fun{
color: #399;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 0.05em;
}



/*Absolute postion*/
#navigation, #bodycontent, #header {
position: absolute;
}

/* position of nav & body divs */
#navigation, #bodycontent {
top:107px;
}

/*body pushed to the left*/
#bodycontent {
left: 200px;
}

/*-header and tagline fill the open browser space*/
#header {
width: 100%;
}

/* Feature Image */
img.feature {
float: right;
margin: 10px;
}
/* Navigation style */
li {
font-size: small;
list-style-type: none;
}

/* Gallery Caption */
.galleryphoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}

/* Gallery Photo Border*/
.galleryphoto img{
border: 15px solid white;
}

/* Gallery Photo divider */
.galleryphoto {
padding-bottom: 20px;
border-bottom: 1px navy solid;
margin-bottom: 10px;
}

/* Photo Credit */
.photocredit {
font-weight: normal;
color: gray;
}

/* navigation background*/
#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url(background/nav-bg.jpg) no-repeat;
}
/* table dcoration */
table {
border-collapse: collapse;
border: 1px solid black;
}

/* Table header text and background */
th {
text-align: left;
background: gray;
color: white;
padding: 0.2em;
}

/* Table data border */
td {
border: 1px solid black;
padding: 0.2em;
}

/* Cell spacing */
table.events {
border-collapse: collapse;
}

/* border style and padding */
table.events th, table.events td {
padding: 4px;
border: 1px solid #060;
}

/* font-size for events and header*/
table.events th {
font-size: x-small;
background: #241374 url(background/header-bg.jpg);
color: #fff;
padding-top: 0;
padding-bottom: 0;
padding-left: 2px;
padding-right: 2px;
}

table.events {
font-size: small;
}

table.events. th {
font-size: x-small;
text-align: left;
}

/* Table Caption */
table.events caption {
color: #006;
font-size: small;
text-align: left;
padding-top: 5px;
font-weight: bold;
}

table.events td {
font-size: small;
background: #e2edff url(background/td.jpg) repeat-x top;
}

/*Contact Forms style */
form.contact fieldset {
border: 2px solid navy;
padding: 10px;
}

form.contact legend {
font-weight: bold;
font-size: small;
color: navy;
padding: 5px;
}

/* Space between the form and the */
form.contact {
padding: 0;
margin: 0;
margin-top: -15px;
line-height: 150%;
}


/* form font-style*/
form.contact label {
font-weight: bold;
font-size: small;
color: blue;
}


/* form input style */
form.contact label.fixedwidth {
display: block;
width: 240px;
float: left;
}


Also here's the XHTML coding:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=&quot
 
Back
Top