Forum Moderators: not2easy

Message Too Old, No Replies

IE doesn't understand fixed positioning. Mozilla exnay on relative pos

IE does not understand fixed positioning.

         

1beb

9:12 am on Nov 16, 2003 (gmt 0)

10+ Year Member



Is there any workaround for IE not understanding the 'position:fixed' tag, that I haven't been able to come up with for the last three days and making it so my head feels as if it is going to explode? I absolutely do not want to use a floating frame, or a layer. Although I realize these are two of the easiest options. IFRAMES, IMO don't work well with many browsers below the most recent. If there is no workaroung for that I would be incredibly ecstatic if anyone could suggest a 'plain english' example of my concurrent problem and it's resolution.

Seriously, my website is almost complete, less some content of course, except for this tricky little bug that makes things look different between NS and IE.

If you want to rant with me this is the post to do it! Otherwise, thanks in advance for any suggestions.

This is the website [bertelsen.ca].

I'm using Mozilla Firebird 0.7 and IE 6.0.blah.blah.blah to test the view.

Furthermore, I can't find a way to force Mozilla to NOT make my #menu overrun my #main div. I want to force the user to see the site as I have built it, I care little what thier resolution is.

Regards,

1beb

Quick Breakdown of CSS [bertelsen.ca].

div#total - width set, padding ( meant to be whole page )

  • div#main - width set (inside #total)
  • div#menu - width set, float:right, position:relative, left:15px (inside #total)
  • 1beb

    8:32 pm on Nov 16, 2003 (gmt 0)

    10+ Year Member



    I fixed it myself... by making the tags nested and specifiying a width for the #total

    1beb

    7:02 am on Nov 17, 2003 (gmt 0)

    10+ Year Member



    Actually I lied... it seems that mozilla browsers read relative positioning backwards with respect to IE for example, a relatively positioned element that is set as left:15px; is read from the right of the element in the opposite browser because the two browsers take different standpoints over which one is relative to the other...

    ... argh... The problem is when people view my website with a rez smaller than 1024x768 the #menu element clips runs over top of the #main element. Unfortunately if you notice I have a flash animation as a header on my main page and this causes some clipping of the #menu element when the size is reduced... and I plan on adding such headers to all the pages on the site in it's entirety.

    Any suggestions are welcome... Once again thanks in advance to the people that are peeking in and looking at the problem. ( Wholly refferals from this page to my site Batman! )

    marttali

    8:12 am on Nov 17, 2003 (gmt 0)

    10+ Year Member



    hi,
    I think u should read the terms of service before you post. No url's allowed!

    1beb

    8:56 am on Nov 17, 2003 (gmt 0)

    10+ Year Member



    ummm... nothing I can do about it now but thanks for the info...

    repeating info in case above posts are deleted...

    it seems that mozilla browsers read relative positioning backwards with respect to IE for example, a relatively positioned element that is set as left:15px; is read from the right of the element in the opposite browser because the two browsers take different standpoints over which one is relative to the other...

    ... argh... The problem is when people view my website with a rez smaller than 1024x768 the #menu element clips runs over top of the #main element. Unfortunately if you notice I have a flash animation as a header on my main page and this causes some clipping of the #menu element when the size is reduced... and I plan on adding such headers to all the pages on the site in it's entirety.

    #total{
    width:940px;
    padding:20px;
    background-color:#000033
    }
    #main{
    border:1px solid #FFFFFF;
    width:620px;
    background-color:#000000;
    font-family:verdana;
    font-size:12px;
    color:white;
    padding:10px;
    }
    #menu{
    border:1px solid #FFFFFF;
    position:relative;
    left:0px;
    float:right;
    width:250px;
    padding:10px;
    background-color:#333333;
    font-family:verdana;
    font-size:12px;
    color:white;

    where my page layout is as follows


    <div #total>
    <div #menu>...</div>
    <div #main>...</div>
    </div>

    EDIT:
    omg I'm such an "..." ( another word for donkey )

    setting the #total element to static works like a charm


    position:static;

    Thanks to another person's post that made me ACTUALLY think about it!

    Regards,

    1beb