first of all here is the link to jsfiddle: http://jsfiddle.net/HotFrost/RnNX3/6/
you can see that in chrome the graph layout inside the svg element, panned and zoomed ok. Whereas for IE (v9.0) it totally disregards the borders.
basically for this simple layout:
<div id="wrapper">
<div id="content-col"> graph
<div id="graphwidget_graphContainer" style="border: 4px solid purple;" ></div>
</div>
<div id="right-col"> menu </div>
</div>
IE and Chrome render graph differently.
I have tried to use different settings for width/height/remove them. I have tried to replace the divs with table cells.. Still same problem - in IE graph nodes are rendered above the svg element and then (when panned/zoomed) also go over the svg element borders.
Anyone can give some ideas how to fix it?
Thanks in advance!
HF
Related
I'm trying to get an image to run edge to edge (full width) within the viewport under Bootstrap 4. I had thought that the container-fluid element would allow this, by housing a row which could then contain the img element, as opposed to the container element which would constrain the width.
Nothing i do seems capable of removing the padding which appears -left and -right of this img element. I do not want to remove the root container-fluid element's padding as this ruins things for the preceding content; I only want to disable it on this one image.
The HTML which references the Bootstrap reads thus:
<div class="container-fluid">
<div class="row">
<div class="col-12">
<img class="img-fluid" src="images/section-image-02.jpg" alt="">
</div>
</div>
</div>
And I've uploaded a visual to illustrate the effect below.
The padding i am trying to remove appears in blue alongside the image itself.
I would like to know how to align an img to the right edge within a <DIV></DIV> element.
I've been using the following code:
<DIV class=content_mid><img alt="" style="float:right; margin:0px; padding:0px; border:0px; right:0px;" align="right" src=".../img_name.png"></DIV>
But there is still a bit of space between the image and the right edge of the DIV.
Another note: I'm using a CMS for this, so I don't have access to the CSS. It needs to be done through HTML.
I've also used position:relative;, which hasn't worked for me either.
Any help would be greatly appreciated.
Thanks,
I assume parent div element has style "padding".
Try code below,
<DIV class=content_mid style="padding:0px!important">
I'm working on my new portfolio and although it's far from finished, i'm getting close to finishing the design. There's just one problem atm that I don't know how to get rid of. If you go to http://minimalito.be/index.html you'll go to the homepage, then when you click on 'about' you'll notice that the footer very briefly jumps to the top of my page...
When you go from the homepage to the about section, not only the footer moves, but the whole content briefly moves up. Would anyone know why?
The content is loaded with ajax, so that's probably got something to do with it, maybe i'm positioning some divs wrong? I don't really see it.
This is rough layout of my code, for more detailed code + example, you can check the website itself of course.
Thnx!
<div id="content" class="block">
<div id="header">
<nav class="centered">
<h2>minimalito.</h2>
<ul>
<li>about.</li>
<li>work.</li>
<li>contact.</li>
</ul>
</nav>
<h1 id="contact" class="ninja">minimalito#info.be</h1>
</div>
<div id="load">Loading</div>
<div id="page">
</div>
<div id="footer">
</div>
</div>
Your #header has a fixed position so it is not part of the document flow.
#content has a top margin that pushes both #content and #footer down so that they are positioned below #header#.
Now when you click on one of the menu links at the top fadeOut is called on #content which sets display: none; on it. With nothing left to push elements that are part of the document flow down anymore #footer is moved all the way to the top of the page until the new content is asynchronously loaded.
Instead of having fadeOut set display to none consider just changing the opacity and replace the content when the element is invisible.
I have tried all the suggestions on here I just can't seem to get mine to pop-up in front of my stylesheet in IE. Works in firefox and chrome. Here is a very basic example of my layout.
the website is gulfstreamdata dot com . If you add anything to the cart and then in the top-right click on "expand" it drops down whats in your cart, but in IE it pops-under the template. :(
<div class="vmCartModule" style="position:relative; z-index:900; ">
<div id="dropdown" style="position:absolute; z-index:901;">
</div>
</div>
I tried making both z-index values the same and i tried making the outer div higher. Tried about everything I could think of in IE developer tools to no avail.
Anyway since it is positioned in a position you know, maybe you could detach it from the parent div, and move it after its actual parent div, so it will be drawn on front (also removing the z-index values).
<div class="vmCartModule">
</div>
<div id="dropdown" style="position:absolute; z-index:1;">
</div>
you shouldn't have problems in positioning it relative to the body, since it's on top right of the site.
EDIT
If it pops under your template, move that div to the bottom of your website, maybe right before </body>. I had the same issue with many menu and sub menus and it always worked perfectly.
Do this:
<div id="dropdown" style="position:absolute; z-index:901;">
//your content
</div>
<div class="vmCartModule" style="position:relative; z-index:900; ">
//your content
</div>
See demo in IE8 : http://jsfiddle.net/WtWqX/8/
Anyone know how to lay a div tag that has an Image in it on top of a other div tag that has its one image in it? In the end I want to lay one image on top of a other image.
Thanks
Why not do two div tags, one housing the other, both with background images applied to them. Then you can use the background-position to position them how you'd like.
<div id="one">
<div id="two">
</div>
</div>
#one{background:url('image_one.png') no-repeat}
#two{background:url('image_two.png') no-repeat}
EDIT: Make sure you set the height and width of the div's to match your image size.
Put a background image in the bottom <div> tag, and put an <img /> inside the div. Another possibility is to use 2 <img> tags, but apply Position:absolute to both and use z-index to specify the layer order.
You can set it up as a nested div with the internal div set to use relative positioning.
The following is the best tutorial I've ever seen on css positioning:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
solution 1:<div style="position:relative">
<div style="position:absolute;top:0;left:0;">
<img src="foo.png" />
</div>
<div style="position:absolute:top:0;left:0;">
<img src="bar.png" />
</div>
</div>
solution 2:<div style="background:url('foo.png') no-repeat scroll transparent">
<img src="bar.png" />
</div>
not great solutions... Not sure why you would want to do this anyway