Geek Answers Handbook

Floating too far!

I have a recording management web application that displays the main record on one screen and dynamically built AJAXes editors in the div editor that I used jQuery to drag and drop. It works.

Despite the fact that the div is not a window, I thought it would be nice to make it act a little more than one, so I coded the close button. The structure is as follows:

<div id="editor"> <div id="draghandle" /> <div id="closebutton" /> <div id="editorbody" /> </div>

Editorbody is a variable-dimensionality depending on what people are trying to enter.

Draging width is set at 100% of the editor. CloseButton is configured in CSS as float: right.

My problem is that in IE6 and IE7 the close button floats too far to the right. This is always against the right edge of the window, no matter where I drag the div editor. In Firefox and Safari, it looks as I expected, this window is a window wide, because the editorbody and closebutton are in the upper right corner.

I'm not particularly attached to float: right, just looking for a way to customize CSS that will give me the same result in all browsers. Any ideas?

"Screenshots"

Here is a mockup of what I would like to do on jsbin (thanks, redsquare)

code example

I work with legally confidential information, so I can not provide screenshots of the application. However, I took a few shots and blocked the text and interface, leaving only the window structure.

what it looks like in IE7

what it looks like in firefox 3

0
source share
4 answers

You might want to consider using JQuery Dialog , as its dedication and styles already work with the cross platform.

+1
source

To write what to fix this, there was a CSS change for the close button from

 float: right;

to

 position: absolute; right: 5px; text-align: right;

This gives the correct results in IE, and with a little padding for internal form fields, there is no worry about overlapping.

+5
source

CSS hacks are sometimes needed:

 * + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here
0
source

for IE specific css hacks you can do something like:

 #divId { margin-right: 0; /*Normal styles for all browsers*/ *margin-right: 100px; /*The asterisk allows only for IE6 AND IE7 to read this*/ _margin-right: 90px; /*The underscore allows only IE6 to read this style*/ }

Just make sure the stars and underline labels are placed after the regular (valid) CSS style.

0
source

More articles:


All Articles