position:absolute like IE6

ThomasJSmart · Jan 11, 2008

been trying to solve this for hours but not getting anywere :/

how can i get the div position:absolute to work like it does in IE6?

i have a very large body of dynamic text. within this text i will be adding some dynamic DIVS to certain words. in IE 6 i give the div a position:absolute and width/height and some colours and place it in the text.

this is some <div id="somediv">divText</div> text.

now in IE6 the div is floating lovely by the word "Text".

in any other browser its all the way over on the left.

as i said the text is dynamic, so i have no idea what the x/y location is going to be that the div should appear at so i cant realy add a container div. adding a <table> around the div just breaks the sentance up moving "text" to the next line...

can this be fixed or should i just try some totally different aproach?

Thomas

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

Lowet · Jan 12, 2008

Use some JavaScript to position it..

Have this HTML code:

Code:

Here is some <div id="dTxt" style="display: none;">is a collection of words</div><span>text</span> with some important meaning...

The DIV and SPAN cannot have any whitespace or text between them. It doesn't have to be a SPAN but any HTML element. Now we display the DIV with this JavaScript:

Code:

var obj = document.getElementById('dTxt');
obj.style.position = 'absolute';  [green]/*  Can be set in CSS  */[/green]
obj.left = obj.nextSibling.offsetLeft;
obj.top = obj.nextSibling.offsetTop;  [green]/*  Not always needed  */[/green]
obj.style.display = 'inline';

It gets the position from it's sibling element in the DOM.
Works fine for me..

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

Vragabond · Jan 13, 2008

Simpler, use give the absolutely positioned element left and top values of auto (meaning it will appear at the position it is) and use margins to adjust its position in regards to the actual text. If you show your page, I could give you a better indication of how to do it.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

ChrisHunt · Jan 14, 2008

If you're having cross-browser problems, step 1 is to ensure that you have a full DOCTYPE and that your page validates. That way the bowsers will at least try to apply the same rules to your code.

I'm always wary of absolute positioning. It's sometimes useful/necessary, but it's tricky to use right and there's often a better way to do things.

So, taking a step back, what effect are you trying to achieve? Some kind of tooltip?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

ThomasJSmart · Jan 14, 2008

Lowet: this script doesnt seem to make a difference to the positioning?

or maybe i did it wrong.. i made a function:

Code:

function positionDiv(divName){
			var obj = document.getElementById(divName);
			obj.left = obj.nextSibling.offsetLeft;
			obj.top = obj.nextSibling.offsetTop;
		}

and i call this function after every <div>
i have placed the link inside a <span>

Vragabond: not setting a value is the same as auto i think, as adding the auto still results in the same situation. IE6/7 working fine, FF putting against the <td> way over on the left.

ChrisHunt: my doctype is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

the effect is indeed a kind of tooltip, or more a glossary actually. where the admin can build a word list with definitions. then when the user mouseovers the word which could be anywere in the text it displays a floating div at the word with the description.

i have attached an image showing the differences between IE and FF

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

Vragabond · Jan 14, 2008

1. Your doctype is incomplete. I suggest you switch it with a complete and valid doctype.

2. I have used css only tooltips for similar effects many times, so I expect it should work for you as well. I suggest you give us the url to the page in question (or quickly construct a test harness) so that we can experience the problem ourselves.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

ChrisHunt · Jan 14, 2008

Your doctype should be:

Code:

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

Warning - it will "break" some of your existing IE6 layout, but should end up working more consistently across browsers.

As far as your main problem is concerned, have you considered a simpler solution?:

Code:

Look at my clever <dfn title="Content Management System">CMS</dfn>!

If you really don't like the built-in tooltips, try Googling for "CSS Tooltips" to find some alternatives. I like the look of the one at

http://fijiwebdesign.com/2007/content/view/82/77/

- note how he uses a JS function near the end to move [tt]title[/tt] text into a CSS-able <span>.

Incidentally, I think you should really only attach the tooltip to the first instance of each term on the page. It looks a bit busy if every "CMS" is underlined and tooltipped.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Lowet · Jan 14, 2008

OK. I tested it on MSIE 6 and 7 and FF.. It worked in all.. Well, show me the code and I'll check what could be wrong.

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

ThomasJSmart · Jan 15, 2008

I changed the doctype but it still the same effect.

i have made a test version stripped of all design etc, and just put the style/js in the header instead of including them. i have put it here:

http://www.tsmart.eu/div/test.html

Thanks
Thomas

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

Vragabond · Jan 15, 2008

I would rewrite the thing like this:

HTML:

Nunc nonummy <a href="#">CMS<span class="dictionary">CMS staat voor <b>C</b>ontent <b>M</b>anagement <b>S</b>ystem. Vertaald: Inhoud Beheer Systeem.</span></a> libero.

CSS:

a {
  border-bottom: 2px dotted rgb(153, 153, 153);
  cursor: help;
}

.dictionary {
	border: 2px dotted #202020;
	background-color: #FFF2CB; 
	margin: 15px 0 0 -20px;
        padding: 4px; 
	font-family: Verdana, Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px; color: #202020; font-weight:normal;
	position: absolute;
	width: 200px;
	height: 75px;
        overflow: visible;
	cursor: help;
}

a .dictionary {
  left: -999em;
}

a:hover .dictionary {
  left: auto;
}

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

ChrisHunt · Jan 15, 2008

Note that to a search engine, and probably to anybody reading your site with a screen reader, your text will look like:

Nunc nonummy CMSCMS staat voor Content Management System. Vertaald: Inhoud Beheer Systeem. libero

which probably isn't what you want. That's why I'd look at involving Javascript rather than relying wholly on CSS.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

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!

position:absolute like IE6

ThomasJSmart

Programmer

Lowet

Programmer

Vragabond

Programmer

ChrisHunt

Programmer

ThomasJSmart

Programmer

Vragabond

Programmer

ChrisHunt

Programmer

Lowet

Programmer

ThomasJSmart

Programmer

Vragabond

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor