Welcome to WebmasterWorld Guest from 54.205.170.21

Forum Moderators: not2easy

Message Too Old, No Replies

background-position across IE/FF

   
5:24 pm on Aug 24, 2005 (gmt 0)

10+ Year Member



Hi,

I have a wee bit of code in my HTML page, it sets up a nice background image, over which I have overlaid another image (in HTML), which takes advantage of the overlap to create a nice visual image (imagine background image and overlaid image combining to create one complete image, then overlaid image changes using mouseovers and you'll get the picture).

Anyway, in Firefox it seems to be just 2pxs closer to the top of the browser than IE, so I've set the CSS to background-position: 50% 2%; to make it look good in IE, but I want it to work in FF too.

Is there anyway that I can dictate that Firefox gets the info in one way, and IE in another.

Or does anyone know a work-round for this little problem?

Code below:

Thanks!

<STYLE type="text/css">
BODY { background: url("i/home_master.gif");
background-position: 50% 2%;
background-repeat: no-repeat;
background-color: #005B8A;
}
</STYLE>

[edited by: SuzyUK at 8:55 pm (utc) on Aug. 24, 2005]
[edit reason] bbs formatting [/edit]

10:22 pm on Aug 26, 2005 (gmt 0)

5+ Year Member



Try using the!important rule eg:

<STYLE type="text/css">
BODY {
background: url("i/home_master.gif");
background-position: 49% 1%!important;
background-position: 50% 2%;
background-repeat: no-repeat;
background-color: #005B8A;
}
</STYLE>

As IE ignores/doesnt recognize the!important rule it jumps the line. FF recognizes the!important rule and places the image where the!important rule says it should be.

The best way is to see where the images line up in FF and then place the!important next to the measurements shown in the css above. As you already know where it lines up in IE, write the code below the!important rule otherwise FF uses that line of code.

The only problem with!important is that Opera and as far as I know NN can read both so they will automatically use this rule and it may lead to the same problem as what you have already.

2:08 pm on Aug 27, 2005 (gmt 0)

5+ Year Member



just a quick follow up to cut your code down, not sure about your percent values though...

background:#005B8A url(blah/blah/blah.gif) no-repeat 0 0 20% 2%;

no need for all the extra clutter ;)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month