Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Position absolute different in different browsers (http://www.velocityreviews.com/forums/t722604-position-absolute-different-in-different-browsers.html)

tshad 05-09-2010 05:49 PM

Position absolute different in different browsers
 
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



cwdjrxyz 05-09-2010 06:07 PM

Re: Position absolute different in different browsers
 
On May 9, 12:49*pm, "tshad" <t...@dslextreme.com> 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.

tshad 05-09-2010 10:19 PM

Re: Position absolute different in different browsers
 
cwdjrxyz wrote:
> On May 9, 12:49 pm, "tshad" <t...@dslextreme.com> 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



Adrienne Boswell 05-09-2010 11:18 PM

Re: Position absolute different in different browsers
 
Gazing into my crystal ball I observed "tshad" <tfs@dslextreme.com>
writing in news:qxGFn.1257$mi.373@newsfe01.iad:

> 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


tshad 05-10-2010 03:27 AM

Re: Position absolute different in different browsers
 
Adrienne Boswell wrote:
> Gazing into my crystal ball I observed "tshad" <tfs@dslextreme.com>
> writing in news:qxGFn.1257$mi.373@newsfe01.iad:
>
>> 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 05-10-2010 03:46 PM

Re: Position absolute different in different browsers
 
Lewis wrote:
> In message <82LFn.6794$TL5.344@newsfe24.iad>
> tshad <tfs@dslextreme.com> 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



Jenn 05-10-2010 04:46 PM

Re: Position absolute different in different browsers
 
"tshad" <tfs@dslextreme.com> wrote in message
news:bTVFn.1388$yx.1187@newsfe13.iad...
>
> 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/



tshad 05-10-2010 06:48 PM

Re: Position absolute different in different browsers
 
On May 10, 8:58*am, Lewis <g.kr...@gmail.com.dontsendmecopies> wrote:
> In message <bTVFn.1388$yx.1...@newsfe13.iad>
> * tshad <t...@dslextreme.com> 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 05-10-2010 06:48 PM

Re: Position absolute different in different browsers
 
On May 10, 9:46*am, "Jenn"
<m...@nowhere.whocareswhatthisemailisanyway> wrote:
> "tshad" <t...@dslextreme.com> wrote in message
>
> news:bTVFn.1388$yx.1187@newsfe13.iad...
>
>
>
> > 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/



Neredbojias 05-13-2010 09:03 AM

Re: Position absolute different in different browsers
 
On 09 May 2010, "tshad" <tfs@dslextreme.com> 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/


All times are GMT. The time now is 09:56 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.