...

View Full Version : Margin problems in Firefox (IE 7 displays perfectly)... HELP?



stickfigure
10-15-2007, 03:48 PM
Hi, I am working on a page in which my search form within a div doesn't seem to move the way I want it to with margins in Firefox...

splatterbyte.freehostia.com


Here id the CSS ( I think the problem area is within #tithead or #searchform) :



body {
background: url(images/airgrass.jpg);
text-align: center;
margin: 0px;
padding: 0px;
overflow: auto;
font: 12px/15px Arial, Helvetica, sans-serif;
}

.site {
width:800px;
margin-right: auto;
margin-left: auto;
position: relative;
text-align: left;
}

#headtop {
background: url(images/headtop.jpg);
width:800px;
height:37px;
}

#tithead {
background: url(images/tithead.jpg);
width:800px;
height:65px;
}

#titwrap {
width:800px;
height:214px;
}

#titleft {
background: url(images/titleft.jpg);
float:left;
width:47px;
height:214px;
}

#titcenter {
background: url(images/titcenter.jpg);
float:left;
width:701px;
height:214px;
}

#titright {
background: url(images/titright.jpg);
float:right;
width:52px;
height:214px;
}

#linkwrap {
width:800px;
height:53px;
}

#linkleft {
background: url(images/linkleft.jpg);
float:left;
width:47px;
height:53px;
}

#link1 {
background: url(images/link1_.jpg);
float:left;
width:167px;
height:53px;
}

a.link1 {
background:url(images/link1.jpg);
width: 167px;
height: 53px;
display:block;
}
a.link1:hover {
background:url(images/link1_.jpg);
width: 167px;
height: 53px;
display:block;
}

#link2 {
background: url(images/link2_.jpg);
float:left;
width:160px;
height:53px;
}

a.link2 {
background:url(images/link2.jpg);
width: 160px;
height: 53px;
display:block;
}
a.link2:hover {
background:url(images/link2_.jpg);
width: 160px;
height: 53px;
display:block;
}

#link3 {
background: url(images/link3_.jpg);
float:left;
width:197px;
height:53px;
}

a.link3 {
background:url(images/link3.jpg);
width: 197px;
height: 53px;
display:block;
}
a.link3:hover {
background:url(images/link3_.jpg);
width: 197px;
height: 53px;
display:block;
}

#link4 {
background: url(images/link4_.jpg);
float:left;
width:177px;
height:53px;
}

a.link4 {
background:url(images/link4.jpg);
width: 177px;
height: 53px;
display:block;
}
a.link4:hover {
background:url(images/link4_.jpg);
width: 177px;
height: 53px;
display:block;
}

#linkright {
background: url(images/linkright.jpg);
float:right;
width:52px;
height:53px;
}

#bodtop {
background: url(images/bodtop.jpg);
width:800px;
height:19px;
}

#bodbac {
background: url(images/bodbac.jpg);
width:800px;
overflow: auto;
}

.bodwrap {
width:669px;
height:auto;
margin: 10px 0px 10px 63px;
color:#666666;
text-align: justify;
}

#bodbot {
background: url(images/bodbot.jpg);
width:800px;
height:34px;
}

#footbac {
background: url(images/footbac.jpg);
width:800px;
height:76px;
}

#footbot {
background: url(images/footbot.jpg);
width:800px;
height:53px;
}

#footspc {
background: url(images/footspc.jpg);
width:800px;
height:25px;
}
#icons {
margin: 40px 0px 0px 436px;
width: 74px;
height: 21px;
float: left;
}
a.icon1 {
background: url(images/icon1.jpg);
width: 18px;
height: 21px;
display: block;
float: left;
}
a.icon1:hover {
background: url(images/icon1_.jpg);
width: 18px;
height: 21px;
display: block;
float: left;
}
a.icon2 {
background: url(images/icon2.jpg);
width: 24px;
height: 21px;
display: block;
float: left;
}
a.icon2:hover {
background: url(images/icon2_.jpg);
width: 24px;
height: 21px;
display: block;
float: left;
}
a.icon3 {
background: url(images/icon3.jpg);
width: 24px;
height: 21px;
display: block;
float: left;
}
a.icon3:hover {
background: url(images/icon3_.jpg);
width: 24px;
height: 21px;
display: block;
float: left;
}
#searchform {
background: url(images/icon4.jpg) left no-repeat ;
padding: 0px 0px 0px 37px;
margin: 40px 0px 0px 500px;
width: auto;
height: auto;
display: block;
}

.searchfield {
background: url(images/searchbac.jpg) no-repeat;
border: 0px;
color: #3D3E12;
padding: 3px 3px 1px 3px;
font-size: 12px;
width: 132px;
height: 21px;
float: left;
}

.submit {
background: url(images/searchbut.jpg) no-repeat;
width: 65px;
height: 21px;
border: 0px;
margin-left: 5px;
text-indent: -9999px;
cursor: pointer;
}

.submit:hover {
background: url(images/searchbut_.jpg) no-repeat;
width: 65px;
height: 21px;
border: 0px;
margin-left: 5px;
cursor: pointer;
}

/* COMPOSITION */

h1 {
text-transform: uppercase;
font: 18px/20px "Times New Roman", Times, serif;
font-weight: bold;
letter-spacing: 1px;
color: #3D3E12;
padding: 10px 0px 0px 20px;
margin: 0px
width: 669px;
height: 40px;
background: url(images/h1bac.jpg) no-repeat;
}

p {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}


And here is the HTML:



<div class="site">

<div id="tithead">
<div id="icons">
<a class="icon1" title="Go Back To Home" href="#"></a>
<a class="icon2" title="Bookmark This Page" href="#"></a>
<a class="icon3" title="Print This Page" href="#"></a>
</div>
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input class="searchfield" type="text" name="s" value="" title="Enter keyword to search" />
<input class="submit" type="submit" name="submit" value="" title="Click to search archives" />
</form>
</div>
<div id="titwrap">
<div id="titleft"></div>
<div id="titcenter">
</div>
<div id="titright"></div>
</div>
<div id="linkwrap">
<div id="linkleft"></div>
<div id="link1">
<a class="link1" href="#"></a>
</div>
<div id="link2">
<a class="link2" href="#"></a>
</div>
<div id="link3">
<a class="link3" href="#"></a>
</div>
<div id="link4">
<a class="link4" href="#"></a>
</div>
<div id="linkright"></div>
</div>
<div id="bodtop"></div>
<div id="bodbac">
<div class="bodwrap">
<h1>fresh stuff</h1>
<p>

Your troubleshooting options are fundamentally different when a user is in a domain environment versus a workgroup environment. Therefore, one of your first tasks when you troubleshoot any desktop management issue is to determine the userís environment.Your troubleshooting options are fundamentally different when a user is in a domain environment versus a workgroup environment. Therefore, one of your first tasks when you troubleshoot any desktop management issue is to determine the userís environment.Your troubleshooting options are fundamentally different when a user is in a domain environment versus a workgroup environment. Therefore, one of your first tasks when you troubleshoot any desktop management issue is to determine the userís environment.Your troubleshooting options are fundamentally different when a user is in a domain environment versus a workgroup environment. Therefore, one of your first tasks when you troubleshoot any desktop management issue is to determine the userís environment.
</p>
</div>
</div>
<div id="bodbot"></div>
<div id="footbac">

</div>
<div id="footbot"></div>
<div id="footspc">

</div>
</div>


I can't seem to figure out why the #icon div positions with margins the way I want, but the #searchform div doesn't. I even tried putting the whole form into another div and settings it's display property to block, but no change. Please help me! Thank you in advance... Btw, please forgive me if I made a stuff mistake, since Im more of a graphic designer than a web developer (just getting started :) )

Fang
10-15-2007, 06:47 PM
The margin-top is used to position the background image in Fx, use padding to 'move' the form.

#searchform {
background: url(images/icon4.jpg) left bottom no-repeat ;
padding: 40px 0px 0px 37px;
margin: 0px 0px 0px 500px;
width: auto;
height: auto;
display: block;
}

stickfigure
10-15-2007, 11:45 PM
Well, I did try this before, but the background image on the search form wasn't positioned the way I wanted so I thought it wasn't doing anything. This time I positioned the image to the bottom, so THANK YOU for making me try this again and rethinking it! IT WORKS! Post closed!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum