7 replies [Last post]
engxladso
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-10-31
Posts: 12
Points: 0

engxladso welcome to the forum, but could we ask you not to post in other peoples threads it's slightly bad manners and can be confusing as to whom we are addressing replies.

Hugo said
"A number of points worry me about the statements that you are making; you say that you Must use absolute positioning, why? and that problems only occur with IE and external stylesheets (not sure what's happening there but it doesn't sound right, can you confirm that your using a correct DocType?) and that your being told not to use absolute because of a bug! what bug? and what workaround are you looking for? the advice being given is that to use absolute positioning one must understand it properly.

It sounds as though your having problems in which case it would perhaps be best to open a new thread specific to the problems that you are experiencing.

Hugo."

Hugo,

Apologies for my rookie faux pas.

To answer your questions Hugo:

doctype is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

This website has been developed with ms visual studio .net.

The problem I am having only occurs in IE. If it does occur on a specific page in IE then if I hit refresh the problem no longer occurs.

I have absolutely positioned elements on every page. Three pages are fine, the rest are not, but the rest are all based on one page which was copied and pasted.

I have a centered container containing 2 Iframes, one for the header and one for the body (the source of which is variable). On the pages in which there is a problem what happens is that if I resize by dragging the bottom right corner of the page to shrink or expand the page the header iframe moves as one would expect despite the fact that all its elements are absolutey positioned but the variable iframe for the body stays still.

The only difference I can see between the pages that move normally and those that remain static on resize is that the latter contain multiple divs that are all absolutely positioned on top of one another. I use javascript to hide all of these blocks except the one selected by clicking a button on a vertical submenu. the reason for doing it like this is that the customer doesn't want the site users to have to scroll down to get to all the page info.

Another way I could do this is to swap innerText, but I suspect that this wouldn't fix the resize problem, unless IE is objecting to the existance of multiple divs occupying the same space.

I hope this makes things clearer.

Adso

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 47 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

absolute positioning and page resize problems

Adso

IS that all your doctype, does it not have a second line, like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

Without the dtd bit, it won't work.

Trevor

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

absolute positioning and page resize problems

I'll step in on this.

Your DTD is incomplete, causing IE to follow even fewer rules than usual. See http://www.alistapart.com/articles/doctype/ for the lowdown.

It is a Good Thing® to use a strict[1] DTD on new documents. There is no sane reason to use deprecated tags or attributes, which a loose DTD allows.

Can you give us a live link to the offending page? It would help us to see what's happening.

cheers,

gary

[1] To use (i)frames, use the frameset DTD. (i)frames are deprecated and are better not used. Server side includes will likely do what you're trying to accomplish.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

engxladso
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-10-31
Posts: 12
Points: 0

absolute positioning and page resize problems

kk5st wrote:
I'll step in on this.

Your DTD is incomplete, causing IE to follow even fewer rules than usual. See http://www.alistapart.com/articles/doctype/ for the lowdown.

It is a Good Thing® to use a strict[1] DTD on new documents. There is no sane reason to use deprecated tags or attributes, which a loose DTD allows.

Can you give us a live link to the offending page? It would help us to see what's happening.

cheers,

gary

[1] To use (i)frames, use the frameset DTD. (i)frames are deprecated and are better not used. Server side includes will likely do what you're trying to accomplish.

You can find the test location for the site here:

http://www.sierrawebdesign.co.uk/cachet/index.htm

The first page works fine.

If you click on news and then resize it you will see the problem.

Thanks guys,
Adso

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 47 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

absolute positioning and page resize problems

Hi

Yes, your doctype is incomplete.

But that isn't causing the problems.

It is the absolute postioning of divs.

You have the page content centered vertically and horizontally, using the AP divs.

There are ways to do this centering via css, just search this site for them (terms: vertical horizontal centering)

Only the outer div needs AP, the inner ones need position:relative and then laying out normally, where two are on one 'row' use floats.

Trevor

engxladso
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-10-31
Posts: 12
Points: 0

absolute positioning and page resize problems

ClevaTreva wrote:
Hi

Yes, your doctype is incomplete.

But that isn't causing the problems.

It is the absolute postioning of divs.

You have the page content centered vertically and horizontally, using the AP divs.

There are ways to do this centering via css, just search this site for them (terms: vertical horizontal centering)

Only the outer div needs AP, the inner ones need position:relative and then laying out normally, where two are on one 'row' use floats.
Trevor

Thanks for the reply trevor.

I have found that the incomplete doctype did cause part of the problem. When I remedied that, I just got different problems in IE:
Before refreshing, on resize the lower iframe moves properly but gradually gets covered by the background of the main div (ie. outside the iframe), after refreshing this doesn't happen but the lower iframe moves horizontally at a different rate to the upper iframe. Pretty sure they're the same width.

These I guess I can fix by not using iframes, but this means basically rewriting the site since I was using the unchanging header to store state info in hidden input elements.

I have attempted to remove all my absolute positioning from my news page, but my initial attempts to replace absolute with relative have resulted in my main left, right and center blocks distributing themselves apparently randomly around the page. Unfortunately these repositionings are not consistent between IE and firefox.

Any hints here would be greatly appreciated.

Thanks,
Adso

I enclose the rewritten news page code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>newstest</title>
<style type="text/css">

.TestBody2TextBlock
{
border-right: silver 1px;
padding-right: 0px;
border-top: white 1px;
padding-left: 10px;
text-justify: inter-word;
font-size: 11px;
left: 150px;
padding-bottom: 0px;
vertical-align: baseline;
border-left: silver 1px;
width: 270px;
color: gray;
line-height: 17px;
padding-top: 0px;
border-bottom: silver 1px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
position: relative;
top: 0px;
height: 450px;
background-color: white;
text-align: justify;
display:inline;
}

.TestleftBlock
{
border-right: white 1px solid;
background-position: center top;
left: -10px;
border-left: white 1px solid;
width: 150px;
background-repeat: no-repeat;
position: relative;
top: -10px;
height: 600px;
background-color: gainsboro;
display:inline;
}
.TestrightBlock
{
border-right: white 1px solid;
background-repeat: no-repeat;
background-color:white;
LEFT: 220px;
WIDTH: 170px;
POSITION: relative;
TOP: 25px;
HEIGHT: 600px;
display:inline;
}
.TestArticleBlock
{
background-color:transparent;
LEFT: 0px;
POSITION: relative;
TOP: 0px;
width:270px;
line-height:17px;
}
.TestsubMenu
{
border-top: black 1px solid;
font-weight: 300;
font-size: 11px;
left: 0px;
top: 0px;
width: 148px;
color: navy;
text-indent: 10px;
line-height: 20px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
position: relative;
height: 23px;
background-color: gainsboro;
text-align: left;
cursor: pointer;
display:block;
}
.Testfooter
{
border-right: white 1px solid;
border-top: silver 1px solid;
font-size: xx-small;
left: -10px;
vertical-align: baseline;
border-left: white 1px solid;
width: 690px;
color: silver;
line-height: 30px;
border-bottom: white 1px solid;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
letter-spacing: normal;
position: relative;
top: 410px;
height: 30px;
background-color: white;
text-align: center;
padding 0;
margin 0;
}

</style>


<script language="javascript">
<!--
//debugger

function newPage(page)
{
if(page=='ironing')
{
window.parent.header.document.getElementById("pageBlock").value = 'block3';
window.parent.body.location.href = 'leifheit.htm';
}
if(page=='slicer')
{
window.parent.header.document.getElementById("pageBlock").value = 'block4';
window.parent.body.location.href = 'leifheit.htm';
}
if(page=='crusher')
{
window.parent.header.document.getElementById("pageBlock").value = 'block2';
window.parent.body.location.href = 'RVKB.htm';
}
if(page=='tray')
{
window.parent.header.document.getElementById("pageBlock").value = 'block3';
window.parent.body.location.href = 'RVKB.htm';
}
}
function buttonHilite(button)
{
button.style.backgroundColor = '#9999cc';
button.style.color = 'white';
}
function buttonLolite(button)
{
// button.style.backgroundColor = 'silver';
button.style.backgroundColor = 'gainsboro';
button.style.color = 'navy';
}
function getTextBlock(zindex1)
{
for(var i=1;i<=7;i++)
{
if(document.getElementById('block'+i))
{
if(document.getElementById('block'+i).id == zindex1)
{
document.getElementById('block'+i).style.display = 'block';
// document.getElementById('block'+i).style.visibility = 'visible';
}
else
{
document.getElementById('block'+i).style.display = 'none';
// document.getElementById('block'+i).style.visibility = 'hidden';
}
}
else
{
break;
}
}
if(zindex1 == 'block3'||zindex1 == 'block4')
{
document.getElementById("pageBgImg").src = 'images/backgrounds/ironing.jpg'
}
else if(zindex1 == 'block5'||zindex1 == 'block6'||zindex1 == 'block7')
{
document.getElementById("pageBgImg").src = 'images/backgrounds/martian.jpg'
}
else
{
document.getElementById("pageBgImg").src = 'images/backgrounds/grill.jpg'
}
}
function pageTitle()
{
window.parent.header.document.getElementById("header_text").innerText = 'Cachet Homewares News';
window.parent.document.getElementById("body").style.height = '450px';
window.parent.document.getElementById("body").style.width = '690px';
//window.alert(document.getElementById("container").style.left);
for(var i=1;i<=7;i++)
{
if(document.getElementById('block'+i))
{
if(document.getElementById('block'+i).id == 'block1')
{
document.getElementById('block'+i).style.display = 'block';
// document.getElementById('block'+i).style.visibility = 'visible';
}
else
{
document.getElementById('block'+i).style.display = 'none';
// document.getElementById('block'+i).style.visibility = 'hidden';
}
}
else
{
break;
}
}
}

//-->
</script>
<link rel="stylesheet" href="styles.css" type=text/css> </head>
<body onload='javascript:pageTitle();'>
<FORM id="newsForm" name="newsForm">
<DIV class="TestleftBlock">
<SPAN class="TestsubMenu" onmouseover="buttonHilite(this)" style="BORDER-TOP: gainsboro 1px solid;"
onclick="getTextBlock('block1')" onmouseout="buttonLolite(this)">Severin</SPAN>
<SPAN class="TestsubMenu" onmouseover="buttonHilite(this)" onclick="getTextBlock('block2')"
onmouseout="buttonLolite(this)">Next Trade Show</SPAN>
<SPAN class="TestsubMenu" onmouseover="buttonHilite(this)" onclick="getTextBlock('block3')"
onmouseout="buttonLolite(this)">Ironing from Leifheit</SPAN>
<SPAN class="TestsubMenu" onmouseover="buttonHilite(this)" onclick="getTextBlock('block4')"
onmouseout="buttonLolite(this)">Leifheit Vegetable Slicer</SPAN>
<SPAN class="TestsubMenu" onmouseover="buttonHilite(this)" onclick="getTextBlock('block5')"
onmouseout="buttonLolite(this)">Royal VKB Garlic Crusher</SPAN>
<SPAN class="TestsubMenu" onmouseover="buttonHilite(this)" onclick="getTextBlock('block6')"
onmouseout="buttonLolite(this)">RVKB Swing Serving Tray</SPAN>
<SPAN class="TestsubMenu" onmouseover="buttonHilite(this)" style="BORDER-BOTTOM: black 1px solid;"
onclick="getTextBlock('block7')"
onmouseout="buttonLolite(this)">Royal VKB Awards</SPAN>
</DIV>
<DIV class="TestrightBlock"><IMG id="pageBgImg" style="LEFT: 0px; POSITION: relative; TOP: 115px" src="images/backgrounds/grill.jpg">
</DIV>
<DIV class="TestBody2TextBlock">
<DIV class="TestArticleBlock" id="block1"><IMG class="outline_img" style="PADDING-BOTTOM: 10px; PADDING-TOP: 10px" height="34"
src="images/Severin_Logo.jpg" width="213"><BR>
The comprehensive range of small electrical appliances from Severin, in
Germany, is now available through Cachet. Over 200 different items, the
collection spans Coffee Makers and Kettles, through Meat Mincers, Raclette
Grills and Waffle Makers to Hair Care and Beauty Products.
<BR>
<BR>
<A href="severin.htm"><IMG height="113" src="images/rg2675_small.jpg" width="177" border="0"></A>
<BR>
<BR>
Click grill above for further information
<BR>
<BR>
</DIV>
<DIV class="TestArticleBlock" id="block2">
<H4>Next Trade Show</H4>
Spring Fair at NEC, Birmingham, UK
<BR>
Sunday 5 – Thursday 9 February 2006<BR>
Hall 1 (Housewares and Tabletop)<BR>
Stand A7<BR>
<A href="www.springfair.com"><IMG src="images/Spring_Fair_06_logo_264.jpg" border="0"></A>
We will be showing:
<UL style="LEFT: -20px; POSITION: relative; TOP: -10px">
<LI>
Full range of <A href="severin.htm">Severin electrical appliances</A></LI>
<LI>
The new designer range from <A href="RVKB.htm">Royal VKB</A>
</LI>
<LI>
Highlights from the <A href="spirella.htm">Spirella 2006 bathroom collection</A>
</LI>
<LI>
<A href="leifheit.htm">Leifheit</A> will be launching their new Signature
gadget range and also new cleaning accessories</LI></UL>
Ambiente exhibition, Frankfurt, Germany
<BR>
Friday 10 – Tuesday 14 February 2006<BR>
Visit the <A href="leifheit.htm">Leifheit</A> stand (Hall 8 Stand H99) to see
the major 2006 launches from Leifheit. There are some significant products on
show.
</DIV>
<DIV class="TestArticleBlock" id="block3"><IMG class="outline_img" src="images/Leifheit_red.gif">
<H4>Easier Ironing from Leifheit</H4>
Technical innovations harnessed by Leifheit to give easier and quicker ironing
with the new Starboard and Galaxy ironing tables from Leifheit.<BR>
<BR>
Ironing with a difference – Starboard and Galaxy. <IMG class="inline_img" style="CURSOR: pointer" onclick="javascript:newPage('ironing');"
height="200" src="images/IroningBoard_small.jpg" width="133" border="0"><BR>
<BR>
It helps take the “irk” out or ironing.
<BR>
<BR>
The Starboard and Galaxy ironing tables feature a new revolutionary plastic
type surface for ironing.<BR>
<BR>
Click on image to the left for further information
</DIV>
<DIV class="TestArticleBlock" id="block4"><IMG class="outline_img" src="images/Leifheit_red.gif">
<H4>Mandolin – Multi-purpose vegetable slicer (art no 23206)</H4>
This clever new multi-slicer from Leifheit really makes slicing and dicing so
simple.<BR>
<IMG class="inline_img" style="CURSOR: pointer" onclick="javascript:newPage('slicer');"
src="images/Signature_mandolin_small.jpg" border="0"> Safety first – place
the food onto the holder, which is designed to keep your fingers well out of
harms way from the essential blades.
<BR>
<BR>
The slicer itself can either slice, make julienne strips in 3 or 5mm sizes and
the new PLUS, slide the switch and the holder cleverly turns the food through
90 degrees on the upward slice so that cubes are cut. They are always a
consistent size and are great for salads, garnish or party food.<BR>
Click on image to the left for further information
</DIV>
<DIV class="TestArticleBlock" id="block5"><IMG class="outline_img" src="images/vendors/small_RVKB_icon.jpg"><BR>
<H4>Fun with Garlic</H4>
The innovative new Garlic Crusher with a difference – from Royal Van
Kempen-Begeer in Holland.<BR>
<BR>
The Garlic Crusher allows the individual cloves to be broken open using the
toothed ridges on the crusher. Depending on the use the garlic can be broken
small or left in larger chunks. Chefs say this allows a fuller flavour of
garlic to be released rather than squeezing it through the normal squeezer,
which is so difficult to clean.<BR>
<IMG class="inline_img" onclick="javascript:newPage('crusher');" src="images/rvkbGarlikrusher_small.jpg"
border="0"> Another advantage of the Royal VKB Garlic Crusher is that being
stainless steel it washes clean quickly and also by using it as a “soap”
rubbing with your hands under running water removes the smell of garlic (or
other smells) from one’s hands.<BR>
Click image above for further information<BR>
</DIV>
<DIV class="TestArticleBlock" id="block6"><IMG class="outline_img" src="images/vendors/small_RVKB_icon.jpg"><BR>
<H4>Drinks with a swing (add) – Serving Tray
</H4>
The tray with a difference.<BR>
<IMG class="inline_img" onclick="javascript:newPage('tray');" src="images/rvkbDrinksTray.jpg"
border="0"> The clever design of this tray helps to eliminate spills as it
is being carried.<BR>
The single handle is mounted over the centre point of the tray. This position
above the centre of gravity allows for slight swinging as the tray is held with
everything remaining safe on the tray.<BR>
Holding the tray with one hand also leaves a hand free to open doors, greet and
shake hands with people and serve glasses from the tray onto a table.<BR>
Whilst the style may appeal to the young, older people will certainly find the
tray’s ease of carrying a significant benefit.<BR>
It is a real talking point and a great convenience.<BR>
Click image above for further information<BR>
</DIV>
<DIV class="TestArticleBlock" id="block7"><IMG class="outline_img" src="images/vendors/small_RVKB_icon.jpg"><BR>
<H4>Design Awards
</H4>
Royal VKB has already won several accolades – Design Plus, Red Dot Award and
Grand Prix.<BR>
<IMG class="outline_img" style="LEFT: 25px; POSITION: relative" src="images/designPlusAwardIcon_small.gif"
border="0"> <IMG class="outline_img" style="LEFT: 75px; POSITION: relative" src="images/GrandPrixAwardIcon.gif"
border="0"> <IMG class="outline_img" style="LEFT: 125px; POSITION: relative" src="images/RedDotAwardIcon.gif"
border="0"><BR>
Certain items from the range can now be seen in the Museum of Modern Art in New
York. Importantly, the product is receiving acceptance in many well recognised
design stores across Europe.<BR>
</DIV>
</DIV>
<DIV class="Testfooter"><SPAN>Copyright © 2005 Cachet
Homewares Ltd. All Rights Reserved. Notice: we do not collect personal
information on this site.</SPAN><BR>
</DIV>
</FORM>
</body>
</html>

engxladso
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-10-31
Posts: 12
Points: 0

absolute positioning and page resize problems

I think I may have found a solution. It was simply to add position:relative to the containing div in which my iframes were located.

It all seems to move correctly now before and after refreshing in both IE and FF.

Thanks for the help guys. Considering you don't get paid for this, I'm amazed at how much time you take helping us newbies out.

If I have spoken too soon, I may be back for me help.

Cheers,
Adso

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 47 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

absolute positioning and page resize problems

Hi

I would need to see it as a live url.

Trevor