Welcome to WebmasterWorld Guest from 54.158.51.150

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Banner - FF O.K., IE not

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

10+ Year Member



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.
3:04 pm on Jan 19, 2012 (gmt 0)

10+ Year Member



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">
4:47 pm on Jan 19, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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].
5:07 pm on Jan 19, 2012 (gmt 0)

10+ Year Member



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
5:08 pm on Jan 20, 2012 (gmt 0)

10+ Year Member



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.
9:22 pm on Jan 20, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
9:27 pm on Jan 20, 2012 (gmt 0)

10+ Year Member



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
2:09 am on Jan 21, 2012 (gmt 0)

10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month