17 replies [Last post]
York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 21 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

The CSS dropdown navbar I've created (click here to see it) works in FF, but not IE6.

The dropdown navbar itself is positioned absolutely - this allows the dropdown menus to flow over the content, such as the banner image.

To maintain the normal flow of the document after the navbar, I've added a top margin to the unpositioned banner image that's the same height as the navbar. By keeping the banner in the normal flow, I can replace it with another one of a different height, and the content that follows will move down the page to accomodate it.

This works in FF, but not in IE6. If you can suggest a solution, I'd appreciate it. Thanks.

My CSS:

/******************************************************************* Global Styles */
html {
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-color: #353535;
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/backgroundGradient.jpg);
background-repeat: repeat-x;
color: #CCC;
text-align: center;
}
body {
font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 1.75;
margin: 0px auto;
text-align: left;
width: 728px;
}
#wrap {
margin: 0px auto;
padding: 0px;
}
#banner {
margin-top: 104px;
}

/******************************************************************* Headings */
h1 {
display: block;
color: #FFF;
background-color: transparent;
font-size: 11px;
text-transform: uppercase;
}
h2 {
display: block;
color: #999;
background-color: transparent;
font-size: 11px;
text-transform: uppercase;
}
#l_sidebar h2, #r_sidebar h2 {
margin: 0px;
padding: 10px 0px 0px 0px;
}

/******************************************************************* Hyperlinks */
a img {
border: none;
}
a:link,
a:visited {
color: #CCC;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #FFF;
background-color: transparent;
text-decoration: none;
}

/******************************************************************* Navbar */
#p7menubar {
padding: 0px;
margin: 0px;
position: absolute;
top: 0px;
clear: both;
z-index: 10;
font-size: 9px;
list-style: none;
}
#p7menubar a {
display: block;
width: 104px;
height: 104px;
}
#p7menubar li {
width: 104px;
height: 104px;
float: left;
text-indent: -9999px;
background-repeat: no-repeat;
}
#p7menubar li a {
display: block;
width: 104px;
overflow: hidden;
}
#p7menubar li li {
height: auto;
}
#p7menubar li ul {
width: 104px;
position: relative;
display: none;
color: inherit;
background-color: #FFFFFF;
}
#p7menubar ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#p7menubar ul li {
width: 104px;
}
#p7menubar ul li a {
line-height: 2em;
height: 2em;
text-align: right;
padding-right: 9px;
width: 95px;
text-decoration: none;
}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
}
body#indexPage li#index {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navIndexColor.jpg);
}
body#learnPage li#learn {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLearnColor.jpg);
}
body#lookPage li#look {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLookColor.jpg);
}
body#playPage li#play {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navPlayColor.jpg);
}
body#readPage li#read {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navReadColor.jpg);
}
body#sharePage li#share {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShareColor.jpg);
}
body#shopPage li#shop {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShopColor.jpg);
}
#index {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navIndexGray.jpg);
}
#learn {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLearnGray.jpg);
}
#look {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLookGray.jpg);
}
#play {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navPlayGray.jpg);
}
#read {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navReadGray.jpg);
}
#share {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShareGray.jpg);
}
#shop {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShopGray.jpg);
}
#index:hover a, #index a:focus, #index a:active, #index.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navIndexColor.jpg);
}
#learn:hover a, #learn a:focus, #learn a:active, #learn.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLearnColor.jpg);
}
#look:hover a, #look a:focus, #look a:active, #look.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLookColor.jpg);
}
#play:hover a, #play a:focus, #play a:active, #play.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navPlayColor.jpg);
}
#read:hover a, #read a:focus, #read a:active, #read.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navReadColor.jpg);
}
#share:hover a, #share a:focus, #share a:active, #share.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShareColor.jpg);
}
#shop:hover a, #shop a:focus, #shop a:active, #shop.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShopColor.jpg);
}
#p7menubar li:hover ul a, #p7menubar li:focus ul a, #p7menubar li:active ul a, #p7menubar li.p7hvr ul a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuGray.jpg);
}
#index ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuIndex.jpg);
}
#learn ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuLearn.jpg);
}
#look ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuLook.jpg);
}
#play ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuPlay.jpg);
}
#read ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuRead.jpg);
}
#share ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuShare.jpg);
}
#shop ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuShop.jpg);
}
.clearit {
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}

/******************************************************************* Left Sidebar */
#l_sidebar {
float: left;
width: 160px;
margin: 0px;
padding: 0px;
}
#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}
#l_sidebar li ul {
padding-bottom: 10px;
border-bottom: 1px solid #666;
}
#l_sidebar ul li {
margin: 0px;
padding: 0px;
}

/******************************************************************* Right Sidebar */
#r_sidebar {
float: right;
width: 160px;
margin: 0px;
padding: 0px;
}
#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#r_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}
#r_sidebar li ul {
padding-bottom: 10px;
border-bottom: 1px solid #666;
}
#r_sidebar ul li {
margin: 0px;
padding: 0px;
}

/******************************************************************* Content */
#content {
margin: 0px auto;
padding: 0px;
width: 728px;
}
#content p {
margin: 0px 0px 15px;
padding: 0px;
}
#content img {
border: 1px solid #666;
float: left;
margin-right: 10px;
line-height: 0;
}
#content img.first {
position: relative;
top: 5px;
}
blockquote {
border-left: 2px dotted #666;
color: #CCC;
background-color: transparent;
font-style: italic;
margin: 0px 0px 0px 10px;
padding: 0px 20px 0px 10px;
}
#content blockquote p {
margin: 0px 0px 16px 0px;
padding: 0px;
}
#contentmiddle {
float: left;
margin: 0px 7px 0px 8px;
padding: 0px 8px 0px 9px;
width: 374px;
}
.contenttitle {
float: left;
margin: 0px;
padding: 0px;
width: 100%;
background: red;
}
#contentmiddle a:link {
color: #F1AC02;
background-color: transparent;
text-decoration: none;
}
#contentmiddle a:hover {
color: #FFF;
background-color: transparent;
text-decoration: none;
}
#contentmiddle h1 a:link {
display: block;
color: #FFF;
background-color: transparent;
font-size: 11px;
text-transform: uppercase;
}
#contentmiddle h1 a:hover {
display: block;
color: #949200;
background-color: transparent;
font-size: 11px;
text-transform: uppercase;
}
#contentmiddle h2 {
margin: 0px;
padding: 10px 0px 0px 0px;
}
#contentmiddle ol {
margin: 0px;
padding: 0px 0px 15px 20px;
}
#contentmiddle ul {
list-style: square;
margin: 0px;
padding: 0px 0px 15px 20px;
}
#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}
#content img.wp-smiley,
#content img.wp-wink {
border: none;
float: none;
margin: 0px;
padding: 0px;
}
.postspace {
margin: 0px 0px 10px;
padding: 0px;
border-bottom: 1px solid #666;
}

/******************************************************************* Footer */
#footer {
border-top: 1px solid #666;
margin: 20px auto;
padding: 10px 0px;
text-align: center;
width: 728px;
}

/******************************************************************* Search Form */
#searchdiv {
margin: 0px;
padding: 0px;
}
#searchform {
margin: 6px 0px 0px 0px;
padding: 0px;
overflow: hidden;
padding-bottom: 15px;
border-bottom: 1px solid #666;
}
#s {
border: 1px solid #666;
padding: 3px;
width: 152px;
}

/******************************************************************* Comments */
#commentblock {
background: #515151;
border: 1px solid #666;
color: #CCC;
float: left;
margin: 10px 0px;
padding: 15px;
width: 344px;
}
ol#commentlist {
list-style-type: none;
margin: 0px;
padding: 5px 0px;
}
.commentdate {
padding-left: 0px;
}
#commentlist li p {
line-height: 20px;
margin-bottom: 8px;
padding: 0px;
}
.commentname {
margin: 0px;
padding: 45px 45px 45px 0px;
}
.commentinfo {
clear: both;
}
.commenttext,
.commenttext-admin {
color: inherit;
background: #515151;
clear: both;
margin: 5px 0px 15px;
width: 344px;
}
#commentsform,
#commentsform form {
margin: 0px;
padding: 0px;
text-align: left;
}
#commentsform p {
margin: 0px;
}
#commentsform form textarea {
width: 99%;
}
p.comments_link img {
margin: 0px;
padding: 0px;
}

York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 21 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

I've continued to refine the

I've continued to refine the CSS (the previous post shows the most current version), but I still haven't gotten the navbar to work in IE6. Any advice on solving this issue would be appreciated. Thanks!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You had this working OK

You had this working OK before you incorporated it into your WP template, right? Then you should compare what you've done differently between then and now.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 21 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

It does seem to be a

It does seem to be a WordPress issue. While the navbar on the WP page doesn't work in IE6, the navbar on the non-WP navbar only page works fine.

I'll consult the WP support pages for a solution, but if you have any ideas as to what may be causing this issue (some kind of PHP/javascript conflict?), your advice would be appreciated.

Thanks,

York

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's only a WP issue insofar

It's only a WP issue insofar as you've accepted the default values that come with header.php and haven't modified it to reflect what you had in the other version. Look at these:

Non WP:

nav

WP:

Temp


Notice the crucial bit you're missing from the WP source? The P7 javascript! That's what I meant about going back and comparing what you'd done before with what you've done now.

You need to put the javascript back in and the conditional comment for your PNG fix (there should be no . after the 7 either). You don't have to be restricted to what comes in header.php as default - you can put whatever you want in there.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 21 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

Apologies for not more fully

Apologies for not more fully explaining my previous attempts to fix this, Tyssen. I did try including the two javascript links in my header, but without success, so I removed them (that's the source code you saw).

I've put them back in (and I deleted the '.' from the conditional comment, as you suggested,) but the navbar on the WP page still does not work in IE6.

I also validated the XHTML (there were a number of errors in the theme I chose, but I corrected them,) but, again, without achieving a functional navbar.

Perhaps I haven't placed the javascript links in the proper order in the header (or there's some other syntax error I've missed)?

; charset=<?php bloginfo('charset'); ?>" />

<?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?>
" />

/wp-content/themes/blue-zinfandel/images/favicon.ico" type="image/x-icon" />
" />
" />
" />
" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>

I'll continue to plug away on this, but if you have other ideas on what might be wrong, I'd really appreciate your input.

Thanks,

York

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

York wrote:or there's some

York wrote:
or there's some other thing I've missed?

Yep, this:

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 21 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

If I could, I'd give you the

Red Tail AleIf I could, I'd give you the real thing in thanks, but this picture of a six-pack of Red Tail Ale will have to suffice. Thanks once again for your assistance, Tyssen. It continues to be an essential part of my learning process.

One final question on this topic. The modified code looks like this:

<?php if (is_category(1)) { ?>
<?php } else if (is_category(4)) { ?>
<?php } else if (is_category(3)) { ?>
<?php } else if (is_category(5)) { ?>
<?php } else if (is_category(7)) { ?>
<?php } else if (is_category(8)) { ?>
<?php } else if (is_category(9)) { ?>
<?php } else { ?> <?php } ?>

Should I use single (') or double (") quotes when it's PHP code (the original code used ', but the HTML uses "), or does it matter?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I'd actually do it like

I'd actually do it like this:

<?php if (is_category(1)) $bodyID == ' id="indexPage" '; elseif (is_category(3)) $bodyID == ' id="lookPage" '; elseif (is_category(4)) $bodyID == ' id="learnPage" '; elseif (is_category(5)) $bodyID == ' id="playPage" '; elseif (is_category(7)) $bodyID == ' id="readPage" '; elseif (is_category(8)) $bodyID == ' id="sharePage" '; elseif (is_category(9)) $bodyID == ' id="shopPage" '; else $bodyID == ' id="indexPage" '; ?>

onload="P7_ExpMenu()">

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 27 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I think, rather than a load

I think, rather than a load of elseifs, I would use switch ... case

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Yes you could do that too

Yes you could do that too but I didn't want to go too far away from what York might recognise.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 21 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

The cleaner code is nice,

The cleaner code is nice, but there must be a syntax error, because the html that it generates is

The PHP isn't inserting the unique page IDs. I don't know PHP yet, so I can't diagnose it. If you have any ideas, please let me know. Thanks.

York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 21 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

I deleted the extra equals

I deleted the extra equals (=) and that made the code functional in all pages except the index page (the first line of the code.)

The code currently is

<?php
if (is_category(1)) $bodyID = ' id="indexPage" ';
elseif (is_category(3)) $bodyID = ' id="lookPage" ';
elseif (is_category(4)) $bodyID = ' id="learnPage" ';
elseif (is_category(5)) $bodyID = ' id="playPage" ';
elseif (is_category(7)) $bodyID = ' id="readPage" ';
elseif (is_category(8)) $bodyID = ' id="sharePage" ';
elseif (is_category(9)) $bodyID = ' id="shopPage" ';
else $bodyID == ' id="indexPage" ';
?>

onload="P7_ExpMenu()">

Does deleting that second (=) have any negative effects that I'm unaware of? And why does

if (is_category(1)) $bodyID = ' id="indexPage" ';

not generate

?

York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 21 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

I understand why it's not

I understand why it's not working now, but not sure of the code to correct it.

The index page (currently http://www.yorkrules.com/yorkrules3/wordpress/) doesn't generate a category ID (nor should it.)

So, how do I tell the PHP to generate

When the user goes to http://www.yorkrules.com/yorkrules3/wordpress/? I'll continue to work on this (and I might even figure it out,) but any advice is appreciated. Thanks.

York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 21 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

I imagine one of the

I imagine one of the difficult parts about being a moderator is pointing out the silly mistakes we make. Problem solved. I hadn't deleted one equals sign.

The functioning code is now

<?php
if (is_category(3)) $bodyID = ' id="lookPage" ';
elseif (is_category(4)) $bodyID = ' id="learnPage" ';
elseif (is_category(5)) $bodyID = ' id="playPage" ';
elseif (is_category(7)) $bodyID = ' id="readPage" ';
elseif (is_category(8)) $bodyID = ' id="sharePage" ';
elseif (is_category(9)) $bodyID = ' id="shopPage" ';
else $bodyID = ' id="indexPage" ';
?>

onload="P7_ExpMenu()">

Fantastic.

York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 21 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

Problem not solved. It

Problem not solved. It should only generate

when the user is at the index URL (currently http://www.yorkrules.com/yorkrules3/wordpress).

Right now, any page that's not one of the six category pages gets a page ID of "indexPage". I'd like all non-category, non-index pages to get no page ID. Only when the user's at the index URL should the PHP generate the page ID of "indexPage".

I'm know this code isn't right (it caused fatal errors), but it gives you the idea of what I need to achieve:

<?php
if (is_url("http://www.yorkrules.com/yorkrules3/wordpress/")) $bodyID = ' id="indexPage" ';
elseif (is_category(3)) $bodyID = ' id="lookPage" ';
elseif (is_category(4)) $bodyID = ' id="learnPage" ';
elseif (is_category(5)) $bodyID = ' id="playPage" ';
elseif (is_category(7)) $bodyID = ' id="readPage" ';
elseif (is_category(8)) $bodyID = ' id="sharePage" ';
elseif (is_category(9)) $bodyID = ' id="shopPage" ';
else $bodyID = ' ';
?>

onload="P7_ExpMenu()">

Would you review the above code and suggest how to properly write it? Thanks.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You want to use is_home()

You want to use is_home() for the home/index page.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 21 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

That works. Thanks, Tyssen.

That works. Thanks, Tyssen.