1

I'm trying to place a Raphael canvas in to a div which is smaller than the actual canvas. So basically I have something like this: 

var paper = Raphael("test", 2000, 2000); 
var a = paper.rect(0, 0, 2000, 2000).attr({fill: "#000"}); 
//
<div id="test" style="width: 500px; height: 500px; overflow: auto;"></div>

Seems simple enough? Most browsers have no problem with this but IE7 forces the whole 2000x2000 rectangle on screen ignoring the whole div constraints.

I tried placing the div within another div like so:

<div id="ieholder" style="width: 500px; height: 500px; overflow: auto;">
<div id="test" style="width: 2000px; height:2000px;"></div>
</div>

But no luck, same thing happened. Is there a way around this? This whole thing is already a compromise as I use raphael-zpd to give users zoom and pan functionality but as it doesn't work on IE I thought I'd just give IE users the image with basic pan functionality but no! Damn you IE!

http://jsfiddle.net/WdwGQ/

<div id="ieholder" style="width: 500px; height: 500px; overflow: auto;">
<div id="map" style="width: 2132px; height: 2872px;">

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2000" height="2000">
    <desc>Created with Raphaël</desc>
    <defs>
    <rect x="0" y="0" width="2000" height="2000" r="0" rx="0" ry="0" fill="#000000" stroke="#000">
    </svg>

</div>
</div>
kile
  • 152
  • 1
  • 10

2 Answers2

1

This post provides the answer:

IE7 CSS Scrolling Div Bug

Making the outer <div> (the one with the overflow:auto style) position:relative sorts it out.

Community
  • 1
  • 1
John Manktelow
  • 11
  • 2
1

Prompt your users to use Google's Chrome Frame, which embeds Chrome's rendering engine in IE?

Alternatively, prompt them to use a better browser?

That's not really a solution to the underlying problem, but it would make the underlying problem irrelevant. There may or may not be a way of getting IE7 to do what you want. I have often found there isn't...

Spycho
  • 7,698
  • 3
  • 34
  • 55
  • 1
    Well I was going to give a big red highlight that your browser doesn't allow full functionality of the application and that you should update your browser. However, it would be nice to allow basic use of the application even with IE7. – kile Aug 16 '11 at 11:36
  • 1
    Yeah, I know what you mean... Could "basic use" mean letting it be 2000x2000? Or could you fall back to using some non-canvas solution (though that might be way too much effort)? – Spycho Aug 16 '11 at 11:38
  • Well that's the last resort I go to as it would've been nice to use the same layout still. Non-canvas solution is probably out of question due to time constraints (and my lack of experience in programming, I'd have to learn a whole deal of new stuff) – kile Aug 16 '11 at 11:43
  • Do you get the same problem if you use `overflow:scroll;`? – Spycho Aug 16 '11 at 11:43
  • Yes, same thing. It's weird because if I don't load the javascript the 2 divs will work correctly: the 2000x2000 div will summon scrollbars for the 500x500 parent.div. However as soon as you load that javascript the scrollbars disappear and it's spread across the whole page. – kile Aug 16 '11 at 11:46
  • I would imagine Raphael is doing something to the style of the canvas element that breaks it in IE. Can you figure out what these style changes are? You could try inspecting the elements with / without Raphael in Firebug / Chrome dev tools. Then we can try to counter the style change that breaks things. – Spycho Aug 16 '11 at 11:51
  • I've edited to the original message what Raphael adds to the div. – kile Aug 16 '11 at 12:04
  • Ok this is getting seriously weird. I managed to get a dummy file working but there's not difference that I can see to the one that doesn't work! – kile Aug 16 '11 at 12:27
  • @IlkkaSyrjäkari let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/2529/discussion-between-spycho-and-ilkka-syrjakari) – Spycho Aug 16 '11 at 12:58
  • Sorry about disappearing yesterday. Didn't see your last message before I'd already left the office. Anyways I've continued now and the problem is starting to reveal itself. – kile Aug 17 '11 at 06:22
  • Gah message broke somehow left half of it off anyway. If I don't define a doctype the overflow will work properly. However, the margin: auto; in the css wont work and my div's will be placed at the far left side of the page. As soon as I define a doctype the div's jump to the center of the page but the overflow stops working! – kile Aug 17 '11 at 06:26
  • Ah, I think IE may be rendering in "Compatability Mode". I think it decides whether to do so or not based on doctype (amongst other things). Microsoft have [an article](http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx) on compatability mode, which may be of use. You can specify the type of rendering you want using ``. Edge will give you the latest rendering capabilities, so that's probably what you want. If that doesn't work, try sticking different IE versions in there. – Spycho Aug 17 '11 at 08:35
  • Also note that IE treats local networks as a special case and you may need to manually turn off Compatibility Mode for "intranets" in IE's settings, if you are testing it on an internal network. – Spycho Aug 17 '11 at 08:36
  • If I understood right, the compatability mode is for IE8 so it has no effect on IE7. Changing the meta tag didn't work at least. I'm reading the article in more depth now. Thanks for the tip tho! Seems like I've at least located the problem. – kile Aug 17 '11 at 09:29
  • I'll create a new question with the added information if someone had experience of this. Thanks for your help Spycho! – kile Aug 17 '11 at 09:47