PDA

View Full Version : Chrome CSS menu: 'content' ist not a known CSS property name



edikaufmann
02-16-2006, 03:08 PM
Dear Supporter,

below my code where I never see the drawn menu, although I see the correct hyperlinks for the menues!

However, when looking at the chromstyle.CSS sheet I see an error which tells me: 'content' ist a known CSS property name!

I use:
VisualStudio 2003

My guess is that due to the error in the stylesheet I can't see the 'drawings!
Probably again just a oversight of mine!
Thank you for any idea/help
ed

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>default</title>
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
<LINK href="chromstyle.css" type="text/css" rel="STYLESHEET">
<script type="text/javascript" src="chrome.js"></script>
</head>
<body MS_POSITIONING="GridLayout">

<div id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')">Resources</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu2')">News</a></li>
<li><a href="http://cnn.com" onMouseover="cssdropdown.dropit(this,event,'dropmenu3')">Search</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdri...................................

edikaufmann
02-16-2006, 03:12 PM
sorry, of course inside the text it should (also) read:

''content' is NOT a known CSS property name!

jscheuer1
02-16-2006, 03:17 PM
From your post's title:

'content' ist not a known CSS property name

From your post's text:

'content' ist a known CSS property name!

So, which is it? And, are you borrowing from German or some language like it or, is 'ist' a typo? Does ist mean 'is not' (as it might in English, if it were a word) or 'is' as it does in German?

Warning: Please include a link to the DD script in question in your post.
PLEASE: Include the URL to your problematic webpage that you want help with.

jscheuer1
02-16-2006, 03:22 PM
Anyways, content is not a css property, at least not as far as I know, so if I am right about that, something like this:


body {
content:white;
}

would be invalid.

Twey
02-16-2006, 05:33 PM
content is not a css propertyIt is, but some browsers (notably IE) don't support it.

So, which is it? And, are you borrowing from German or some language like it or, is 'ist' a typo? Does ist mean 'is not' (as it might in English, if it were a word) or 'is' as it does in German?
He did correct it. And, quand votre fran&#231;ais est parfait... :)

jscheuer1
02-16-2006, 08:04 PM
He did correct it. And, quand votre fran&#231;ais est parfait... :)

Crossposted. I still need to see the code, to have any hope of fixing it.

edikaufmann
02-16-2006, 08:27 PM
John, sorry for confusion - the thread title is correct i.e. NOT known!

below part of the 'chromstyle.css' file. I certainly checked myself for 'content' but was new to mee too. However, this code is downloaded from DynamicDrive (newest version today!). In VisualStudio 'content' is underlined as an error!

happy to provide addl info
thanks for your time and help
ed

Chromstyle.css:
#chromemenu{
width: 99%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

........


#chromemenu ul li a[onMouseover]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}

......

Twey
02-16-2006, 08:30 PM
The code is right; Visual Studio is wrong.

jscheuer1
02-17-2006, 07:46 AM
Yes, my mistake:

Content -

This property automatically generates content to attach before/after a CSS selector (using the :before and :after pseudo-elements.) One or more keywords may be specified for this property, but the content does not actually exist in the document tree; it is generated "on-the-fly." The 'display' property is used with this property to specify the type of rendering box for the generated content.

From -

http://www.blooberry.com/indexdot/css/properties/generate/content.htm

edikaufmann
02-17-2006, 11:18 AM
Hi John, thanks for still spending time on this subject.

I have checked the provided link to get 'smart' on CONTENT, however, this seems to be to 'high' for a hobby developer (CSS2!?). BUT:

'Content' seems to be used when CSS2 is involved, AND, the DynamicDrive 'Chrome CSS Menu' description says: "CSS2 is NOT supported in IE6 and below".

I use IE6 but sample in Dynamic Drive works fine! So, my conclusion in my case '#chromemenu:after' (see below code 'Start.aspx' (HTML)and 'chromestyle.CSS) is not used at all - right?

Perhaps you are so kind and look once at the attached files to see whether I make an obvious mistake in my HTML code! Again, I get the hyperlinks and these work fine, HOWEVER, I never see the 'drawings' i.e. it seems like e.g. '#chromemenu ul' etc. is never called!?

Thanks for your time
ed

Start.aspx (HTML)
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Start.aspx.vb" Inherits="HIAG.Start"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>Start</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link href="chromstyle.css" type="text/css" rel="STYLESHEET">
<script type="text/javascript" src="chrome.js"></script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
</form>
<div id="chromemenu">
<ul>
<li>
<a href="http://www.dynamicdrive.com">Home</a>
<li>
<a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')">Resources</a>
<li>
<a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu2')">News</a>
<li>
<a href="http://cnn.com" onMouseover="cssdropdown.dropit(this,event,'dropmenu3')">Search</a></li>
</ul>
</div>
<DIV></DIV>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.cssdrive.com">
CSS Drive</a> <a href="http://www.javascriptkit.com">JavaScript Kit</a> <a href="http://www.codingforums.com">
Coding Forums</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript
Reference</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="WIDTH: 150px">
<a href="http://www.cnn.com/">CNN</a> <a href="http://www.msnbc.com">MSNBC</a> <a href="http://news.bbc.co.uk">
BBC News</a>
</div>
<!--3rd anchor link and menu -->
<div id="dropmenu3" class="dropmenudiv" style="WIDTH: 150px">
<a href="http://www.google.com/">Google</a> <a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>
</body>
</HTML>



chromestyle.CSS
#chromemenu{
width: 99%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg2.gif) center center repeat-x; /*Theme Change here*/
margin-left: 0;
padding-left: 0;
margin: 0;
float: left;
font: bold 12px Verdana;
}


#chromemenu ul li{
display: inline;
}


#chromemenu ul li a{
float: left;
color: #7F7F7F;
font-weight: bold;
padding: 6px 12px 6px 7px;
text-decoration: none;
background: url(divider2.gif) center right no-repeat; /*Theme Change here*/
}

#chromemenu ul li a:hover{
color: #494949;
}

#chromemenu ul li a[onMouseover]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE; /*Theme Change here*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE; /*Theme Change here*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{ /*Theme Change here*/
background-color: #EBF7FF;
}

jscheuer1
02-17-2006, 03:55 PM
Well your css works fine. I can't see what script you are using, so I grabbed a copy from the demo page (this means that the copy of the script that you are using could be the trouble). Put together with your markup and style, the script works fine here in IE6. I'm not sure I understand what you are getting. If there is no menu, just a bunch of links displayed, the css is not linked properly to the page. A link rel for the stylesheet should look like so:


<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css">

The important part being the path and filename to the .css file. That bit about content not being a property is a red herring. IE6 just ignores it.

One other thing, since you are using aspx, it may be something to do with that.

edikaufmann
02-17-2006, 08:56 PM
Hi John, mea maxima culpa

thanks, all is fine. Your hint of having a link problem re the 'chromestyle.css' helped BUT .... I have to aplogize .... all it was was a typo! as you see in the HTML I provided I spelled 'chrom(e)style.css', no e!

I'm really sorry using your time ... hope I still have some credit for a possible serious issue!

Thanks a million
ed