Chrome CSS Drop Down Menu help

**jscheuer1** · 03-14-2006, 09:04 PM

Ah, that's much better! I've only got a few moments here, taking a break from some real work. I promise I will have a go at your original question when I have a chance. However, I notice that even with the correction to the top of the document, if I view the source in FF or IE I still see:

Code:

<html>
<head>
<!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" lang="en" xml:lang="en"> <head> 
<title>..::TG-Gaming::..</title> <link rel="StyleSheet" href="style.css" type="text/css"> 
<script type="text/javascript" src="javascripts/chrome.js"></script> 
</head>
<body>

That part in red doesn't belong. Perhaps your editor is putting that in there or it may be a novice php thing (don't feel bad, I'm a php novice myself). See if you can get rid of it. My money is on your editor. Fortunately, even with that added red code that doesn't belong, the page still displays so, if you can't figure out how to get rid of it, I guess it is OK.

As I say, I will get back to you later on centering the menu. That one is tough though, I haven't seen anyone do it successfully yet, not even the script's author but, I have an idea.

**Dragzonox** · 03-14-2006, 09:17 PM

Alright....
But... About the html-head thing.. What is the problem?

I start all doc's with html and then head (if neded).
I write my sites in Crimson Editor.

**jscheuer1** · 03-15-2006, 01:43 AM

Doesn't belong, a page should start with the DOCTYPE declaration and there should only be one opening <html> and one opening <head> tag per page. As I said, if you cannot fix it, it is no big deal as, it doesn't seem to make a difference in the three major browsers on this particular page. It is a bad habit and may come back to haunt you on another page. If you ever want to validate your page, you will need to get rid of it.

Now, I notice that with your script call, you have left out the credit, it belongs on the page:

PLEASE: Read and Follow DD's Terms of Use.

So, do it like this:

Code:

<script type="text/javascript" src="javascripts/chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

Right above it, use this style:

Code:

<style type="text/css">
#horizon        
	{
	position: relative;
	top: -2px;
	left: 0px;
	width: 100%;
	height: 13px;
	overflow: visible;
	}

#content    
	{
	margin-left:-451px!important;
	margin-left: 51px;
	position: absolute;
	left: 50%;
	}
</style>

If you take care of all that and get rid of the extra tags from before, your opening and head will then look like so:

Code:

<!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" lang="en" xml:lang="en"> <head> 
<title>..::TG-Gaming::..</title>
<base href="http://www.tg-gaming.dk/menu-test/" />
<link rel="StyleSheet" href="style.css" type="text/css">
<style type="text/css">
#horizon        
	{
	position: relative;
	top: -2px;
	left: 0px;
	width: 100%;
	height: 13px;
	overflow: visible;
	}

#content    
	{
	margin-left:-451px!important;
	margin-left: 51px;
	position: absolute;
	left: 50%;
	}
</style>
<script type="text/javascript" src="javascripts/chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>

Make your chromemenu division look like this:

HTML Code:

<div id="horizon">
<div id="content">
<div id="chromemenu" align="center">
<ul>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')">Action</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu2')">Adventure</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu3')">Strategy</a></li>
<li><a href="http://www.tg-gaming.dk/">TG-Gaming</a></li>
</ul>
</div></div></div>
<script type="text/javascript">
if (window.opera)
document.all['content'].style.marginLeft='43px!important';
</script>

Edit chrome.js, find this line at the end of the dropit:function(obj, e, dropmenuID) function:

Code:

this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1-(window.opera? 20 : 5)+"px"

Add the part in red.

That's it!

**Dragzonox** · 03-15-2006, 06:10 PM

I work out from that I can add this to my style.css?

Code:

#horizon        
	{
	position: relative;
	top: -2px;
	left: 0px;
	width: 100%;
	height: 13px;
	overflow: visible;
	}

#content    
	{
	margin-left:-451px!important;
	margin-left: 51px;
	position: absolute;
	left: 50%;
	}

About the DD's Terms of Use, I didn't think much about it, because it was only for testing.

Talking about testing, have you testet this?

Edit: Did just upload the code... It works fine in FF... But.... Not in IE?...

**jscheuer1** · 03-15-2006, 08:09 PM

Yah, you can add the style to the end of your stylesheet if you prefer. I did test this here in IE6, Opera8.52 and FF1.5.0. It was fine in all three. So is your demo by the way.

**Dragzonox** · 03-15-2006, 09:47 PM

Take a look

This is how I see "my demo"....
Something wrong here?

**jscheuer1** · 03-16-2006, 12:16 AM

Is that IE6 on the pc windows platform? If so, something is really odd at least. Are you sure you cleared your cache?

**Dragzonox** · 03-16-2006, 08:49 PM

I did just look at it with my IBM thinkpad... It looks allright in IE (its running 1024x768)
But on desktop it looks the same (in 1280x1024, it may be the problem?)

**jscheuer1** · 03-17-2006, 04:12 AM

I see, as I said, this has been a problem even for the menu's author. I have found a way for IE and FF, with Opera OK but not exactly in the right place. Also, be aware that since you have chosen to set the menu itself to 900px width, it will never work real well at 800x600. So here is the latest style for IE and FF:

Code:

#horizon        
	{
	position: relative;
	top: -2px;
	left: 0px;
	width: 100%;
	height: 13px;
	overflow: visible;
	}

#content    
	{
	margin-left:-451px!important;
	margin-left:0;
	position: absolute;
	left: 50%;
	left: expression(document.documentElement.clientWidth/2-this.offsetWidth/2+'px');
	}

and here is the revised scriptlet for Opera:

Code:

<script type="text/javascript">
if (window.opera){
document.all['content'].style.marginLeft='0px!important';
document.all['content'].style.left=window.innerWidth/2-document.all['content'].offsetWidth/2+'px';
}
</script>

Opera is also aided a bit more if you set the body's:

padding:0;

on your stylesheet but it is still off a bit (Opera uses padding in place of margin for default body framing).

**Dragzonox** · 04-09-2006, 11:06 AM

I know this is a bit slow answer...

http://www.tg-gaming.dk/menu-test/index.php
Sure looks fine in FF... But IE.... Ewwww.....

Help Professor ^_^?

Thread: Chrome CSS Drop Down Menu help

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions