In the web site http://greywolfdesign.com , there is a pop-up menu (when
mouse over 'Portfolio' menu item), it always works well when using IE (6).
However, when using Mozilla 1.6, the popup works well for all the pages
except the 4 pages which can be opened by click the menu link in the
popup. In these four pages, the popup will always be shown at the
leftmost of its parent div (flow) instead of under the 'Portfolio' menu
item.
When tracing the javascript code, I found the the ....style.left and
....style.top cannot be set a value, and it causes the problem. However,
for all other pages, the values can be set.
36 function showPopup(id, menuid) {
37 clearTimeout(mTimeout[id]);
38 var loc = getElementPosition(menuid);
39 var popup = document.getElementById(id);
40 popup.style.position = "absolute";
41 //
42 popup.style.top = loc.top + 15;
43 //
44 popup.style.left = loc.left;
45 //
46 popup.style.display = 'block';
47 }
That's the statements 42, 44 don't work in the problem four pages, but
they work for all other pages. The differents is the four pages may have
a few dreamweaver created javascript routines....
Or can it be a bug of Mozilla? 8 2021
nick wrote:
<snip> 42 popup.style.top = loc.top + 15; 43 // 44 popup.style.left = loc.left; 45 // 46 popup.style.display = 'block'; 47 }
That's the statements 42, 44 don't work in the problem four pages, but they work for all other pages. The differents is the four pages may have a few dreamweaver created javascript routines....
Or can it be a bug of Mozilla?
No, as usual it is a case of Mozilla doing what it is supposed to do and
IE being tolerant of errors. The properties of the - style - object are
assigned values that correspond with the values used in CSS, and all non
zero CSS length values (which include top and left) as specified to
require a type of unit; px, em, pt, %, etc. So non-zero length values
assigned without units are meaningless in CSS terms, and CSS requires
implementations to ignore properties and values that it does not
understand. Mozilla is ignoring the properties as it is supposed to.
The balance of probability is that the reason that Mozilla is not
ignoring the assignments all of the time is that the pages where you
have a problem are defined in such a way that the browser is put into
"standards" mode, where Mozilla is very strict about the interpretation
of CSS according to the published standards, and the pages that "work"
are such that the browser goes into "quirks" mode and re-produces some
of the erroneous behaviour exhibited by earlier versions and/or other
browsers.
There is a short description of handling the assigning of values for
positioning elements cross-browser, using CSS units where appropriate,
at:-
<URL: http://jibbering.com/faq/faq_notes/misc.html#mtCSSUn >
Richard.
Richard Cornford wrote: nick wrote: <snip>
42 popup.style.top = loc.top + 15; 43 // 44 popup.style.left = loc.left; 45 // 46 popup.style.display = 'block'; 47 }
That's the statements 42, 44 don't work in the problem four pages, but they work for all other pages. The differents is the four pages may have a few dreamweaver created javascript routines....
Or can it be a bug of Mozilla?
No, as usual it is a case of Mozilla doing what it is supposed to do and IE being tolerant of errors. The properties of the - style - object are assigned values that correspond with the values used in CSS, and all non zero CSS length values (which include top and left) as specified to require a type of unit; px, em, pt, %, etc. So non-zero length values assigned without units are meaningless in CSS terms, and CSS requires implementations to ignore properties and values that it does not understand. Mozilla is ignoring the properties as it is supposed to.
The balance of probability is that the reason that Mozilla is not ignoring the assignments all of the time is that the pages where you have a problem are defined in such a way that the browser is put into "standards" mode, where Mozilla is very strict about the interpretation of CSS according to the published standards, and the pages that "work" are such that the browser goes into "quirks" mode and re-produces some of the erroneous behaviour exhibited by earlier versions and/or other browsers.
There is a short description of handling the assigning of values for positioning elements cross-browser, using CSS units where appropriate, at:-
<URL: http://jibbering.com/faq/faq_notes/misc.html#mtCSSUn >
Richard.
Thanks very much, also, i found difference cause the working and
non-working one is the DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
This one will make javascript ignore (not assign) the value without unit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
But this one will assume the unit is px and it works.
I found VS.Net also use the late one... and IE just works, is the late
one a better choice?
nick wrote: Richard Cornford wrote:
nick wrote: <snip>
42 popup.style.top = loc.top + 15; 43 // 44 popup.style.left = loc.left; 45 // 46 popup.style.display = 'block'; 47 }
That's the statements 42, 44 don't work in the problem four pages, but they work for all other pages. The differents is the four pages may have a few dreamweaver created javascript routines....
Or can it be a bug of Mozilla? No, as usual it is a case of Mozilla doing what it is supposed to do and IE being tolerant of errors. The properties of the - style - object are assigned values that correspond with the values used in CSS, and all non zero CSS length values (which include top and left) as specified to require a type of unit; px, em, pt, %, etc. So non-zero length values assigned without units are meaningless in CSS terms, and CSS requires implementations to ignore properties and values that it does not understand. Mozilla is ignoring the properties as it is supposed to.
The balance of probability is that the reason that Mozilla is not ignoring the assignments all of the time is that the pages where you have a problem are defined in such a way that the browser is put into "standards" mode, where Mozilla is very strict about the interpretation of CSS according to the published standards, and the pages that "work" are such that the browser goes into "quirks" mode and re-produces some of the erroneous behaviour exhibited by earlier versions and/or other browsers.
There is a short description of handling the assigning of values for positioning elements cross-browser, using CSS units where appropriate, at:-
<URL: http://jibbering.com/faq/faq_notes/misc.html#mtCSSUn >
Richard.
Thanks very much, also, i found difference cause the working and non-working one is the DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> This one will make javascript ignore (not assign) the value without unit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> But this one will assume the unit is px and it works.
I found VS.Net also use the late one... and IE just works, is the late one a better choice?
Also I found that using the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, the
height: 100% doesn't work in Mozilla too. So I guess <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> should be better..
On Sat, 08 May 2004 01:02:04 -0400, nick <nb***@nospam.hotmail.com> wrote: nick wrote:
[snip] Thanks very much, also, i found difference cause the working and non-working one is the DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> This one will make javascript ignore (not assign) the value without unit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> But this one will assume the unit is px and it works.
I found VS.Net also use the late one... and IE just works, is the late one a better choice?
In my opinion, you shouldn't use either. Transitional mark-up shouldn't be
used for modern pages. Move to Strict HTML and CSS (drop elements like
FONT and CENTER, and attributes like bgcolor and align).
Out of the two DTDs above, the former is better. Some browsers will not
actually interpret the DTD correctly and switch into "Standards mode"
without the URI.
As I said above, you should really use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
and validate your pages (see <URL:http://validator.w3.org/>).
Also I found that using the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, the height: 100% doesn't work in Mozilla too.
What are you trying to set to 100% height? Have you considered the fact
that it shouldn't work according to the specifications?
So I guess <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> should be better..
I'd say it means your code is still broken.
Mike
--
Michael Winter M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
nick <nb***@nospam.hotmail.com> writes: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> This one will make javascript ignore (not assign) the value without unit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> But this one will assume the unit is px and it works.
I found VS.Net also use the late one... and IE just works, is the late one a better choice?
Not in my opinion. The first one triggers standards mode, the second
quirks/compatability mode. Quirks mode is made for compatability with
old, badly written pages, and it implements many of the flaws of IE
version 4. That means that old pages written for IE 4 will show as the
author intended. You should *not* make new, badly written pages. New
pages should be written according to the appropriate standards, and
should be displayed in standards mode. That will make them much more
forwards compatible than writing for a seven year old browser's
flaws and quirks.
In this case, add the "px" unit to your lenghts and be standards compliant:
popup.style.top = (loc.top + 15) + "px";
popup.style.left = loc.left + "px";
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Michael Winter wrote: On Sat, 08 May 2004 01:02:04 -0400, nick <nb***@nospam.hotmail.com> wrote:
nick wrote:
[snip]
Thanks very much, also, i found difference cause the working and non-working one is the DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> This one will make javascript ignore (not assign) the value without unit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> But this one will assume the unit is px and it works.
I found VS.Net also use the late one... and IE just works, is the late one a better choice?
In my opinion, you shouldn't use either. Transitional mark-up shouldn't be used for modern pages. Move to Strict HTML and CSS (drop elements like FONT and CENTER, and attributes like bgcolor and align).
Out of the two DTDs above, the former is better. Some browsers will not actually interpret the DTD correctly and switch into "Standards mode" without the URI.
As I said above, you should really use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
and validate your pages (see <URL:http://validator.w3.org/>).
Also I found that using the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, the height: 100% doesn't work in Mozilla too.
What are you trying to set to 100% height? Have you considered the fact that it shouldn't work according to the specifications?
I want to create a white box in the grey background, and the white box
will be 100% of the browser window (there will be a little bit margin)
when resize. Is it a bad requirement?
So I guess <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> should be better..
I'd say it means your code is still broken.
Mike
nick <nb***@nospam.hotmail.com> writes: I want to create a white box in the grey background, and the white box will be 100% of the browser window (there will be a little bit margin) when resize. Is it a bad requirement?
The web is not paper. Why do you wan't to stop the document at the bottom
of the viewport, and not allow it to overflow? What happens if the content
can't fit in the space available?
Anyway, it's doable. You just have to avoid the collapsing of margins:
---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body,html {
height:100%; padding-top:0px;
padding-bottom:0px;
}
html {
margin-top: -1px;
margin-bottom: -1px;
}
body {
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top:0px;
margin-bottom:0px
}
.bottom { position:absolute; bottom:0px; }
</style>
</head>
<body>
<div class="bottom" style="border:4px solid green; background:#c0ffc0;
left:0px; right:0px; text-align:center;">
Hello World
</div>
<h1>Test</h1>
</body>
</html>
---
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Lasse Reichstein Nielsen wrote: nick <nb***@nospam.hotmail.com> writes:
I want to create a white box in the grey background, and the white box will be 100% of the browser window (there will be a little bit margin) when resize. Is it a bad requirement?
The web is not paper. Why do you wan't to stop the document at the bottom of the viewport, and not allow it to overflow? What happens if the content can't fit in the space available?
Anyway, it's doable. You just have to avoid the collapsing of margins: --- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> body,html { height:100%; padding-top:0px; padding-bottom:0px; } html { margin-top: -1px; margin-bottom: -1px; } body { border-top: 1px solid black; border-bottom: 1px solid black; margin-top:0px; margin-bottom:0px }
.bottom { position:absolute; bottom:0px; }
</style> </head> <body> <div class="bottom" style="border:4px solid green; background:#c0ffc0; left:0px; right:0px; text-align:center;"> Hello World </div> <h1>Test</h1> </body> </html> ---
/L
Thanks, in fact, i want a <div> with a minimum 100% height and it can
grow. I want to this because the content of each page is different and
I want to make it a uniform min 100% height (minimum). This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Ethan |
last post by:
I'm trying to set up a page with a header and 2 columns. I would like
to use <div>s rather than tables. The page is here...
http://64.142.13.246/style_testing_site/style_model2.htm
In both IE...
|
by: nick |
last post by:
In the web site http://greywolfdesign.com , there is a pop-up menu (when
mouse over 'Portfolio' menu item), it always works well when using IE (6).
However, when using Mozilla 1.6, the popup...
|
by: slim |
last post by:
hi again all,
i am still working on the website as mentioned in earlier threads and
have hit another snag...
http://awash.demon.co.uk/index.php
http://awash.demon.co.uk/vd.css
the php is...
|
by: Philip |
last post by:
I am trying to make a bunched of left-floated divs that will be
contained in a larger div. the floated divs all contain a left-floated
img and text of varying sizes. If I don't set a height (or...
|
by: Gustaf Liljegren |
last post by:
Here's what I'm trying to achieve:
1. A <div>, centered on screen, 600px wide and 100px high, with a
background-image (also 600 x 100).
2. Text (an <h1> element) positioned with precision inside...
|
by: Dario de Judicibus |
last post by:
System:
Windows XP SP1 + all latest patches (no SP2)
Browser:
IE 6.0.2800.1106.xpsp2.040919-1003
Problem:
browser does not show, or partially shows, borders and background color of
<DIV> as...
|
by: Tim Sheets |
last post by:
Hi all,
I am having a problem that seems so simple, I am almost embarrassed to
ask about it.
I am working on a page that has the layout largely css driven. The top
of the page has two <img>...
|
by: drowned |
last post by:
I am using div#container and then some more <div>'s inside it. How do I make Mozilla recognize that the container should wrap up everything. I have a div#mainContent, which is right floating inside...
|
by: prino |
last post by:
Hi all,
I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
| | |