Can't get CSS to align in FF

dombrorj · January 10, 2012

I have a couple form fields wrapped in divs that I'm trying to position over an image by using absolute positioning. Everything lines up perfectly well in all browsers I've tested except for FF. I've tested IE, Chrome, Safari and Opera.

I've probably spend 2 full days now trying different things, and I'm in the exact same place as where I started. I'm sure whatever I'm missing is brain-dead simple and I'll smack myself in the head, but I can't seem to figure it out. Hoping a fresh pair of eyes might help.

The issue is very minor in fact... the divs that I'm trying to position are just about 3 pixels above where they need to be and just needs to be shifted down in FF only.

Here's the CSS and HTML code. The issue is with the forms that are wrapped in the #form1 div (#zip, #buttonid, #extraform1, #extraform2 divs).

Note that the values in extraform1 and extraform2 are not actually submitted. They're just there for place holders.

Thanks in advance to anyone that can help me out.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
p, ul {
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
padding-top: 0;
padding-bottom: 0;
padding-left: 30px;
padding-right: 25px;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
}
ul {
margin-left:50px;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
#topcontainer {
background-image: url(images/bg.png);
background-repeat: repeat-x;
background-color: #ececec;
}
#header {
background-image: url(images/header.png);
height: 162px;
width: 821px;
margin-right: auto;
margin-left: auto;
}
#form1 {
float: right;
height: 344px;
width: 311px;
background-image: url(images/form1.png);
background-repeat: no-repeat;
margin-bottom: 10px;
margin-right: -34px;
margin-top: 30px;
margin-left: 20px;
}
#zip {
height: 24px;
width: 85px;
position: absolute;
right: 6px;
top: 196px;
border: thin solid #09C;
}
#zip input {
width: 85px;
height: 24px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000;
text-align: center;
font-weight: bold;
top: 0px;
}
#buttonid {
background-color: transparent;
position: absolute;
cursor: pointer;
border: none;
height: 95px;
top: 360px;
right: 13px;
width: 220px;
}
#extraform1 {
position: absolute;
top: 250px;
line-height: 30px;
left: 697px;
}
#extraform2 {
position: absolute;
top: 305px;
line-height: 30px;
left: 697px;
}
select{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#bodycopy {
background-image: url(images/center_repeater.png);
width: 821px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#footerimg {
background-image: url(images/footer.png);
background-repeat: no-repeat;
height: 19px;
width: 821px;
margin-right: auto;
margin-left: auto;
}
#footercontainer {
background-color: #192941;
}
#footercontainer p, #footercontainer a{
color: #CCC;
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: center;
font-size: 12px;
text-decoration: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="topcontainer">
<div id="header"></div>

<div id="bodycopy">
    <div id="bodytop"></div>
        <p class="headline" align="center">Headline</p>
	<p class="subhead" align="center">Subhead</p>        
<div id="form1">      
	<div id="zip"><form name="formname" action="submit.html" method="get"><input name="inputname" id="formid" type="text" style="background:none; border:none" tabindex="1" /></div>
                <input type="submit" name="search" id="buttonid" value="" tabindex="4" /></form>
                
	<div id="extraform1">
	  <p>
		<select name="Extra1" tabindex="2">
		  <option>0 - 25</option>
		  <option>25 - 50</option>
		  <option>50 - 100</option>
		  <option>100+</option>
		</select>
	  </p>
	</div>

	<div id="extraform2">
	  <p>
		<select name="Extra1" tabindex="3">
		  <option>Never</option>
		  <option>1-3 years</option>
		  <option>4-9 years</option>
		  <option>Over 10</option>
		</select>
	  </p>
	</div>
</div>
  
<p>BODY CONTENT</p>
</div> 

<div id="footerimg"></div>

</div>

<div id="footercontainer">
<p>©2011 | <a href="#">About</a> | <a href="#">Contact / FAQs</a> | <a href="#">Privacy Policy</a> | <a href="#">Disclaimer</a></p>
</div>
</body>
</html>

melting_dog · January 11, 2012

Maybe try a reset all:

* {

margin: 0;

padding: 0;

}

at the very start of your css.

Might be a long shot though

dombrorj · January 11, 2012

Maybe try a reset all:

* {

margin: 0;

padding: 0;

}

at the very start of your css.

Might be a long shot though

Thought that would have done the trick too, but not so much in this case. What I finally did to get it to work was change the form design from a background image to a html img src and positioned it by floating right with some margin/padding. I could then wrap that in a div, set it to relative positioning, and get my fields to line up correctly (with the fields inside the div for the form image).

Not sure why it worked this way and not the other, but it works.

Sign In

Can't get CSS to align in FF

Recommended Posts

dombrorj

Link to comment

Share on other sites

melting_dog

Link to comment

Share on other sites

dombrorj

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information