Posted 1 year ago #
I am not sure what I'm doing wrong: wp_nav_menu layout looks perfect in Chrome, Safari, and Firefox. I cannot get it to layout right in IE - IE forces the list and ignores my images. Not sure what to do.
Please check it out and let me know if you have any ideas: http://www.christaylorpainting.com
fix the validation errors and see if that resolves the problem:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.christaylorpainting.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
http://codex.wordpress.org/Validating_a_Website
Posted 1 year ago #
I've been running several of the validation checks this morning. There are some Errors, but they show my browser compatibility as doing good.
Let me show what I've got - maybe that will shed light on something I'm just not seeing.
<nav class="mainnavbar">
<?php wp_nav_menu(array('menu' => 'Main Nav Menu' )); ?>
</nav>
---CSS---
.mainnavbar ul {
position: absolute;
list-style: none;
margin: 0;
padding: 0;
font-size: 24px;
font-family: Calibri, Helvetica, Verdana, Arial, sans-serif;
font-weight: bold;
}
.mainnavbar ul li{
margin: 0;
padding: 0;
width: 210px;
height: 37px;
}
.mainnavbar ul li:nth-child(1) a:link, .mainnavbar ul li:nth-child(1) a:visited {
display: block;
padding: 5px 5px 5px 40px;
background: url(images/b1.png) no-repeat left top;
color: #fff;
font-size: 80%;
text-decoration: none;
}
.mainnavbar ul li:nth-child(1) a:active, .mainnavbar ul li:nth-child(1) a:hover {
display: block;
padding: 5px 5px 5px 40px;
background: url(images/b1.png) no-repeat left bottom;
color: #ff9;
font-size: 80%;
}
--AT THIS POINT I HAVE 5 more NTH-CHILD commands that I'll leave out--
Posted 1 year ago #
A good note to add - IE is not editing anything. It's not taking of the list-style, it's not changing the font-style, increasing the font-size, nothing.
Posted 1 year ago #
As was said, clearing these issues, especially the first 4 or 5 should help. http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fchristaylorpainting.com%2f
BTW, IE9 sees the page fine.
i assume that IE7 does not understand the :nth-child pseudo class;
if the menu-ids are not going to change, you could, for instance, try to use:
.mainnavbar ul li.menu-item-16 a:link, .mainnavbar ul li.menu-item-16 a:visited {
instead of:
.mainnavbar ul li:nth-child(1) a:link, .mainnavbar ul li:nth-child(1) a:visited {
1 = 16
2 = 14
3 = 15
4 = 52
5 = 54
6 = 13
edit:
i support @kmessinger's opinion - clearing the validation errors could help; the worst being some code before the doctype declaration, right at the beginning of the code:
<div id="pagewrap" class="pagewrap">move this to its proper place, to after the <body> tag
Posted 1 year ago #
I spotted the error there - Put that "PageWrap" on the home.php right before it called the Header.php
kmessinger said it appeared fine in IE 9 - I'm running IE 9 where it looks like crud. I've cleared my cache, but still crud. Is there something else I need to do or I'm missing that will let me view it correctly?
Thanks for your help guys - I feel closer now - think it might be something in my IE 9 browser... hopefully.
Posted 1 year ago #
It was 100% the DOCTYPE - I put a page wrap around it in the Home.php
Thanks for your help guys - couldn't have done it (that quick) without ya :)
This topic has been closed to new replies.
