CSS Firefox Compatibility Issue/ Absolute/Relative Images Question

[zcblack]

First, here is my link http://www.droppedcall.com/zachary/p...real/home.html

I am relatively new to web design and am having a few issues making my web page. To start, I am using a mac and safari is my default browser. My CSS zoom properties are working in safari but when I cross tested it in Firefox the zoom does not work. I researched this a little bit and it looks like the browser does not recognize this property. My question is if there is another CSS property that will allow me to do this zoom that works in multiple browsers.

Next, I have originally set all of my image positions as absolute because I need each image in its exact position on the background for the sight to look and work like I want it to. I am now aware that I could use the div class of "wrapper" around my images in order to get it to float in the relative position of my body so that it would be centered in larger width browsers but still keep its exact position and look.

I hope this is not too confusing and any help would be greatly appreciated.

[ralph.m]

My CSS zoom properties are working in safari but when I cross tested it in Firefox the zoom does not work.

Not sure I know what you are asking here, but there are zoom options that you can set in Firefox (and other browsers, no doubt). For example, go to View > Zoom > Zoom Text Only to prevent Firefox increasing the size of all elements when you zoom the page.

I am now aware that I could use the div class of "wrapper" around my images in order to get it to float in the relative position of my body so that it would be centered in larger width browsers but still keep its exact position and look.

Yep, what you do is add in some CSS styles like this:

#wrapper {
  position: relative;
  width: 975px;
  margin: 0 auto;
  background: url('background.jpg') no-repeat 50% 0;
}

position:relative means that the absolutely positioned images within the wrapper will now be positioned in relation to the wrapper, rather than to the viewport (browser window).

margin: 0 auto means place zero margin on the top and bottom of the wrapper, and make the left and right margins auto, which means the wrapper will be centered on the page. This only works if the wrapper is given a width, hence the width setting (which is the width of the background image).

Lastly, remove the background from the body element and place it on the wrapper instead (as shown above).

Hope that helps—or at least gets you started. Post back if you have any more questions.

[zcblack]

Thanks the wrapper is now working perfect. However, in regards to my first question, I cannot find anything in firefox preferences about zoom. My original question was how do I get each of my individual images to zoom 101% when you move the mouse over the image, in order to give the page life and motion, and so the person can recognize each individual image as a link. In safari, the zoom property works perfectly like I want it to but this does not work in firefox.

Hope this time my issue makes a little more sense and thanks again for the help

[Paul O'B]

Hi,

The zoom property is a proprietary extension and is not part of the CSS specification and isn't supported by Firefox. I didn't realise that webkit supported it either until a few minutes ago.

Why don't you just nudge the elements a couple of pixels on hover because that looks much the same as the zoom effect you are getting.

e.g.

#station:hover {
    zoom:101.5%;
    margin:3px  0 0 2px;
}

[zcblack]

that effect works just as well as the zoom, thanks. Would I just add that same margin to each hover or is it unique to each position

[Paul O'B]

Just do the same for the others and it should be ok