Position absolute different in different browsers

Discussion in 'HTML' started by tshad, May 9, 2010.

  1. tshad

    tshad Guest

    I have a page with some sliding menus. This is code that I had gotten years
    ago and am trying to make changes to it to fix some issues I had with it on
    different browsers when I got it.

    It consists of 3 divs. The main container, the container inside the main
    container that holds the content and is the part that slides, and the
    content.

    I want to control where the content will show up relative to my link without
    having to put absolute coordinates in it. I will control the horizontal
    position with padding but first have to figure out why IE is acting
    differently than FireFox. I have it sort of working but I get different
    results based on the brower. I now have urls to display on a free website I
    found which also have other stuff added by the website. I put a lot of
    spaces before and after my code.

    I have a couple of issues,
    1) the borders (red and yellow) are not displayed in Firefox or in my free
    website using IE. If I take the whole page on my machine the borders show.

    2) In my Absolute version: http://tshad1.webs.com/Absolute.htm, in IE, the
    divs are to the left of the link (Console). In FireFox they are below. If I
    add a <br/> after the word Console then IE looks like FireFox and FireFox
    remains the same.

    3) In my NotAbsolute version: http://tshad1.webs.com/NotAbsolute.htm, they
    both look the same in positioning (with or without the <br/>).

    4) The style is being injected into the page from javascript. Not sure why
    but the author had put ID before and after the styles:
    ("#menu1Container {overflow:hidden; z-index:10000;}#menu1Container.
    If I take out the 2nd #menu1Container, then IE works like Firefox:
    http://tshad1.webs.com/AbsoluteChangeScript.htm. This seem to be what is
    causing the divs to show up next to the link. In my desktop version it also
    changes the border and now the red border is this size of the inner content
    and not the size of the div. You can't see see the border difference until
    I figure out why the borders are not showing in FireFox and IE on webs.com.

    The code for the page on my desktop is:

    **********************************

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head><title>
    FAQS
    </title><meta http-equiv="content-type" content="application/xhtml+xml;
    charset=UTF-8" />
    <script type="text/javascript">
    document.writeln('<style type="text/css">');
    document.writeln("#menu1Container {overflow:hidden;
    z-index:10000;}#menu1Container, #menu1Content { width:190px; height:60px;
    clip:rect(0 190 300 0); }");
    document.writeln('</style>');
    </script>

    </head>

    <body>

    <div style="height:100%;border:solid 4px green" >

    <table cellpadding="0" cellspacing="0" border="3" align="center"
    style="width:776px;height:100%">
    <tr>
    <td style="height:100px">
    <div style=" background-color:White">
    </div>
    </td>
    </tr>
    <tr>
    <td style=" height:400px; background-color:Gray;
    text-align:left;vertical-align:top">

    <table cellspacing="0" cellpadding="0" style="
    border:solid 4px purple;width:100%;height:100%" >
    <tr>
    <td style="width:150px; text-align:left;margin:0
    0 0 10px;vertical-align:top" bgcolor="#EDE2E6">
    Advantages<br />
    <a >Console</a>&nbsp;
    <div id="menu1Container" style="border:
    solid 2 Red">
    <div id="menu1Content"
    class="slidingMenu" style="width:190px; height:300px;border: solid 2
    Yellow">
    <div style="margin-right:1px;
    margin-bottom:1px;
    border:1px solid #2FABAD;
    background-color:Green;
    ">
    <a
    href="default.aspx">Home</a>
    <a
    href="jobSummaryList.aspx">Job Summary List</a>
    <a
    href="jobSummaryList4.aspx">Job Summary List - 2 screens</a>
    </div>
    </div>
    </div><br>
    Concerns<br />
    </td>
    <td>
    This is faqs
    </td>
    </table>

    </td>
    </tr>
    <tr bgcolor="#EDE2E6">
    <td style="height:39px" colspan="2">
    </td>
    </tr>
    </table>
    </div>
    </body>

    </html>
    **********************************

    Thanks,

    Tom
     
    tshad, May 9, 2010
    #1
    1. Advertising

  2. tshad

    cwdjrxyz Guest

    On May 9, 12:49 pm, "tshad" <> wrote:
    > I have a page with some sliding menus.  This is code that I had gotten years
    > ago and am trying to make changes to it to fix some issues I had with it on
    > different browsers when I got it.
    >
    > It consists of 3 divs.  The main container, the container inside the main
    > container that holds the content and is the part that slides, and the
    > content.
    >
    > I want to control where the content will show up relative to my link without
    > having to put absolute coordinates in it.  I will control the horizontal
    > position with padding but first have to figure out why IE is acting
    > differently than FireFox.  I have it sort of working but I get different
    > results based on the brower.  I now have urls to display on a free website I
    > found which also have other stuff added by the website.  I put a lot of
    > spaces before and after my code.
    >
    > I have a couple of issues,
    > 1) the borders (red and yellow) are not displayed in Firefox or in my free
    > website using IE.  If I take the whole page on my machine the borders show.
    >
    > 2) In my Absolute version:http://tshad1.webs.com/Absolute.htm, in IE, the
    > divs are to the left of the link (Console). In FireFox they are below.  If I
    > add a <br/> after the word Console then IE looks like FireFox and FireFox
    > remains the same.
    >
    > 3) In my NotAbsolute version:http://tshad1.webs.com/NotAbsolute.htm, they
    > both look the same in positioning (with or without the <br/>).
    >
    > 4) The style is being injected into the page from javascript.  Not sure why
    > but the author had put ID before and after the styles:
    >        ("#menu1Container {overflow:hidden; z-index:10000;}#menu1Container.
    >      If I take out the 2nd #menu1Container, then IE works like Firefox:http://tshad1.webs.com/AbsoluteChangeScript.htm.  This seem to be what is
    > causing the divs to show up next to the link.  In my desktop version it also
    > changes the border and now the red border is this size of the inner content
    > and not the size of the div.  You can't see see the border difference until
    > I figure out why the borders are not showing in FireFox and IE on webs.com.
    >
    > The code for the page on my desktop is:
    >
    > **********************************
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    >
    > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    >
    > <head><title>
    >  FAQS
    > </title><meta http-equiv="content-type" content="application/xhtml+xml;
    > charset=UTF-8" />
    > <script type="text/javascript">
    >   document.writeln('<style type="text/css">');
    >   document.writeln("#menu1Container {overflow:hidden;
    > z-index:10000;}#menu1Container, #menu1Content { width:190px; height:60px;
    > clip:rect(0 190 300 0); }");
    >   document.writeln('</style>');
    > </script>
    >
    > </head>
    >
    > <body>
    >
    > <div style="height:100%;border:solid 4px green" >
    >
    >     <table cellpadding="0" cellspacing="0" border="3" align="center"
    > style="width:776px;height:100%">
    >         <tr>
    >             <td style="height:100px">
    >                 <div style=" background-color:White">
    >                 </div>
    >             </td>
    >         </tr>
    >         <tr>
    >             <td style=" height:400px; background-color:Gray;
    > text-align:left;vertical-align:top">
    >
    >                     <table  cellspacing="0" cellpadding="0" style="
    > border:solid 4px purple;width:100%;height:100%" >
    >                         <tr>
    >                             <td style="width:150px; text-align:left;margin:0
    > 0 0 10px;vertical-align:top" bgcolor="#EDE2E6">
    >                                 Advantages<br />
    >                                     <a >Console</a>&nbsp;
    >                                     <div id="menu1Container" style="border:
    > solid 2 Red">
    >                                         <div id="menu1Content"
    > class="slidingMenu" style="width:190px; height:300px;border: solid 2
    > Yellow">
    >                                             <div style="margin-right:1px;
    >               margin-bottom:1px;
    >               border:1px solid #2FABAD;
    >               background-color:Green;
    >              ">
    >                                                 <a
    > href="default.aspx">Home</a>
    >                                                 <a
    > href="jobSummaryList.aspx">Job Summary List</a>
    >                                                 <a
    > href="jobSummaryList4.aspx">Job Summary List - 2 screens</a>
    >                                             </div>
    >                                         </div>
    >                                     </div><br>
    >                                 Concerns<br />
    >                             </td>
    >                             <td>
    >                                This is faqs
    >                             </td>
    >                     </table>
    >
    >             </td>
    >         </tr>
    >         <tr bgcolor="#EDE2E6">
    >             <td style="height:39px" colspan="2">
    >             </td>
    >         </tr>
    >     </table>
    > </div>
    > </body>
    >
    > </html>
    > **********************************


    Since you gave the whole code for the page, I was able to copy it and
    paste it in the w3c validator using the direct input options there. It
    found 5 errors and 4 warnings.I first suggest you get the page to
    validate. If you have questions about what the errors and warnings
    found mean, someone in this group likely can help you. If the problems
    still remain after the page validates, then someone here will be more
    likely to help you in a useful manner.
     
    cwdjrxyz, May 9, 2010
    #2
    1. Advertising

  3. tshad

    tshad Guest

    cwdjrxyz wrote:
    > On May 9, 12:49 pm, "tshad" <> wrote:
    >> I have a page with some sliding menus. This is code that I had
    >> gotten years
    >> ago and am trying to make changes to it to fix some issues I had
    >> with it on
    >> different browsers when I got it.
    >>
    >> It consists of 3 divs. The main container, the container inside the
    >> main
    >> container that holds the content and is the part that slides, and the
    >> content.
    >>
    >> I want to control where the content will show up relative to my link
    >> without
    >> having to put absolute coordinates in it. I will control the
    >> horizontal
    >> position with padding but first have to figure out why IE is acting
    >> differently than FireFox. I have it sort of working but I get
    >> different
    >> results based on the brower. I now have urls to display on a free
    >> website I
    >> found which also have other stuff added by the website. I put a lot
    >> of
    >> spaces before and after my code.
    >>
    >> I have a couple of issues,
    >> 1) the borders (red and yellow) are not displayed in Firefox or in
    >> my free
    >> website using IE. If I take the whole page on my machine the borders
    >> show.
    >>
    >> 2) In my Absolute version:http://tshad1.webs.com/Absolute.htm, in
    >> IE, the
    >> divs are to the left of the link (Console). In FireFox they are
    >> below. If I
    >> add a <br/> after the word Console then IE looks like FireFox and
    >> FireFox
    >> remains the same.
    >>
    >> 3) In my NotAbsolute version:http://tshad1.webs.com/NotAbsolute.htm,
    >> they
    >> both look the same in positioning (with or without the <br/>).
    >>
    >> 4) The style is being injected into the page from javascript. Not
    >> sure why
    >> but the author had put ID before and after the styles:
    >> ("#menu1Container {overflow:hidden; z-index:10000;}#menu1Container.
    >> If I take out the 2nd #menu1Container, then IE works like
    >> Firefox:http://tshad1.webs.com/AbsoluteChangeScript.htm. This seem
    >> to be what is causing the divs to show up next to the link. In my
    >> desktop version it also
    >> changes the border and now the red border is this size of the inner
    >> content
    >> and not the size of the div. You can't see see the border difference
    >> until
    >> I figure out why the borders are not showing in FireFox and IE on
    >> webs.com.
    >>
    >> The code for the page on my desktop is:
    >>
    >> **********************************


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    <html>

    <head><title>
    FAQS
    </title>
    <script type="text/javascript">
    document.writeln('<style type="text/css">');
    document.writeln("#menu1Container {overflow:hidden;
    z-index:10000;}#menu1Container, #menu1Content { position:absolute;
    width:190px; height:60px; clip:rect(0 190 300 0); }");
    document.writeln('<\/style>');
    </script>

    </head>

    <body>

    <div style="height:100%;border:solid 4px green" >

    <table cellpadding="0" cellspacing="0" border="3" align="center"
    style="width:776px;height:100%">
    <tr>
    <td style="height:100px">
    <div style=" background-color:White">
    </div>
    </td>
    </tr>
    <tr>
    <td style=" height:400px; background-color:Gray;
    text-align:left;vertical-align:top">

    <table cellspacing="0" cellpadding="0" style="
    border:solid 4px purple;width:100%;height:100%" >
    <tr>
    <td style="width:150px; text-align:left;margin:0
    0 0 10px;vertical-align:top" bgcolor="#EDE2E6">
    Advantages<br />
    <a >Console</a>&nbsp;
    <div id="menu1Container" style="border:
    solid 2 Red">
    <div id="menu1Content"
    class="slidingMenu" style="position:absolute; width:190px;
    height:300px;border: solid 2 Yellow">
    <div style="margin-right:1px;
    margin-bottom:1px;
    border:1px solid #2FABAD;
    background-color:Green;
    ">
    <a
    href="default.aspx">Home</a>
    <a
    href="jobSummaryList.aspx">Job Summary List</a>
    <a
    href="jobSummaryList4.aspx">Job Summary List - 2 screens</a>
    </div>
    </div>
    </div><br />
    Concerns<br />
    </td>
    <td>
    This is faqs
    </td>
    </table>

    </td>
    </tr>
    <tr bgcolor="#EDE2E6">
    <td style="height:39px" colspan="2">
    </td>
    </tr>
    </table>
    </div>
    </body>

    </html>
    >> **********************************

    >
    > Since you gave the whole code for the page, I was able to copy it and
    > paste it in the w3c validator using the direct input options there. It
    > found 5 errors and 4 warnings.I first suggest you get the page to
    > validate. If you have questions about what the errors and warnings
    > found mean, someone in this group likely can help you. If the problems
    > still remain after the page validates, then someone here will be more
    > likely to help you in a useful manner.


    I just ran it through and took care of the errors by getting rid of the
    <meta...>, xmlns and changing the </script> to <\/script> in the
    document.writeln statement. I didn't change the <br/>, however. I did fix
    one <br> that was missing the /.

    It didn't change anything, however.

    The fix for the </script> did answer a question I had a long time ago when I
    couldn't get my script that I was injecting to work.

    Thanks,

    Tom
     
    tshad, May 9, 2010
    #3
  4. Gazing into my crystal ball I observed "tshad" <>
    writing in news:qxGFn.1257$:

    > I just ran it through and took care of the errors by getting rid of
    > the
    ><meta...>, xmlns and changing the </script> to <\/script> in the
    > document.writeln statement. I didn't change the <br/>, however. I
    > did fix one <br> that was missing the /.
    >
    > It didn't change anything, however.
    >
    > The fix for the </script> did answer a question I had a long time ago
    > when I couldn't get my script that I was injecting to work.
    >


    And you had to post the entire thing to reply?!

    Why are you using javascript to write out your style information? Users
    without javascript will not get any styling at all, and I think you have
    more chance of no javascript than no CSS.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, May 10, 2010
    #4
  5. tshad

    tshad Guest

    Adrienne Boswell wrote:
    > Gazing into my crystal ball I observed "tshad" <>
    > writing in news:qxGFn.1257$:
    >
    >> I just ran it through and took care of the errors by getting rid of
    >> the
    >> <meta...>, xmlns and changing the </script> to <\/script> in the
    >> document.writeln statement. I didn't change the <br/>, however. I
    >> did fix one <br> that was missing the /.
    >>
    >> It didn't change anything, however.
    >>
    >> The fix for the </script> did answer a question I had a long time ago
    >> when I couldn't get my script that I was injecting to work.
    >>

    >
    > And you had to post the entire thing to reply?!
    >

    I was responding to cwdjrxyz response about running it through the w3c
    validator, made changes and replaced the old code with the new code so you
    could see it with the new code

    > Why are you using javascript to write out your style information?


    Because that is what the program did. I took out most of the sliding menu
    javascript and just did the injection that the other author did. The
    injection was done partially because the javascript takes parameters passed
    to it such as absolute locations and sizes and build the resulting css and
    then writes it to the page.

    > Users without javascript will not get any styling at all, and I think
    > you have more chance of no javascript than no CSS.


    Well, that would be a problem for them.

    I high percentage of web pages use some or a large amount of javascript.
    The sliding menus are all handled by javascript and css.

    The 5th issue I found would have prevented you from seeing the issue if I
    didn't use the injection because if you take the exact same code and move it
    directly to the divs, you don't see the same behaviour, which as I mentioned
    seems to be caused by the 2nd "#menu1Container" that follows the css.

    What seem to be happening that you won't see in may urls (because the
    borders are not showing up for some reason and don't for FireFox is that if
    I put the css directly on the divs, the outside div doesn't seem to contain
    the inside div anymore. This cause the sliding menus to mess up because
    instead of starting from the left side of the outside div it goes all the
    way to the right of the screen.

    If you take the following code (that doesn't use javascript and puts the css
    directly on the divs), and run it through IE, you should see that that the
    outside border (red) is now behind the inside border (yellow) and is smaller
    than the inside border.

    The last example I had that use the javascript shows the outside border
    (red) around the inside border as it should.

    **************************************
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    <head><title>
    FAQS
    </title>

    </head>

    <body>

    <div style="height:100%;border:solid 4px green" >

    <table cellpadding="0" cellspacing="0" border="3" align="center"
    style="width:776px;height:100%">
    <tr>
    <td style="height:100px">
    <div style=" background-color:White">
    </div>
    </td>
    </tr>
    <tr>
    <td style=" height:400px; background-color:Gray;
    text-align:left;vertical-align:top">

    <table cellspacing="0" cellpadding="0" style="
    border:solid 4px purple;width:100%;height:100%" >
    <tr>
    <td style="width:150px; text-align:left;margin:0
    0 0 10px;vertical-align:top" bgcolor="#EDE2E6">
    Advantages<br />
    <a >Console</a>&nbsp;
    <div id="menu1Container"
    style="overflow:hidden; z-index:10000;border: solid 2 Red">
    <div id="menu1Content"
    class="slidingMenu" style="position:absolute; width:190px; height:60px;
    clip:rect(0 190 300 0);border: solid 2 Yellow">
    <div style="margin-right:1px;
    margin-bottom:1px;
    border:1px solid #2FABAD;
    background-color:Green;
    ">
    <a
    href="default.aspx">Home</a>
    <a
    href="jobSummaryList.aspx">Job Summary List</a>
    <a
    href="jobSummaryList4.aspx">Job Summary List - 2 screens</a>
    </div>
    </div>
    </div><br/>
    Concerns<br />
    </td>
    <td>
    This is faqs
    </td>
    </table>

    </td>
    </tr>
    <tr bgcolor="#EDE2E6">
    <td style="height:39px" colspan="2">
    </td>
    </tr>
    </table>
    </div>
    </body>

    </html>
    *****************************************

    Thanks,

    Tom
     
    tshad, May 10, 2010
    #5
  6. tshad

    tshad Guest

    Lewis wrote:
    > In message <82LFn.6794$>
    > tshad <> wrote:
    >> I high percentage of web pages use some or a large amount of
    >> javascript. The sliding menus are all handled by javascript and css.

    >
    > Making menu's with javascript is just lazy. There are tons of examples
    > of using drop-down menus using just CSS.


    I don't want drop-down menus, I want sliding menues.

    Besides this is not just a problem with the menus but why the normal HTML
    and CSS is not working consistantly ( I am sure it is something I am missing
    , I just don't know what that is).
    >
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    >
    > Post links instead of source.


    Did that - first post which explains what each one showed.

    As I mentioned, you need to use the source to see the issue of the missing
    borders or the short borders which don't seem to be displaying in Firefox or
    on webs.com.

    Thanks,

    Tom
     
    tshad, May 10, 2010
    #6
  7. tshad

    Jenn Guest

    "tshad" <> wrote in message
    news:bTVFn.1388$...
    >
    > I don't want drop-down menus, I want sliding menues.
    >
    > Besides this is not just a problem with the menus but why the normal HTML
    > and CSS is not working consistantly ( I am sure it is something I am
    > missing , I just don't know what that is).



    tshad .. you might try looking on a site called Dynamic Drive. You may find
    something there that you can adapt that works better for you.

    --
    Jenn (from Oklahoma)
    http://pqlr.org/bbs/
     
    Jenn, May 10, 2010
    #7
  8. tshad

    tshad Guest

    On May 10, 8:58 am, Lewis <> wrote:
    > In message <bTVFn.1388$>
    >   tshad <> wrote:
    >
    > > As I mentioned, you need to use the source to see the issue of the missing
    > > borders or the short borders which don't seem to be displaying in Firefox or
    > > on webs.com.

    >
    > But we can see the code from a any link. Posting code to the newsgroup
    > means I would need to put forth considerable effort to view the html as
    > displayed.


    I agree.

    But in this case you can't see the borders around the divs which show
    you the problem in either Firefox or webs.com.

    I did supply the links and I also supplied the source with all the
    headings so you can (if you want ) copy and paste directly into
    notepad and save to the desktop and run it.

    To do the same from the link would not be possible because the page is
    partially built from the web site.

    You can use either.

    Thanks,

    Tom
    >
    > --
    > Battlemage? That's not a profession. It barely qualifies as a hobby.
    > 'Battlemage' is about impressive a title as 'Lord of the Dance'. <PAUSE>
    > I'm adding Lord of the Dance to my titles.
     
    tshad, May 10, 2010
    #8
  9. tshad

    tshad Guest

    On May 10, 9:46 am, "Jenn"
    <> wrote:
    > "tshad" <> wrote in message
    >
    > news:bTVFn.1388$...
    >
    >
    >
    > > I don't want drop-down menus, I want sliding menues.

    >
    > > Besides this is not just a problem with the menus but why the normal HTML
    > > and CSS is not working consistantly ( I am sure it is something I am
    > > missing , I just don't know what that is).

    >
    > tshad .. you might try looking on a site called Dynamic Drive. You may find
    > something there that you can adapt that works better for you.
    >


    It might.

    But I need to know why this isn't working as it should.

    Thanks,

    Tom

    > --
    > Jenn (from Oklahoma)http://pqlr.org/bbs/
     
    tshad, May 10, 2010
    #9
  10. tshad

    Neredbojias Guest

    On 09 May 2010, "tshad" <> wrote:

    > I have a page with some sliding menus. This is code that I had
    > gotten years ago and am trying to make changes to it to fix some
    > issues I had with it on different browsers when I got it.
    >
    > It consists of 3 divs. The main container, the container inside the
    > main container that holds the content and is the part that slides,
    > and the content.
    >
    > I want to control where the content will show up relative to my link
    > without having to put absolute coordinates in it. I will control the
    > horizontal position with padding but first have to figure out why IE
    > is acting differently than FireFox.


    The reason for that is you're in quirks mode. The doctype line you
    have is meaningless because there is no url. The proper transitional
    doctype is:

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

    ....which puts the page in a non-quirks mode. The Strict doctype,
    would, of course, be better.

    --
    Neredbojias

    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, May 13, 2010
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luqman
    Replies:
    1
    Views:
    680
    Luqman
    Feb 7, 2006
  2. Andries
    Replies:
    5
    Views:
    4,501
    Sean Jorden
    Sep 9, 2003
  3. El Kabong

    Browsers, browsers! Quo vadis?

    El Kabong, May 11, 2007, in forum: HTML
    Replies:
    23
    Views:
    952
    dorayme
    May 13, 2007
  4. leskaPaul
    Replies:
    21
    Views:
    1,025
    leskaPaul
    Nov 11, 2007
  5. James Byrne
    Replies:
    3
    Views:
    627
    James Byrne
    Sep 14, 2010
Loading...

Share This Page