Element out of place on Mac

Get Started
1

Hi Im working on a website which includes a 220 x 245 slideshow.
I use a PC and my default browser is Firefox.
When I view it on IE the slideshow was about 10px to the the right so I used a conditional statement:

<!–[if IE]>
<link href=“styles_ie.css” rel=“stylesheet” type=“text/css” />
<![endif]–>

and adjusted the IE slideshow CSS values.

However when viewed on a Mac, the slideshow is correct vertically but is about 300px to the left!!!

Here is the site:

Mobility Scooters, Power Chairs, Wheelchairs, Stairlifts, Newcastle, NorthEast, Mobility Direct

and here is my code

/slideshow/
#slideshow {
float: none;
width: 220px;
height: 245px;
position: absolute;
left: 38px;
top: 525px;
}
#slideshow DIV {
position:absolute;
top:222px;
left:0px;
z-index:8;
opacity:0.0;
height: 240px;
background-color: #FFF;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 240px;
display: block;
border: 0;
margin-bottom: 10px;
}

Is there anything I can do to so the site renders correctly on the Mac?
Thanks Alan.
:confused:

2

It will appear in different places depending on how wide your browser window is. When you postion something absolutely, its postitioning context is the next idem up the line that has position: relative … or, if that doesn’t exist, the viewport (window) itself.

Even though your method of layout is not ideal, if it’s left as is, the first thing to do is position the slideshow in relation to the #bottom div. So add the line in red below:

div#bottom {
  background-image: url("images/content_bottom.gif");
  background-position: center bottom;
  background-repeat: no-repeat;
  float: left;
  [COLOR="Red"]position: relative;[/COLOR]
  width: 100%;
}
3

Thanks Ralph, Ill try that.
Can I just mention, my boss give me the site to finish after someone else had done most of the layout.
This problem is the last of many Ive had to sort out.
Ive told my boss Im never going to finish someone else’s site again !!!
Alan.
:slight_smile:

4

Ralph, tried that but it didnt work :frowning:
Slideshow is still in the same place on the Mac
Alan.

5

Ralph, I am most sorry, your idea did work!!!
I had forgotton to put the “;” after the value!!! :blush:
Thanks mate, it has worked a treat.
Alan.

6

Great Alan, glad it helped, and thanks for the feedback. :slight_smile: