Transparent CSS Menu - Help !

It would help to know what you have tried sofar...

Have you downloaded the css files, created a css folder in your website and put them there?

have you added the following code to the <head> tag in your html page?

<link rel="stylesheet" media="all" type="text/css" href="css/flyout_h.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_h_ie.css" />
<![endif]-->

have you added the following text where you would like your nav to appear?

http://www.cssplay.co.uk/menus/css/flyout_h.txt
 
Okay , this is what I have so far

Ive saved the style sheet in the folder that is flyout_h_ie.css

And have created the website with below , all im getting is just the page similar to http://www.cssplay.co.uk/menus/css/flyout_h.txt

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_h_ie.css" />
<![endif]-->

</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><div class="container">
<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

</div>
</div>
&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
 
Yep, you need to add flyout_h.css, that is why you are not seeing the flyout. flyout_h_ie.css is specific to ie6. I recommend you add both style sheets. Or if you dont want it to work in ie 6 you can drop flyout_h_ie.css and only use flyout_h.css.
 
I'm not a fan of using a PNG to achieve opacity on a section of a page. I have having different stylesheets / classes for different browsers. I rather use the following useful piece of CSS to achieve cross-browser compatible opacity in a single CSS class:

Code: 
.transparent_class 
{
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
}
 
Farlig, that's CSS 3.0 - "bleeding edge" stuff ;), and not supported on all browsers as yet. PNG8, on the other hand, handles well on all modern browsers (PNG24 has an issue on IE6).

Personally, I shudder seeing all that [if lte IE6] code. If someone can't get out of the past, then I'm sorry, but I'm not interested. I use IE7.js from code.google.com to work that kind of magic.
 
Funny, it seems to work on all browsers I test though (IE6, IE7, Chrome, Opera, Safari and of course Firefox). Granted, I have fairly new versions of Opera, Safari and Firefox, but many many many people still use IE6/7, so I think that little piece of CSS covers the basis for now. :)
 
I agree. Being using something similar to your class myself. I just set background colors instead of images. And it works in ie6&7, safari and firefox, not ie5 though. it just goes a solid color. Something l can live with.
 
try putting this right at the top:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

struggled with this myself until I realized the doctype needed to be defined correctly as well
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X