positioning different in ie and ff 2

jimmyshoes · Dec 14, 2009

I am using

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">[/URL]

I am trying to create a very simple layout

123
456

Code:

<div>
	123
	<div style="position:absolute">
		456
	</div>
</div>

Problem
In firefox this displays as hoped for
123
456

however, in ie it is rendered
123 456

I wanted absolute positioning because I am trying to create drop down boxes and I do not want to effect the page contents below

How should I do this so it renders
123
456

in all browsers?

Thanks in advance

cygmorg · Dec 14, 2009

You could use a <br> tag like so:

Code:

<div>
    123<br />
    <div style="position:absolute">
        456
    </div>
</div>

This seems to work in IE

linux is the way forward!

Gareth

jimmyshoes · Dec 14, 2009

Thanks for your help. That solves the problem. However, I was wondering, is there a css solution to this?

cygmorg · Dec 14, 2009

I suppose you could 'bodge' it using margins:

Code:

<div>
    123
    <div style="position:absolute; margin-top:20px; margin-left:-27px;">
        456
    </div>
</div>

but I don't like doing it this way, its unorthadox with the '-' margin.
However, I cannot see any other easy solution to this in css

linux is the way forward!

Gareth

ChrisHunt · Dec 14, 2009

Why use absolute positioning at all? In fact, why not just do this:

Code:

<div>
    123
</div>
<div>
    456
</div>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

vacunita · Dec 14, 2009

I have to agree with Chris, why all the unnecessary markup and CSS when by default 2 divs or for that matter any block level element will accomplish what you want without any issue.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

jimmyshoes · Dec 14, 2009

Thanks for your input.The thing is I am creating drop down lists for links( adding and removing display:none to the 456 <div>)
If I don't use position:absolute then the rest of the page will shift down when the user clicks one of the links

vacunita · Dec 14, 2009

Position absolute takes the element out of the document flow so it no longer has any frame reference against any other element.

So the browser doesn't has no way to position an element relation to another because there is no longer any relation between them. In your case one div under the other.

If you need to use absolute positioning, then you'll need to set their top and left attributes to match each other instead.

For instance if you have say 3 divs each 50 px high and each has to be under the previous one you could set their tops to be 50 px lower than thew previous one:

Code:

#div1{
position: absolute;
top:100px;
}

#div2{
position: absolute;
top:151px;
}

#div3{
position: absolute;
top:202px;
}
...

This will set each div under the previous one starting with the first one at the 10px mark.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

OsakaWebbie · Dec 18, 2009

I recommend a container div that has "position:relative", and then each of the dropdown items would have "position:absolute". The absolute position of the items would then be based on the parent element, the container div.

CSS:

.dropdown { position:relative; }
.listitem1 { position:absolute; top:0; }
.listitem2 { position:absolute; top:1em; }
.listitem3 { position:absolute; top:2em; }
.listitem4 { position:absolute; top:3em; }

Code:

<div class="dropdown">
  <div class="listitem1">123</div>
  <div class="listitem2">456</div>
</div>

If you're generating the HTML dynamically in server-side code, you can use a loop to automatically create both the CSS and the numbers in the class names - try it and see.

jimmyshoes · Dec 30, 2009

Thanks, that's what I'll do

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

positioning different in ie and ff 2

jimmyshoes

Programmer

cygmorg

Technical User

jimmyshoes

Programmer

cygmorg

Technical User

ChrisHunt

Programmer

vacunita

Programmer

jimmyshoes

Programmer

vacunita

Programmer

OsakaWebbie

Programmer

jimmyshoes

Programmer

Similar threads

Part and Inventory Search

Sponsor