Position absolute different in different browsers

T

tshad

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
 
C

cwdjrxyz

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>
**********************************
Click to expand...

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.
 
T

tshad

<!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>

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.
Click to expand...

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
 
A

Adrienne Boswell

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.
Click to expand...

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.
 
T

tshad

Adrienne said:
And you had to post the entire thing to reply?!
Click to expand...
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?
Click to expand...

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.
Click to expand...

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
 
T

tshad

Lewis said:
Making menu's with javascript is just lazy. There are tons of examples
of using drop-down menus using just CSS.
Click to expand...

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).
Post links instead of source.
Click to expand...

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
 
J

Jenn

tshad said:
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).
Click to expand...


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.
 
T

tshad

In message <[email protected]>


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.
Click to expand...

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
 
T

tshad

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.
Click to expand...

It might.

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

Thanks,

Tom
 
N

Neredbojias

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.
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to position the *tooltip* comment on these buttons? 9
Can anyone please help? HTML - two tables applying different styles 4
How do I fix this issue in sqaurespace code block? 1
Help needed with thank you message 5
position absolute different in IE than firefox, help! 21
I am trying to detect Which image id="" was clicked ? 22
How to have two html audio players on one page? 0

Members online

No members online now.
Total: 81 (members: 1, guests: 80)
Robots: 457

Forum statistics

Threads
473,982
Messages
2,570,190
Members
46,740
Latest member
AdolphBig6

Latest Threads

Top