2 replies [Last post]
mmaydesign
mmaydesign's picture
Offline
newbie
san diego
Last seen: 9 years 12 weeks ago
san diego
Timezone: GMT-7
Joined: 2012-10-29
Posts: 4
Points: 8

What is the best way to position a div that needs to float on the right side of the page, on top of other elements. It looks perfect in Firefox, but not IE or on mobile:

Here is the live page: http://mmaydesign.com/

mmaydesign
mmaydesign's picture
Offline
newbie
san diego
Last seen: 9 years 12 weeks ago
san diego
Timezone: GMT-7
Joined: 2012-10-29
Posts: 4
Points: 8

<div id="birds"

<div id="birds" style="z-index:1; position:absolute; right:200px; padding:0 10px; height:315px; width:340px;"><img src="images/birds_and_flowers.png" /></div>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It looks the same to me in

It looks the same to me in either browser. Its position is dependent on the browser width. Were it me, I'd likely change {right: 200px;} to {right: 0;}. What is the specific issue that concerns you?

I do see problems with

.main-bg-grey #rt-showcase {
    background-color: #444444;
    background-image: url("../images/backgrounds/grey/bg-showcase.jpg");
    background-position: 0 0;
    }
The bg image is too small and tries to repeat with a maximized browser in a wide monitor. Add the following property:
{
  background-size: 100% 100%;
  background-repeat: no-repeat;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.