PDA

Click to See Complete Forum and Search --> : relative layer position - IE & FF difference

discus
10-11-2007, 05:00 PM
Hi all,

i'm trying to set some layer (which contains certain picture) to stay on a position relative to document (window), so it look the same in all resolutions - for example: 10% from left, and 80% from top.

I succeeded that by putting div layer as the first body element, outside the table:

<body>
<div style="z-index:1; position:relative; left:10%; top:80%;"><img src="under-construction.gif" width="93" height="62"></div>
<table width="100%">
<tr>
....
....

this works fine in IE, but doesn't work in Firefox.

Is there some hack?

Thanks
drhowarddrfine
10-11-2007, 07:24 PM
I'm going to assume you aren't using a doctype? Without one, IE goes into quirks mode and uses its broken box model.
discus
10-12-2007, 07:39 AM
I'm using Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
and it works fine in IE, the problem is FIREFOX.

Thanks
drhowarddrfine
10-12-2007, 08:10 AM
Haven't looked yet but never use IE as a reference for what works. If it works in IE but not Firefox then the markup is wrong. IE is old, buggy and non-standard.

Also, no one has any use in new pages for the loose/sloppy doctype. Always use strict.
drhowarddrfine
10-12-2007, 08:20 AM
And it should have been obvious to me in the first place. You position your div 80% but 80% of what? The body? But the body has no dimensions! So you can set the body to 100%, but 100% of what? HTML? How big is that? 100% of the viewport! So:
html,body{
height:100%;
width:100%;
}

IE assumes that's what you want but I have many sites where that is not what I want and I would prefer that IE not put markup in places I don't want it.

So, as always, the problem here is IE and not Firefox.
discus
10-12-2007, 02:44 PM
Hit on the target!

Many thanks
discus
10-13-2007, 06:41 PM
Huuh, :(

here is a new problem with this layer.

I can now set the layer on document relative position, but since i put it as the first body element (before table), an empty space (with dimensions of the picture inside the layer - 150px) appears. So my table starts on several cm's down the page beginning.
<style type="text/css">
<!--
html,body{
height:100%;
width:100%;
}
body {
background-color: #E9E4E0;
}
-->
</style>
</head>

<body>
<div style="z-index:2; position:relative; left:10%; top:50%;><img src="pic/underc4.gif" width="150" height="150"></div>
<table width="100%">
<tr>
<td colspan="2"><img src="pic/forwebp.jpg" width="973" height="684"></td>
...
...

How do i get rid of this gap? :(

Thanks again
drhowarddrfine
10-13-2007, 09:30 PM
One thing I forgot to mention in my first post. There is no such thing as a 'layer'. Remove that from your web vocabulary. If you mean a <div> then call it a div.
discus
10-18-2007, 07:40 PM
bump
Centauri
10-18-2007, 08:21 PM
Not sure what you are trying to do here. Relative positiong causes the element to be rendered at the offset location, but it still occupies the original position. As the div is at the start of the page, following content will be positioned below this, and the object will be rendered over top of such content. As the following content is a table, which should only contain tabular data, the graphic will hide some of that data .....

Also, as the image is the only thing inside the div, the div is not even needed - the styles can be applied direct to the image.
discus
10-19-2007, 03:15 PM
I'm trying to put the picture inside the div, on top of the big image inside the table cell. I actually can do it, but an empty space appears above this composition.

If there's another way to do it (via styles), could you please post it here.


Thanks
discus
10-19-2007, 04:38 PM
I have attached a picture of what i want to do.

Is there a way to put the dog over the wmelones, so that it looks THE SAME (with relative dimensions) on all resolutions, and of course WITHOUT any gap (bigger than 5px) between this composition and html document body - means that composition should fill the most of space of the html document.

I'm sure it's not too complicated for skilled developers. :)

Thanks again
Centauri
10-19-2007, 06:53 PM
For starters, there is no reason why the watermelon image should be in a table cell - table cells should contain tabular data..

If the watermelon image is made a background of a container, then the dog image can be put inside the container and positioned using margins and/or padding :<style type="text/css">
<!--
#container {
height: 684px;
background-image: url(pic/forwebp.jpg);
padding-top: 200px;
}
#container img {
margin-left: 100px;
}
-->
</style>
</head>

<body>
<div id="container">
<img src="pic/underc4.gif" width="150" height="150" alt=""></div>
</body>
</html>

I used top padding on the container in this example to avoid margin collapse experienced when there is no content above the container.
discus
10-20-2007, 04:22 PM
Thanks for your time. :)

I attached (zipped) html page, with redefined code according to your suggestions.

There are improvements regarding the position of the small image (the same in FF and IE), but certain problems remain.

1) You can see that Jennifer's picture has been repeated.

2) Take a look at this page on 1024x768 resolution. One can see the 'whole' Jennifer with her hand.
If you set resolution to 800x600 you'll see that a piece of the picture is missing (the hand).
(My graphic card can't produce resolution higher than 1024)

3) Also the bottles (because of absolute dimensions) on higher resolutions looks smaller.

What i want to achieve is this composition looking absolutely the same regardless of applied resolution and without repeating the background image.

Thanks a lot
Centauri
10-20-2007, 07:24 PM
You will not get it to look the "same" regardless of resolution. Think of the computer screen as a window through which you are looking at document - if the window is smaller, you see less of the document. Higher resolution means a physically larger screen is being used, and users expect to see more of the document on a bigger screen, not see the same thing but larger (not like television).

When using a larger background image such as this one, you have to compromise somewhat. 800x600 resolution normally equates to the viewer having a 15" monitor, and the usage of 15" monitors is getting low these days - so the need for horizontal scrolling at these sizes is not so much of an issue any more. On larger screens, it is common to centre the whole site so it looks better, and an interesting repeated background on the body can detract somewhat from lack of width.

If the container is set to a specific width (to match the background), it can be centered horizontally and the background set to not repeat :#container {
height: 684px;
background-image: url(pic/Jennifer.jpg);
padding-top: 400px;
background-repeat: no-repeat;
width: 973px;
margin: 0 auto;
}
JPnyc
10-20-2007, 09:35 PM
You realize you can use % values with absolute positioning also.
discus
10-21-2007, 11:12 AM
OK, after applying Centauri's new code the situation is better again.

Now the whole big image is visible without repeating, and since i've applied JPnyc's suggestion (i set dimensions of the small image in percentages of the container) small image keeps its ratio with the big one as the resolution is changed.

But - there is again a huge empty space bellow the composition! :mad:

Is there a force to drive that stubborn empty space away?
Centauri
10-21-2007, 11:28 AM
The top padding applied to the container (to space the small image) is added to the set height of the container. Therefore, to bring the total height of the container to 684px, the 400px padding must be subtracted from it :#container {
height: 284px;
background-image: url(pic/Jennifer.jpg);
padding-top: 400px;
background-repeat: no-repeat;
width: 973px;
margin: 0 auto;
}
discus
10-21-2007, 06:03 PM
Yes that's it. Thanks a lot. ;)

However, although i'm unable to see it at 1280 resolution, i know there will be an empty space on the right side and below the image at that resolution.

19" monitors are not so rare today, so i must consider this issue as well.

I wouldn't like to be annoying, but i've continued to experiment with purely relative layout.:o
(Sorry but simply can't see why it wouldn't be possible in html (one thing size in percentage of another thing, this one again in percentage of another one, and so on in a nested structure ending with the html body(100%).)

And i'm almost there. Please take a look at my purely relative code in modified page index2.html (Test2 attachment).

The only thing i can't handle yet is the position of the small image, which i cannot pull up with "top:-10%".

Any suggestions about that?

Thanks
discus
10-21-2007, 06:54 PM
A new improvement! :D

By adding "position:relative" in the divs, i've got a full control over small pic.

Remaining issues:
Some empty space on the right of the big image.
Bad look in IE

I have attached a new Test3.zip with the newest index3.html
Centauri
10-21-2007, 10:33 PM
Resizing the images in the browser like this causes problems as you have experienced. The difference between IE and FF is due to your nested 100% height elements - A 100% height child element should only be the height of its parent if that parent has a defined height - a % height here is not a defined height. FF is displaying this correctly. If you want to resize the images, only set the width to the % - then the image will retain its proportions and not stretch out. On larger resolutions, the image quality suffers badly, which is why ity is better to leave it at its original size as I have indicated in my previous code. Stretching things like this also goes against the expectation that a larger window will allow more of the site to be seen....

An example of stretchy background can be seen here (http://www.cssplay.co.uk/layouts/background.html).
discus
10-22-2007, 12:19 PM
Thanks. I fixed the squeezed image in IE by removing height="100%". :)

I fully understand all of your arguments, but still i'm so close to achieve pure relative code so that i cannot give it up so easy.

Is there a way (Test3.zip) to pull the small image up (in relative sense), and to fix its offset position in IE?

Thanks again
discus
10-24-2007, 06:19 PM
ping