Re: [WSG] Css fluid but accurate positioning
Sorry to seemingly use this group to have a conversation with myself but I have been working on my problem and floated the image within the wrapper and then used relative positioning! Is this a valid method? The site works in IE for PC and Safari and Firefox for Mac. In Mac IE, though, the relative positioning is completely ignored. Why is that? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Css fluid but accurate positioning
BTW the floated page is here: http://www.janelehrer.co.uk/uwish1/girls.html On 05/10/05, Adam Morris [EMAIL PROTECTED] wrote: Sorry to seemingly use this group to have a conversation with myself but I have been working on my problem and floated the image within the wrapper and then used relative positioning! Is this a valid method? The site works in IE for PC and Safari and Firefox for Mac. In Mac IE, though, the relative positioning is completely ignored. Why is that? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Css fluid but accurate positioning
Adam Morris wrote:
Is there a way to accurately and seamlessly position this image over
the background?
http://www.janelehrer.co.uk/uwish/girls.html
.tornpic {
width:350px;
height:316px;
float: right;
margin: -113px -24px 0 0;
background: url(tornpic0.jpg) no-repeat;
position: relative;
}
That's pulling the float into position by its margins. More robust and
cross-browser stable than 'rel-pos' and achieving the same. Note that
I've added 'position: relative;' anyway, in order to fix a bug in IE/win.
IE/Mac will position the image correctly (like the other browsers).
However, there's a lot going on on the elements below, so neither IE/win
nor IE/Mac are lining up the text all that well.
Delete 'width: xxx;' on #content and .contenttext p, and add 'padding: 0
30px 0 0;' on #content. That'll fix text line-up in IE/win, and partly
also in IE/Mac.
Georg
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Css fluid but accurate positioning
That's great! Using margins instead of relative positioning has placed
the image in IE Mac too!
What is this bug in IE/Win that you need position: relative; for?
On 05/10/05, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Adam Morris wrote:
Is there a way to accurately and seamlessly position this image over
the background?
http://www.janelehrer.co.uk/uwish/girls.html
.tornpic {
width:350px;
height:316px;
float: right;
margin: -113px -24px 0 0;
background: url(tornpic0.jpg) no-repeat;
position: relative;
}
That's pulling the float into position by its margins. More robust and
cross-browser stable than 'rel-pos' and achieving the same. Note that
I've added 'position: relative;' anyway, in order to fix a bug in IE/win.
IE/Mac will position the image correctly (like the other browsers).
However, there's a lot going on on the elements below, so neither IE/win
nor IE/Mac are lining up the text all that well.
Delete 'width: xxx;' on #content and .contenttext p, and add 'padding: 0
30px 0 0;' on #content. That'll fix text line-up in IE/win, and partly
also in IE/Mac.
Georg
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Css fluid but accurate positioning
Adam Morris wrote: What is this bug in IE/Win that you need position: relative; for? Parts of the float that's overflowing the outer container when pulled like this, will become invisible. -- http://www.gunlaug.no ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Css fluid but accurate positioning
If all heck is breaking loose on your floated objects in IE. Add position:relative and it may cure the problem. Sure, it is better to break it all down and try a more bullet-proof design. But sometimes its better to just go with the quick fix. Ted -Original Message- Adam Morris wrote: What is this bug in IE/Win that you need position: relative; for? Parts of the float that's overflowing the outer container when pulled like this, will become invisible. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
