[thelist] 100% width, stupid head on
Robert Vreeland
vreeland at studioframework.com
Tue Oct 18 08:53:23 CDT 2005
Almost all browsers apply a default margin and or padding to the body
element; the amount of which varies from browser to browser. So, it is
typical to add a body style to the stylesheet of
body {margin:0px;padding:0px;}
This basically says to start rendering at pixel 0,0.
Additionally, if the image element is contained in a relatively positioned
element then absolute positioning of that image will be from the relatively
positioned container. For example:
<body style="margin:0px;padding:0px;">
<div style="width:80%;position:relative">
<img style="position:absolute;top:0px;left:0px;width:100%"
id="Img1">
</div>
<img style="position:absolute;top:0px;left:0px;width:100%" id="Img2">
</body>
Img1's width will be 100% of the div's width or 80% of the body / screen.
Img2's width will be 100% of the body / screen.
I believe, but am not sure, that to get this effect you need to explicitly
set the position style on the containing div; i.e. if the div tag above did
not have 'position:relative' in the style attribute then the image element
would be absolutely positioned off of the body element. I am sure that if
this is wrong, someone else on the list will point it out.
Hope this helps,
Robert Vreeland
-----Original Message-----
From: thelist-bounces at lists.evolt.org
[mailto:thelist-bounces at lists.evolt.org] On Behalf Of john at johnallsopp.co.uk
Sent: Tuesday, October 18, 2005 5:32 AM
To: thelist at lists.evolt.org
Subject: [thelist] 100% width, stupid head on
Hi ppl
Why won't this:
img.topImage {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 140px;
}
produce a perfect 100%?
In Firefox I've got a horizontal scroll bar with maybe 2 pixels of white
space, and in IE I've got more space.
Have I missed something, or won't this method work.
All help appreciated (I was just going to wish everyone a merry Christmas
then .. I'm listening to Christmas tunes in prep for a gig .. getting into
the spirit a little early I think :-) )
J
--
* * Please support the community that supports you. * *
http://evolt.org/help_support_evolt/
For unsubscribe and other options, including the Tip Harvester and archives
of thelist go to: http://lists.evolt.org Workers of the Web, evolt !
More information about the thelist
mailing list