views:

1407

answers:

5

I've got a record management web application which displays a master record on one screen and AJAXes dynamically built editors into an editor div, which I've used JQuery to make draggable. That works.

Even though the div isn't a window, I thought it might be a nice idea to make it act a bit more like one, so I coded in a "close" button. The structure looks like this:

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

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

Draghandle's width is set at 100% of editor. Closebutton is set up in CSS as float:right.

My problem is that, in IE6 and IE7, the close button floats too far right. It's always against the right edge of the window, no matter where I drag the editor div around to. In Firefox and Safari it looks like I expected it to - the window is as wide as editorbody and closebutton sits in the top right corner.

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

"Screenshots"

Here's a mockup of what I'd like to do on jsbin (thanks, redsquare)

sample code

I'm working with legally sensitive information so I can't provide screenshots of the app. I have, however, taken some shots and blocked out the text and interface, leaving only the window structure.

how it looks in IE7

how it looks in firefox 3

A: 

CSS hacks are needed sometimes:

* + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here
bchhun
But #editor is draggable wherever on the page people would like to put it. They can put it up against the right edge of the window. Even if I work relocation of the close button into the editor's drop code -- hmm. I have an idea for something that may work now.
Glazius
Nope. Setting the width of the editor div to the width of editorbody after it renders still makes it far too wide. Thought I had something there.
Glazius
may we see a screenshot?
bchhun
Put some sample code up on jsbin that does the same thing.
Glazius
A: 

ugh post the actualy XHTML/CSS of the problem. you're posting to much other junk that I don't care about try to simply the problem for me before I try solve it ;p

Andrew G. Johnson
A: 

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 asterisk and underscore hacks are placed after the normal (valid) css style.

+1  A: 

You may want to consider just using a JQuery Dialog instead since its premade and the styles already work cross platform.

Soviut
Thanks! Man, and the next thing I was going to do with this was make a model lightbox-type thing too!
Glazius
+1  A: 

For the record, what worked to fix this was changing the CSS for closebutton from

float: right;

to

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

This produces proper results in IE, and with a little padding for the internal form fields there's no worry about overlap.

Glazius