Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Margin problems in Firefox (IE 7 displays perfectly)... HELP?

    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) :

    Code:
    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:

    Code:
    <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 )

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    The margin-top is used to position the background image in Fx, use padding to 'move' the form.
    Code:
    #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;
    	}

  • #3
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •