View Full Version : problem with margin space
bio-TINMAN
12-15-2006, 09:24 AM
hi folks
i put an image as the background of a div tag, but then i get a left margin space . How do i remove it? i have tried margin-left:0;
im still unable to shoo away that white space. help please!
Stryker250
12-15-2006, 09:44 AM
have you made sure that your cellpadding and cellspacing is also = 0?
otherwise post your code and we can see what we can do for you;)
techietim
12-15-2006, 11:22 AM
padding-left: 0;
maybe...
bio-TINMAN
12-15-2006, 04:08 PM
hi.
heres teh code (pardon the sloppiness)
<HTML>
<head>
<style type="text/css">
/* trouble comes here */
#hello {position:absolute;top:8em;width:99%;height:17em;p adding:0;margin:0;}
/* trouble hopefully ends here */
#hello {background-image:url(2.gif); background-repeat: repeat-x;}
#yelp{background-image:url(1.gif);height:8em;width:800px;background-repeat:no-repeat;position:relative;top:4em;left:9em;}
p.title{font-family:arial;position:relative;top:19em;left:13em; width:50em;}
p.links{position:relative;top:23em;left:8em;width: 50em;}
p.footer{position:absolute;bottom:0em;font-family:arial; font-size:XX-small;left:48em;}
a:link{color:#24B8BD;font-family:arial;text-decoration:none;}
a:hover{text-decoration:underline;}
</style>
</head>
<body>
<div id="hello">
<div id="yelp">
</div>
</div>
<p class="title">Welcome</p>
<p class="links">| <a href="aboutus.html">About us</a> | <a href="jan_2007issue.html">Jan 2007 issue</a>
| <a href="archives.html">Archives</a> | <a href="sub_info.html">Subscription Information</a> | <a href="advt_info.html">Advertisement Tariff</a> | <a href="contact.html">Contact us</a> |
</p>
<p class="footer">copyright © fishing chimes 1981 - 2007 </p>
</body>
</html>
Stryker250
12-15-2006, 04:15 PM
try what tim said
#hello {position:absolute;top:8em;width:99%;height:17em;p adding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}
just a hunch...:)
bio-TINMAN
12-15-2006, 07:47 PM
hi budds.. i finally found the solution, quite simple really, we all seemed to have missed it. i added the left:0em; and it did it.
#hello
{position:absolute;left:0em;top:8em;width:100%;hei ght:17em;padding-left:0;padding-right:0;padding-top:0
;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}
but guess where the new problem arises - COMPATIBILITY! somehow the 100% in width delivers a full flow in firefox from the left to the right of the screen, but in IE somehow, the 100% isnt 100%, it shows a white space to the right now! oh! the agony, some way around?
bio-TINMAN
12-16-2006, 08:55 AM
browser compatibility sux....
i think i have found a solution, i have added the width of the image to 102% to work in IE and then i have killed the scroll bar in firefox, using {overflow:hidden;}. its worked, but i would have liked a less "brutal"method.
thanks
DragoNero
12-17-2006, 03:15 AM
<table width="100%">
<td>
(site stuff ere!)
</td>
</table>
then change all of your sizes to percentages and it should stay the smae width as the tabel... unless you have stupid banners and the like ^^
vBulletin® v3.8.4, Copyright ©2000-2010, Jelsoft Enterprises Ltd.