Forum Moderators: not2easy
I'm 1 step away from uploading a site for a client and I'm having an issue. I would greatly appreciate some help.
I am nesting a quick contact form inside of my right column divs. The form renders perfect in EI, but it has a 30px margin in FireFox for some reason. I'll try to post the code that will help, but I'm a newbie :(
#contentfloatholder {
float: left;
width: 100%;
position: relative;
}
#contentfloatholder:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
#centerpad {
margin: 0 195px 0 185px;
}
#center {
color: #000;
float: left;
width: 100%;
margin-right: -95%;
}
#right {
float:right;
width: 187px;
margin-top:8px;
}
#case {
background: url(attorney-images/contact-attorney-BG.gif);
background-repeat: no-repeat;
width: 187px;
height: 206px;
}
#case1 {
width: 160px;
height: 130px;
margin-top: 30px;
margin-left: 6px;
line-height: 0.5;
}
---HTML is:
<div id="right">
<div id="case">
<div id="case1">
<FORM
hope this makes sense. i'm not the best at coding. The "right" DIV holds all elements in a long column. "case" holds a background for the form, and "case1" holds the form elements. it seems like the "case1" margin is being applied to "case" in FireFox. Thats the effect anyway, with "case" and "case1" on top of each other, flush at the top.
Sorry for long annoying post. Hope someone can help! Thanks.
Just checking: do you have a proper doctype specified? It's possible the result you're getting from IE is because it's in quirks mode.
Since you didn't post all the HTML, I can't test this myself and see what problems there might be.
If you do post all the HTML, post all the RELEVANT HTML. Enough for us to copy and paste and see what the problem is, but something that has the Bare minimum stuff, so we don't get confused or complicated with all the code.
It's important the code is given because you have width:100%. That needs to be inheireted by a parent which is positioned, or the document root.
Also because of this width:100%, I reccomend you set most things (if not everything) to border:0;margin:0;padding:0 at the top of the CSS, so that the widths don't go over 100% (which is what will happen if you have any of those). Any case where you specify a margin, padding or border will remain as you said, because of the order of operations (latest setting is what's used)
