When I zoomed in on an XHTML document containing an SVG, it works correctly in FF and Opera, but in Safari and Chrome the width of svg document is changed by zooming in and out(increased and decreased), Is there any way to fix this problem?
in the top of your code you have used % and px together in width, which should be changed only to percent
<span style="border:solid red 1px;display: block; width:100%px;">
to
<span style="border:solid red 1px;display: block; width:100%;">
not sure if that's your problem here but it should be changed
Related
I've got a logo on top of a page which has to be centered relative to the text and fixed to the top of the viewport like in this example: http://dev.markbrouwers.nl/test.html
<h1 style="width: 200px; height: 100px; margin: 0 auto;">
<img src="images/logoforeground.png" style="position: fixed; display: block;" alt="Page title">
</h1>
<div style="width: 800px; margin: 0 auto;">
<p>content</p>
</div>
It works perfectly on pc's. Yet on mobile browsers when zooming the logo starts drifting away from the center.
I've read quite some things (e.g. this) about position fixed on iOS and apparently as of iOS 5 and Android 2.2 it should work, thought it doesn't... it still drifts... Does anyone know how to make mobile webkit behave like the pc browsers?
[edit]
I edited the html a bit, h1 is now outside the container
I also made a screenshot on an iPhone and Windows. As you can see the logo drifts off the viewport when you zoom in on iOS. In chrome browser it stays in the top middle of the viewport.
Safari/iOS5 screenshot:
Chrome/Win7 screenshot:
The Reason this happens, is mobile devices need to know the width of the page, even if the width of your page is 340px for e.g you will still run into this issue, it is because your ZOOMING, not resizing.
If you want text to be larger of the user, the best solution is have something like the following:
Two buttons Small / Large
then link those buttons to some javascript that then changes the text size based on what you want.
for e.g. when click large you might want it to go to 24px
and when they click small it goes to 14px.
It is simple javascript
Imagine three images with fixed size:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.photos img {
width: 320px;
height: 240px;
background-color: black;
}
</style>
</head>
<body>
<div class="photos">
<img src="abc" />
<img src="def" />
<img src="ghi" />
</div>
</body>
</html>
When you look at such page in IE or Chrome, you'll see what I expected - threee images with fixed sizes.
In Firefox however, it doesn't work.
But if I set the images to display: block; or remove the DOCTYPE (doesn't show on jsfiddle) it works.
What am I doing wrong?
Thanks
This seems to be an old feature in Firefox: I found a discussion about it from year 2007:
So I suppose it’s intentional and won’t go away. I guess they might be thinking this way: Everything is fine if you set dimensions on an image, we’ll scale it. But if the image is missing, we will render the alternative text instead, and this changes the img element from a replaced inline element to a text, a non-replaced inline element, and for it we won’t support height and width, by the spec. Instead, the text determines the dimensions. And presumably the authors of Firefox think this is the right thing to do, and only in Quirks Mdoe do they do as other browsers do.
If you add alt attributes (as you should, every img should have one), you’ll see how the box size varies by text length. Apparently Firefox treats a missing alt here as equivalent to alt="", implying zero width.
This would explain why setting display to inline-block (or block) changes the behavior: then width and height are applied.
I think firefox wont be applying height and width to <img> element which are empty and hence it must be rendering like that, so use CSS display: block;
Here's my fiddle
Or use an image and see...
Updated : fiddle
I have a transparent div-element with a higher z-index than an img-element on the same page. But Internet Explorer is acting as if the img-element would have a higher z-value when it comes to click events.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body style="margin:0;padding:0;">
<img src="7player.png" alt="7player" width="60" height="60" style="position:absolute; left: 100px; top: 100px; z-index:10" />
<div style="width:100%;height:100%;position:absolute;z-index:900;" onclick="alert('hello');"></div>
</body>
</html>
When clicking on the image nothing happens altough the click event of the div-element should be fired (works in Chrome for example).
Is there any workaround or fix for my problem?
In fact, your div "Doesn't have any background",
You need to give it a color background (e.g. white) with opacity=0.01.
For example:
background:white; filter:alpha(opacity=1);
Using a transparent image seems like a reasonable work-around for IE. This was answered already here:
IE z-index trouble on element with transparent background
I have tested the Suggestion given by Preli background:white;filter:alpha(opacity=1), and it is working fine. See the Demo in IE:
http://jsfiddle.net/VMrNF/11/
This is still a bug in IE11, but not Edge. The following solved my problem by creating a background that "looks" transparent but has a color.
background: rgba(255,255,255,0.0);
Slightly better that the filter solution above, if you want only the background to be transparent, but not the contents of the object.
add left:0 to div, click event available
tested in ie9
Issue: Slideshow
Details: There's a frame (which is just a transparent PNG around the slideshow)
What I'm trying to do:
Make the frame over the image and caption background but make the link and nav-balls on top of the png.
It works like I want in other browsers except for IE. I read more on the z-index bug for IE but that didn't help. Any suggestions or help is VERY very much appreciated.
Issue resolved.
To make navigation dots clickable, apply styles:
display:block; position:relative; // to frame
z-index:1001; //to .nivo-controlNav
To learn more link i suggest:
1) delete all z-index property that applies to .nivo-caption
2) add shadow div with z-index: 87 /*(87 for example)*/ below frame
The issue for this is that IE don't follow the z-indexing of an image, no matter how small or big the z-index you put in your image, IE will still follow the hierarchy level of the elements. If you really want to use z-indexing of an image in IE, you can wrap the image inside a div and put the z-index on the div, this will follow the right z-indexing on all browsers including IE.
// will not follow in IE
<div>first div</div>
<img style="z-index: -1;" src="image.png" />
<div>my div</div>
// will follow in IE
<div>first div</div>
<div style="z-index: -1;"><img src="image.png" /></div>
<div>my div</div>
has anyone got the bug on Opera (and others) but not IE6 (here everything is OK) when the block (DIV) has a background-image (no-repeat) does not appear if the block has negative margin? Something like this:
#slide_desc {height: 60px;margin-top: -84px;background: url('back/slide_desc.png') no-repeat;}
IE6, IE7 - OK
IE8, Opera, Firefox, Chrome, Safari - BUG
No background image no PNG hacks
Just this HTML:
<div id="slider"> <img src="img/slide.jpg" height="300" width="730" border="0" /> <div id="slide_desc"> Lorem ipsum </div> </div>
and this CSS
#slide_desc {margin-top: -84px;background: url('slide_desc.png') no-repeat;}
If I add position: relative - works in Opera but doesn't work in IE6
If I change to position: fixed - everything is great but I'm not sure it's perfect way to solve the problem.
Becase of scrolling this scrolls too.
Looks like you just need to give it a height and width or else it is only as big as the text in that div:
Here is a fiddle:
http://jsfiddle.net/VrEvA/
And another with the background in the original div:
http://jsfiddle.net/VrEvA/1/