SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with IE and FF css issue

    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....

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,531
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    <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:

    Code:
    #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.

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,531
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If It helps you could probably get away with html like this without changing the css.

    Code:
    <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.

  6. #6
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    something like this:

    Code:
    <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
    Code:
    .current-cat { font-weight: bold; }

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,531
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  9. #9
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,531
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Oh well glad you got it sorted anyway and kept someone in work at the same time


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •