SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Firefox Compatibility Issue/ Absolute/Relative Images Question

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by zcblack View Post
    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:

    Code:
    #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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    #station:hover {
        zoom:101.5%;
        margin:3px  0 0 2px;
    }

  5. #5
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just do the same for the others and it should be ok


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •