Tue, 2007-02-27 23:59
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;
}
Thu, 2007-03-01 01:53
#1
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!
Thu, 2007-03-01 01:57
#2
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.
Thu, 2007-03-01 19:45
#3
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
Thu, 2007-03-01 22:26
#4
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.
Fri, 2007-03-02 22:28
#5
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
Sat, 2007-03-03 03:17
#6
York wrote:or there's some
York wrote:
or there's some other thing I've missed?
Yep, this:
Tue, 2007-03-06 01:36
#7
If I could, I'd give you the
If 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?
Tue, 2007-03-06 02:37
#8
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()">
Tue, 2007-03-06 07:27
#9
I think, rather than a load
I think, rather than a load of elseifs, I would use switch ... case
Tue, 2007-03-06 07:38
#10
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.
Tue, 2007-03-06 23:05
#11
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.
Tue, 2007-03-06 23:12
#12
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
?
Tue, 2007-03-06 23:19
#13
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.
Tue, 2007-03-06 23:25
#14
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.
Tue, 2007-03-06 23:42
#15
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.
Wed, 2007-03-07 04:25
#16
You want to use is_home()
You want to use is_home() for the home/index page.
Wed, 2007-03-07 23:50
#17
That works. Thanks, Tyssen.
That works. Thanks, Tyssen.