View Full Version : Is this Tag enough?

Feb 25th, 2003, 01:18 PM
Hello All,

I am currently using this/or similiar tag to position text, images etc. around a web page.:

<DIV ID="idElement1" style="position:absolute; top:50px; left:605px; ">
<img src="../Images/mLogoUSMC6_125.jpg" border="0" width="125" height="94" alt=""></div>

Most times it works perfectly. However I have had a few people tell me that images or text have been completely out of position even when using the same browser that works fine for me and others.

I understand that this will only work in Nav. .40 and IE .40 or later.

What could be causing this to happen?
Is there a tag I need to put in the header or body that will correct this?

Just a thought, if I have a common "idElement1" in more than one tag on the same page would that cause this problem?

Is there a similiar or better way to position that I am unaware of?

Thanks for any insight as usual! U guys are always a HUGE help.


Feb 25th, 2003, 02:45 PM
First of all, id is unique for one element and one element alone. If you use identical ids on different elements the result is unpredictable.
If you want to assign a set of styles to different elements, you're better off using the class selector.
Second, absolute positioning is a powerful tool, which usually means a lot can go wrong with it. It usually is safer, more elegant and more intuitive to use relative positioning and have elements follow the natural flow of the content.
If it's browser compatibility issues you're worried about: yes, CSS positioning belongs to the CSS2 standard and only more recent browsers support this.

Feb 25th, 2003, 03:14 PM
What do you mean by relative positioning as opposed to "absolute positioning"?


Feb 25th, 2003, 04:25 PM
Use position : relative rather than position : absolute ...

That said, I'm not sure position is really ready for prime time. There are enough minor differences between browsers and operating systems that it's a crapshoot at best unless you sniff for the browser and OS then load a stylesheet specifically designed for that browser/OS combination.

You might have better luck using float (left and/or right, depending on the number and size of the images).

Feb 25th, 2003, 04:56 PM
Have you thought of that in a 640*480 window this will place the image largely outside the screen to the right?

position:absolute; top:50px; left:605px
On a 1152 screen it will be in the middle and in a larger window it will be to the left?

Feb 25th, 2003, 05:16 PM
Ya know I did think of that.

I had one of the people that said it was distorted check and see what there pc was set at and it was at 800x600.

Is there a seperate setting that may be adjusted within explorer?


Feb 26th, 2003, 11:36 AM

What do you mean by relative positioning as opposed to "absolute positioning"?
Relative positioning involves setting the position of an element relative to its parent element, absolute positioning involves setting an element's position in respect to the browser window, regardless of the position of any other element. The latter method can cause elements to overlap oneanother and therefore has to be applied with some care to avoid unexpected results.


I was thinking more along the lines of minimizing the use of explicit positioning all together, for the exact reason you mentioned. Having elements follow the natural flow of the document might not give you pixel-perfect layouts (which is a misguided approach anyway), but the chance everything works out more or less agreeable is much greater.

Feb 26th, 2003, 01:11 PM
Almost, but not really.

position: absolute - relative the element's containing block
position: relative - relative where the element would have been in the normal flow, had it not been positioned
position: fixed - relative the browser window and not supported by IE.

Containing block doesn't mean just the parent element. For absolutely positioned elements it means the closest positioned element. In this case it probably IS the browser window but it doesn't have to be.
#container { position: relative }
.note { position: absolute: top: 0; right: 0 }

<div id="container">
<p class="note">

That gives a DIV in the normal flow but it still has the status of being positioned and the P is positioned absolutely in the top right corner of that DIV. To position stuff absolutely relative the browser window is mostly only useful for a few container boxes using % or the page will become as rigid as piece of wood. To position stuff absolutely within smaller areas can be way cool though. :p

___ Oops!___
BIG typo - 'static' should be 'fixed' - changed it.

Feb 26th, 2003, 02:23 PM

thanks for setting the record straight :thumbsup: ; can you understand now why I still tend to shy away from positioning...? :(

Feb 26th, 2003, 02:40 PM
Yes, it's ***** to get the hang of and once you start to understand it there are the mignificent browser bugs. I always feel sick wondering how things may look on a Mac. :o

I think what makes it hard to understand though is all these tutorials that only tell you part of the story and make you believe that's all there is (have to keep it simple, eh?). The sad part is that most people probably have to read a few tutorials before they can understand the spec itself. Hard to know who to trust. :(

On a side note, for me the book by the guys that invented the whole thing is still a great read. Not too much about browsers and tricks but the theory behind it all is explained clearly. :thumbsup:


Feb 26th, 2003, 03:28 PM

thanks for the tip; in the mean time i've been reading up on positioning in the CSS2 standard - which i should have done before answering in the first place - and I think I'm getting the hang of it; yet another subject that needs some of my attention... :(


are you still with us, or did you run off in despair? :D

Feb 26th, 2003, 04:27 PM
Really appreciate all the input your guys are giving me on this.

I am just trying to keep up and messing around with the stuff you are suggesting.

Thanks again.

This forum is really great. Active and informed.