up vote 3 down vote favorite

I'm using Raphael to create a vector based map. The map is biggish so I'm using RaphaelZPD to allow zooming and panning while fitting the image in to a smaller frame. I've used html5 to create a div set as a table-cell with rounded corners and some inset box-shadows set in the css file. I've id'd my Raphael canvas the same as the div and while it loads nicely, shows all the graphics right, has all the animated elements working properly, stays within the boundaries etc. there's still a slight a problem. The SVG overrides the rounded corner and inset box-shadow attributes set in the css. So instead of rounded corners I get sharp corners. If I pan the map so that there is no Raphael produced graphics overlaying the corner, the rounded corner appears again. Same goes for the shadows.

So is there a way to make the js stay behind these effects? Or should I try to go around it by creating inversed rounded corners as absolute elements which stay on the top layer and just forget about the shadows?

I hope I was clear with my problem, got a good week of programming experience of any kind so bit shaky with my terminology still.

http://jsfiddle.net/cgnrh/4/ <- with practice images, also very messy

#map {
  display: table-cell;
  position: absolute;
  margin-top: 104px;
  margin-left: 350px;
  border-radius: 0 2em 2em 0;
  box-shadow: inset 3px 0 7px #777;
  width: 550px;
  height: 900px;
  background: #FFFFFF;
}

var paper = Raphael('map');
link|flag
Would probably need to see your markup and css to be able to troubleshoot. I'm able to add css3 properties to a div that I define for my Raphael canvas and draw in. – user156629 4 hours ago
#map { display: table-cell; position: absolute; margin-top: 104px; margin-left: 350px; border-radius: 0 2em 2em 0; box-shadow: inset 3px 0 7px #777; width: 550px; height: 900px; background: #FFFFFF; } and for Raphael I simply have var paper = Raphael('map'); – Ilkka Syrjäkari 4 hours ago
1  
Do you have your map somewhere it can be viewed? I don't think I can recreate the problem without seeing what you're actually trying to do. Just defining the Raphael object on the div isn't enough to make the CSS3 effects go away. – user156629 3 hours ago
Ok, this is going to be ugly but please forgive me I'm just learning here so it's very messy and the graphics I've drawn are just something to practice on, not the actual thing. Anyways here goes jsfiddle.net/cgnrh/2 also I couldn't get RaphaelZPD working even if I added it to the html as external script for some reason. You can get it from here tho github.com/somnidea/raphael-zpd – Ilkka Syrjäkari 3 hours ago

1 Answer

up vote 1 down vote

I wrapped a div around your map div:

<div id="frame">
  <div id="map">
  </div>
</div>

Then I changed position from absolute to relative on #map and added styles for the frame:

#frame {
  position: relative;
  top: 104px;
  left: 350px;
  overflow:hidden;
  border-radius: 0 2em 2em 0;
}

By applying the rounded corner to the wrapping div and hiding overflow, it creates the rounded corner on the map image. I believe you're assumption is correct that the Raphael SVG is rendering over the effects of the div on which is is painting, so you just have to constrain it with a surrounding div. Changing position from absolute to relative and using positioning on the wrapping div was necessary to get it to layout in the same place it was before. I don't think you're going to be able to achieve the inset box shadow.

http://jsfiddle.net/9w2ub/

link|flag
Ok I understand where you're going with this although for some reason I see a result with no rounded corners at all now? I understand my tables are very messy with the absolute positions and I'm still looking for a final layout but with this method I believe I can get it to work in the end. Thank you for your help! – Ilkka Syrjäkari 2 hours ago
If you scroll all the way to the right, you don't see the rounded corner? Which browser are you viewing it in? – user156629 2 hours ago
Well, interestingly enough I can see the rounded corner in FF4, but not Chrome, even when I added vendor prefixes to the border radius style. Go figure. – user156629 2 hours ago
I'm using Chrome as well. – Ilkka Syrjäkari 2 hours ago

Your Answer

 
or
required, but never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.