PDA

View Full Version : Chrome CSS Drop Down Menu help



Dragzonox
03-14-2006, 06:13 PM
Hello..
I'm working in postnuke, and want to use your menu script.

Please take a look at what I'm doing:
http://www.tg-gaming.dk/menu-test/index.php

You may see the problem... I have to get the menu centeret, and working in IE.

I'm hoping that someone can help me, because any help that I can get will be to big appreciation...

- Dragzonox

jscheuer1
03-14-2006, 06:30 PM
Your test page is blank in IE and in Opera. This speaks to a more fundamental problem than anything to do with the menu. For centering, this page can be very useful:

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Dragzonox
03-14-2006, 06:36 PM
I'm that smart of a coder... (not a coder at all)
But what do I need to do to fix the center problem and the IE problem?

Twey
03-14-2006, 06:56 PM
<script type="text/javascript" src="javascripts/chrome.js">Close it:
<script type="text/javascript" src="javascripts/chrome.js"></script>That should fix the blank page.

jscheuer1
03-14-2006, 07:00 PM
As I said, a more fundamental problem must be resolved first. Here is the very top and head of your page:


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

In order to display at all in IE and Opera, it should look like so:


<!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>

Let's at least get the page working before we worry about anything else. I'm surprised it displayed in FF with the way it was written.

Dragzonox
03-14-2006, 07:05 PM
So.... I done that..
It didn't change that much with the IE problem.

jscheuer1
03-14-2006, 07:09 PM
So.... I done that..


Not so as one would notice on your live page.

Dragzonox
03-14-2006, 07:26 PM
<html>
<head>
<title>..::TG-Gaming::..</title>
<link rel="StyleSheet" href="style.css" type="text/css">
<style type="text/css">
<!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>

I do miss what professor?

jscheuer1
03-14-2006, 07:53 PM
In order to display at all in IE and Opera, it should look like so:


<!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>

Forget coding, brush up on your reading skills. :)

Dragzonox
03-14-2006, 07:58 PM
Hmm... I see the problem...
Sure I need to learn how to read... But that later.

I did fix it now (for sure).. So....?
I see that IE and Firefox have a pixelproblem... gah..

jscheuer1
03-14-2006, 10: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:


<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, 10: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, 02: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 (http://www.dynamicdrive.com/notice.htm).

So, do it like this:


<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:


<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:


<!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:


<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:


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, 07:10 PM
I work out from that I can add this to my style.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%;
}

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, 09: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, 10:47 PM
Take a look (http://www.tg-gaming.dk/temp/mypart.jpg)

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

jscheuer1
03-16-2006, 01: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, 09: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, 05: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:


#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:


<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 ^_^?

jscheuer1
04-09-2006, 04:14 PM
This is totally invalid, I'm surprised any browser can make heads or tails of it (from your style.css file):


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

It should be:


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

There could be other problems.