Hey guys. I made a really silly mistake. I built a site around a theme I downloaded for Wordpress, but I didn't even think to check it on IE7. Usually those themes work on IE. I did minor edits to the theme, but did not touch the navigation in way because I liked it how it was.

 

I check it on a PC today though, and the menu is all out of whack in IE7. Each type is in a different vertical position, making the menu look like a set of stairs.

 

I don't know what code I need to post to get advice, so I am going to start by just posting the style sheet for the theme. Can anyone see anything in this that would be causing what I am seeing?

 

My site is here http://www.ic-designs.ca the wordpress directory though is http://www.ic-designs.ca/wordpress . I have it's index page set as my home page on my server though.

 

Here is the CSS:

 

html {
min-height : 100%;
}
* {
margin : 0;
padding : 0;
}
a {
color : #963;
border : none;
}
a:hover {
color : #c60;
border : none;
}
body {
background : #333333 url('img/newbg.gif') repeat-x;
color : #333333;
font : normal 62.5% Tahoma, sans-serif;
}
p, code, ul {
padding-bottom : 10px;
}
li {
list-style : none;
}
h1 {
font-style : italic;
font-family : serif;
color : #996633;
font : 1.6em serif;
margin-bottom : 8px;
}
h2 {
font-style : italic;
color : #996633;
margin-bottom : 10px;
margin-top : 10px;
font : 1.5em serif;
}
h3 {
font-style : italic;
color : #996633;
margin-bottom : 10px;
margin-top : 10px;
font-variant : normal;
font : 1.4em serif;
}
code {
background : #fff;
border : 1px solid #eee;
border-left : 6px solid #c1cad3;
color : #666;
display : block;
font : normal 1em Tahoma, sans-serif;
line-height : 1.6em;
margin : 4px 0 12px;
padding : 8px 10px;
white-space : pre;
}
blockquote {
background : url('img/quote.gif') no-repeat;
display : block;
font : bold 0.9em Verdana, sans-serif;
padding-left : 20px;
}
big {
font-size : 1.1em;
}
h1, h2, h3 {
font-family : serif;
margin-left : 10px;
margin-bottom : 10px;
padding-top : 6px;
}
label {
display : block;
font-size : 0.9em;
}
.clearer {
clear : both;
}
.left {
float : left;
}
.right {
float : right;
}
.container {
background : #fff;
font-size : 1.2em;
margin : 0 auto;
padding : 0 10px 0;
width : 780px;
border-bottom : 4px solid #ffffff;
}
.top {
padding-left : 10px;
padding-right : 10px;
padding-top : 10px;
padding-bottom : 0;
}
.header {
background : #fff;
font-size : 1.2em;
height : 150px;
margin : 0 auto;
padding : 10px 10px 5px;
width : 780px;
}
.header .left, .header .right {
background : #a4a4a0;
color : #fff;
height : 150px;
}
.logo {
margin-left : auto;
margin-right : auto;
width : 770px;
padding-left : 50px;
font : normal 2.8em "Trebuchet MS", sans-serif;
margin-top : 20px;
background-image : url('img/logo.png');
background-repeat : no-repeat;
background-position : left;
}
.header .left {
background : url('img/header2.gif') no-repeat;
text-align : center;
width : 780px;
font : normal 2.8em "Trebuchet MS", sans-serif;
line-height : 150px;
}
.header .right p, .header .right h2 {
padding : 0 16px;
}
.header .right h2 {
padding-top : 16px;
font : normal 1.6em "Trebuchet MS", sans-serif;
}
.navigation {
border : 1px solid #000000;
border-color : #000000;
background : #000000 url('img/nav.gif');
height : 41px;
margin : 0;
padding-top : 0;
}
.navigation a {
background : #000000 url('img/nav.gif');
border-right : 1px solid #000000;
color : #ffffff;
display : block;
float : left;
text-decoration : none;
font : bold 1em sans-serif;
line-height : 41px;
padding : 0 20px;
padding-top : 0;
}
.floater {
margin-left : -66px;
background : url('img/floaterbg.gif');
background-repeat : no-repeat;
background-position : left;
height : 70px;
padding-left : 15px;
padding-top : 5px;
}
.navigation a:hover {
background-position : left bottom;
color : #dad8cc;
}
.main {
border-top : 4px solid #fff;
background : url('img/bgmain.gif') repeat-y;
}
.sidenav {
float : right;
width : 210px;
}
.sidenav h2 {
color : #5a5a43;
font : bold 1em Tahoma, sans-serif;
line-height : 25px;
padding-left : 12px;
display : block;
background-image : url('img/h2bg.gif');
background-repeat : no-repeat;
padding-top : 0;
margin-top : 8px;
margin-bottom : 8px;
}
.sidenav ul {
padding : 0;
border-top : 1px solid #eaeada;
}
.sidenav li {
border-bottom : 1px solid #eaeada;
}
.sidenav li a {
font-size : 1.1em;
color : #554;
display : block;
padding : 8px 0 8px 5%;
text-decoration : none;
width : 95%;
}
.sidenav li a:hover {
background : #f0f0eb url('img/sidebarnavbg.gif');
color : #654;
}
.content {
padding-left : 16px;
padding-bottom : 0;
padding-right : 16px;
padding-top : 0;
float : left;
margin : 10px 0;
width : 531px;
}
.content .descr {
color : #664;
font-size : 0.9em;
margin-bottom : 6px;
}
.content li {
background : url('img/li.gif') no-repeat 0 30%;
padding : 1px 0 1px 16px;
}
.content p {
font-family : "Lucida Sans Unicode", sans-serif;
}
.footer {
background : #333333;
color : #fff;
font : bold 1em sans-serif;
padding : 0 16px;
line-height : 39px;
height : 39px;
margin-bottom : 10px;
}
.footer a, .footer a:hover {
color : #fff;
}
.post h1 a {
text-decoration : none;
}
.post h1 a:hover {
text-decoration : underline;
}
.post {
margin : 6px 0 2px;
}
.post .info {
padding : 5px 10px;
border : 1px solid #e3e4e4;
background : #f5f5f5;
color : #555;
margin : 2px 0 4px;
}
.post img {
border : 4px solid #ddd;
margin : 4px 0;
}
.post a img {
border : none;
}
.post a:hover img {
border-color : #ccc;
}
.info a {
text-decoration : none;
}
.info a:hover {
text-decoration : underline;
}
.content ol li {
list-style : none;
background : none;
}
#commentlist li {
margin-bottom : 1.5em;
padding-bottom : 1em;
border-bottom : 1px solid #700000;
list-style : none;
}
#commentform {
margin : 1em 0;
background : #fafafa;
width : 280px;
}
.commentmetadata {
padding : 2px 0 4px;
}
.commentmetadata a {
color : #664;
}
textarea.styled {
width : 280px;
}
.styled {
font-size : 1.1em;
background : #f8f7f6;
border : 1px solid #d6d3d3;
}
.styled:hover {
background : #fff;
border : 1px solid #d6d3d3;
}
.styled:focus {
background : #fff;
border : 1px solid #939793;
}
#commentform input {
margin-bottom : 3px;
}
a img {
border : none;
}
#wp-calendar {
color : #a0a0a0;
}
.sidenav table caption {
border-bottom-color : #000;
}
.sidenav table thead tr {
border-bottom-color : #000;
color : #a53512;
}
.sidenav table th {
border-bottom-color : #000;
}
.sidenav table td#today {
border-color : #000;
color : #a53512;
}
.sidenav table td a {
border-bottom-color : #000;
background-color : #edf3de;
}
.sidenav table tfoot {
border-top-color : #000;
}
.sidenav table tfoot a {
background : none;
}
#wp-calendar {
display : inline-table;
border-collapse : collapse;
width : 185px;
margin : 0 10px 0 10px;
text-align : center;
}
.sidenav table caption {
margin : -5px 10px 0 10px;
padding-bottom : 5px;
border-bottom : 1px solid;
letter-spacing : 0.1em;
}
.sidenav table thead tr {
border-bottom : 1px solid;
}
.sidenav table th {
border-bottom : 1px solid;
}
.sidenav table td {
width : 225px;
padding : 1px;
font-size : 0.9em;
}
.sidenav table td#today {
padding : 0;
border : 1px solid;
font-size : 1em;
font-weight : bold;
}
.sidenav table td a {
display : block;
border-bottom : 1px solid;
font-weight : bold;
font-size : 1.15em;
}
.sidenav table tfoot {
border-top : 1px solid;
}
.sidenav table tfoot a {
border : none;
font-weight : bold;
}
.sidenav table tfoot #prev a {
text-align : left;
}
.sidenav table tfoot #next a {
text-align : center;
}
#searchform {
padding : 10px;
}
div.wpcf7 {
margin : 0;
padding : 0;
}
div.wpcf7-response-output {
margin : 2em 0.5em 1em;
padding : 0.2em 1em;
}
div.wpcf7-mail-sent-ok {
border : 2px solid #398f14;
}
div.wpcf7-mail-sent-ng {
border : 2px solid #ff0000;
}
div.wpcf7-spam-blocked {
border : 2px solid #ffa500;
}
div.wpcf7-validation-errors {
border : 2px solid #f7e700;
}
span.wpcf7-form-control-wrap {
position : relative;
}
span.wpcf7-not-valid-tip {
position : absolute;
top : 20%;
left : 20%;
z-index : 100;
background : #fff;
border : 1px solid #ff0000;
font-size : 10pt;
width : 280px;
padding : 2px;
}
span.wpcf7-not-valid-tip-no-ajax {
color : #f00;
font-size : 10pt;
display : block;
}
span.wpcf7-list-item {
margin-left : 0.5em;
}
#lightbox {
position : absolute;
left : 0;
width : 100%;
z-index : 100;
text-align : center;
line-height : 0;
}
#lightbox img {
width : auto;
height : auto;
}
#lightbox a img {
border : none;
}
#outerImageContainer {
position : relative;
background-color : #fff;
width : 250px;
height : 250px;
margin : 0 auto;
}
#imageContainer {
padding : 10px;
}
#loading {
position : absolute;
top : 40%;
left : 0%;
height : 25%;
width : 100%;
text-align : center;
line-height : 0;
}
#hoverNav {
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 10;
}
#imageContainer > #hoverNav {
left : 0;
}
#hoverNav a {
outline : none;
}
#prevLink, #nextLink {
width : 49%;
height : 100%;
display : block;
}
#prevLink {
left : 0;
float : left;
}
#nextLink {
right : 0;
float : right;
}
#prevLink:hover, #prevLink:visited:hover {
background : url(../images/prevlabel.gif) no-repeat left 15%;
}
#nextLink:hover, #nextLink:visited:hover {
background : url(../images/nextlabel.gif) no-repeat right 15%;
}
#imageDataContainer {
font : 10px Verdana, Helvetica, sans-serif;
background-color : #fff;
margin : 0 auto;
line-height : 1.4em;
overflow : auto;
width : 100%;
}
#imageData {
padding : 0 10px;
color : #666;
}
#imageData #imageDetails {
width : 70%;
float : left;
text-align : left;
}
#imageData #caption {
font-weight : bold;
}
#imageData #numberDisplay {
display : block;
clear : left;
padding-bottom : 1em;
}
#imageData #bottomNavClose {
width : 66px;
float : right;
padding-bottom : 0.7em;
outline : none;
}
#overlay {
position : absolute;
top : 0;
left : 0;
z-index : 90;
width : 100%;
height : 500px;
background-color : #000;
}
#overlay {
background-color : #000000;
}

 

If there is anything else I need to post to help, please let me know.

 

Thanks a ton.

ANd here is what I see in IE7:

 

Hi

 

try replacing your li class with the below

 

li {display:inline;list-style-image:none;list-style-position:outside;list-style-type:none;}

Pat

Hey

 

Sorry but Opera does wierd things too...

 

 

 

I have had a similar problem recently..will fish out my stuff and post it in a bit

Mwahaha! sorry, i had this problem about two days ago with a suckerfish menu. After about an hour i managed to trace the problem.

 

Wrapping your list un <ul> tags would be a good start. And then closing each list item, chances are that might fix it.

 

Your menu should look like

 

<ul>
<li><a href="page.html>page</a></li>
<li><a href="page.html>page</a></li>
<li><a href="page.html>page</a></li>
<li><a href="page.html>page</a></li>
<li><a href="page.html>page</a></li>
</ul>

Thanks for the tips so far guys. I am going to try them out as soon as I get in from work. I will update the thread.

Mwahaha! sorry, i had this problem about two days ago with a suckerfish menu. After about an hour i managed to trace the problem.

 

Wrapping your list un <ul> tags would be a good start. And then closing each list item, chances are that might fix it.

 

Your menu should look like

 

<ul>
<li><a href="page.html>page</a></li>
<li><a href="page.html>page</a></li>
<li><a href="page.html>page</a></li>
<li><a href="page.html>page</a></li>
<li><a href="page.html>page</a></li>
</ul>

 

Darn, silly question but in a Wordpress template, where exactly is the html for the menu? I looked through the various php files and they all seen to just call on the navigaton, but not show any code. I know it must be in one of the files though...

 

Thanks

Hi

 

try replacing your li class with the below

 

li {display:inline;list-style-image:none;list-style-position:outside;list-style-type:none;}

Pat

 

 

Would I need to apply this to the li element overall or somewhere in the .navigation"

 

/* navigation */

.navigation {	

border: 1px solid #000000;

border-color: #000000;

background:#000000 url('img/nav.gif');

height: 41px;

margin: 0px;

padding-top: 0px;

}

.navigation a {

background: #000000 url('img/nav.gif');

border-right: 1px solid #000000;

color: #FFFFFF;

display: block;

float: left;

text-decoration: none;

font: bold 1em sans-serif;

line-height: 41px;

padding: 0 20px;

padding-top: 0px;



}



.floater {

margin-left: -66px;

background: url('img/floaterbg.gif');

background-repeat: no-repeat;

background-position: left;

height: 70px;

padding-left: 15px;

padding-top: 5px;

}

.navigation a:hover {background-position: left bottom; color: #DAD8CC;}

 

Thanks

Hey guys ignore my last couple of posts.

 

Pat's suggestion of li {display:inline;list-style-image:none;list-style-position:outside;list-style-type:none;} worked perfectly!

Try looking for this

 

.navigation li {

display:inline !important;

list-style-image:none;

list-style-position:outside;

list-style-type:none;

}

 

if not add it in.

 

Edit: glad you got it fixed

 

Oh and to answer this

Darn, silly question but in a Wordpress template, where exactly is the html for the menu?

 

Look for a navigation.php file OR header.php file, it should be in there.

 

You really should make sure those tags are closed

Try looking for this

 

 

 

if not add it in.

 

Edit: glad you got it fixed

 

Oh and to answer this

 

 

Look for a navigation.php file OR header.php file, it should be in there.

 

You really should make sure those tags are closed

 

So right now there are .navigation, .navigation a, and .navigation a:hover classes. So I should ADD the .navigaton li class you mentioned above, or edit one of those existing classes?

 

Pat's fix did work, but I realize it could effect other lists on the site. So I should apply it to just the navigation I guess.

 

Thanks a ton.

.navigation, will effect anything within a div, or with the class of navigation

.navigation a, will effect all <a href links with any element with the class navigation

.navigation a:hover this is the hover state for the links within an element with the class div.

 

So if you create a new style with the selector .navigation li it will only effect list items within an element with the class of navigation.

 

 

If that makes sense, and remember, you can use multiple classes on a simple element, just add a space between the class names.

 

<div class="navigation top"> </div>

 

Will be effected by both a style

 

.navigation{ //css here }

 

AND

 

.top{ //css here }

 

IMHO, multiple classes per element is one of the most overlooked aspects of CSS, it's right up there with advanced selectors (which someone on this forum did a good blog post about).

 

I hope that makes some sense, i'm kinda making a mountain out of a molehill though.

No, I appreciate the detail. All of it is a TON to learn, but the only way to learn it is to try. I definitely am not able to remember every little thing people tell me but I am getting better. And my designs have been improving constantly since finding this forum.