5 replies [Last post]
Dr. Dot
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-04-13
Posts: 3
Points: 0

Could someone be kind enough to take a look at http://professionalcutlerysupply.com/windex.htm and tell me how to get the last 4 paragraphs on my Web document to position in line with the preceding paragraphs. I have tried every possible combination of the position element and cannot figure it out. Thank you very much.

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

Re: Difficulty with Positioning

Dr. Dot wrote:
Could someone be kind enough to take a look at http://professionalcutlerysupply.com/windex.htm and tell me how to get the last 4 paragraphs on my Web document to position in line with the preceding paragraphs. I have tried every possible combination of the position element and cannot figure it out. Thank you very much.

Hi

Well, in IE6 this is the last bit of text you can see on my screen before the footer covers the rest up, and no scrollbar to go down:

Obviously, there's a reason for this. Very simply, it's that the name Chef Cutlery has become synonymous with unstinting, uncompromising excellence. Crafted in Solingen Germany, * Chef

As to what it looks like in Mozilla and Opera, the text is written all over itself.

I suspect that you have used a fixed height for the page with the footer at the bottom that cuts the rest off. The mozilla problem I suspect is not using a clearing div.

You would need a style like this:

.clear{
  clear:both;
   /* these next attributes are designed to keep the div height to 1 pixel */
  height:1px;
  overflow:hidden;
}

and then in the code before the end of the div that isn't working:

<div class="clear"></div> or

<br class="clear" />

Trevor

Dr. Dot
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-04-13
Posts: 3
Points: 0

Difficulty with Positioning

Thanks Trevor. I got a little closer in that the 4 paragraphs now appear and within themselves they are in order. The trouble is that they begin at the top of the preceding division rather than inline with the division.

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

Difficulty with Positioning

Hi

The problem is almost certainly that (without looking at the css, he says) the objects over which the text flows are positioned absolutely, which takes them out of the flow. You must position them relatively (position:relative;), which in fact IE prefers to have in almost every div that seems to cause you problems when designing.

Trevor

Dr. Dot
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-04-13
Posts: 3
Points: 0

Difficulty with Positioning

Trevor, if you do a view source on the frame page you can see the css. It is embedded in the document. BTW, changeing from positive to relative made the made worse.

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

Difficulty with Positioning

Dr. Dot wrote:
Trevor, if you do a view source on the frame page you can see the css. It is embedded in the document. BTW, changeing from positive to relative made the made worse.

Hi

I did just take a look at the code and I was right about the postiion:absolute causing the problem. However, I appreciate that changing this might cause other problems, but it is as the root of the problem. However, and alternative approach is to put a margin-top on the textual div to clear those absolutlely positioned divs.

Trevor