Positing of a DIV Tag

[tifany]

Hi there,
I am using java script to show/hide a div on rollover of a question. I need the the div to appear in the same spot, no matter the browser etc.

Right now, its jumps all over and I have it set to absolute positioning.

Here is a link to the page:

http://www.breezemarketing.ca/orange

Can anyone help?

 

[traingamer]

It shows exactly where you specified for me.
If you change the browser width it still goes to the same place each time. Within the body it is:

	position:absolute;
	left:806px;
	top:158px;
	width:318px;
	height:358px;
	z-index:1;
	visibility: hidden;

That being said, the rest of the page does not stay in the same place. The table you are using for the rest of the page is centered in the page.

As long as the div is outside of any other positioned block, it will always be absolutely positioned within the body. One way to get around that is to relatively position your table and absolutely position the rollover div within that table. (I wouldn't use tables for layout, but that is another story.) I'd also be sure to specify a complete doctype, so browsers are not in quirks mode, but that, too, is another discussion.
One way (tested) - move the div inside a positioned element:

...
<TD vAlign=top width=1026 bgColor=#ffffff [COLOR=blue]style="position: relative;"[/color]>
<DIV id=orangeis><IMG onmouseout="MM_showHideLayers('orangeis','','hide')" 
height=219 src="Welcome to OrangeCRM_files/orangeis.gif" width=337 
align=absMiddle></DIV>
      <TABLE cellSpacing=0 cellPadding=0 width=1024 border=0>
...

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[johnwm]

Start by dumping table layout and use a more modern approach with floated divs. Google for 'disjointed rollover' to find the effect you're looking for.

Make sure you have a full doctype, and that your page validates. Without that it will be difficult to get any sort of cross-browser consistency. See

http://validator.w3.org/check?verbose=1&uri=http://www.breezemarketing.ca/orange/

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[tifany]

Thank you so much Greg for the speedy and helpful reply. I added the code to the page, now i just need to test it on some other machines. If you have a moment could you check to see if it looks correct. In Dreamweaver, where I position the DIV is so different then how it shows up, its taking some getting used to. I KNOW I should be designing with CSS, right? I use them for my text etc. style, but I need to spend some time learning how to best use it for layout.

 

[traingamer]

It's still incorrect - you need to move it down to and modify the <td> I specified, not add an orphan <td> outside of your table structure.

i.e. modify the highlighted area:

      <TABLE cellSpacing=0 cellPadding=0 width=1024 border=0>
<table width="1024" height="768" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#ff7700">
  <tr>
    [COLOR=blue]<td width="1026" valign="top" bgcolor="#FFFFFF">[/color]
...

and yes, css is the way to go.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard