highlight current page

Oak · #41 (**permalink**) Feb 3rd, 2008, 12:33

...No

I tried paying around with the settings to stop this rule when I first added the drop d menu to the site, but had no luck.

Jack Franklin · #42 (**permalink**) Feb 3rd, 2008, 12:48

Try getting in contact with whoever wrote the list in the first place? They might have a fix.

Oak · #43 (**permalink**) Feb 3rd, 2008, 13:02

Ok thanks!! I will let you know how I get on.

unitedcraig · #44 (**permalink**) Feb 12th, 2008, 23:40

Can anyone explain why, when i'm on the current page, the underline extends past the width of the text?

http://simplyfreeware.co.uk/db/prices.php

Thanks for your help

unitedcraig · #45 (**permalink**) Feb 12th, 2008, 23:41

The site is not an actual site by the way, just a template I've uploaded onto my server

Jack Franklin · #46 (**permalink**) Feb 13th, 2008, 18:11

Post CSS/xHTML for navigation please? Is it in all browsers or just one?

unitedcraig · #47 (**permalink**) Feb 13th, 2008, 21:15

Here's the html code, i am using php includes, don't know if this will have any affect

HTML: Select all

    <ul>
        <li<?php if ($page == 'aboutus') { echo ' id="active"'; }?>><a href="aboutus.php">About Us</a></li>
        <li<?php if ($page == 'prices') { echo ' id="active"'; }?>><a href="prices.php">Prices</a></li>
        <li<?php if ($page == 'contact') { echo ' id="active"'; }?>><a href="contact.php">Contact</a></li>
    </ul>

And here's the CSS

Code: Select all

/***NAVIGATION***/

#navigation {
    float: right;
    width: 300px;
    margin-right: 0px;
}

#navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#navigation ul li {
    float: left;
    width: 90px;
    padding-top: 20px;
}

#navigation ul li a {
    display: block;
    height: 30px;
    text-transform: uppercase;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    margin-right: 32px;
    padding-top: 5px;
    letter-spacing: 1px;
    font: 10px Tahoma, Geneva, sans-serif;
}

#navigation ul li a.last {
    margin-right: 0;
}

#navigation ul li a:hover {
    background-color: #669933;
    border-bottom: 5px solid #003300;
}

#active {
    display: block;
    height: 30px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    padding-top: 5px;
    letter-spacing: 1px;
    font: 10px Tahoma, Geneva, sans-serif;
    border-bottom: 5px solid #FF0000;
}

Thanks for your help

unitedcraig · #48 (**permalink**) Feb 13th, 2008, 21:24

And it is in FF 2.0 and IE7, don't worry about the way the column is displayed in IE, will sort that out later, just concerned about the navigation

Jack Franklin · #49 (**permalink**) Feb 13th, 2008, 21:25

Looks like my includes code

Anyway, the includes will have no effect what-so-ever. The code seems fine. Try giving the #active a width of 90px (Or whatever the width of the <li> should be.)
So it does not happen in IE6?

unitedcraig · #50 (**permalink**) Feb 13th, 2008, 21:30

Quote:

Originally Posted by jackfranklin

Looks like my includes code

Yes got that off your blog

, hope that means you'll be able to help me fix it lol

Code: Select all

#active {
    display: block;
    width: 90px;
    height: 30px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    padding-top: 5px;
    letter-spacing: 1px;
    font: 10px Tahoma, Geneva, sans-serif;
    border-bottom: 5px solid #FF0000;

I have done that and is appears to have no affect :S

Quote:

Originally Posted by jackfranklin

So it does not happen in IE6?

On vista so i can't install IE6, and the multiple IE doesn't work on vista, is there a way i can without installing a virtual pc by the way?

Jack Franklin · #51 (**permalink**) Feb 13th, 2008, 21:35

I just checked... it does the same thing in IE6. Try adding padding: 5px 0 0 0; instead of padding: 5px; and margin: 0; there as well. If you change the width to 200px or something stupid, does the border extend with it?

unitedcraig · #52 (**permalink**) Feb 13th, 2008, 21:56

Code: Select all

#active {
    display: block;
    width: 200px;
    height: 30px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    padding: 5px 0 0 0;
    margin: 0;
    letter-spacing: 1px;
    font: 10px Tahoma, Geneva, sans-serif;
    border-bottom: 5px solid #FF0000;
}

Changed it to this, and it's still the same in both FF and IE7

any ideas??

Jack Franklin · #53 (**permalink**) Feb 13th, 2008, 22:00

Try changing #active to #active li or li #active? No idea!

unitedcraig · #54 (**permalink**) Feb 13th, 2008, 22:20

I'll have a play around, see what happens.

If there's anyone else with any comments please feel free to help

Thanks jack

LinkBacks (?) LinkBack to this Thread: http://www.webforumz.com/web-page-design/64775-highlight-current-page.htm
Posted By	For	Type	Date
chromestyle nav/highlight active page IE problem - Dynamic Drive Forums	This thread	Refback	Apr 26th, 2008 17:49

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Current page problems	unitedcraig	Web Page Design	3	Jun 10th, 2008 20:44
After login: Redirect to page in history (Current - 2)...	skuliaxe	PHP Forum	4	Feb 20th, 2008 16:54
highlight the current page of a drop down menu	Oak	Web Page Design	2	Feb 12th, 2008 03:08
How to highlight the current page Nav link ?	Oak	Web Page Design	11	Jan 20th, 2008 13:21
Indicating current page on navigation bar	masonbarge	PHP Forum	2	Oct 30th, 2006 19:40

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
highlight current page