PDA

View Full Version : Problem with positioning in IE6

NealM
November 9th, 2007, 10:11 AM
Hi Guys

I have the following code :

<div style="position:absolute; bottom:50px; right:20px; z-index:22><span class="price4">TEXT, TEXT, TEXT, TEXT, TEXT</span></div>

which in IE7, Firefox & Opera places the "text" at the lower right hand corner of the screen (which is what I expected / wanted).

However in IE6 the text appears in the top right hand corner ! ! ! !

Can anyone advise WHY this is happening and (more importantly) provide a solution to this. . .

Incidentally . . ..I also have pictures on the same page that are positioned using the same method and they appear where they are supposed to ! ! ! ! ! ! ! !. . .
rockboy
November 9th, 2007, 09:22 PM
I pasted your code into a blank html file and it works ok in IE6 and Firefox. Maybe there's a conflict with something else on the page such as an open tag. Have you tried validating the html and css?
NealM
November 12th, 2007, 09:02 PM
Thanks for the reply. . . . .I have included below the full page. If you've got the time to have a look at this I'd be very grateful . .


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ENSPEC Technology</title>
<script src="resizing_background.js">
</script>
<style>
body { overflow:auto; }
</style>
<link rel=StyleSheet href="corporatestyle.css" type="text/css">

</head>
<body onLoad="rbInit()" onResize="rbResize()">
<script>
// "true" means "keep the proportions of the original image."
// If you pass "false" the image fills the whole window,
// even if it must be distorted to do so. Experiment.
rbOpen(false);
</script>

<DIV style="position:absolute; top:104px; left:100px; width:150px; height:105px; z-index:1;">
<A class=a HREF="worn_pinion.htm" NAME="#worn_cog" TITLE="Worn Pinion Gear click to view" alt="Worn Pinion Gear click to view">
<IMG SRC="picts/worn_pinion_gear.jpg" WIDTH=150 HEIGHT=105 BORDER=0>
</A>
</DIV>
<DIV style="position:absolute; top:350px; left:180px; z-index:1;">
<A class=a HREF="pump_impellor.htm" TITLE="Pump Impellor Rouging click to view" alt="Pump Impellor Rouging click to view">
<IMG SRC="picts/pump_impellor.jpg" WIDTH=150 HEIGHT=105 BORDER=0>
</A>
</DIV>

<DIV style="position:absolute; top:285px; left:300px; z-index:1;">
<A class=a HREF="fatigue_crack.htm" TITLE="Fatigue Cracking in a Stainless Steel Weld click to view" alt="Fatigue Cracking in a Stainless Steel Weld click to view">
<IMG SRC="picts/fatigue_crack.jpg" WIDTH=200 HEIGHT=140 BORDER=0>
</A>
</DIV>
<DIV style="position:absolute; top:190px; left:400px; z-index:1;">
<A class=a HREF="crevice_corrosion.htm" TITLE="Crevice Corrosion in a Firetube Boiler click to view" alt="Crevice Corrosion in a Firetube Boiler click to view">
<IMG SRC="picts\crevice_corrosion.jpg" WIDTH=210 HEIGHT=120 BORDER=0>
</A>
</DIV>
<DIV style="position:absolute; top:130px; left:590px; z-index:1;">
<A class=a HREF="veg_oil.htm" TITLE="Section of a Vegetable Oil Deodoriser Column click to view" alt="Section of a Vegetable Oil Deodoriser Column click to view">
<IMG SRC="picts/veg_oil.jpg" WIDTH=170 HEIGHT=110 BORDER=0>
</A>
</DIV>

<DIV style="position:absolute; top:100px; left:750px; z-index:1;">
<A class=a HREF="surface_rough.htm" TITLE="Surface Roughness Measurement on a Vessel Dished End click to view" alt="Surface Roughness Measurement on a Vessel Dished End click to view">
<IMG SRC="picts/surface_rough.jpg" WIDTH=120 HEIGHT=85 BORDER=0>
</A>
</DIV>


<div align="center">
<br>
<span class="price3">
THE SOLUTION PROVIDERS<BR>FOR MANUFACTURING INDUSTRIES</span></div>


<div style="position:fixed; bottom:50px; right:20px; z-index:2;">
<span class="price4">For advice on technical problems</span></div>
<div style="position:fixed; bottom:35px; right:20px; z-index:2;">
<span class="price4">and other matters relating to plant reliability</span></div>

<div style="position:fixed; bottom:20px; right:20px; z-index:2;">
<span class="price4">contact ENSPEC Technology on +44 (0)151 334 3821 or <a href=mailto:helpdesk@enspectechnology.com">Email Us</a></span></div>

<script>
rbClose("picts/drainage.jpg");
</script>
</body>
</html>
rockboy
November 12th, 2007, 11:43 PM
Sometimes the way IE works is a mystery. I think your problem has something to do with positioning relative to a parent or something like that. I don't know. ;)

It works in IE6 if you change the positioning from "fixed" to "absolute". I rewrote the code slightly to simplify it and make a single block. (I also added a missing quote mark in your email link.)
<!-- changed between here... -->
<div style="position:absolute; bottom:50px; right:20px; z-index:2; text-align:right;">
<span class="price4">For advice on technical problems<br>
and other matters relating to plant reliability<br>
contact ENSPEC Technology on +44 (0)151 334 3821 or <a href="mailto:helpdesk@enspectechnology.com">Email Us</a></span>
</div>
<!-- ...and here -->
FYI the alt text should be in the img tags not your anchor tags (links). You can put the title text in either the anchor or img tags but if you put the title text in the img tags then it's visible in both IE and Firefox. Alt text in img tags is not visible in Firefox but title text is.
NealM
November 13th, 2007, 12:05 PM
Many thanks for your reply.

It still didn't work for me . . . BUT along with your comments that it did work for you; lead me to believe that this must be related to another file referenced within the code.

When I take out this code :

<script src="resizing_background.js">
</script>
.
.
.
.
<body onLoad="rbInit()" onResize="rbResize()">
<script>
// "true" means "keep the proportions of the original image."
// If you pass "false" the image fills the whole window,
// even if it must be distorted to do so. Experiment.
rbOpen(false);
</script>

it works ! ! ! the lettering appears at bottom right as it is supposed to.

(The above was some code I picked up from the internet for resizing an image to fill the screen regardless of screen resolution.)

Many thanks for this. . . .. . I now just need to ask if you know of any way that I can make the background image . . . . <img src="picts/drainage"> resize automatically to fill the entire screen regardless of screen resolution.
NealM
November 13th, 2007, 02:37 PM
Just thought I'd let you know that this issue is resolved. I just had to move a bit of the script to AFTER the "Div" tags and it now works perfectly.

Thanks for your help :D :D