Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Location
    Romania
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up CSS problem in positioning

    Hi all,

    I managed the JavaScript part of this footer (with JQuery).
    In Firefox all is working just fine, but in IE the position of the box is not in the right place. I tried to manage, lost a couple of hours and I decided to ask your help. I know is something what I do not see and is CSS problem.

    Also could be DOC Type cause if I change to
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    both is broken, Fireworks and IE, not swow anymore the box.

    You can see the code here. Any suggestion are welcome.
    http://www.finddevcode.com/slider/index_jquery.html

  • #2
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Code:
    .footerCloseAd {
        display: block;
        position: fixed;
        right: 5px;
        top: 75px; /* same as footerBackground height */
        font-size: 11px;
        color: #ccc;
    }
    Think this should be fixed, rather than absolute as you had it.

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Location
    Romania
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried that but seems that is not the right way, I get in FF up the close button and in IE still I need to scroll for box.

  • #4
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Yeah, you'll need to specify the correct position for it. In this case, I think it should be:

    Code:
    .footerCloseAd {
        display: block;
        position: fixed;
    bottom: 0
        //right: 5px;
        //top: 75px; /* same as footerBackground height */
        font-size: 11px;
        color: #ccc;
    }
    Still not working in IE? Strange...what version are you using? Only asking because according to w3schools:
    An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

  • #5
    New to the CF scene
    Join Date
    Apr 2009
    Location
    Romania
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is much better, even now the close button is on the left, I will fix that. I use IE8 :-(, I will try to see on IE 7 and IE 6 how is look.
    TX so far.

  • #6
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    No, it's not working in any versions of IE. Hmm, strange...I'm not sure if it is possible them, to have an image in a fixed position in IE...

  • #7
    New to the CF scene
    Join Date
    Apr 2009
    Location
    Romania
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    See here, It seems is possible ... http://www.ultimatefooter-ad.com/

  • #8
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    I see it in Firefox but not IE7.

    However, in IETester, I see it in IE6 and IE 7, but not IE 8...that's very strange...

    Not sure if it's all been done in Javascript or not. Can't help you - sorry!

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    At the moment, if you view the page using the IE developer toolbar it does not show position:fixed against your footer, even though it's in the css file. Now, position:fixed will work in IE7, but not when IE7 is in quirks mode. At the moment I suspect your page is triggering quirks because your doctype is:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    Try replacing this with:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    You also have a few errors in your markup - suggest fixing these as well.

    Position:fixed won't work in IE6.

  • #10
    New to the CF scene
    Join Date
    Apr 2009
    Location
    Romania
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    for the moment I have succeeded on http://www.finddevcode.com/slider/index_jquery2.html but I am still want to see why in way how I started initially is not work. In this second example is used another JS files and I want to avoid it.

  • #11
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by lvalics View Post
    I am still want to see why in way how I started initially is not work.
    As stated above, you were using an improper doctype and triggering quirks mode in IE. IE will then never attempt to perform like other more modern browsers.

    Another note: It makes no sense at all to use the transitional doctype in new web pages. Change it to this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • #12
    New to the CF scene
    Join Date
    Apr 2009
    Location
    Romania
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually I will do a lot of test because I want to use the code through OpenX webserver as advertising on different sites. So probabbly I will have some issues, cause on each site are different DOC Type.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •