Getting desprrate now

HTML & CSS
1

I think I may have posted this in thw\e wrong place -0 I have it in WordPress and no on has been able to help. Pls help me guys !

Hi

I am trying to make the following WP theme work in ie6.
My life is a garden | Planting seeds and pulling weeds

Although I am working on a WordPress theme, I have a css issue. All the backed wp stuff is fine and I am ok with that.

Pleas note this is my personal blog - I have created a couple of dummy pages to replicate the error. Thee is real content there somewhere ! But they are blog posts and are not set to display in this theme- if you can find them they make a good read - or come back later when I would have restored my site.

I need to get this theme working in ie6 for a project (as in it has to work with ie6)

FYI I am using a child theme to update my wp site - and this theme (from woo themes) comes with a nice little conditional statement for ie6. Woo support don’t help with more technical stuff, they point you to their woo workers. But I want to learn for myself.

If you load it in ie6 you will see the top nav is very bad. as. But the bottom nav is ok

Basically I want to style the top nav so it looks the same as the bottom nav (as I can see it works in ie6 for the bottom nav, so I want to to make it work for the top nav, when i tloads in ie6).

Please note all the infrastructure for the ie6 conditional statement is fine- I am building my wp site with a child theme and it calls the conditional style sheet.

Here is the code that I can find that affects it.

Code:

#footer {
    background: url("default/footertop.jpg") repeat-x scroll left top #23262A;
    color: #FFFFFF;
}
default.css (line 228)
#footer {
    margin: 0 auto 40px;
    width: 980px;
}
 
#footer .footnav {
    float: left;
    width: 660px;
 
#footer .footnav ul li a:link, #footer .footnav ul li a:visited {
    color: #FFFFFF;
}
 
#footer .footnav ul li a:link, #footer .footnav ul li a:visited {
    font-weight: bold;
}

So I don’t know how to rename and repply the styles to the top Nav.

The code below belongs to the top nav. And I need to rename code to make it work - pls help!

Code:


#pagenav {
    float: left;
    padding: 0 10px;
    position: relative;
    z-index: 100;
}
#pagenav li {
    float: left;
    line-height: 35px;
    margin: 0;
    padding: 0 9px 0 5px;
}
#pagenav li a:link, #pagenav li a:visited {
    display: block;
    padding: 0 8px;
    position: relative;
    text-decoration: none;
    z-index: 100;
}

That’s part one of my issues. But If you can help me understand that I would be very grateful. I have been having a crack at it. Any and all advice is most welcome, including fixing other bugs on the page.

Thanks!

2

Hi,

To get IE6 to work properly you would need to change the way the menu works as you can’t nest children in a widthless float when the children have haslayout and are also not floated in the same direction.

If a left floated widthless element contains either a right float, a position:absolute element with a right position or a child in haslayout mode then the whole element stretches to 100% wide and occupies the whole line.

Suffice to say it is much easier to float all the elements left and avoid the issue altogether.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav {
    width: 980px;
    margin: 0 auto;
    padding:0;
    list-style:none;
    height: 35px;
    background: url(http://www.mylifeisagarden.com/blog/wp-content/themes/thestation/styles/default/navbg.jpg) repeat-x left top;
}
#nav ul {
    margin:0;
    padding:0;
    list-style:none;
    height: 35px;
}
/* Page Nav */
#pagenav {
    float: left;
    position: relative;
    z-index: 100;
    padding: 0 10px;
}
#pagenav li {
    padding: 0 9px 0 5px;
    margin: 0;
    background: url(http://www.mylifeisagarden.com/blog/wp-content/themes/thestation/styles/default/nav_divider.jpg) no-repeat right top;
}
#pagenav li, #nav span, #nav a {
    float:left;
    height:35px;
    line-height: 35px;
    color:#fff;
    text-decoration:none;
}
#nav span.right {padding-right:5px;}
#nav span.left {padding-left:5px;}
#nav li.current_page_item a, #nav a:hover {
    background: url(http://www.mylifeisagarden.com/blog/wp-content/themes/thestation/styles/default/nav_current_tile.jpg) repeat-x 0 bottom;
    color:#000;
}
#nav li.current_page_item span.right,  #nav a:hover span.right {
    background: url(http://www.mylifeisagarden.com/blog/wp-content/themes/thestation/styles/default/nav_current_right.jpg) no-repeat right bottom;
    color:#000;
}
#nav li.current_page_item span.left, #nav a:hover span.left {
    padding-left:5px;
    background:url(http://www.mylifeisagarden.com/blog/wp-content/themes/thestation/styles/default/nav_current_left.jpg) no-repeat left bottom;
    color:#000;
}
</style>
</head>
<body>
<div id="nav">
    <ul id="pagenav">
        <li class="current_page_item"><a href="http://www.mylifeisagarden.com/blog" title="My life is a garden"><span class="left"><span class="right">Home</span></span></a></li>
        <li class="page_item page-item-2"><a href="http://www.mylifeisagarden.com/blog/?page_id=2" title="About"><span class="left"><span class="right">About</span></span></a></li>
        <li class="page_item page-item-248"><a href="http://www.mylifeisagarden.com/blog/?page_id=248" title="test4"><span class="left"><span class="right">test4</span></span></a></li>
    </ul>
</div>
<!-- /nav -->
</body>
</html>

Just copy and paste that code while online and you will see that it works ok in IE6 and others. Of course that means changing all your css to match and changing the html to nested spans as per my example.

Otherwise I didn’t see an easy fix for IE6. You could try setting widths for the elements to stop the 100% effect but IE6 doesn’t like absolute elements mixed in with floats anyway and indeed is 1px off on right positioning anyway when the distance covered is an odd number of pixels.

You may have also been better off using the sliding door approach and save on one of the spans.

3

You might also want to think about whether it’s time to stop worrying about IE6 support. Take a look at your site visitor stats - you might find that there’s almost no one using that browser who’s actually visiting your site (it’s still very common in China, for example, but if you’re not getting visitors from China anyway…).

Instead, you could just do a quick browser check, and put up a warning that says, “Sorry, but you’re using a browser that isn’t supported any longer. Please update to…”

I figure that if major players like Facebook and Google Apps can drop IE6 support, so can I. :slight_smile:

4

I’m pretty brain-dead right now. Thanks you for your help. In regards to changing the html - is there any way to put this all in a conditional statement?

Or will the html need to modified for the whole document. If so, will that affect the way it works in other browsers?

thanks

5

Your best bet is to use the above method for all browsers as it is a more stable method than the one you have anyway but will mean quite a bit of change to the css and a small change to the html (just moving the spans around the text and not either side).

If you want to support IE6 then you have little choice. That menu was obviously never meant for or tested in IE6 as it is built on a flawed concept for IE6. Which is why I always recommend testing at each stage ion the browser you want to support or you end up with a method that is just not compatible with the browser concerned.

6

Ok so just to be clear - the above method would mean I lost some of the functionality of the top nav - but kept the overall look of the nav buttons? Because the other option I was looking at was to use the bottom nav as the top nav (as it obviously works in ie6)

I don’t understand how the spans work. I know spans can be inserted into html code to add additional attributes/functions (I think), but I am a bit confused.

I know the spans are styling the 5pxl rounded corners here, but that’s about all I know.

could you show me what the structure looked like before, and what the new on would look like.

Also, I am using a wordpress theme, and the structure is output via html. I am not an expert on php (but more than willing to learn and become awesome), so I can’t tell how to modify the structure as you have suggested to make this work

PasteBin - Paste your code here.

Really, thanks you so much!

7

I have a installed my first ever virtual machine, excited!

Can test for ie6 on this pc woot

(edit- first thing I did was go msconfig in run and turn all services off to see what would happen then reboot. OS came up but no net connect lol.)

sorry for segue

8

What loss of functionality are you referring to? The menus is still the same , looks the same and works the same (assuming you match up all the styles correctly).

Because the other option I was looking at was to use the bottom nav as the top nav (as it obviously works in ie6)
The bottom menu is nothing like the top menu and has no tabs and is simply an inline menu. There is nothing similar in the menus so I am a little confused.

I don’t understand how the spans work. I know spans can be inserted into html code to add additional attributes/functions (I think), but I am a bit confused.

I know the spans are styling the 5pxl rounded corners here, but that’s about all I know.

could you show me what the structure looked like before, and what the new on would look like.

Spans are just inline elements that you can use as hooks for styling or wrapping words or phrases in a paragraph or other inline context.

In your code the html is like this:


<li class="current_page_item">
    <a href="http://www.mylifeisagarden.com/blog" title="My life is a garden">
        [B]<span class="left"></span>[/B]
            Home
      [B]  <span class="right"></span>[/B]
    </a>
</li>

My suggested change is this:


<li class="current_page_item">
    <a href="http://www.mylifeisagarden.com/blog" title="My life is a garden">
       [B] <span class="left">
            <span class="right">[/B]
                Home
          [B]  </span>
        </span>[/B]
    </a>
</li>

PasteBin - Paste your code here.

Really, thanks you so much!
That would be a question for the php forum as I dont do php i’m afraid.

Perhaps it would be better if we just took the spans out of the equation for ie6 like this:


* html #nav #pagenav li a span.right,
* html #nav #pagenav li a span.left{
display:none!important
}

Just add the above to the IE6 css file and then the menu should click back into position but will just have the corners missing but still looks reasonable. No change to the html will be necessary.

9

Ok, I’ve had another go :slight_smile:

Remove the code I just mentioned above (if you have added it yet).

Then go into the IE6 only file and remove all the code and replace with this:



#pagenav li {
/*    line-height: 27px;
    margin-top: -3px;*/
}
#pagenav li a:link, #pagenav li a:visited {
    padding: 0 8px 0 8px;
}
#nav ul li a span.left,
#nav ul li a span.right{
    display: block;
    position: absolute;
    overflow:hidden;
}
#nav ul li a:hover span.left, #nav ul li.current_page_item a:link span.left, #nav ul li.current_page_item a:visited span.left {
    top: 2px;
    left: 0;
}
#nav ul li a:hover span.right, #nav ul li.current_page_item a:link span.right, #nav ul li.current_page_item a:visited span.right {
    top: 2px;
    right: -1px;
    background-color: transparent!important;
}
#nav #pagenav li a{float:left;}
.container_12 {
    padding-left: 9px!important;
    padding-right: 1px!important;
}
#featured {
    margin-left: 5px;
}
#main_content {
    margin-left: 5px;
}
.post_head {
    margin: 0 0 0px 0;
}
.post_head .comments span.bg {
    margin: -3px 10px 0 10px;
}
.newsletter .field, .widget_feedburner .field, .widget_campaign_monitor .field {
    margin: 0;
}
#search input#s {
    margin: 0;
}
#footer .footnav ul {
    padding-top: 35px;
}
#footer .copyright {
    padding-top: 13px;
}
#slider .scroll {
    width: 940px;
}

That seems to display more or less correctly in Ie6 now.

10

champ fixed.

11

Hey

Thanks mate, I agree 100%, but I had to in this case:( I am learning stuff too which is a bonus!

12

Learning stuff is good, as long as it’s stuff you’ll be able to continue using in the future. But learning some of the tricks you need to accommodate IE6’s bugs is sort of like learning how to change a tire on a 1964 Ford Falcon - interesting, perhaps, but probably something you’re not going to need very often. :smiley: