[pixiepaint]

Hi,
I'm having an issue with opera where my form labels are not aligning with a textarea in Opera. I've used some css to style my form and it works in every other browser (as far as I know so far.. using a mac) except Opera.
I've attached a screenshot of what I'm talking about.
Any suggestions would be really appricated. Here is my code:

CSS:  Picture_3.png (65.97K)
Number of downloads: 1
/* form */
#contact-area {
width: 500px;
margin-top: 25px;
}

#contact-area input, #contact-area textarea {
padding: 5px;
width: 300px;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}


#contact-area textarea {
height: 80px;
}

#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}

#contact-area input.submit-button {
width: 100px;
float: right;
margin-right: 70px;
}

#contact-area input.submit-button:hover {
color: #fff;
background-color: #632B35;
text-decoration: none;
}


label {
float: left;
text-align: right;
margin-right: 10px;
width: 100px;
font-size: 1.2em;
line-height: 1.4em;
}


XHMTL:
<div id="contact-area">
<form action="FormToEmail.php" method="post" onsubmit="validateForms()">
<label for="Name">Name:</label>
<input type="text" name="Name" class="required" id="Name"/>

<label for="email">Email:</label>
<input type="text" name="email" class="required" id="email"/>

<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone"/>

<label for="Message"> Message:</label>
<textarea name="Message" rows="20" cols="20" class="required" id="Message"></textarea><br />

<input type="submit" name="submit" value="Submit" class="submit-button" />
</form>
</div>

[rosiesp]

Hi,

it looks like you're floating the submit button. <input>s are inline elements and sometimes don't take well to being positioned. Try adding display:block; so this:

#contact-area input.submit-button {
width: 100px;
float: right;
margin-right: 70px;
}

becomes:

#contact-area input.submit-button {
width: 100px;
display: block;
float: right;
margin-right: 70px;
}

[pixiepaint]

rosiesp, on Apr 7 2009, 17:12, said:

Hi,

it looks like you're floating the submit button. <input>s are inline elements and sometimes don't take well to being positioned. Try adding display:block; so this:

#contact-area input.submit-button {
width: 100px;
float: right;
margin-right: 70px;
}

becomes:

#contact-area input.submit-button {
width: 100px;
display: block;
float: right;
margin-right: 70px;
}

Thanks rosiep, that helped get the submit button where it's supposed to be. Sadly my labels are still not aligning properly.

Attached File(s)

•  Picture_5.png (32.53K)
  Number of downloads: 0

[bocaj]

have you tried clearing your floats? Just a thought

[pixiepaint]

bocaj, on Apr 8 2009, 01:33, said:

have you tried clearing your floats? Just a thought

It worked! Of course it had to be something that simple. :$.
Thanks so much.