Image positioning different between Chrome and Firefox - html

I have two images that I want to be positioned directly on top of each other. This HTML is generated by a script every so often so I have included the CSS directly within the HTML itself.
<div style="text-align:center">
<img id="background"
style="position: absolute; z-index: 1; "
src="background.png"/>
<img id="foreground"
style="position: relative; z-index: 10; "
src="foreground.png" border="0" usemap="#map"/>
</div>
It works perfectly, except in Chrome.
In firefox and Internet explorer it works 100% of the time, I can sit and hit refresh and it is fine. In Chrome sometimes on page load or refresh the background image appears to be shifted 50% to the right?
I just did a quick test and 5/10 times (half of the time) it would appear shifted to the right on a refresh.
Does anyone have any ideas what could be causing this?

Assuming that your foreground and background images are the same size, it seems as if you are trying to do this:
<img id="foreground" style="margin-left:auto; margin-right:auto; background:url("background.png");" src="foreground.png" usemap="#map"/>
The margin-left:auto; margin-right:auto; will center the image within its parent element.

Related

Image Link Not Working

In my webpage I have set up an image link/anchor using the following code:
<div class="bg_1">
<div class="Absolute-Center">
<span style="font-size: 50px; color: aqua">in short.</span><br />
LIVE LIFE AT YOUR OWN PACE.<br /><br /><br /><br /><br /><br /><br />
<img src="images/scrolldown.png" width="50" height="50" border="0" />
</div>
</div>
<div style="height: 100vh; background-color: black;" >
<a name="home1"></a>
</div>
However when I run my page this image does not appear to be clickable, nor does it take you anywhere when you click. Any ideas? If it makes any difference the image I am using is mostly transparent.
Edit:
I have narrowed the problem down to being caused by z-index. The CSS code for "bg__1" is as follows:
.bg_1 {
height: 100vh;
position: relative;
z-index: -1;
background-position: center center;
background-size: cover;
background-image: url(http://31.media.tumblr.com/2c3a72acc53b1a78ef3b6c4986604cd2/tumblr_ni0jt8sKlY1sr6759o1_500.gif);
}
Removing the z-index line fixes the problem however I need the z-index for my layout.
It might had happen because of the body element covering your link. Just decrease z-index property of the body element.
Without seeing the layout of the page it is difficult to find the fix.
However, you have few possibilities:
Change your page layout
Remove z-index: -1 from css styles
Find the element which is overlapping your image and add pointer-events: none to it's style. Then, click events will pass through to image.
Change z-index of element which is overlapping the image, and give it lower z-index value
I have found my error. Image links become un-responsive if they are contained in a div or block that has a negative z-index. So instead of making it negative to render below default. Keep its container at default and raise the z-index of those you want it to render behind.

Hyperlinks not working on images

I have uploaded my page here so that you can see clearly what I am referring to:
http://www.emmasteed.co.uk/new/
The menu section works fine it is the larger button icons at the bottom: Portfolio, Get in touch and About me.
I have hyperlinked these images as you will see in the code however nothing happens when I hover over them or try to click. What am I doing wrong? This is driving me crazy!
<div class="largemenubutton"><img src="images/portfolio.png" alt="Portfolio" border="0" /></div>
<div class="largemenubutton"><img src="images/getintouch.png" alt="Contact me!" border="0" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" alt="About" border="0" /></div>
.largemenubutton {
width:283px;
height:259px;
margin-top:20px;
float:left;
display:block;
text-align:center;
}
Remove the z-index -1 there:
.mainimage {
z-index: -1;
}
For keeping the drop shadow do the following:
<div class="header">
<div class="container">
remove the mainhome width and apply to the container in the css:
.container {
width: 850px;
}
Also use that container for wrapping the same way the main content for the site.
and then for the drop shadow (customize as you please):
.header {
box-shadow: 0 0 0 10px black;
}
This is the fiddle that represents more or less this: http://jsfiddle.net/9q7PX/
Two possible solutions come to mind:
1) Wrap the img element in a div, and wrap that div with your a element.
2) Nix the img element from your DOM, and instead make it a background-image of a div (in CSS). Then wrap that div with your a element.
I have finally managed to figure a way round this. I would like to thank everyone for their answers and advice as without this I probably would never have found this solution. The z-index setting on the previous div was the problem I had to get round.
Basically i created another div tag to contain my large menu buttons and placed this outside of the previous div which held my slider image which was set at z-index -1 as i wanted my image to sit behind a drop shadow above. This then allowed the links on the images to work.
Hope this makes sense and helps anyone else who has this problem.

Interactive Image With Multiple Mouse Overs

In order to teach the different components of a website, I have a giant image (made in photoshop) with a bunch of boxes labeled header, sidebar, content, footer etc all in one image. Using absolutely positioned divs with images inside, I have made it so that when moused over certain parts of the image, like for example the logo, a box appears with information about that specific part of the website and this box appears on top of the logo.
The problem is that this doesn't seem to work in internet explorer (the images never appear) and the images are out of place on a Mac in Safari. The feature I am describing can be seen here
and some samples from my code are below. Is there a better way I can accomplish this task, or solve the problem of the images not appearing in internet explorer and being positioned differently on Macs in Safari?
HTML
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" width="326" height="109" alt="Logo Information"></div>
<div class="look" id="look2"><img src="images/extensive_look/header_info.jpg" width="236" height="74" alt="Header Information"></div>
<img src="images/extensive_look/website_layout.jpg" width="1200" height="890" alt="Website Layout">
CSS
.look:hover img{
visibility:visible;
}
.look {
position: absolute;
left: 320px;
top: 328px;
}
#look1 {
top:211px;
left:53px;
}
#look2 {
top: 205px;
left: 487px;
}
#look3 {
top: 282px;
left: 403px;
Something like this to complement the comment:
<div>
<h1 align="center">Extensive Look at a Website</h1><p style="width:800px;margin:0 auto;">As you can see in step 1 of the 7 steps, web design begins with an understanding of a website. Below is a model website featuring the different components of a website. As you scroll, make sure to mouse over the different components to get information on that component. It is important to note that while these are common parts of most websites, not every website will have every component.</p>
<p style="width:800px;margin:0 auto;"> </p>
</div>
<div class="content" style="position:relative;width:1200px;height:890px;background-image:url('images/extensive_look/website_layout.jpg');">
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" alt="Logo Information" height="109" width="326"></div>
rest of look things here.
</div>

centered position: fixed on mobile browser zooms incorrectly

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

IE Z-INDEX Issue

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>