[jQuery] superfish CSS question
Hi,
Im trying to implement css only superfish and use the plugin for UI
improvements. Currently It works on all browser that superfish
supports, all but one, IE6 (suprise!)
here is a screencast on how it works taking firefox as an example
http://screencast.com/t/QQ8X9cNIge
I use blueprint css framework im not sure if there is conflict or not
but only IE where it doesnt work, it even works in IE7.
this is my generated HTML source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" href="/css/blueprint/screen.css" type="text/
css" media="screen, projection">
<link rel="stylesheet" href="/css/blueprint/print.css" type="text/
css" media="print">
<!--[if IE]><link rel="stylesheet" href="/css/blueprint/ie.css"
type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/lib/core_plugins.js"></
script>
<script type="text/javascript" src="/js/lib/debug.js"></script>
<script type="text/javascript" src="/js/lib/livequery.js"></script>
<title>tablefy</title>
</head>
<body>
<div id="header">
<div id="header_left">
<a href="/"><img src="/img/
tablefy.jpg" /></a>
</div>
<div id="header_mid">
<a href="/most_viewed">Most Viewed</a> |
<a href="/daily_pick">Daily Pick</a> | <a href="/popular">Popular
Comparisons</a> | <a href="/new"> Newly Compared</a>
</div>
<div id="header_right">
<div id="create_new_comparison">
<a href="">Create a New Comparison</
a>
</div>
<div id="header_right_menu">
<a href="/join">Join</a> <a href="/
about">About</a> <a href="/compile">Compile</a> <a href="/
login">Log in</a>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div id="second_header">
<div id="second_header_wrapper">
<div id="category">
<ul class="nav">
<li>
<a href="#">Browse by Category <img
src="/img/header/arrow.gif" /></a>
<ul>
<li><a href="/
software">software</a></
li>
<li><a href="/politics">politics</a></
li>
<li><a href="/vehicles">vehicles<img src="/img/header/
right_arrow.gif"></a><ul><li><a href="/car">car</a></li><li><a href="/
motorcycle">motorcycle</a></li></ul></
li>
<li><a href="/sports">sports<img src="/img/header/right_arrow.gif"></
a><ul><li><a href="/football">football</a></li><li><a href="/
baseball">baseball</a></li><li><a href="/soccer">soccer</a></li><li><a
href="/basketball">basketball</a></li></ul></
li>
<li><a href="/characters">characters<img src="/img/header/
right_arrow.gif"></a><ul><li><a href="/fiction">fiction</a></li><li><a
href="/real">real</a></li></ul></
li>
<li><a href="/natures">natures<img src="/img/header/
right_arrow.gif"></a><ul><li><a href="/animal">animal</a></li><li><a
href="/plants">plants</a></li></ul></
li>
<li><a href="/products">products<img src="/img/header/
right_arrow.gif"></a><ul><li><a href="/electronics">electronics</a></
li></ul></
li>
<li><a href="/misc">misc</a></
li>
</ul>
</li>
</ul>
</div>
<div class="clearfix" id="search_box">
<img src="/img/header/butn_1.gif" />
<form action="/search">
COMPARE: <input type="text"
name="data[items][]" /> <span id="versus"> VS </span> <input
type="text" name="data[items][]" />
</form>
<img src="/img/header/butn_3.gif" />
</div>
</div>
</div>
<div class="container">
<div id="container_top"><br /></div>
<div id="container_content">
wawawawa<br /> wawawawa<br /> wawawawa<br /