19 replies [Last post]
grzecisz
grzecisz's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

Hello everyone.

I have problem with floating menu in FF. It is working in Opera 9.23 flawlessly, but cant make it work with DOCTYPE in FF :curse: When i remove DOCTYPE then in some versions of FF it will run and in other it wont. Opera display my float always as i want it to (it is floating on left, ang goes down as i scroll). Anyway, in IE 7 this is also seams to work fine BUT i have to press Ctrl+F5 few times first :?
Please give me just a clue what am i doing wrong, my page is Valid XHTML 1.1, CSS is correct. I attach XHTML, CSS and JS as a code

XHTML:

<?xml version="1.0" encoding="utf-8"?>


Bana TEST




Publications menu:



  • [Go back to top]


  • Primary Publications

  • Reviews



News & Views



Lorem ipsum, sidebar test dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.










Primary Publications:



Dummy Lorem author

Lorem ipsum dummy title
(2006) - Journal of Experimental Medicine, 123:123-12.

Dummy Lorem author
Lorem ipsum dummy title (2006) - Journal of Experimental Medicine, 123:123-12.

Dummy Lorem author
Lorem ipsum dummy title (2006) - Journal of Experimental Medicine, 123:123-12.

Dummy Lorem author
Lorem ipsum dummy title (2006) - Journal of Experimental Medicine, 123:123-12.

Dummy Lorem author
Lorem ipsum dummy title (2006) - Journal of Experimental Medicine, 123:123-12.


Reviews:

Lorem Author Ipsum
Ipsum Lorem ipsum dummy title (1999) - Journal of Experimental Medicine, 123:123-12.

Lorem Author Ipsum
Ipsum Lorem ipsum dummy title (1999) - Journal of Experimental Medicine, 123:123-12.

Lorem Author Ipsum
Ipsum Lorem ipsum dummy title (1999) - Journal of Experimental Medicine, 123:123-12.

Lorem Author Ipsum
Ipsum Lorem ipsum dummy title (1999) - Journal of Experimental Medicine, 123:123-12.




CSS:

* { margin: 0; padding: 0; }

body {
/* background: #CCC url(img/bg2.gif) repeat-y fixed bottom center; */
color: #004368; margin: 20px 0;
font: normal 0.8em sans-serif,Arial;
}

img { border: none; }

a { color: #0070AD; text-decoration: none; }

/* main */
#wrapper {
background: #FFF;
border: 3px double;
border-color: #DDD #BBB #AAA #CCC;
margin: 20px auto 4px auto;
/* text-align: left; */
width: 900px;
}

#main { margin: 10px; }

#logo a { background: #e3effc url(img/logo01.png) no-repeat center; display: block; height: 250px; }

/* main menu */
#menu a {
background: #F2F2F2;
border-right: 1px solid #CECECE;
border-top: 1px solid #E5E5E5;
color: #004368;
float: left;
padding-top: 4px;
width: 146px; height: 36px;
}
#menu a span { padding-left: 10px; }
#menu a:hover {
background: #e3effc;
color: #111; }
#menu a.active { background: #d3dfec; color: #111; }
#menu a#last { width: 145px; border-right: none; }

/* content */
#content { width: 880px; clear: both; border-top: 1px solid #E5E5E5; }

/* sidebar */
#sidebar { margin: 35px 0; float: left; width: 200px; border-right: dotted 1px; }
#sidebar p { margin: 10px 10px 20px 10px; line-height: 1.0em; font-size: 1.0em; }
#sidebar p.sbtitle { font-weight: bold; }
#form1 { border-top: dotted 1px; margin: 10px 10px 0 10px; padding: 20px 0 0 0; }
/* sidebar menu */
#divStayTopLeft { width: 200px; border-right: dotted 1px; }
#sidebar ul { margin: 10px 10px 20px 30px; }

/* main section */
#central { margin: 20px 20px 20px 0; float: right; width: 600px; }
#central p, #central li { margin: 20px 10px; line-height: 1.2em; font-size: 1.1em; text-align: justify; }
#central p.front-p { font-weight: bold; line-height: 1.8em; font-size: 1.2em; margin-bottom: 30px; }
#central p.sign { font-style: italic; text-align:right; }
#central .btitle {
background-image: url(img/bgitem.gif);
background-position: top left;
background-repeat: repeat-x;
margin-bottom: 3em;
font-size: 1.2em;
font-weight: bold; }

/* research */
.research .title { font-style: none; font-weight: bold; }

/* publications post */
.publication .author { font-weight: normal; }
.publication .title { font-style: italic; font-weight: bold; }
.publication .date { color: #555; display: block; font-weight: normal; }

/* FRAME */
.frame { position: relative; top: 40px; float: right; }
.fhead {
padding: 2px 8px;
border: #334488 1px solid; width: 219px;
font-weight: bold;
background: #f9fbff; }
.fbody {
padding: 5px 8px;

border: #334488 1px dashed; border-top: none;
width: 219px;
font-size: 1em; }

/* footer */
#footer .left, #footer .right {padding: 0 20px;}
#footer {
padding: 5px;
background: #eff5f5;
color: #666;
font-size: 0.8em;
}

#moore {display: none; }

/* floats */
.left {float: left;}
.right {float: right;}
.clearer {clear: both;}
.middle { padding: 0 0 0 170px;}
.imgl {float: left; padding: 10px 20px 5px 0; text-align: center; }
.imgr {float: right; padding: 5px 10px 0 20px; text-align: center; }

JS:

var dw = document.documentElement.clientWidth;
var startX;
if (dw > 900) { startX = (dw - 900)/2 + 10; }
else { startX = 74; }

function FloatTopDiv() {
var startY = 100;
var d = document;

var ns = (window.innerHeight); // nets
var nie = (document.documentElement && document.documentElement.scrollTop); // new ie
var oie = (document.body); // old ie

function ml(id)
{
var el = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];
if (d.layers) { el.style = el; }
el.sP = function(x,y) { this.style.left=x; this.style.top=y; };
el.x = startX;
el.y = startY;
return el;
}

window.stayTopLeft=function()
{
var pY = nie ? document.documentElement.scrollTop : oie ? document.body.scrollTop : window.pageYOffset;
ftlObj.y += (pY + startY - ftlObj.y)/8;
if (ftlObj.y < 360) { ftlObj.y = 360; }
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout('stayTopLeft()', 33);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
FloatTopDiv();

I hope it can help. If you can't see anything in code i will try to put it online for you.

Big thanks for anyone who looks through it!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Remove the XML prolog and

Remove the XML prolog and drop down to 1.0, see what happens in each browser Wink

Verschwindende wrote:
  • CSS doesn't make pies

grzecisz
grzecisz's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

I actually i think i tried

I actually i think i tried this one already. As a matter of fact, i moved from XHTML 1.0 Transitional to XHTML 1.1 because i thought that maybe FF is unable to run standard mode (rather than quirks). But i will strip down prolog and put 1.0 Trans DocType, revalidate and let you know asap.

btw. did you try to put it together on your own?
maybe i should put it online for you and send a link?

thanks for care.

--- edit ---
I removed prolog, changed DocType to following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

I forgot to mention that now i'using .xhtml file extension (but .html stil didn't work for FF).

FF is still NOT FLOATING my menu, it just sticks fixed where i put it in the code (on the left - sidebar) And the funny thing is, that Opera is rendering EVERYTHING correctly, no matter what i change, remove, add etc. i hate FF Tongue i just wish that everybodu would use Opera Laughing out loud (IE still sux, because there is no support for XHTML... maybe i should switch to HTML 4.01 ?.... i don't want to give up!!)

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 4 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

i would recommend 1.0 strict

i would recommend 1.0 strict

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

grzecisz
grzecisz's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

Deuce, i just changed DT

Deuce, i just changed DT to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This Page Is Valid XHTML 1.0 Strict!

..and guess what... FF is still NOT floating my menu Shock

...until i remove DT from source.

--- few minutes later ---
OK, now i have .html file extension, no DT in source and menu IS floating in every Opera, some of FF and in IE... I could live with that but it wont be VALID xhtml then! Sad

I have this workaround working, but still, main problem left unresolved, menu is NOT floating WITH proper DT in valid xhtml...

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 4 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

put the 1.0 strict back into

put the 1.0 strict back into place and provide us with a live link and I am sure someone or myself will be able to help out.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

grzecisz
grzecisz's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

Sure, there it

Sure, there it is:

http://g506-ppc-a.bsd.uchicago.edu/test/publications2.htm

i reformated a code a bit, so it is easier to navigate Wink
Take a look and let me know Smile
--- edit ---
this actually is not a server machine, but i hope it will stay on-line for 24/7 and no worer is going to shut it down }:)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 27 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Viewing in Iceweasel

Viewing in Iceweasel (Firefox)2.0.0.6 in Debian Gnu/Linux, no problems noted.

As a side note related to using xhtml, here is your server response header:

Date: Wed, 26 Sep 2007 22:03:56 GMT
Server: Apache/1.3.37 (Unix) PHP/5.1.6 mod_gzip/1.3.26.1a mod_auth_passthrough/1.8 mod_log_bytes/1.2 mod_bwlimited/1.4 mod_ssl/2.8.28 OpenSSL/0.9.7a
Cache-Control: store, no-cache, must-revalidate, post-check=0, pre-check=0
Expires: Sun, 19 Nov 1978 05:00:00 GMT
X-Powered-By: PHP/5.1.6
Last-Modified: Wed, 26 Sep 2007 22:03:56 GMT
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 8429

200 OK

Note the content-type header line. That trumps the content-type in the document. When you used the .xhtml extension, the server, if properly configured, should have made the content-type application/xhtml+xml. The trouble with using the proper xhtml MIME type is that IE, Konqueror and presumably Safari don't grok the type.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

grzecisz
grzecisz's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

kk5st wrote:Viewing in

kk5st wrote:
Viewing in Iceweasel (Firefox)2.0.0.6 in Debian Gnu/Linux, no problems noted.

You mean that the menu is floating on the left (going down and up) ?? Laughing out loud that is sooo weird :jawdrop:
'
kk5st wrote:
As a side note related to using xhtml, here is your server response header:
Content-Type: text/html; charset=utf-8

Yeah, but so far i'm just using some lab MAC, not the proper server. Anyway, thanks for pointing. I hope that if the extension would be .xhtml it would be served as xhtml+xml.
Problem is that i've tried also .xhtml, and it didn't work on FF for me either (until i remove DT), but what more frustrating is the case with IE that you pointed out. It just doesn't parse XHTML files!!
'
Well, so i guess it's cross-version (or cross-platform?) FF problem. Thanks for checking it out.
'
I would still like to hear from other people, maybe it will comes out if it OS or browser version problem.

sticks464
Offline
Enthusiast
Topeka, KS.
Last seen: 7 years 38 weeks ago
Topeka, KS.
Timezone: GMT-6
Joined: 2006-10-18
Posts: 116
Points: 71

Looks fine in IE7, IE6 and

Looks fine in IE7, IE6 and FF2.

grzecisz
grzecisz's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

Thanks for checking,

Thanks for checking, sticks464 :thumbsup:
'
Still, this is very strange... because i don't know what causes the problem, and some of workstations with FF still can not display floating menu. :shrug:
'
Can you tell us what OS are you on, sticks464 ?

sticks464
Offline
Enthusiast
Topeka, KS.
Last seen: 7 years 38 weeks ago
Topeka, KS.
Timezone: GMT-6
Joined: 2006-10-18
Posts: 116
Points: 71

Windows XP pro

Windows XP pro

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 27 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Have you checked whether

Have you checked whether those boxes are loading from cache?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

grzecisz
grzecisz's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

Hmm... I tested on: Mac OS X

Hmm... I tested on:
Mac OS X 10.3.9 + FF 1.5.0.4 = [ ] not floating
Mac OS X 10.3.9 + FF 2.0.0.7 = [ ] not floating
Mac OS X 10.3.9 + Safari 132 = [ ] not floating
Mac OS X 10.3.9 + Opera 9.23 = [x] floating
'
Win XP Profess + FF 2.0.0.7 = [ ] not floating
Win XP Profess + IE 7.0.5730 = [ ] floating
'
suddenly, when i remove DT from source, all those [ ] browsers start to float my menu... that makes me angry :mad:
'
i have no clue what is it about... and even more weird is, that you ppl seems to not have this problem... maybe it's something with LAN? But what is the difference!?
'
out of ideas :shrug:

grzecisz
grzecisz's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

kk5st wrote:Have you checked

kk5st wrote:
Have you checked whether those boxes are loading from cache?
cheers,
gary

what do you mean by boxes? i even tried to flush cache, or pressing Ctrl+F5 instead of just 'refresh' and it still depends on DT in source.
'
please specify "boxes" Smile
'
Gonna brb in 'bout an hour, going to meeting now.

grzecisz
grzecisz's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

Hmmm... i think i will make

Hmmm... i think i will make a little cheating Wink I'll just write html docs WITHOUT DT, to keep them compatibile with those weird, freakin' browsers Sad
'
I don't care about DOCTYPE if my boss gonna open my webpage and see it in totally different way, that i designed it...
'
BTW. in my case Opera is parsing file WITH Doctype, so i guess that it is browser problem, not an invalid code.
'
--- edit ---
'
Arghhh... this cross-browser incompatibility kills me !! :curse:
Turns out, that when i remove DT then IE stops respectin main div margin: auto; (to center content) so i get menu floating, but content sticks to the left... and that's not what i want!! damn... gonna kill somebody or myself... :curse: :shrug:

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 27 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

By "boxes", I meant the

By "boxes", I meant the individual computers.

Why this:

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

grzecisz
grzecisz's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

kk5st wrote:By "boxes", I

kk5st wrote:
By "boxes", I meant the individual computers.

Got it. So yes, i did what i could not to load pages from cache.

kk5st wrote:
Why this:

Hmmmm... i think, that it holds menu in absolute position, which depend on window itself (also window width, as i use some js code to keep it on sidebar, no matter what width is), rather than on window content...
You think that this is not correct? Then, maybe somebody have a nice_cross_browser_working_floating_menu_code ? Cool

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 27 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Quote:You think that this is

Quote:
You think that this is not correct? Then, maybe somebody have a nice_cross_browser_working_floating_menu_code ? Cool

Take a look at the menu on my homepage, or my two column demo.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

grzecisz
grzecisz's picture
Offline
Regular
Last seen: 11 years 46 weeks ago
Timezone: GMT-5
Joined: 2007-09-25
Posts: 13
Points: 0

Looks very nice, also

Looks very nice, also perfectly_well_formed source. But... i don't see any floating (and i mean 'moving' as page scrolls down) menu there :? And only javascript you have is some tracker i guess. So it's not DHTML page, like mine (let's say that this menu is dynamically changing page content).
'
All i need this 'floating menu' for are some long pages with lots of publications, where it is inconvenient to scroll all the way to the top. I could probably use many_sub_pages and split content... But i'd also like to make this menu work because of my stupid ambition Wink