[thelist] 100% width, stupid head on

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 ! 