Help with this form 2

[Javy1]

Hi!

I wonder if you can help fix this thing. I new to CSS and I am having this little problem in this form:

http://www.literal-latte.com/contact.html

In IE the form looks good but if I look at the form using Firefox 1.0 there is gap between the title and the fields. Do anybody knows how I can fix this?

Thanks,

Javy

 

[cLFlaVA]

I don't see the gap you're talking about...

*cLFlaVA
----------------------------
"Holy crip he's a crapple!

 

[tgreer]

Which style (please post relevant portion from style sheet) is applied to the blue contact graphic?

Check "padding" and "margin". Leaving those unset allows the browsers to apply their differing defaults, as I learned here.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[Javy1]

Here is the relevant info that may help solve the problem. Again the form looks OK in IE, but there is a gap in Firefox.


---------------------------

<style type="text/css">

body {
background-color: #F8CB18;
font: 12px "Palatino Linotype";
color: #5A698B;
}

#title {
width: 330px;
height: 26px;
color: #FFFFFF;
font: bold 11px "Palatino Linotype";
padding-top: 5px;
background: transparent url("

http://www.literal-latte.com/latpix/bg_legend.gif")

no-repeat;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}

form {
width: 335px;
}

.col1 {
text-align: right;
font: bold 11px "Palatino Linotype";
width: 135px;
height: 31px;
color: #347AB7;
margin: 0;
float: left;
margin-right: 2px;
background: url(

http://www.literal-latte.com/latpix/bg_label.gif)

no-repeat;
}

.col2 {
width: 195px;
height: 31px;
display: block;
float: left;
margin: 0;
background: url(

http://www.literal-latte.com/latpix/bg_textfield.gif)

no-repeat;
}

.col2comment {
width: 195px;
height: 98px;
margin: 0;
display: block;
float: left;
background: url(

http://www.literal-latte.com/latpix/bg_textarea.gif)

no-repeat;
}

.col1comment {
text-align: right;
width: 135px;
font: bold 11px "Palatino Linotype";
color: #347AB7;
height: 98px;
float: left;
display: block;
margin-right: 2px;
background: url(

http://www.literal-latte.com/latpix/bg_label_comment.gif)

no-repeat;
}

div.row {
clear: both;
width: 335px;
}

.submit {
height: 29px;
width: 330px;
background: url(

http://www.literal-latte.com/latpix/bg_submit.gif)

no-repeat;
padding-top: 5px;
clear: both;
}

.input {
background-color: #FFFFFF;
font: 11px "Palatino Linotype";
color: #C43936;
margin: 4px 0 5px 8px;
padding: 2px;
border: 1px solid #C43936;
}

.textarea {
border: 1px solid #C43936;
background-color: #FFFFFF;
font: 11px "Palatino Linotype";
color: #347AB7;
margin: 4px 0 5px 8px;
}

</style>

<=====HTML=====>

<form action="/cgi-bin/formemail.cgi" method="post">
<div id="title">Contact Literal Latte</div>
<div class="row"><label class="col1">Your Name:&nbsp;&nbsp;</label>
<span class="col2"><input name="yourname" class="input" type="text" id="name" size="27" tabindex="1" /></span>
</div>
<div class="row"><label class="col1">e-mail:&nbsp;&nbsp;</label>
<span class="col2"><input name="email" class="input" type="text" id="email" size="27" tabindex="2" /></span>
<INPUT type="hidden" value="

http://www.literal-latte.com/"

name="sendpage">
<INPUT type="hidden" value="Literal Latte's Contact Email" name="subject">
<INPUT type="hidden" value="litlatte@aol.com" name="to">
<INPUT type="hidden" value="email,message" name="require">
</div>
<div class="row"><label class="col1comment">Message:&nbsp;&nbsp;</label>
<span class="col2comment"><textarea cols="27" class="textarea" rows="4" name="message" id="comment" tabindex="4" ></textarea></span>
</div>
<div align="center" class="submit"><input type="image" src="

http://www.literal-latte.com/latpix/b_send.gif"

alt="send" width="52" height="19" border="0" />
</div>
</form>

<=====HTML=====>

 

[Vragabond]

Try specifying margins for div.row. That might be the difference with IE and Mozilla (FF).

 

[ChrisHunt]

Hmmm...

I tried tracking it down using the excellent Web Developer Toolbar for Firefox, but it doesn't come up with anything - I think it may be confused by you using four stylesheets at once. What I'd suggest is disabling the pertinent rules one-by-one (change .col1 to .xcol1 in your stylesheet, etc) to see if you can isolate the problem to a particular rule.

I suspect it may be objecting to applying block type styles to a <span> tag, but that's just a guess. You could try structuring your form something like this instead. I've also seen some pretty slick forms marked up with definition lists.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[cLFlaVA]

ChrisHunt

Thanks for the excellent link (web dev. toolbar). I started using FF 1.0PR about two months ago, and, as a web developer, fell in love instantly. Now I have even more to love about FF and the bright future I hope they bring.

Star for you

*cLFlaVA
----------------------------
"Holy crip he's a crapple!

 

[chessbot]

I must second cLFlaVa's comment about the toolbar... thanks.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series