Need help with IE and FF css issue

[skunker]

Hey CSS gurus, need some help.

I'm having trouble getting the menu on my site to appear the same on IE and FF. If you go to my site at: http://www.georgeramirezphotography.com/new

You'll see that in IE7 , the navmenu does not look like the one in FF. For example, in IE7 , the navmenu shows all category text as BOLD whereas in FFox it’s the correct way showing only the active category as BOLD .

How do I clean up the code or fix this so it's correctly bold when only the selected category is active (like shown in FF)?

Thanks....

[Paul O'B]

Hi,

The list structure is broken and invalid and its just luck its displaying how you want

I'm not sure how you wanted the list structured but it looks like two lists with one having a sublist as follows:

<ul>
    <li class="company"> <a href="index.php">Home</a> <a href="?page_id=2">About</a> <a href="?page_id=4">Contact</a> <a href="#">Services</a> </li>
</ul>
<ul id="menu">
    <li class="categories">
        <p class="cat-title">Categories</p>
        <ul>
            <li class="cat-item cat-item-4"><a href="http://www.georgeramirezphotography.com/new/?cat=4" title="View all posts filed under Editorial">Editorial</a> </li>
            <li class="cat-item cat-item-1"><a href="http://www.georgeramirezphotography.com/new/?cat=1" title="View all posts filed under Featured">Featured</a> </li>
            <li class="cat-item cat-item-7"><a href="http://www.georgeramirezphotography.com/new/?cat=7" title="View all posts filed under Misc.">Misc.</a> </li>
            <li class="cat-item cat-item-5"><a href="http://www.georgeramirezphotography.com/new/?cat=5" title="View all posts filed under Portraits">Portraits</a> </li>
            <li class="cat-item cat-item-8"><a href="http://www.georgeramirezphotography.com/new/?cat=8" title="View all posts filed under Social">Social</a> </li>
            <li class="cat-item cat-item-6"><a href="http://www.georgeramirezphotography.com/new/?cat=6" title="View all posts filed under Special Events">Special Events</a> </li>
        </ul>
    </li>
</ul>

Then you would need to target the p element for the title as follows:

#navwrap .cat-title {
    text-transform:uppercase;
    text-align:center;
    letter-spacing: 12px;
    padding-top:30px;
    padding-bottom:5px;
    padding-left:5px;
    width:195px;
    display:block;
    text-decoration:none;
    color:#747474;
    font-weight:bold;
    border-bottom:1px solid #B9B9B9;
margin:0;
}

The above gives the same display in both browsers now.

Strictly speaking that first li with a class of company should be another nested list and not 4 bare anchors together as that is bad for accessibility.

[skunker]

Hi Paul,
I appreciate you taking the time to help me with this. Unfortunately, the site was built using Wordpress so the code is not so straightforward when viewing it in an editor. Here's what it looks like before it parses:

<ul id="menu">
			<?php

			wp_list_categories('sort_column=name&optioncount=0&exclude='.$phonx_exclude_cat.'&title_li=<li class="cat-title">Categories</li>'); // exclude categories by entering category value. eg. exclude=1,2,6,11

			?>
</ul>

So, taking the advice you gave me, how would I edit the above code so it outputs like you suggested? Thanks.

[RyanReese]

Paul doesn't speak PHP, but wp_list_categories() is a Wp function, either find the call to that or look in the (drat it's been months...what is it called...include(). files, (or require() files) to find the call to the function. The HTML should be in that.

[Paul O'B]

If It helps you could probably get away with html like this without changing the css.

<ul id="menu" class="categories">
                <li class="cat-title">Categories</li>
                <li class="cat-item cat-item-4"><a href="http://www.georgeramirezphotography.com/new/?cat=4" title="View all posts filed under Editorial">Editorial</a> </li>
                <li class="cat-item cat-item-1"><a href="http://www.georgeramirezphotography.com/new/?cat=1" title="View all posts filed under Featured">Featured</a> </li>
                <li class="cat-item cat-item-7"><a href="http://www.georgeramirezphotography.com/new/?cat=7" title="View all posts filed under Misc.">Misc.</a> </li>
                <li class="cat-item cat-item-5"><a href="http://www.georgeramirezphotography.com/new/?cat=5" title="View all posts filed under Portraits">Portraits</a> </li>
                <li class="cat-item cat-item-8"><a href="http://www.georgeramirezphotography.com/new/?cat=8" title="View all posts filed under Social">Social</a> </li>
                <li class="cat-item cat-item-6"><a href="http://www.georgeramirezphotography.com/new/?cat=6" title="View all posts filed under Special Events">Special Events</a> </li>
            </ul>

As Ryan said I don't do PHP so you will need to sort the logic out yourself or I can move the thread t the PHP forum.

[2bee]

something like this:

<ul id="menu">
			<?php
                        $catsy = get_the_category();
                        $myCat = $catsy[0]->cat_ID;

			wp_list_categories('sort_column=name&optioncount=0&exclude='.$phonx_exclude_cat.'&title_li=<li class="cat-title">Categories</li>&current_category='.$myCat); // exclude categories by entering category value. eg. exclude=1,2,6,11

			?>
</ul>

and in css

.current-cat { font-weight: bold; }

[skunker]

I'm afraid this is a little out of my league. Paul, do what ya gotta do...put this in the PHP category I guess. Thanks guys.

[Paul O'B]

I'll move it to PHP as it seems to be more of a programming problem than a css one. If you can output the html Like I have shown above then you should get the result you want.

[skunker]

Hey guys,
I just took the easy way out and paid someone $20 to fix this for me. LOL. Either way, thanks for trying to help. This is now closed.

[Paul O'B]

Oh well glad you got it sorted anyway and kept someone in work at the same time