Hi, I hope that someone can help us with this issue. Any other critique, suggestion and tips welcomed. Our website: http://gorida.com
Use this code to attach another CSS file for IE6 to position the navigation bar in the right place. <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> HTML: I often find that navi get fucked in IE6, while displaying properly in Firefox and IE7. IE6 sucks!
agree. thanx for quick response. does it mean that I need to write a new IE6.css stylesheet? I am really new to themes etc. in other words, I need step by step help
You don't clear your floats... not sure that's affecting your menu but this clears them in wrapper2- #wrapper2 { width: 768px; [COLOR="Red"]overflow: auto;[/COLOR] margin-left: auto; margin-right: auto; } Code (markup): No point floating a full width element. The reason for floating is to put something beside what your floating, same with clear. #header { [COLOR="red"]/*float: left;*/[/COLOR] width: 768px; padding-bottom: 8px; background: #FFFFFF; [COLOR="red"]/*clear: right;*/[/COLOR] background-image: url(images/header-bg.gif); background-repeat: no-repeat; padding-left: 0px; height: 89px; margin-top: 13px; } #navigation { [COLOR="red"]clear: both; float: left;[/COLOR] width: 100%; background-image: url(images/header.gif); height: 220px; } Code (markup): Read more about clearing floats at http:// www. quirksmode. org/ css/ clearing. html (take the spaces out of that link to make it work) ...I keep playing with it but I can't see what IE6 would not like about the menu. It's working in FF3 and IE8. I'm not sure why the -42 margin to move it up but... I just fired up the computer across the hall with IE6. Does your menu show up if you remove the #ffffff background on #header? It would work better if you just put your menu in header, instead of the next div down and then -margining it back up where you wanted it in the first place.
It depends. Sometimes one css file is ok for various browsers, at other times css hack is necessary. Because IE6 is a margin idiot.
so, what should I do, but please - step by step if possible? ps: Excavator, I tried to change background with no luck. Could you please help me with menu in header, but with step by step instruction, please? I want to see how it looks like then
myst729 - thanks for your tip about how to use different style sheets for different brwsers. I've bookmarked that for future reference.
Glad that helped. There are ways of css hacks: 1. Conditional comments for different versions of IE Use <!–[if IE 7]> to attach another css file while page is browsed by IE7, or other given version. These acronyms are used for multiply version: lte: less than or equal to lt: less than gte: greater than or equal to gt: greater than Code (markup): for example <!–[if lt IE 7]>, or <!–[if lte IE 6]> 2. IE only selector tags As there are tags only IE could recognize, you may also combine your css hacks in one stylesheet, instead of conditional comments. However, this is not so sematic comparing with conditional comments. #wrapper { width: 120px;} [COLOR=DarkRed]/* all browsers */[/COLOR] *html #wrapper { width: 80px;} [COLOR=DarkRed]/* IE only */[/COLOR] *+html #wrapper { width: 60px;} [COLOR=DarkRed]/* IE7 only */[/COLOR] Code (markup): Notice the order! 3. Various properties IE6 can recognize *, while !important means nothing for it. Firefox can't recognize *, but ok with !important. IE7 gets on well with both of them. For example: #wrapper { width: 120px; [COLOR=DarkRed]/* all browsers */[/COLOR] *width: 60px !important; [COLOR=DarkRed]/* IE7 only */[/COLOR] *width: 80px; [COLOR=DarkRed]/* IE only */[/COLOR] } Code (markup): Also notice the order! This can be used together with the underline prefix _, which is supported by IE6: #wrapper { width: 120px; [COLOR=DarkRed]/* all browsers */[/COLOR] *width: 60px; [COLOR=DarkRed]/* IE7 only */[/COLOR] _width: 80px; [COLOR=DarkRed]/* IE only */[/COLOR] } Code (markup): Order again, or messed up ******************************************************* Still hundreds of ways to achieve css hacks out there. For me, I recommend conditional comments. Why? Because in so-called meaningless Web 2.0 people like sematic! And it's necessary for css hacks to be sematic, although not what exactly sematic is defined. If you don't agree with me and care the size of stylesheet more than its readability, check out this list.
To solve this problem, you need to write another stylesheet for IE6, and attach it by conditional comments. Or, if you read my last post, there are ways to modify your original stylesheet. Before moving on, I suggest you read something about IE5/6 doubled float-margin bug. I noticed that you used minus margin value, and that's the very reason that kicked your navigation away IMHO. change the values and test in IE6 until it's positioned well. Anyway, I'm curious that why you structure your page like this? It may cause trouble when redesigning. And... where is your H1 text
I see NOTHING on that page that should warrant IE conditionals or CSS selection hacks - so most of the above advice is rubbish. (sorry, I call 'em as I see 'em) Mind you we're talking about a turdpress template, so we're already in hell with ninety times the amount of css, javascript and markup as should be needed, but resorting to conditionals for that? ****er please. #navigation { position:relative; /* make sure it depth sorts OVER #header */ overflow:hidden; /* wrap floats */ width:100%; /* trip haslayout, wrap floats IE6/earlier */ padding-bottom:226px; margin-top:-42px; font:normal 14px/16px "Trebuchet MS","Lucida Grande",Verdana,Georgia,sans-serif; background:url(images/header.gif) bottom left no-repeat; } #navigation ul { list-style:none; float:right; } #navigation li { display:inline; /* don't even TRY to style this */ } #navigation a { float:left; padding:10px 11px; /* 10px top and bottom + 16px line-height == 36 px total of original */ text-decoration:none; color:#555; border:0; /* make sure that the border goes away when un-hovered in IE */ } #navigation a:active, #navigation a:focus, #navigation a:hover { /* rather than muck with transparent borders, just change the padding */ padding:9px 10px; color:#6D9CC7; background:#F5F5F5; border:1px solid #FFF; } Code (markup): Should be all that's needed to get that to work in everything back to IE 5.01. Only thing approaching a hack or workaround needed is tripping haslayout. Much of the problem comes from trying to float the LI - when possible (like when there's going to be no cascading menu) I avoid doing ANYTHING with LI apart from setting them to display:inline. You then float the anchors inside it which forces the block model, effectively making browsers ignore that the LI even EXIST. If you HAVE to float the LI, you're best bet is to ALSO float the anchor, and avoid declaring widths or heights and let FLOW handle it for you. Oh, and there is ZERO reason to have #header floating. That's more likely to screw things up. Likewise I'd just say height:97px instead of having the padding separate. If your content cares about the padding, the content should have it's height (or line-height) shorter. Also none of these should have widths on them since div's auto-expand and you have a perfectly good #wrapper2 to contain everything.