CSS Banner - FF O.K., IE not - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Banner - FF O.K., IE not

cyberdyne

1:40 pm on Jan 19, 2012 (gmt 0)

A simple css corner banner works in FF but not IE. Can anyone please tell me why that is.

HTML (.php page)

<div id="x1"><a href="url.php" target="_self">Some Text</a></div>

CSS

#x1 {position: fixed;right: 0;top: 0;z-index: 1;}
#x1 a {background: url("image.png") no-repeat scroll 0 0 transparent;display: block;height: 115px;text-indent: -8000px;width: 115px;}

Many thanks in advance.

cyberdyne

3:04 pm on Jan 19, 2012 (gmt 0)

Got it.

[webmasterworld.com...]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
had to be change to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

rocknbil

4:47 pm on Jan 19, 2012 (gmt 0)

Well, if it works, it works, but your document is using a "half doctype" in both cases and is still rendering in Quirks mode, which will continue to give you cross browser grief. The first steps in cross browser compatibility:

- Use a full doctype to render in Standards Compliance mode. Choosing the best doctype for your site [webmasterworld.com] and Why most of us should NOT use XHTML [webmasterworld.com].

- Once you understand SCP and it's value, validate your documents [validator.w3.org].

cyberdyne

5:07 pm on Jan 19, 2012 (gmt 0)

Thank you for your reply, I have edited it to now show:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Regarding validation, I was having trouble getting Index page to validate as I have a little work to do, but intend to revalidate it when complete.
Many thanks

cyberdyne

5:08 pm on Jan 20, 2012 (gmt 0)

OK, I decided to use 'loose' in the end. The others broke certain aspects of my site so clearly I need to look into updating some of my code and incorporating more css.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

So back to my original problem, which has now arose again. Is there a way of rewriting the css so that it works for IE as well as FF and Opera (in which it currently works fine) ?

Many thanks in advance.

lucy24

9:22 pm on Jan 20, 2012 (gmt 0)

Here as elsewhere, you need to explain what "doesn't work" means. It's obvious to you, because you're looking right at it. But "doesn't work" can hide a multitude of sins including not displaying at all, displaying in the wrong place, being influenced by things that aren't supposed to affect it... and so on.

cyberdyne

9:27 pm on Jan 20, 2012 (gmt 0)

Apologies Lucy.
I mean that the corner banner is meant to sit in the top right hand corner of the site and (but not importantly) not scroll when the page does, therefore remaining in the top right hand corner.

This works in FF and Opera but in IE it's positioning is completely wrong. It appears in a completely different part of the page and furthermore it is almost fully hidden beneath another feature (a css positioned .js feature).

Thanks again

cyberdyne

2:09 am on Jan 21, 2012 (gmt 0)

The above query can be cancelled as I managed to place the object correctly but have settled for a scrolling action as opposed to fixed.

However, if anyone with CSS knowledge knows how to code the corner banner/image so that it remains fixed in both FF and IE I'd be very grateful.

Incidentally, I'm now using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> and I'm pleased to say my site validates.