homepage Welcome to WebmasterWorld Guest from 54.205.106.111
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
background-position across IE/FF
wrafter




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

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]

 

creativexperience




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

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.

skizm




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

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 ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved