Page 1 of 1

absolutly positioned div with inline elements inside

Posted: Thu Aug 11, 2005 5:43 pm
by newmember
Hi

i have javascript popup menu... here is how it looks in IE with one submenu open...
Image

and here the same menu and how it look in firefox:

Image

submenu declared as:

.submenu{position:absolute}
(its left and top coordinates are calculated with js)

and parent menu (with 'Articles' highlighted) declared as:
.rootmenu{position:relative}
so that the very first menu is positioned with document normal flow...

if you not already see, the problem is that firefox renders submenu in strange way... instead of placing menu entries one next to other like ie does. (in ff menu entries even stick out of submenu itself.)

I realize that i didn't specify 'width' on submenu... but this shouldn't be the problem(only floats require explicit width)
another thing i tried is to give submenu specific width say 300px... and now firefox renders it ok...but this is not the way...because each submenu can contain different number of entries...

one way to fix would be looping through children of submenu and summing up their offsetWidth and using total as the needed width...

but i want to understand why firefox renders submenu the way it does.. :?:

answer?

Posted: Wed Sep 07, 2005 3:16 pm
by J_Iceman05
I'm not sure if this actually answers your question but...
I don't know the exact reason why the different browsers will display certain things incorrectly because i havn't looked at the source of any of the browsers.
what i can tell you, is that because the browsers are created by different people, they are written differently. The differences in the program's souce makes them interpret your code differently. This may be caused by a conflict in the code that the author didn't notice, or maybe something they completely forgot.
So the best thing I can tell you to help with your problem is to format it differently, or use a browser detection line of code and basically make two different classes or sets of classes to be used appropriately

for the type of browser....

Code: Select all

<HEAD>
<SCRIPT language="JavaScript">
<!--
var browserName=navigator.appName; 
if (browserName=="Netscape")
{ 
    .submenu{position:relative}
    .rootmenu{position:relative} 
}
elseif (browserName=="Microsoft Internet Explorer")
 {
    .submenu{position:absolute}
    .rootmenu{position:relative} 
 }
-->
</SCRIPT>
</HEAD>
I actually found this particular script setup on http://www.pageresource.com/jscript/jbrowse.htm

NOTE: FireFox is made by Netscape so by all browser dection codes i have seen, FireFox is categorized as Netscape
This one also detects FireFox as Netscape


You can also just google "browser detection"
http://www.google.com/search?hl=en&q=br ... gle+Search

Re: absolutly positioned div with inline elements inside

Posted: Wed Sep 07, 2005 3:56 pm
by Roja
newmember wrote: but i want to understand why firefox renders submenu the way it does.. :?:
We would need a complete page of html to compare its behaviors in IE and FF. It can be EXTREMELY minor changes in a page, down to the order or placement of a single div that can determine it.

However, as a general statement, Firefox enforces the standards rigidly, while IE will 'work around' problems in your code. The result is that your code may not be standard, and thus will work in IE (because it fixes it for you), while FF would reject it as invalid.

By posting a whole page, we can help more directly.
J_Iceman05 wrote:use a browser detection
As a general statement, browser detection is bad for a number of reasons. Many browsers can now (and do by default) claim to be other browsers. The suggested 'better' choice for developers is object testing. By testing the specific behavior and objects you need, you ensure that you arent testing for a browser name (which may change functionality or actually be a completely different browser), you are testing what you need to.

But lets focus on diagnosing the problem itself. We need a full page of code to test, please.