I'm working on Mozilla 1.6 trying to get a DHTML menu to work. So far the only thing that javascript does is activate an alternate style sheet.
Mozilla does not render the sub nav UL tags clickable (and hence the <a> tags) because an image and a UL tag are contained within a DIV, and the DIV's position is set to relative and the display is set to inline.
The menu needs to pop up over top of an image. The menu is horizontal and needs to be inline, as does the container for the sub-navigation and the down-arrow image.
I've attached a ZIP file with all the HTML, JS, CSS, and images needed. I am completely baffled as to how to get Mozilla to render the links clickable. Taking out relative positioning in the .subNavBox tag renders the link tags clickable, but not positioned correctly. Removing display: inline from .subNavBox also renders the links clickable, but then things are missaligned.
Setting z-indexes also doesn't work. It seems to be a combination of inline display and relative positioning that triggers this bug/behavior.
Any help is appreciated.Funny you should point this out. I've just finished (@ 5:20am) having a major argument with IE, Opera, Mozilla, <li>'s set with display:inline; and making all of them execute all style commands set to their id's and classes. They ignored bgcolours on some browsers and width/height definitions on others (amongst other things).
I found that as soon as you removed the display:inline; all style rules you give are adhered to again but yer positioning is screwed. I found that if you replaced display:inline; with float:left; (which as far as I can make out is basically the same instruction in this case. As far as I know they both cause elements to become inline elements.) the elements would be positioned in an inline manner, but also adhere to all given style rules as expected. Hopefully the same will be true with additional mark up and scripting as it is with the CSS?
Well I'm going to add myself to the list of annoyed individuals. My problem however is viewable online. Click on them menu buttons underneath the main logo and you will see my problem exactly as yours is. The links aligned to the left are positioned fine. The links I have aligned to the right are off the bottom and side and I simply cannot get them to align properly in netscape/mozilla. I tried adding a box: tag for mozilla as someone suggested to me but it didnt do anything. Irritatingly the (Back) link in the menu doesn't work in net/moz either but thats another story.
As far as I can tell from reading, it's because IE renders boxes according to content, as opposed to mozilla rendering them according to margins. Even thinking I know what the problem is I can't work out how to fix it.
Can someone please help us three out before it turns into more
I know we'd apppreciate it.display:inline; and float:left; are NOT the same.
display:inline; will change block elements to inline thus removing their block properties.
float:left; block properties are retained, but kept 'inline'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>display:inline float:left;</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
p {border:1px solid red;width:100px;height:100px;}
-->
</style>
</head>
<body>
<p style="display:inline">inline</p><p style="display:inline">inline</p>
<div> </div>
<p style="float:left;">float</p><p style="float:left;">float</p>
</body>
</html>
Red Tyger
Use a valid DTD (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->). This will show a few more problems in your document.
Error: document.getElementById("decalogue").firstChild has no properties
Source File: <!-- m --><a class="postlink" href="http://red-tyger.com./">http://red-tyger.com./</a><!-- m -->
Line: 282
Try: document.write('<pre id="decalogue"> </pre>'Ok good reply. It still seems to choose what side it aligns by itself but at least it isn't off the page anymore.
How do I fix the vertical alignment? It's lower than it should be by about 10px in moz/net despite the horizontal now being fixed
<!-- m --><a class="postlink" href="http://red-tyger.com">http://red-tyger.com</a><!-- m --> (the menus)TygerTyger
decalogue is added with scripting , but also exists in the html? id must be unique!
Moz. has a default margin value for <pre>
<pre id="decalogue"style="margin:0;"></pre>Edit: I apologise, you are the man. Now my red bar looks right! Thank you for all your help so far. But the problem I really have is with my menu.
Edit Edit: Aha! You're not just the man you're a genius. They refuse to align anywhere other than left, but at least you can see them now! Thank you!
Edit Edit Edit: I'm starting a new thread for my next question, as it's a slightly different issue, and not CSS.The issue I was having is an absolutely-positioned element can be positioned using an inline element, but if that inline element is the absolutely-positioned element's parent, the absolutely-positioned element is not clickable in any way, shape, or form.Have you a simple example of this?
In your first thread entry code I had no problem with links.Originally posted by Fang
Have you a simple example of this?
Not right off hand.
Originally posted by Fang
In your first thread entry code I had no problem with links.
Hm. What version of Mozilla or Firefox were you using? I'm wondering if it's a bug that was fixed then.Moz. 1.7; FF 0.9
All links are clickable in FF.
All, but the last 2 links in the submenu, are clickable in Moz.
Just fired up Moz.1.4 and FF 0.7 with the same result as Moz.1.7.
Could be a bug that's been fixed.
Mozilla does not render the sub nav UL tags clickable (and hence the <a> tags) because an image and a UL tag are contained within a DIV, and the DIV's position is set to relative and the display is set to inline.
The menu needs to pop up over top of an image. The menu is horizontal and needs to be inline, as does the container for the sub-navigation and the down-arrow image.
I've attached a ZIP file with all the HTML, JS, CSS, and images needed. I am completely baffled as to how to get Mozilla to render the links clickable. Taking out relative positioning in the .subNavBox tag renders the link tags clickable, but not positioned correctly. Removing display: inline from .subNavBox also renders the links clickable, but then things are missaligned.
Setting z-indexes also doesn't work. It seems to be a combination of inline display and relative positioning that triggers this bug/behavior.
Any help is appreciated.Funny you should point this out. I've just finished (@ 5:20am) having a major argument with IE, Opera, Mozilla, <li>'s set with display:inline; and making all of them execute all style commands set to their id's and classes. They ignored bgcolours on some browsers and width/height definitions on others (amongst other things).
I found that as soon as you removed the display:inline; all style rules you give are adhered to again but yer positioning is screwed. I found that if you replaced display:inline; with float:left; (which as far as I can make out is basically the same instruction in this case. As far as I know they both cause elements to become inline elements.) the elements would be positioned in an inline manner, but also adhere to all given style rules as expected. Hopefully the same will be true with additional mark up and scripting as it is with the CSS?
Well I'm going to add myself to the list of annoyed individuals. My problem however is viewable online. Click on them menu buttons underneath the main logo and you will see my problem exactly as yours is. The links aligned to the left are positioned fine. The links I have aligned to the right are off the bottom and side and I simply cannot get them to align properly in netscape/mozilla. I tried adding a box: tag for mozilla as someone suggested to me but it didnt do anything. Irritatingly the (Back) link in the menu doesn't work in net/moz either but thats another story.As far as I can tell from reading, it's because IE renders boxes according to content, as opposed to mozilla rendering them according to margins. Even thinking I know what the problem is I can't work out how to fix it.
Can someone please help us three out before it turns into more
I know we'd apppreciate it.display:inline; and float:left; are NOT the same.display:inline; will change block elements to inline thus removing their block properties.
float:left; block properties are retained, but kept 'inline'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>display:inline float:left;</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
p {border:1px solid red;width:100px;height:100px;}
-->
</style>
</head>
<body>
<p style="display:inline">inline</p><p style="display:inline">inline</p>
<div> </div>
<p style="float:left;">float</p><p style="float:left;">float</p>
</body>
</html>
Red Tyger
Use a valid DTD (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->). This will show a few more problems in your document.
Error: document.getElementById("decalogue").firstChild has no properties
Source File: <!-- m --><a class="postlink" href="http://red-tyger.com./">http://red-tyger.com./</a><!-- m -->
Line: 282
Try: document.write('<pre id="decalogue"> </pre>'Ok good reply. It still seems to choose what side it aligns by itself but at least it isn't off the page anymore.
How do I fix the vertical alignment? It's lower than it should be by about 10px in moz/net despite the horizontal now being fixed
<!-- m --><a class="postlink" href="http://red-tyger.com">http://red-tyger.com</a><!-- m --> (the menus)TygerTyger
decalogue is added with scripting , but also exists in the html? id must be unique!
Moz. has a default margin value for <pre>
<pre id="decalogue"style="margin:0;"></pre>Edit: I apologise, you are the man. Now my red bar looks right! Thank you for all your help so far. But the problem I really have is with my menu.
Edit Edit: Aha! You're not just the man you're a genius. They refuse to align anywhere other than left, but at least you can see them now! Thank you!
Edit Edit Edit: I'm starting a new thread for my next question, as it's a slightly different issue, and not CSS.The issue I was having is an absolutely-positioned element can be positioned using an inline element, but if that inline element is the absolutely-positioned element's parent, the absolutely-positioned element is not clickable in any way, shape, or form.Have you a simple example of this?
In your first thread entry code I had no problem with links.Originally posted by Fang
Have you a simple example of this?
Not right off hand.
Originally posted by Fang
In your first thread entry code I had no problem with links.
Hm. What version of Mozilla or Firefox were you using? I'm wondering if it's a bug that was fixed then.Moz. 1.7; FF 0.9
All links are clickable in FF.
All, but the last 2 links in the submenu, are clickable in Moz.
Just fired up Moz.1.4 and FF 0.7 with the same result as Moz.1.7.
Could be a bug that's been fixed.