SVG inside <div> always bigger than container

I have a huge SVG file inside a DIV. I would like to scroll the SVG inside the div by clicking on a A link.

My problem is that I would like my DIV to stay smaller than my SVG document, so I can have active scrollbars. Let's say my SVG document's height is 10.000 and 1.100 width, inside a 200px x 100px DIV element. But whatever I do, my DIV element gets as big as the SVG. How can I restrain the size of my div ?

Here is my code:

<html>
<title>
YOP
</title>

<head>

<style TYPE="text/css"> 
<!--
  div.header{

background:black;
background-color: #ededed; 
margin-top: 0px;
position: fixed;
top: 0px;
//width:100%;
width:1100px;
height: 500px;
   }

 -->
 </style>


<script type="text/javascript" >        
      var pos = 0;

       function  MyFtion(){
       var elem = document.getElementById('aSVG');      

       pos = pos + 100;
       elem.scrollTop = pos + 100;
       window.scroll(0,   pos);

      }
 </script>
 </head>

 <body bgcolor="white" >

        <div class="header" id="MyDiv2">
        <a href='javascript:MyFtion()'>** Move s**</a> 
        </div>


    <div id="oo"  height="200px" width="100px" style="margin-top:100px;overflow:scroll;" >          
            <object id="aSVG" data="out.svg"  style="margin-top:100px;overflow:hidden;" /> 
    </div>


  </body>
 </html>

Note that I tried to add display:block; to the style of my OBJECT tag but doesnt work.

Thanks for helping,

Antoine

Answers


Sometimes the height and width attributes don't work well with CSS, so try using the CSS equivalents.

#oo{
  height:200px;
  width:100px;
  margin-top:100px;
  overflow:scroll;
}

Need Your Help

How track by Tracking Number Unique Identifier?

php soap fedex

I'm having issues attempting to track a package by Tracking Number Unique Identifier. I'm working with the sample PHP code from Fedex Developer Resource Center.

Separate Layers like feature on QGraphicsView

qt qgraphicsview qgraphicsscene

In my QGraphicsView, I display a map. I need to display a horizontal ruler and a vertical ruler on the top edge and left edge respectfully.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.