[NLX]

Hi,

I've some problems with a site.
It appears to work fine in Safari and Firefox, but in IE it's a mess:(

It's a wordpress site (but I think it's a css based problem)

you can visit the site in IE and safari/firefox and you'll see the problem
www.reddelicious.info

Here is the css code form which I think is relevant

@media screen {

* { margin: 0; padding: 0; }

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */

#page-wrap { position: relative; width: 740px; padding: 30px; margin: 30px auto 5px; background: white; -moz-box-shadow: 0 0 20px black; }

#header { width: 800px; position: absolute; z-index: 10; top: 0px; left: 0px; height: 159px;  }

#header a { width: 800px;
			height: 159px;
			display: block; 
			position: absolute; bottom: 0px; left: 0px;
			background: url(images/logo_1_b.png) no-repeat;}

#main-content { float: right; width: 470px; margin: 155px 0 0 0; position: relative; z-index: 20; }

/* css for nav bar */

aside { float: left; width: 200px; margin: 170px 0 0 0; position: relative; z-index: 20;}
aside h4 { text-align: right; }


nav ul { list-style: none; margin: 0 0 15px 0; }
nav li { margin: 0 0 5px 0; }
nav li a { background-color: #ff0000; overflow: visible !important; font-size: 15px; padding: 4px; width: 215px; display: block; color: white; position: relative; left: -30px; text-indent: 26px; }
nav li a em { font-size: 13px; }
nav li a span, .date span { background-color: #ff0000; background-image: url(images/shadowLeft.png); background-position: top right; background-repeat; repeat-y; position: absolute; right: 100%; height: 100%; width: 20px; top: 5px; }
nav li:nth-child(1) a, nav li:nth-child(1) a span { background-color: #ff0000; }
nav li:nth-child(2) a, nav li:nth-child(2) a span { background-color: #cc0000; }
nav li:nth-child(3) a, nav li:nth-child(3) a span { background-color: #990000; }
nav li:nth-child(4) a, nav li:nth-child(4) a span { background-color: #660000; }
nav li:nth-child(5) a, nav li:nth-child(5) a span { background-color: #330000; }
nav li:nth-child(6) a, nav li:nth-child(6) a span { background-color: #000000; }
nav li a:hover { text-decoration: none; background-color: #666; }
nav li a:hover span { background-color: #666; }

This post has been edited by NLX: 22 July 2011 - 06:49 AM

[MrWobbles]

The position:absolute on your header is taking it out of the flow of the document so the navigation on the left is acting like its not there.. Why do you need it to be positioned absolutely? Would margin work as well to get it where you need it?

I honestly don't know what the general feeling is of negative margins but you could take of the absolute positioning and put a -30px margin on it to line it up, or move the header out of the group div and position it with margin (probably the best solution)...

Second, try targeting your ul with '.menu-main-nav-menu-container ul' instead of 'nav ul' If that corrects your problem you know its a problem with ie8 and your html5 tags, if not then we can go from there.

Edit:: In fact now that I look at it a little more closely it seems that IE8 is wanting to close your nav tags prematurely.. <nav/> and </nav/> is what they look like in the dev tools, so thats why they aren't getting selected.

Include this in your header to get ie8 to recognize these elements:

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

That should also take care of the targeting in CSS by the way.

This post has been edited by MrWobbles: 22 July 2011 - 07:57 AM

[tommyflint]

I think your main issue here is your using HTML5 elements which IE doesn't support (<IE9) take a look at Modernizer or HTML5Shiv

Tommyflint

EDIT:

Nice Edit MrWobbles to steal the answer from my response lol JK

This post has been edited by tommyflint: 22 July 2011 - 08:00 AM

[MrWobbles]

It certainly looks that way, but I assure you it isn't. Of course I am just some anonymous internet entity, I could be you from the future.

**And that's when tommyflint entered the TWILIGHT ZONE**

[NLX]

Thnx

I used nav li a{ left: -30px} to create that left corner offset thing on the navagition blocks (or how you name it) outside the page wrap (which has the white background).
If you now a beter way to do so…. let me now☺

I’ll take a look at the absolute of the header later.
When I make it relative I’ve to get rid of the margin of the pagewrap (otherwise header logo will move) so I guess I need to create a new margin for the nav and main-content.


After a included the script in the header some of my problems appear to be solved.
(Look at www.reddelicious.info again for updated view)

But the css of

 nav li:nth-child(2) a, nav li:nth-child(2) a span { background-color: #cc0000; } and other childs 

are ignored (all items have just one color instead of a individual colour for each item)


Can you further explain what you meant with '.menu-main-nav-menu-container ul'.
Because when I try to use that instead of nav ul
Some extra code (just in case…)

<aside>

		<?php get_search_form(); ?>
		
		<nav>
			<?php wp_nav_menu(array('menu' => 'Main Nav Menu')); ?>
		</nav>

		<!—some other code-->
</aside>

This post has been edited by NLX: 22 July 2011 - 10:33 AM

[MrWobbles]

NLX, on 22 July 2011 - 11:31 AM, said:

Can you further explain what you meant with '.menu-main-nav-menu-container ul'.

Ignore that, it wasn't helpful and I probably should have deleted it. This was the issue with using html5 tags in ie8 (which we took care of with the html5 shiv script in the header).

The nth child stuff doesn't work in IE8 or lower (should work in IE9), so that's your problem there.

If you move your header outside of the div and then position it according to the body that should take care of your problem. I'm not entirely sure how Wordpress works as I haven't used it, so if this is not possible then your best bet is to remove the position: absolute and just set margin: -30px 0 0 -30px; which will negate the padding you have on the rest of the content.

[NLX]

MrWobbles, on 22 July 2011 - 11:02 AM, said:

The nth child stuff doesn't work in IE8 or lower (should work in IE9), so that's your problem there.

It is possible when you use jQuerry http://api.jquery.co...hild-selector/.


So, now I'm going to study that stuff first:)

Hopefully I'll get it working