October 24th, 2006
03:12 AM
Neverside Newbie
Status: Offline!
Wierd white space..
So I made this menu at work when I was bored to experiment with javascript interacting with CSS.. I had to do a few work arounds for IE (who doesn't 
).. Anyways if you play with the menu everything looks all nice and neat unless you play with it enough to notice that when you click on 'Home' again, there is a 'blank div' (is what it looks like).. However, this only seems to happen in Firefox (that I can tell).. Also it DOESN'T do it if you go from 'Front Desk' and click on 'Home'.. But, for example, click on 'Pharmacy', you see the little submenu popup.. then click back on 'Home' and you will notice that there's a blank area right below it.. And this blank area APPEARS to be the same height as the menu items.
http://www.srncp.com/dev/hide_show_menu.htm
All the css, javascript, and html (obviously) is in 1 file so you can see it. Anyone know why this random white box shows up? 
Thanks,
Redelite
November 3rd, 2006
08:46 PM
I use firefox and I cant find anything wrong with it when I clicked around and back to "home", tried 10s of times, nothing!
___________________
//mr.oak
November 3rd, 2006
08:53 PM
England > America
Status: Offline!
i'm using IE6.0 atm and i cant notice anything apart from when you click on a item and it expands below it, if you move the mouse over it then the border around the droped down items dissapears..
___________________
Last.fm | Myspace | Flickr | Virbē
November 3rd, 2006
09:29 PM
I need a haircut
Status: Offline!
Yes, I echo Ad's claim of border oddities. It depends on which direction you mouseover (moving up or down)
___________________
Jon Culver Chia Pets
November 6th, 2006
08:07 PM
Neverside Newbie
Status: Offline!
hmm.. I just realized that it only does it on a Mac.. I use Macs at work and it does it here in Firefox but not on my PC at home.. thats odd..
Also as for the border, I noticed that too and I couldn't figure out a solution to that either ..
Edit (10:39AM CST) ---
So you got me thinking about that border issue and I decided to make a new menu from scratch.. but this time i decided to use margin of 1px and a background color.. but to my suprise IE 6.0 still takes away that space when you mouseover and mouseout.. here's the code..
http://www.srncp.com/dev/menu_IE_issue.htm
Anyone got any ideas?
--
Redelite
Last edited by redelite, November 6th, 2006 08:49 PM (Edited 1 times)
November 6th, 2006
10:21 PM
I need a haircut
Status: Offline!
Sir, are you familiar with the differences in box rendering between IE and Firefox? http://tantek.com/CSS/Examples/boxmodelhack.html
___________________
Jon Culver Chia Pets
November 7th, 2006
10:04 AM
Jag är Gandalf den grå och den vite, men vem är du?
Status: Offline!
Drop the XML version tag under the doctype.
___________________
Neversidian, your staff is broken.
November 7th, 2006
07:55 PM
Neverside Newbie
Status: Offline!
Originally posted by sparky:
yessir I am 
.. but I believe the CSS is correct, maybe I'm overlooking something..
Originally posted by Simon:
Drop the XML version tag under the doctype.
K, but can you give me a reason why? ..and if so then why do they have it in their in the first place?
--
Redelite
November 8th, 2006
10:45 AM
Jag är Gandalf den grå och den vite, men vem är du?
Status: Offline!
It ruins the otherwise fine box model in IE6 by putting it into quirks mode, which makes IE6 behave like Win-IE5.5.
Originally posted by Tantek:
Avoid the unnecessary ?xml prolog
20020404 Prerit Bhakta noted that if you include the ?xml prolog:
<?xml version="1.0"?>
then IE6/Windows uses the quirky box model.
Since the ?xml prolog is unnecessary, I recommend simply omitting it.
This is quoted from the very page Sparky links to. Chances are however, that this only is true if it is properly positioned above the doctype, not below (it would make sense). Remove it anyway though, you don't need it. Edit: Took a look at your menu in IE, and the box model seems to work fine, so that confirms it. Edit 2: You appear to use XHTML 1.1, I personally suggest XHTML 1.0 Strict instead (this doesn't fix your problem, by the way):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As for the original box model problem, that doesn't apply to IE6 nor the description of your problem(s). However, you should still read about it and apply the suggested fix to your CSS as you do indeed use defined widths together with paddings and borders. The entire thing about box model and doctype here should be treated as a friendly "by the way", off the record regarding the actual problem asked about here.
The problem with the "disapearing borders" (or margin) is an issue with the floating. Simply float the links and all should be fine. Replace display: block; with float: left; within the #menu a:link, #menu a:visited selector.
___________________
Neversidian, your staff is broken.
Last edited by Simon, November 8th, 2006 12:36 PM (Edited 11 times)
