Ok. Problem is as follow. I have rectangular icon with IMDB logo. I was trying to position it inside div but there is problem because apparently Chrome sees image as square while Safari not.
Pictures for reference:
Is it a bug? Why it's not corrected if both browsers run on the same engine?
Friend told me solution "put it in some wrapper, set its width and then set img width to 100%" but it's not working :(
Code:
<div class="something">
<img src="file.png">
</div>
Related
I have a scrollable div and was trying to implement shadow on top of the div when scrolling the div.
I found this simple implementation on codepen :
https://codepen.io/bennyzhao/pen/iGoBm
This example did work for me, but after I was playing around, I discovered something strange with the behavior of background-attachment: local when direction is set to rtl.
I've created a very simple example on codepen to show the strange behavior :
https://codepen.io/Ron537/pen/ZLaqoG
I've noticed that the problem exists in Google Chrome but works fine with Microsoft Edge.
Here is an image comparasion :
Chrome vs Edge
As you can see, with Google Chrome the background not occupies the entire div width, but leaves some blank space.
Is this a known bug?
Is there a solution for this?
I'm working on a very simple website that is pretty much just HTML and CSS. The mock up I've made works well in Firefox but when I put it into chrome it does something weird. The the text I've put in a div tag is displaying under the end.
Here's the code, if you take it into chrome you should be able to see what I'm talking about.
HTML of Site
CSS of Site
It displays correctly if you set a height on the fishtank image.
<img src="./graphics/fishtank.jpg" width="1090" height ="10" />
JSFiddle
Is the fishtank image a background image? If so, you can put it as a background image in the parent div's CSS.
I'm working on a site using Isotope from isotope.metafizzy.co.
Text works fine, Centering and fully showing up.
BUG: On Tiles that I'm placing an image into, the images starts at 50%. Even if the element is small, or width2, or clicked width. it is always starting halfway to the right of the element.
Any idea what I'm doing wrong?
Current Example: http://warpwars.net/Team/DanVioletSagmiller
Current Element Code (small part of the beginning):
<div id="container" class="clickable variable-sizes clearfix isotope">
<div class="element justMe width2 height2 isotope-item " data-symbol="Dan Violet Sagmiller" data-category="halogen">
Photo<br />
<img src="/Content/dvs/DanVioletSagmiller.png" width="556" height="736" />
</div>
<div class="element majorProj " data-symbol="Teams RPG" data-category="post-transition">
Teams RPG
</div>
I have been using Chrome's inspector to look through the CSS affecting the image, and I can't find anything that would seem to suggest the image should be in the middle.
Any ideas?
Adding an image directly to the root of the element does not work well. However, wrapping the image in another div tag works perfectly.
See the problem in action: http://jsfiddle.net/krtGd/1/
I have an embedded SVG element in a floating div, something like this:
<div style="float: left;">
<svg width="50" height="20" id="svg1">
</svg>
</div>
This works fine; the div fits as expected around the SVG. However, when I resize the SVG with JavaScript, like so:
$('#svg2').attr('width', 50);
...the SVG resizes properly, but the box around it doesn't. As you can see in the jsFiddle, the same thing is true if the containing div has display:inline-block instead of a float style.
The weird thing here, and what's convincing me that this is a reflow problem and not a simple layout problem, is that if you inspect the either of the problem elements in the Chrome console Elements Panel, the div elements resize correctly. This problem may only apply to Google Chrome - I'm seeing it in Chrome OSX v.20.0.1132.57, but not in Safari. I haven't tested in FF or IE.
So: How can I force reflow in Chrome?
I have tried the usual suspects, including inspecting div.offsetHeight, svg.getBBox(), and several other variants.
Sounds like a bug in Chromium. When the intrinsic width/height of an svg element change, the layout width/height aren’t automatically changing. You can manually set the layout width/height though: .css("width", "50px"). Have you considered filing a bug with Chromium?
There's supposed to be an image in the center under the text "GIANT MANGO". It shows in Firefox, Chrome, and IE, but it does not show in the Safari browser.
http://giantmango.com/vote-for-artist-charity-contest-44-2581
How to solve this problem?
It doesn't show up initially with Chrome 9 on Linux either. If you drill down through the developer tools, the computed style for that image shows its height and width to be 1px in both directions. If I remove the max-height: 100% from the div.post-body p img, div.post-body p object rule, the image appears.
While I can't explain this (I haven't the time to look at it in-depth) I hope this puts you on the right track towards debugging this.
On the single-wrapper div, is there a padding-top of 1000px coming in somehow, that's pushing the contained div down? (the image appears in my safari, it's just far down the page).