Re: [css-d] navigation list with bullet and background color change.

[mem]

Thank you all, again. :)

Issue solved. 

M.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation list with bullet and background color change.

[David Laakso]

On 12/2/11 2:14 PM, mem wrote:

I'm trying to make a list that will change tree things on hover:

text color;
background color;
bullet image;

k. regards,
mem



Something like this?





mem


html,body{margin:0;padding:0;}
nav ul{margin:0;padding:0}
nav ul li{list-style:none;}

Re: [css-d] navigation list with bullet and background color change.

[Tim Climis]

> It seems that, when we mouse hover the padding area, we will have a red
> text over a red background, a bad combination that should never arrive.

The padding area isn't the issue.  It's actually the border.  Which means as
written, there's only 1px where that can happen.  I had to try really hard
to hit it.

But this will fix it:

li{
display: block;
}

a {
 display:block;
border-top: 1px dotted #ccc;
 background:green
url("http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif";)
no-repeat right center;
 padding: 2px 0;
 color: red;
}

a:hover {
background-color: red;
color: white;
}

---Tim

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation list with bullet and background color change.

[John D]

> It seems that, when we mouse hover the padding area, we will have a
 red text over a red background, a bad combination that should never 
arrive.

I am seeing white text on red background.

Good luck.



> 
> I'm trying to make a list that will change tree things on hover:
> 
> text color;
> background color;
> bullet image;
> 
> Can I please ask you guys to have a look here:
> 
> http://jsfiddle.net/4PUFa/5/
> 
> 
> It seems that, when we mouse hover the padding area, we will have a red text 
> over a red background, a bad combination that should never arrive.
> 

  
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] navigation list with bullet and background color change.

[mem]

I'm trying to make a list that will change tree things on hover:

text color;
background color;
bullet image;

Can I please ask you guys to have a look here:

http://jsfiddle.net/4PUFa/5/


It seems that, when we mouse hover the padding area, we will have a red text 
over a red background, a bad combination that should never arrive.

Can I have your help in order to solve this for good ?

k. regards,
mem

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[David Hucklesby]

On 10/17/11 12:18 PM, Michael Fokken wrote:
[...]


I never use points. I use px for sizing pages, margins, and padding.
I use 'em' for font-sizes, that way I can declare the font-size in
the body. Then if I want I can change the font size for everything by
just changing it in the body and it keeps the same ratio of all the
text (not sure if this is a good practice, just what I do).

http://css-discuss.incutio.com/wiki/Using_Points


Sincerely, Michael Fokken http://whatiscss.michaelfokken.com/



On Sun, Oct 16, 2011 at 9:08 AM, Ed Goodson
wrote:

Thanks michael that was very useful - one question, why do you use
pt? I always get in trouble when I use the pt value as it is for
print I thought Cheers Ed


FWIW - using points for the screen does have one advantage. Not all
computers are set to 96 DPI. Using points will scale the pixel value of
text defined in points to give something more legible.

For example, some high-definition Windows machines are set to 120 DPI.
This makes text sized with percent or em quite small in Webkit and
Mozilla browsers. Point sizes scale - 12pt is upped from 16px to 20px.

interestingly, Opera and Internet Explorer scale percent and em the same
way as point sizes - 100% is 20px in those browsers.

Just FYI.
--
Cordially,
David

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[Michael Fokken]

I'm not sure where the points are coming in. But if you mean at some
places the css shows up as margin: 0pt; I think either firefox added
that or your original css file had it.

I never use points. I use px for sizing pages, margins, and padding. I
use 'em' for font-sizes, that way I can declare the font-size in the
body. Then if I want I can change the font size for everything by just
changing it in the body and it keeps the same ratio of all the text
(not sure if this is a good practice, just what I do).

http://css-discuss.incutio.com/wiki/Using_Points


Sincerely,
Michael Fokken
http://whatiscss.michaelfokken.com/



On Sun, Oct 16, 2011 at 9:08 AM, Ed Goodson  wrote:
> Thanks michael that was very useful - one question, why do you use pt? I
> always get in trouble when I use the pt value as it is for print I thought
> Cheers Ed
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[Michael Fokken]

I left all the tags in the css. I was only trying to keep the current
css for your menu. I did take out things that will affect submenus.

But there is an amazing tool that I use in Firefox, called Firebug.
It's a web developer tool that you can view and edit the css live to
see changes. (there are things similar in Chrome and IE - IE's is not
great)

http://www.michaelfokken.com/blog/code/example-code/css-for-ed-goodson.css

Hope this helps.

Sincerely,
Michael Fokken
http://whatiscss.michaelfokken.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation arrows

[David Hucklesby]

On 10/10/11 8:19 AM, Brahm Friedlander wrote:

In a web site I just finished,   http://www.juneselznickdrutz.ca , I
have thumbnails on the left side of the page and larger images of the
thumbnails on the right side.  I would like to place directional arrows
below the larger image and navigate through the images with the arrows
rather than having to click on the thumbnails. Can this be done strictly
with css ?



Something like this, perhaps?

http://thewebwiz.net/temp/june/

HTH
--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] navigation arrows

[Brahm Friedlander]

In a web site I just finished,   http://www.juneselznickdrutz.ca , I
have thumbnails on the left side of the page and larger images of the
thumbnails on the right side.  I would like to place directional arrows
below the larger image and navigate through the images with the arrows
rather than having to click on the thumbnails. Can this be done strictly
with css ?

 

All help would be appreciated.

 

Best regards,

Brahm Friedlander

 

 

 

 

 

brahmf...@gmail.com

 

http://www.brahmfriedlander.ca  

br...@brahmfriedlander.ca

 

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[David Hucklesby]

On 8/2/10 4:00 PM, Philip Taylor (Webmaster, Ret'd) wrote:
> Ah : I see the article is entitled "Apache Tutorial:
> Introduction to Server Side Includes" -- is the same
> functionality available in all SSI processors, do
> you know (for example, in IIS) ?
>

Pass.

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Duncan Hill]

On Tue, 03 Aug 2010 11:29:15 +0100, Bobby Jack   
wrote:

> Of course, that method doesn't help if you don't have CSS enabled or if,  
> for example, you're using a screen reader. You could also use javascript  
> to remove the 'href' attribute, but that suffers from the same sort of  
> problem.
>
> Ideally, you'd remove the href element server-side so the *content* is  
> accurate. There shouldn't be any case where this is difficult. Yes, if  
> you're just including a single static chunk of HTML for your menu, this  
> isn't possible, so it's better to either dynamically generate the menu,  
> or have a separate static 'chunk' for each different state. If your menu  
> has more than one level of navigation, you'll need to do this anyway.
>
> - Bobby

Agreed, without CSS it does not work and similarly doesn't take into  
account screen readers, however it seems much more probable that a  
'normal' browser will have CSS enabled whereas JavaScript can more easily  
be disabled in many situations.

The method works for relatively simple sites and handles SSI/PHP Includes,  
but it can soon become tiresome to write large sets of matching attributes  
to catch the correct pages.
It will work with multi-level menus, but again can become complex on any  
but smallish sites.

It is an easy and quite stable method for anyone who does not have the  
skills, or the need to start writing the dynamic scripts.

The usual caveat applies that not all browsers respect the  
'pointer-events' as yet.

Best wishes

Duncan


-- 
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Bobby Jack]

--- On Tue, 8/3/10, Duncan Hill  wrote:

> to add a little to MB's method, and maybe confound the SSI
> doubters a  
> little bit.
> The 'active' page can easily have its link disabled with no
> more than CSS  
> by changing the cursor to a standard arrow so that the user
> does not  
> expect any action, and the addition of the 'pointer-events'
> property set  
> to none.
> An entire item on the menu can be just as easily hidden by
> using display:  
> none;

Of course, that method doesn't help if you don't have CSS enabled or if, for 
example, you're using a screen reader. You could also use javascript to remove 
the 'href' attribute, but that suffers from the same sort of problem.

Ideally, you'd remove the href element server-side so the *content* is 
accurate. There shouldn't be any case where this is difficult. Yes, if you're 
just including a single static chunk of HTML for your menu, this isn't 
possible, so it's better to either dynamically generate the menu, or have a 
separate static 'chunk' for each different state. If your menu has more than 
one level of navigation, you'll need to do this anyway.

- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[David Laakso]

Duncan Hill wrote:
>
>
> (bonus for whoever tells me why the four panels are rendered differently  
> between surprising browsers, Firefox and IE7/8 versus all the rest!
>
> Duncan
>   




/Anything/ to relieve the boredom of all this. But, what four panels do 
you mean?

Best,
~d




-- 
desktop
http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Duncan Hill]

On Mon, 02 Aug 2010 19:42:34 +0100, MB  wrote:

> Shortie Designs said:
>
>> I'm trying to keep the current page navigation  link a different colour  
>> to
>> the rest of the navigation link - this way users will know what page  
>> they
>> are on. Ie: if the user is on the 'ABOUT US' page - then the About US  
>> link
>> in the navigation bar is a different colour. I don't want to use  
>> JavaScript.
>
> The best way if using a dynamic web page is to use an id on the current
> page link in the navigation. If it's a static web site you could use a
> combination of an id on the body tag and the links and target those with
> unique descendant selectors.
> For example these HTML snippets:
> 
> markets
> products
>
> could be targeted with these selectors:
> #markets #nav-markets, #products #nav-products

to add a little to MB's method, and maybe confound the SSI doubters a  
little bit.
The 'active' page can easily have its link disabled with no more than CSS  
by changing the cursor to a standard arrow so that the user does not  
expect any action, and the addition of the 'pointer-events' property set  
to none.
An entire item on the menu can be just as easily hidden by using display:  
none;

Both examples can be seen on my 'very much work in progress' at
http://redlemonarts.com/_dev/textbeast/index.html
the relevant css is in
http://redlemonarts.com/_dev/textbeast/css/navbuttons.css (line 62)

(bonus for whoever tells me why the four panels are rendered differently  
between surprising browsers, Firefox and IE7/8 versus all the rest!

Duncan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Duncan Hill]

missed an extra link with my earlier reply

http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty

Duncan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Philip Taylor (Webmaster, Ret'd)]

Ah : I see the article is entitled "Apache Tutorial:
Introduction to Server Side Includes" -- is the same
functionality available in all SSI processors, do
you know (for example, in IIS) ?

** Phil.

David Hucklesby wrote:
> On 8/2/10 12:26 PM, Philip Taylor (Webmaster, Ret'd) wrote:
>> Intrigued :-) What handles the #IF/#ELSE/#ENDIFs ?
>> ** Phil.
> Hi Phil,
>
> SSI handles the logic. Check the article linked to from the home page.
>
> Cordially, David
> --
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Chris F.A. Johnson]

On Mon, 2 Aug 2010, Philip Taylor (Webmaster, Ret'd) wrote:

>
>
> Chris F.A. Johnson wrote:
>
>>  Why do you want a link to the current page?
>>
>>  Remove the  tags and style it differently.
>
> Whilst I cannot answer for the original enquirer, the most
> common reasons for wanting to link to the current page are :
>
> For consistency (all pages have a consistent set of links)

I like the consistency of all links leading away from the current
page. Links to the current page can be confusing.

> Because a Library file, SSI or similar is used to insert
> a fixed set of link.

When I want to use the same file fro links on many pages, I use SSI
to run a script that removes the link to the current page.

> In neither case can your suggestion be followed as-is.


-- 
Chris F.A. Johnson, 
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Philip Taylor (Webmaster, Ret'd)]

Intrigued :-)  What handles the #IF/#ELSE/#ENDIFs ?
** Phil.

David Hucklesby wrote:

> David Laakso has given an excellent solution. But I respectfully
> disagree that SSI cannot be used. Here is a demo I made for a student
> who wants to do that very thing. I hope it helps:
>
> http://webwiz.robinshosting.com/temp/jaime/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[MB]

Shortie Designs said:

>I'm trying to keep the current page navigation  link a different colour to
>the rest of the navigation link - this way users will know what page they
>are on. Ie: if the user is on the 'ABOUT US' page - then the About US link
>in the navigation bar is a different colour. I don't want to use JavaScript.

The best way if using a dynamic web page is to use an id on the current
page link in the navigation. If it's a static web site you could use a
combination of an id on the body tag and the links and target those with
unique descendant selectors. 
For example these HTML snippets:

 
markets
products

could be targeted with these selectors:
#markets #nav-markets, #products #nav-products

I'd use "id" rather than "class" as a target inside the navigation
should be unique on the page.
Even if you have several pages with the same body id value, this doesn't
matter as only one page is loaded at a time. This allows several pages
to be current under a navigation link, like part 2 of an article and so on.

I use this technique on quickly made mockups and similar.

/MB



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[David Hucklesby]

On 8/2/10 1:19 AM, Philip Taylor (Webmaster, Ret'd) wrote:
>
>
> Chris F.A. Johnson wrote:
>
>> Why do you want a link to the current page?
>>
>> Remove the   tags and style it differently.
>
> Whilst I cannot answer for the original enquirer, the most common
> reasons for wanting to link to the current page are :
>
> For consistency (all pages have a consistent set of links) Because a
> Library file, SSI or similar is used to insert a fixed set of link.
>
> In neither case can your suggestion be followed as-is.
>

David Laakso has given an excellent solution. But I respectfully
disagree that SSI cannot be used. Here is a demo I made for a student
who wants to do that very thing. I hope it helps:

http://webwiz.robinshosting.com/temp/jaime/

(Links lead to other example pages.)

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Sandy]

>> I'm trying to keep the current page navigation  link a different colour to
>> the rest of the navigation link - this way users will know what page they
>> are on.

An approach I like is putting the highlight link style in the , 
since this lets me use the same include for all the menus.






I got this off
http://www.askthecssguy.com
but I can't seem to find it again.

Sandy

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Snipes, Jason L]

> Hi All  - I'm new to CSS and would love some help with styling my navigation
> links.

> I'm trying to keep the current page navigation  link a different colour to
> the rest of the navigation link - this way users will know what page they
> are on. Ie: if the user is on the 'ABOUT US' page - then the About US link
> in the navigation bar is a different colour. I don't want to use JavaScript.

I use a combination of id's on my links in my menu with a class on my body tag 
like this:

  

Home
About Us
Contact Us



And I make a css entry in my stylesheet to handle all the active pages:

.home #home,
.aboutus #aboutus,
.contactus #contactus
{
/* active page css here */
}

Jason Snipes

NOTE: This is a Forsyth County operated e-mail system. ALL e-Mail communication 
is subject to be accessed by the news media and the public pursuant to the 
Public Records Law of North Carolina.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[David Laakso]

Shortie Designs wrote:
>
> I'm trying to keep the current page navigation  link a different colour to
> the rest of the navigation link - this way users will know what page they
> are on.
> Sofia
>   






This is one way to do it.


Best,
~d




-- 
http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Chris Akins]

On Mon, Aug 2, 2010 at 7:28 AM, Beth Lee  wrote:

> On Mon, Aug 2, 2010 at 6:01 AM, Shortie Designs
>  wrote:
> > Sorry - my original email was unclear - I"m trying to make the current
> page
> > in the navigation bar appear active - so when you are on the page - the
> name
> > of it will appear in different colour font in the navigation bar - this
> way
> > the user knows they they are on the 'home' or 'about us' page.
>
> Add to the css:
>.current {rules differentiating the current-page link}
>
> On each page, add class="current" to the navigation link for that page.
>
> Regards,
>
> Beth Lee
> www.bethleedesign.com
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>


Here's a few examples of what Beth is talking about.  We used just this
approach in our City website:

http://www.springfieldmo.gov/brownfields/index.html
http://www.springfieldmo.gov/planning/minority.html
http://www.springfieldmo.gov/planning/homeama.html

If you study the markup of the left navigation list (and the CSS), you'll
discover the use of classes such as ".currentPage", ".afterCurrent", etc.
that add indicators to the list of what page you're on.  Multiple classes
are used on some items to style various elements of the background image,
text, etc.

Hope this helps.  Looking "under the hood" of other sites is one of the best
ways to learn various techniques, I think.

Chris Akins
Web Coordinator
City of Springfield, MO
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Tim Arnold]

On Aug 2, 2010, at 8:01 AM, Shortie Designs  wrote:

> Sorry - my original email was unclear - I"m trying to make the current page
> in the navigation bar appear active - so when you are on the page - the name
> of it will appear in different colour font in the navigation bar - this way
> the user knows they they are on the 'home' or 'about us' page.
> Cheers
> Sofia Woods
>

Sorry, accidentally sent that last message. You will need to add a
class somewhere in your HTML that you can use to make the current
section main nab link appear different. How and where you add the
class depends on how the site is built. In some cases you may be best
served by adding "class='current'" to the  or  of the nav link.

Another way to solve it would be to have classes on each nav
identifying them:  for example.  Then add a
class to the BODY tag or main page wrapper indicating which the
current section is: . Then you can use that
combination to style the links uniquely. "body.about li.about {color:
#000;}" (in other words "when the body says "about" make the 'about'
nav link black.").

Which one you use depends on whether one or the other is more
manageable or achievable given the technology you use to manage your
site.

- tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Beth Lee]

On Mon, Aug 2, 2010 at 6:01 AM, Shortie Designs
 wrote:
> Sorry - my original email was unclear - I"m trying to make the current page
> in the navigation bar appear active - so when you are on the page - the name
> of it will appear in different colour font in the navigation bar - this way
> the user knows they they are on the 'home' or 'about us' page.

Add to the css:
.current {rules differentiating the current-page link}

On each page, add class="current" to the navigation link for that page.

Regards,

Beth Lee
www.bethleedesign.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] navigation link a different colour when page is active

[William Gates]

Hi Sophia,
You could give that link a class attribute:

  About Us

Then style it differently from other links
a.active {
color: #your-different-color;
background: #your-different-color;
}
Regards
William
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Tim Arnold]

You will need to add a class somewhere that you can anchor any unique
styles to.

- Tim

(Please forgive any typos caused by huge fingers on a teeny phone keybard.)

On Aug 2, 2010, at 8:01 AM, Shortie Designs  wrote:

> Sorry - my original email was unclear - I"m trying to make the current page
> in the navigation bar appear active - so when you are on the page - the name
> of it will appear in different colour font in the navigation bar - this way
> the user knows they they are on the 'home' or 'about us' page.
> Cheers
> Sofia Woods
>
>
> -Original Message-
> From: Philip Taylor (Webmaster, Ret'd) [mailto:p.tay...@rhul.ac.uk]
> Sent: Monday, 2 August 2010 6:19 PM
> To: Chris F.A. Johnson
> Cc: Shortie Designs; css-d@lists.css-discuss.org
> Subject: Re: [css-d] navigation link a different colour when page is active
>
>
>
> Chris F.A. Johnson wrote:
>
>> Why do you want a link to the current page?
>>
>> Remove the  tags and style it differently.
>
> Whilst I cannot answer for the original enquirer, the most
> common reasons for wanting to link to the current page are :
>
> For consistency (all pages have a consistent set of links)
> Because a Library file, SSI or similar is used to insert
> a fixed set of link.
>
> In neither case can your suggestion be followed as-is.
>
> Philip Taylor
>
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Shortie Designs]

Sorry - my original email was unclear - I"m trying to make the current page
in the navigation bar appear active - so when you are on the page - the name
of it will appear in different colour font in the navigation bar - this way
the user knows they they are on the 'home' or 'about us' page.
Cheers
Sofia Woods


-Original Message-
From: Philip Taylor (Webmaster, Ret'd) [mailto:p.tay...@rhul.ac.uk] 
Sent: Monday, 2 August 2010 6:19 PM
To: Chris F.A. Johnson
Cc: Shortie Designs; css-d@lists.css-discuss.org
Subject: Re: [css-d] navigation link a different colour when page is active



Chris F.A. Johnson wrote:

>  Why do you want a link to the current page?
>
>  Remove the  tags and style it differently.

Whilst I cannot answer for the original enquirer, the most
common reasons for wanting to link to the current page are :

For consistency (all pages have a consistent set of links)
Because a Library file, SSI or similar is used to insert
a fixed set of link.

In neither case can your suggestion be followed as-is.

Philip Taylor

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Philip Taylor (Webmaster, Ret'd)]

Chris F.A. Johnson wrote:

>  Why do you want a link to the current page?
>
>  Remove the  tags and style it differently.

Whilst I cannot answer for the original enquirer, the most
common reasons for wanting to link to the current page are :

For consistency (all pages have a consistent set of links)
Because a Library file, SSI or similar is used to insert
a fixed set of link.

In neither case can your suggestion be followed as-is.

Philip Taylor
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Chris F.A. Johnson]

On Mon, 2 Aug 2010, Shortie Designs wrote:

> Hi All  - I'm new to CSS and would love some help with styling my navigation
> links.
>
> I'm trying to keep the current page navigation  link a different colour to
> the rest of the navigation link - this way users will know what page they
> are on. Ie: if the user is on the 'ABOUT US' page - then the About US link
> in the navigation bar is a different colour. I don't want to use JavaScript.

Why do you want a link to the current page?

Remove the  tags and style it differently.

> I tried adding a:active but this just made all the navigation links a
> different colour - any clues would be greatly appreciated.!
>
> Thanks
>
> Sofia
>
> shortiedesi...@gmail.com
>
>
>
> CSS
>
> }
>
> #nav {
>
>width: 740px;
>
>height:48px;
>
>margin: 0px 0px 0px 20px;
>
>background-image:url(../images/Layout/nav_bar.gif);
>
>background-repeat:no-repeat;
>
>display:inline;
>
>float:left;
>
>font-family: Verdana, Geneva, Arial, sans-serif;
>
>color: #FFF;
>
>
>
> }
>
> #nav a{
>
>font-size:14px;
>
>font-style:normal;
>
>font-family:Verdana, Geneva, Arial, sans-serif;
>
>display:inline;
>
>float:left;
>
>margin-top: 12px;
>
>margin-right: 0px;
>
>margin-bottom: 10px;
>
>margin-left: 0px;
>
>padding-top: 0px;
>
>padding-right: 16px;
>
>padding-bottom: 0px;
>
>padding-left: 20px;
>
>border-right-width: 2px;
>
>border-right-style: inset;
>
>border-right-color: #FFF;
>
>color: #FFF;
>
> }
>
>
>
>
>
>
>
> #nav a:focus {
>
>color: #600;
>
> }
>
>
>
>
>
> #nav a:hover {
>
>color:#600;
>
>text-decoration:none;
>
> }
>
>
>
>
>
> ..lastchild {
>
>border-right: none 0px !important;
>
> } /*to keep the border off the last navigation item*/
>
>
>
>
>
> HTML:
>
>
>
>Home
>
>About VIVA
>
>Mat Classes
>
>About Pilates
>
>Osteoporosis Classes
>
>Contact
>
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

-- 
Chris F.A. Johnson, 
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] navigation link a different colour when page is active

[Shortie Designs]

Hi All  - I'm new to CSS and would love some help with styling my navigation
links.

I'm trying to keep the current page navigation  link a different colour to
the rest of the navigation link - this way users will know what page they
are on. Ie: if the user is on the 'ABOUT US' page - then the About US link
in the navigation bar is a different colour. I don't want to use JavaScript.

 

I tried adding a:active but this just made all the navigation links a
different colour - any clues would be greatly appreciated.!

Thanks 

Sofia

shortiedesi...@gmail.com

 

CSS

}

#nav {

width: 740px;

height:48px;

margin: 0px 0px 0px 20px;

background-image:url(../images/Layout/nav_bar.gif);

background-repeat:no-repeat;

display:inline;

float:left;

font-family: Verdana, Geneva, Arial, sans-serif;

color: #FFF;



}

#nav a{

font-size:14px;

font-style:normal;

font-family:Verdana, Geneva, Arial, sans-serif;

display:inline;

float:left;

margin-top: 12px;

margin-right: 0px;

margin-bottom: 10px;

margin-left: 0px;

padding-top: 0px;

padding-right: 16px;

padding-bottom: 0px;

padding-left: 20px;

border-right-width: 2px;

border-right-style: inset;

border-right-color: #FFF;

color: #FFF;

}

 

 

 

#nav a:focus {

color: #600;

}

 

 

#nav a:hover {

color:#600;

text-decoration:none;

}

 

 

.lastchild {

border-right: none 0px !important;

} /*to keep the border off the last navigation item*/

 

 

HTML:



Home

About VIVA

Mat Classes

About Pilates

Osteoporosis Classes

Contact

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation positioning awry?

[David Hucklesby]

On 2/4/10 2:31 PM, Laurie Landry wrote:
> For this page:
>
> http://laurielandry.com/homepage.html
>
> and using the subsequent CSS 
> http://laurielandry.com/assets/templates/laurielandry/css/primary_test.css
> , I'm trying to figure out why the UL is shift over.
>
> In some browsers, the links are centered  with the white box as
> desired, but in Firefox 2.0 (PC) the navigation links is shifted over
> in the correct positioning with the UL area.
>
> I want the UL (outlined in red) to be centered with the white box, not
> shifted over so much.
>
> I'm really stumped on why this is happening, and how to correct it.
>

Missing from my earlier reply--

The UL is positioned to the right because of this rule:

/* position the UL from the left by half the container width */
div.navcontainer ul {
...
left: 50%;
position: relative;
...
}

You then attempt to center the links by this rule:

/* position the LIs away from the right by half the UL width */
div.navcontainer ul li {
float: left;
...
position: relative;
right: 50%;
}

But Firefox 2 seems to ignore the 'position: relative;' - apparently 
because of the 'float: left;' declaration.

If you move the float declaration and margins from the LIs to the rule 
for 'div.navcontainer ul li a' I think you'll find browsers agree. (Not 
well tested.)

Hopefully my previous suggestion works for you.

Cordially,
David
--








__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation positioning awry?

[David Laakso]

Laurie Landry wrote:
> For this page:
>
> http://laurielandry.com/homepage.html
>
> and using the subsequent CSS 
> http://laurielandry.com/assets/templates/laurielandry/css/primary_test.css 
> , I'm trying to figure out why the UL is shift over.
>
> Laurie
>   


Laurie, a less complex construct will yield better results for you 
cross-browser.
Cursory checked in IE 6/7/8, FF/2.0.0.2, FF/3.5.7, and the latest ver 
Mac Safari.
Note both changes to markup and css files.
It is just roughed in-- tweak to taste.

html

css


In general, throughout your layout, you may want to re-consider and 
abandon all that absolute positioning and setting of heights. These make 
for a brittle layout that is easily broken by young children and their 
grandparents :-) .

Best,
~d

-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation positioning awry?

[David Hucklesby]

On 2/4/10 2:31 PM, Laurie Landry wrote:
> For this page:
>
> http://laurielandry.com/homepage.html
>
> and using the subsequent CSS 
> http://laurielandry.com/assets/templates/laurielandry/css/primary_test.css
> , I'm trying to figure out why the UL is shift over.
>
> In some browsers, the links are centered  with the white box as
> desired, but in Firefox 2.0 (PC) the navigation links is shifted over
> in the correct positioning with the UL area.
>
> I want the UL (outlined in red) to be centered with the white box, not
> shifted over so much.
>
> I'm really stumped on why this is happening, and how to correct it.
>

Hmm. Yes. The UL is positioned 50% of the container width to the right 
in all my (Mac) browsers, just as you tell it, but FF 2 is ignoring your 
instruction to position the LIs 50% of the UL width to the left. In 
fact, it ignores the 'position: relative;' on those LIs completely.

There is a solution to centering horizontal menus on listamatic[1], but 
it relies on using 'display: inline;' so that 'text-align: center;' 
works. But that does not allow you to put top and bottom borders and 
padding on the links. Adapting that design by putting 'display: 
inline-block;' on the A element solves that for most browsers. But FF 2 
does not 'do' 'inline-block'...

I tried using 'display: -moz-inline-box;' locally here, and that seems 
to work. Might be worth a try.

[1] http://css.maxdesign.com.au/listamatic/horizontal27.htm

BTW - the design is very fragile - even a small increase in text size 
creates weirdness... :(

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation positioning awry?

[Laurie Landry]

For this page:

http://laurielandry.com/homepage.html

and using the subsequent CSS 
http://laurielandry.com/assets/templates/laurielandry/css/primary_test.css 
, I'm trying to figure out why the UL is shift over.

In some browsers, the links are centered  with the white box as  
desired, but in Firefox 2.0 (PC) the navigation links is shifted over  
in the correct positioning with the UL area.

I want the UL (outlined in red) to be centered with the white box, not  
shifted over so much.

I'm really stumped on why this is happening, and how to correct it.

Thanks in advance,

Laurie
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[ed]

> Thanks Troy and Tim, the navigation is now up against the top of the page,
> but now it is on the wrong side. I have floated both the navigation and
> logo left but it is showing the logo on the right not on the left-why is
> that?:
> http://www.copywritecolombia.com/mediabuying.htm


You missed my part about floating the navigation right.  If you float it
right, it'll butt up against the right side of the page instead of the
left.

Change  to , and you should get something closer to what you
wanted.

---Tim

Thanks Tim I did that it works fine, I'll just add in some paggin-right on
the text navigation to line it up with the text

 http://www.copywritecolombia.com/mediabuying.htm



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[Climis, Tim]

> Thanks Troy and Tim, the navigation is now up against the top of the page,
> but now it is on the wrong side. I have floated both the navigation and
> logo left but it is showing the logo on the right not on the left-why is
> that?:
> http://www.copywritecolombia.com/mediabuying.htm

You missed my part about floating the navigation right.  If you float it right, 
it'll butt up against the right side of the page instead of the left.

Change  to , and you should get something closer to what you wanted.

---Tim

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[ed]

You've got this floating around above your navigation... 
 ...and I don't see it in your stylesheet. So that could be
what's pushing things down.

Thanks Troy and Tim, the navigation is now up against the top of the page,
but now it is on the wrong side. I have floated both the navigation and
logo left but it is showing the logo on the right not on the left-why is
that?:
http://www.copywritecolombia.com/mediabuying.htm



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[Troy Harshman]

On Thu, Jan 28, 2010 at 4:23 PM, Troy Harshman  wrote:
> On Thu, Jan 28, 2010 at 4:12 PM,   wrote:
>> Hi all,
>>  The top navigation should be right up against the top of the screen. How
>> do I can change it? Page validated:
>>  http://www.copywritecolombia.com/mediabuying.htm
>>
>>  Thank you
>>
>>
>>
>> __
>> css-discuss [cs...@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>
> I suspect that either the container for the logo isn't being floated
> and is pushing the navigation down or perhaps you need to clear some
> floats. One way to test where things are and the type of space they
> are taking up is to add a one pixel border to elements.
>

You've got this floating around above your navigation... 
 ...and I don't see it in your stylesheet. So that could be
what's pushing things down.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[Climis, Tim]

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of 
e...@copywritecolombia.com
Sent: Thursday, January 28, 2010 4:00 PM
To: css-d
Subject: [css-d] Navigation

> The top navigation should be right up against the top of the screen. How I
> can change it? 

Take the width off of #navigation ul.  If you want it over on the right, then 
change the float: left on #navigation to float: right.

It'll still break if you make your window narrow enough, so you might want to 
put a min-width on body.  Also a max-width so that the page doesn't get too 
long to read on large monitors.

---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[Troy Harshman]

On Thu, Jan 28, 2010 at 4:12 PM,   wrote:
> Hi all,
>  The top navigation should be right up against the top of the screen. How
> do I can change it? Page validated:
>  http://www.copywritecolombia.com/mediabuying.htm
>
>  Thank you
>
>
>
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

I suspect that either the container for the logo isn't being floated
and is pushing the navigation down or perhaps you need to clear some
floats. One way to test where things are and the type of space they
are taking up is to add a one pixel border to elements.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[ed]

Hi all,
 The top navigation should be right up against the top of the screen. How
do I can change it? Page validated:
 http://www.copywritecolombia.com/mediabuying.htm

 Thank you



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation

[ed]

Hi all,
The top navigation should be right up against the top of the screen. How I
can change it? Page validated:
http://www.copywritecolombia.com/mediabuying.htm

Thank you

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation: Unordered list or simply float links

[Philippe Wittenbergh]

On Sep 20, 2009, at 6:26 AM, Brian M. Curran wrote:

>> ... I'd be
>> intrigued to know what effect you are having trouble with using an
>> ordered list.
> In the past it has just seemed cumbersome to work with. Specifically  
> it seems the list is in a container, so the container and the list  
> both need to be formatted with css. Then items under the list need  
> to be cleared. Maybe there is, but at this point I don't see the up  
> side to using an ul. Perhaps I need to learn more, and then an up  
> side will become apparent.

Using an unordered list (ul/li) is not so much about styling (you can  
style anything to look the way you want anyway) but about using a well- 
structured and semantically-rich html foundation. This offers  
advantages for users that use non-visual UAs (robots...) or screen  
readers.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation: Unordered list or simply float links

[Brian M. Curran]

>>Brian M. Curran wrote:

>> Hi,
>> In my short time of CSS web page formatting I've been using  
>> unordered lists to create navigation buttons. You know: home, about,  
>> contact, and etc. Well I've been thinking. Is there anything wrong  
>> with: putting my desired > the text, and thus giving me something similar to a navigation bar?  
>> The reason I ask is because: 1. On a project I'm working on I'm not  
>> looking to do a nav bar, but rather a bunch of links in a row. Like  
>> how you may see at the bottom of a number of websites. 2. In my  
>> experience of working with unordered lists, they haven't been the  
>> easiest things to manipulate.



>Tim wrote:

>Hi Brian - Of course you can do what you want! However, I'd be  
>intrigued to know what effect you are having trouble with using an  
>ordered list. You will probably find that a good starting point is to  
>zero everything out with some reset CSS (e.g. 
>http://developer.yahoo.com/yui/reset/ 
>, http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/). This  
>gives you a blank-ish slate to start applying your rules to.

>Have a look at Listamatic for inspiration 
>http://css.maxdesign.com.au/listamatic/

>Cheers, Tim



Tim,
That is a super resource. Thanks so much. Perhaps now I'll just stick with the 
list. 

>... I'd be  
>intrigued to know what effect you are having trouble with using an  
>ordered list.
In the past it has just seemed cumbersome to work with. Specifically it seems 
the list is in a container, so the container and the list both need to be 
formatted with css. Then items under the list need to be cleared. Maybe there 
is, but at this point I don't see the up side to using an ul. Perhaps I need to 
learn more, and then an up side will become apparent.

Sincerely,
Brian








__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation: Unordered list or simply float links

[Tim Snadden]

On 20/09/2009, at 5:27 AM, Brian M. Curran wrote:

> Hi,
> In my short time of CSS web page formatting I've been using  
> unordered lists to create navigation buttons. You know: home, about,  
> contact, and etc. Well I've been thinking. Is there anything wrong  
> with: putting my desired  the text, and thus giving me something similar to a navigation bar?  
> The reason I ask is because: 1. On a project I'm working on I'm not  
> looking to do a nav bar, but rather a bunch of links in a row. Like  
> how you may see at the bottom of a number of websites. 2. In my  
> experience of working with unordered lists, they haven't been the  
> easiest things to manipulate.

Hi Brian - Of course you can do what you want! However, I'd be  
intrigued to know what effect you are having trouble with using an  
ordered list. You will probably find that a good starting point is to  
zero everything out with some reset CSS (e.g. 
http://developer.yahoo.com/yui/reset/ 
, http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/). This  
gives you a blank-ish slate to start applying your rules to.

Have a look at Listamatic for inspiration 
http://css.maxdesign.com.au/listamatic/

Cheers, Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation: Unordered list or simply float links

[Brian M. Curran]

Hi,
In my short time of CSS web page formatting I've been using unordered lists to 
create navigation buttons. You know: home, about, contact, and etc. Well I've 
been thinking. Is there anything wrong with: putting my desired http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation list problem in Safari 3.0

[David Hucklesby]

Rod Castello wrote:
> Additionally, can anyone explain why Safari renders the in-line list
> shorter than Firefox? It seems like it renders the font smaller.
> [...]
> 
> http://rodcastello.com/pedro/index6e.html Thanks in advance.
> 

Now you have the other issues addressed, I think your menu width issue 
may be due to the way Safari tends to truncate any fractions of a 
percent for font-size based lengths (EM or %). It looks like the 
letter-spacing: 0.4em; being less than 1px is ignored by Safari, but 
applied by Firefox.

Of course, any computer not having Impact fonts installed will get 
something else entirely. So will anyone with text-size settings other 
than the most usual, or with an OS setting other than 96 DPI.

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation list problem in Safari 3.0

[Rod Castello]

Thanks Tim, that did the trick.

Rod Castello

11812 A Moorpark Street

Studio City, CA 91604

(818) 437-7880

http://rodcastello.com

--- On Wed, 5/13/09, Tim Snadden  wrote:
From: Tim Snadden 
Subject: Re: [css-d] Navigation list problem in Safari 3.0
To: css-d@lists.css-discuss.org
Date: Wednesday, May 13, 2009, 7:20 PM

On 14/05/2009, at 6:54 AM, Rod Castello wrote:

> I'm using chromejs for drop-downs in Nav bar. Looks fine in Firefox,  
> but shows small question-mark in box when viewed in Safari 3.1.2.

There's an image missing ( /pedro/down.gif) and Safari is just  
complaining about it more than Firefox.

In the javascript is says:

dropdownindicator: ''

You need to ensure that this image is there or change the path to  
point to its location.

>  Additionally, can anyone explain why Safari renders the in-line  
> list shorter than Firefox? It seems like it renders the font  
> smaller. I've used a css hack to apply specific styling to Safari on  
> another website, and it works, but is there something I'm missing as  
> to why Safari renders the previously mentioned items differently  
> than Firefox?

I don't know but it may be a rounding issue?
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation list problem in Safari 3.0

[Tim Snadden]

On 14/05/2009, at 6:54 AM, Rod Castello wrote:

> I'm using chromejs for drop-downs in Nav bar. Looks fine in Firefox,  
> but shows small question-mark in box when viewed in Safari 3.1.2.

There's an image missing ( /pedro/down.gif) and Safari is just  
complaining about it more than Firefox.

In the javascript is says:

dropdownindicator: ''

You need to ensure that this image is there or change the path to  
point to its location.

>  Additionally, can anyone explain why Safari renders the in-line  
> list shorter than Firefox? It seems like it renders the font  
> smaller. I've used a css hack to apply specific styling to Safari on  
> another website, and it works, but is there something I'm missing as  
> to why Safari renders the previously mentioned items differently  
> than Firefox?

I don't know but it may be a rounding issue?
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation list problem in Safari 3.0

[Rod Castello]

I'm using chromejs for drop-downs in Nav bar. Looks fine in Firefox, but shows 
small question-mark in box when viewed in Safari 3.1.2. Don't know if this is a 
javascript problem, css, or what. Additionally, can anyone explain why Safari 
renders the in-line list shorter than Firefox? It seems like it renders the 
font smaller. I've used a css hack to apply specific styling to Safari on 
another website, and it works, but is there something I'm missing as to why 
Safari renders the previously mentioned items differently than Firefox? Are 
there other methods to get it to behave the same.

 Here's the url to the site (in-development) 

http://rodcastello.com/pedro/index6e.html
Thanks in advance.

Rod Castello

http://rodcastello.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation Sidebar Problem:

[Tony Frasketi]

Hi Jack
Thanks for the response... You should be able to see ok now... I was 
using Mozilla browser and font was big enuff. But I checked in other 
browsers and saw what you meant by not being able to see it. My font was 
set for 5px, So I set the body font to medium;

But now my problem seems to have gone away The first segment name 
'Website Nav...' works exactly as the other segment names I don't 
understand what happened. Mebbie I need another coffee break.

So please disregart the newbee post everybody!
Sorry
Tony


Jack Timmons wrote:

>On Sun, Dec 21, 2008 at 7:07 PM, Tony Frasketi 
>
>>It may just be me, but I'm having problems finding exactly what you're
>>trying to describe. Not just because I don't see any real difference in
>>elements off-hand, but the font itself is way too small for even my eyes,
>>and I can see pretty darn well.
>>
>>
>>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation Sidebar Problem:

[Jack Timmons]

On Sun, Dec 21, 2008 at 7:07 PM, Tony Frasketi wrote:

>
> Hello List
> This is my first post and I hope I'm not violating any rules.. If so,
> point them out ot me.
>
> I'm having a problem with a sidebar navigation.   The sidebar contains
> several navigation segment names and each segment contains one or more
> page links
>
> The problem is that the FIRST navigation segment name does not work as
> the rest of the segment names... The first segment name appears to be
> acting as a link.
>
> I've validated both the CSS and the HTML  via W3C
>
> The sidebar is at
> http://www.spacecovers.com/test/css_testing/sidebar3new.htm
>
> Thanks in advance
> Tony
>
>
It may just be me, but I'm having problems finding exactly what you're
trying to describe. Not just because I don't see any real difference in
elements off-hand, but the font itself is way too small for even my eyes,
and I can see pretty darn well.

-- 
-Jack Timmons
http://www.trotlc.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation Sidebar Problem:

[Tony Frasketi]

Hello List
This is my first post and I hope I'm not violating any rules.. If so, 
point them out ot me.

I'm having a problem with a sidebar navigation.   The sidebar contains 
several navigation segment names and each segment contains one or more 
page links

The problem is that the FIRST navigation segment name does not work as 
the rest of the segment names... The first segment name appears to be 
acting as a link.

I've validated both the CSS and the HTML  via W3C

The sidebar is at  
http://www.spacecovers.com/test/css_testing/sidebar3new.htm

Thanks in advance
Tony
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation Bar in IE 6 Not Matching IE7 and Firefox

[Gunlaug Sørtun]

Alix Estrada wrote:

> 1. My navigation bar is perfectly placed in IE 7 and Firefox, however
> is IE 6 it is wy over to the right.

Add...

#tabsJ {display: inline;}

...to kill the "margin-doubling on floats" bug in IE6.

> 2. I also noticed that my page is not centered in IE 6, when it is in
> IE 7 and Firefox.

Caused by bug 1, and gets corrected by the fix.

> 3. At the bottom of the page, in IE 7 and Firefox, the bottom orange 
> line sits right under the two images above the footer, as it should. 
> However in IE 6 there is a gap of about 3 pixels.

IE6 doesn't respect declared dimensions when content is too large, and
it is.

The addition of...

* html #contentBottom {
  overflow: hidden;
}

...will correct that bug in old IE, but I do not recommend using it.

> http://itroundtable.premerabc.com/index1.html

Aside: your page triggers the "em font-resizing bug in IE5 - IE7"[1],
but is otherwise so easily broken by any amount of font-resizing in any
browser that it doesn't really matter.

regards
Georg

[1]http://www.gunlaug.no/contents/wd_additions_13.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation Bar in IE 6 Not Matching IE7 and Firefox

[Alix Estrada]

Hello. I'm having three problems with this page in IE6 that I am not
having in IE 7 and Firefox. I've spent hours trying ot figure out what
is wrong. I would appreciate any help!

1. My navigation bar is perfectly placed in IE 7 and Firefox, however is
IE 6 it is wy over to the right. 
2. I also noticed that my page is not centered in IE 6, when it is in IE
7 and Firefox.
3. At the bottom of the page, in IE 7 and Firefox, the bottom orange
line sits right under the two images above the footer, as it should.
However in IE 6 there is a gap of about 3 pixels.

http://itroundtable.premerabc.com/index1.html 

Thank you so much for any help,

ALIX ESTRADA
Web Usability & User Interface Designer
Premera Blue Cross


 



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Alan K Baker]

Alan.

As there are a few issues here and interaction will be improved (IMO) I am 
replying to your message, by interspersing my replies within yours.

Regards, 
 
Alan.
 
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus


- Original Message - 
From: Alan Gresley 
To: Alan K Baker 
Cc: css-d 
Sent: Saturday, April 12, 2008 10:09 AM
Subject: Re: [css-d] Navigation bar

> There many billions of pages needing the same treatment. Please take a look 
> at this screen shot.

Answered privately.

> Is this the fixed navigation where the lower parts are hidden outside the 
> viewpoint. My screen is on 800px high. Is this navigation within frames?

No, it's apparent on any button that's clicked. They all behave in the same way.

> Remove the frames as it make it near impossible for anyone to help.

The frames will be removed, but the site is presented 'as-is' to allow you guys 
to see the problem, not for you to attempt to retrieve code from it. That's why 
I posted the relevant code in my message.

> OK, where do you mention that .oneline and .twolines is part of the 
> navigation. Some on this list are good detectives since. We have to use our 
> web developers toolbar [1] "outline current element" feature to locate these 
> classes.

It's mentioned in the line "I've included the appropriate part of the 
stylesheet and the HTML below, to save you wading through the dreaded frames 
maze. At present my text is centered by [ .oneline a ] and [ .twolines a ] 
(below).", which you've edited out. :-)

> > I've probably missed something obvious!!

> Yes. When I check you source code all I see is.

>   
>   
>   
>   
>   

>   

>   >If you are reading this text, your browser is frames challenged.
> More up to date browsers are readily available.
>   

> The good browsers are not framed challenged. They just don't use MS propriety 
> garbage code.

'Fraid I disagree. Frames have been around for a long time, along with all 
their faults. None of today's reasonably up-to-date browsers has a problem with 
the site as it is/was.
M$ "proprietary code" is here to stay and the greater majority of browser 
public are using it, unfortunately for us, especially in the case of browsers 
below IE7, which itself is far from perfect.
Not to labor a point, as we're getting off topic, but the frames will be 
removed soon and the problem will cease to exist. :-)

> So you have to make it easy. :-)

> Sometimes it is easier just to have un-style text to begin with.

The only way I could make it any easier (as you say) is to remove the frames, 
but really this is totally unnecessary. I've already posted the relevant code 
in my message, for inspection. There's nothing 'hidden' on the live site that 
would affect it. I dumped the site to a test area, merely as an illustration 
for this forum, so that the effects can be seen.

Hell, being a USA originated forum, I even spelled my message in 'American' and 
ignored the protests of my UK spell-checker. 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Andrew Doades]

I do see what you are saying, but since I went to IE7 I have had no end 
of problem why trying to develop, also a pain was moving to IE7 from IE6 
when developing :)

But why do IE and FF seem to have a constant fighting battle for developers?
This is what I can't get, I can develop something that looks grate in FF 
but  in IE, or vice versa.

But some good points in your email :)

Andrew

Alan K Baker wrote:
> Andrew.
>
> In the case of my [ :active ] problem, I believe that none of the browsers is 
> actually at fault, and IE7 does actually do what I want and behaves in a way 
> I'd logically expect, which is probably quite unusual for IE7. :-)
> It's simply a minor discrepancy in implementation between browsers - no big 
> deal.
>
> I have far more problems with IE6 than all the other browsers! IE7 is a pussy 
> cat, compared to IE6. 
>
> In the case of my vertical spacing on text, this is just my wish to improve 
> my code. It's not a browser fault at all.
>
> Regards, 
>  
> Alan.
>  
> www.theatreorgans.co.uk
> www.virtualtheatreorgans.com
> Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
> Shopsmith 520 + bits
> Flatulus Antiquitus
>
>
>   - Original Message - 
>   From: Andrew Doades 
>   To: Alan Gresley 
>   Cc: Alan K Baker ; css-d 
>   Sent: Saturday, April 12, 2008 11:48 AM
>   Subject: Re: [css-d] Navigation bar
>
>
>   Hello all...
>
>   I could not help picking up on a bit about IE7, I recently attempted a 
>   sidebar for my website, and all now works (to some extent) but for IE7.
>
>   I was just wondering what is with IE7, IE6 used to be fine, it always 
>   worked, same with FF but why is 7 casing so many problems?
>
>   Andrew
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Alan K Baker]

Andrew.

In the case of my [ :active ] problem, I believe that none of the browsers is 
actually at fault, and IE7 does actually do what I want and behaves in a way 
I'd logically expect, which is probably quite unusual for IE7. :-)
It's simply a minor discrepancy in implementation between browsers - no big 
deal.

I have far more problems with IE6 than all the other browsers! IE7 is a pussy 
cat, compared to IE6. 

In the case of my vertical spacing on text, this is just my wish to improve my 
code. It's not a browser fault at all.

Regards, 
 
Alan.
 
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus


  - Original Message - 
  From: Andrew Doades 
  To: Alan Gresley 
  Cc: Alan K Baker ; css-d 
  Sent: Saturday, April 12, 2008 11:48 AM
  Subject: Re: [css-d] Navigation bar


  Hello all...

  I could not help picking up on a bit about IE7, I recently attempted a 
  sidebar for my website, and all now works (to some extent) but for IE7.

  I was just wondering what is with IE7, IE6 used to be fine, it always 
  worked, same with FF but why is 7 casing so many problems?

  Andrew

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Andrew Doades]

Hello all...

I could not help picking up o a bit about IE7, I recently attempted a 
sidebar for my website, and all now works (to some extent) but for IE7.

I was just wondering what is with IE7, IE6 used to be fine, it always 
worked, same with FF but why is 7 casing so many problems?

Andrew

Alan Gresley wrote:
> Alan K Baker wrote:
>   
>> Hi all.
>>
>> I'm in the process of converting an old frames/tables/JavaScript site to all 
>> CSS.
>> 
>
>
> There many billions of pages needing the same treatment. Please take a 
> look at this screen shot.
>
> 
>
> The forth line down run 5 times a wide as my screen. For me to reply to 
> you I first have to edit you message but not the simple way. My email 
> client will wrap my replies at 72 characters length automatically. 
> Discussion about Email clients are off-topic on this list but since your 
> messages are very hard to reply to I have to mentioned them. Here is a 
> good one to use.
>
> 
>
>
>   
>> It can be found at: http://www.webbwize.co.uk/Test_Area/TEP/index.html
>>
>> I am looking for a slightly more 'elegant' way of vertically centering text
>> 
>
>
> Is this the fixed navigation where the lower parts are hidden outside 
> the viewpoint. My screen is on 800px high. Is this navigation within frames?
>
>
>   
>> [snip] to save you wading through the dreaded frames maze.
>> 
>
>
> Remove the frames as it make it near impossible for anyone to help.
>
>
>   
>> At present my text is centered by [ .oneline a ] and [ .twolines a ].
>> 
>
>
> OK, where do you mention that .oneline and .towlines is part of the 
> navigation. Some on this list are good detectives since. We have to use 
> our web developers toolbar [1] "outline current element" feature to 
> locate these classes.
>
>
>   
>> I've also just noticed a problem in all browsers except IE7.
>> 
>
>
> That make sense. :-)
>
>
>  > I've probably missed something obvious!!
>
>
> Yes. When I check you source code all I see is.
>
> 
>   
>   
> 
> 
>
> 
> If you are reading this text, your browser is frames challenged.
> More up to date browsers are readily available.
> 
>
>
> The good browsers are not framed challenged. They just don't use MS 
> propriety garbage code.
>
>
>   
>> Help would be much appreciated.
>>
>> Regards, 
>>  
>> Alan.
>>  
>> www.theatreorgans.co.uk
>> 
>
>
> So you have to make it easy. :-)
>
> Sometimes it is easier just to have un-style text to begin with.
>
>
> [1] 
>
>
> Alan
>
> http://css-class.com/
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Alan Gresley]

Alan K Baker wrote:
> Hi all.
> 
> I'm in the process of converting an old frames/tables/JavaScript site to all 
> CSS.


There many billions of pages needing the same treatment. Please take a 
look at this screen shot.



The forth line down run 5 times a wide as my screen. For me to reply to 
you I first have to edit you message but not the simple way. My email 
client will wrap my replies at 72 characters length automatically. 
Discussion about Email clients are off-topic on this list but since your 
messages are very hard to reply to I have to mentioned them. Here is a 
good one to use.




> It can be found at: http://www.webbwize.co.uk/Test_Area/TEP/index.html
> 
> I am looking for a slightly more 'elegant' way of vertically centering text


Is this the fixed navigation where the lower parts are hidden outside 
the viewpoint. My screen is on 800px high. Is this navigation within frames?


> [snip] to save you wading through the dreaded frames maze.


Remove the frames as it make it near impossible for anyone to help.


> At present my text is centered by [ .oneline a ] and [ .twolines a ].


OK, where do you mention that .oneline and .towlines is part of the 
navigation. Some on this list are good detectives since. We have to use 
our web developers toolbar [1] "outline current element" feature to 
locate these classes.


> I've also just noticed a problem in all browsers except IE7.


That make sense. :-)


 > I've probably missed something obvious!!


Yes. When I check you source code all I see is.








If you are reading this text, your browser is frames challenged.
More up to date browsers are readily available.



The good browsers are not framed challenged. They just don't use MS 
propriety garbage code.


> Help would be much appreciated.
> 
> Regards, 
>  
> Alan.
>  
> www.theatreorgans.co.uk


So you have to make it easy. :-)

Sometimes it is easier just to have un-style text to begin with.


[1] 


Alan

http://css-class.com/


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Bill Brown]

[snip]
> I am looking for a slightly more 'elegant' way of vertically
> centering text depending on whether there are one or two lines.
[snip]
> I've also just noticed a problem in all browsers except IE7. What I
> want to happen is for the currently selected item to show a different
> background and to change text color, as in [ #navbar a:active ]
> (below) and for this state to remain until another selection is made.
> IE7 does what I want, but other browsers are inconsistent. Some will
> show the correct state whilst the mouse button is down and it's
> possible in at least one other to select an item and drag the pointer
> away from the item whilst holding the button down and the active
> state will remain. It's late at night and I've probably missed
> something obvious!!
[snip]
> /* Set background for current item */ #navbar a:active { 
> background-image:url(../images/buttons/navactive1x30.gif); 
> background-repeat:repeat; color:white; }
[snip]

Hi Alan.

I think other browsers are either shifting the focus or not recognizing 
the :active state on your link. Try adding the :focus state into that 
rule as well, like this:

/* Set background for current item */
#navbar a:active,
#navbar a:focus{
   background-image:  url(../images/buttons/navactive1x30.gif);
   background-repeat: repeat;
   color: white;}

It's difficult to fully test that on my local machine because of the 
frames (as you mentioned), but I think that should at least get you 
closer to a solution.

In terms of vertical centering, one solution is just to use padding and 
not rely on pre-determined heights for the links. This also creates an 
accessibility issue (overlapping the text when people [like me] have the 
font size set too high for your site's setup).

If you create a background image which fades to a specific color, you 
can just set the background of the link to that color, center the fade 
gif/png/jpg and let any overflow in odd situations show up as a solid color.

Here's a basic ascii'd example:

solid white link background peaking through
white->blue->white vertical fade [one or two lines here]
solid white link background peaking through again

Throw a little padding in there, use a "best guess" measurement and 
it'll look great on 80% of browsers, be accessible on all browsers, and 
still look decent on the remaining 20% browsers with configurations 
which differ from your local system.

Let me know how it all works out for ya.

Bill Brown
TheHolierGrail.com
MacNimble.com


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation bar

[Alan K Baker]

Hi all.

I'm in the process of converting an old frames/tables/JavaScript site to all 
CSS. It can be found at: http://www.webbwize.co.uk/Test_Area/TEP/index.html

I am looking for a slightly more 'elegant' way of vertically centering text 
depending on whether there are one or two lines.

I've included the appropriate part of the stylesheet and the HTML below, to 
save you wading through the dreaded frames maze. At present my text is centered 
by [ .oneline a ] and [ .twolines a ] (below).

I've also just noticed a problem in all browsers except IE7. What I want to 
happen is for the currently selected item to show a different background and to 
change text color, as in [ #navbar a:active ] (below) and for this state to 
remain until another selection is made. IE7 does what I want, but other 
browsers are inconsistent. Some will show the correct state whilst the mouse 
button is down and it's possible in at least one other to select an item and 
drag the pointer away from the item whilst holding the button down and the 
active state will remain. It's late at night and I've probably missed something 
obvious!!

Help would be much appreciated.

Regards, 
 
Alan.
 
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
www.webbwize.co.uk
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Flatulus Antiquitus



/* Main navigation menu */

/* Define vertical outer box with borders/bevels */
#navbar {
background-image:url(../images/logos/logo.gif);
background-repeat:no-repeat;
background-position:top;
position:absolute;
top:0;
left:0;
width:125px;
height:auto;
margin:0;
padding:0;
border-top:5px solid #dcf6ff;
border-right:5px solid #999;
border-bottom:5px solid #999;
border-left:5px solid #dcf6ff;
}

/* Limit list size and set margin to clear navbar logo */
#navbar ul {
font:9px Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
list-style-type:none;
margin:68px 0 0 0;
padding:0;
}

/* Single line of text */
.oneline a {
height:14px;
padding:8px 0 8px 3px;
}

/* Two lines of text */
.twolines a {
height:26px;
padding:2px 0 2px 3px;
}

/* Style & set background for active list items */
#navbar a {
background-image:url(../images/buttons/navstd1x30.gif);
background-repeat:repeat;
text-decoration:none;
text-transform:uppercase; /*All capitals for consistency */
color:black;
display:block;
border-bottom:5px solid #cce6ff;
}

/* Set new background position for rollover */
#navbar a:hover {
background-image:url(../images/buttons/navhover1x30.gif);
background-repeat:repeat;
}

/* Set background for current item */
#navbar a:active {
background-image:url(../images/buttons/navactive1x30.gif);
background-repeat:repeat;
color:white;
}




 
  
  HOME PAGE
  THOSE 
VARIETY DAYS
  LIBERACELIVE FROM LAS VEGAS
  MAGIC AND THEMUSICALS
  ERIC 
DELANEYSWING CRAZY
  PALLADIUM 
MEMORIES
  JIMMY 
CRICKET'SMATINEE MADNESS
  MUSIC MUSIC 
MUSIC
  PANTOMIME
  ABRACADABRA!
  PROFESSOR 
NUTTY
  SUMMER 
SHOWS
  THE MAGICOF CHRISTMAS
  SHOW DATES
  ABOUT US
  CONTACT 
DETAILS
  
 



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation all wonky in IE6

[Alan Gresley]

Blake wrote:

> Hi guys,
> 
> http://svitavice.blakehaswell.com/
> 
> The background is acting all weird on hover in IE6. The top level
> background is getting a background image for the 'daddy' class, while
> LIs with the daddy class are losing their background image on hover.
> 
> I wrote this over a year ago and the project was shelved for a long
> time - tbh I'm having trouble figuring out my own code.
> 
> Thanks,
> Blake

This is similar to the multiple class selector bug [1] where IE6 only see the 
last class. With this selector.

#nav li.daddy.sfhover

IE6 sees only

#nav li.sfhover

which selects all  elements. One tested fix is to use the daddy class on 
the anchor elements themselves.

Místní turistika

and with this CSS

#nav li a.daddy {
background: url(daddy.gif) right center no-repeat #E6E6E6;
}

#nav li a.daddy:hover {
background: url(daddy.gif) right center no-repeat #D0EFFF;
}

Tested in IE6, IE7, Gecko, Opera and Safari 3 on windows.

[1] 

Alan

http://css-class.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation all wonky in IE6

[Blake]

Hi guys,

http://svitavice.blakehaswell.com/

The background is acting all weird on hover in IE6. The top level
background is getting a background image for the 'daddy' class, while
LIs with the daddy class are losing their background image on hover.

I wrote this over a year ago and the project was shelved for a long
time - tbh I'm having trouble figuring out my own code.

Thanks,
Blake
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation problems. Can you help?

[Gunlaug Sørtun]

Karl Bedingfield wrote:

> http://www.discoverely.co.uk/nav/

> Any thoughts on how to get this menu to float right with 'menu 1'
> being first in line?

Pick and choose...





The necessary additions and changes are in the page head(s).

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation problems. Can you help?

[Karl Bedingfield]

Hi there,

I am working on a menu and am having a brain freeze (bbrrr!!).
Here is my menu: http://www.discoverely.co.uk/nav/ What I need to do
is have the menu on the right side and not the left. I thought float
right would do this on #nav li. It does float right but reverses the
order of the list.

Here is my css nav code: http://paste-it.net/4803

Any thoughts on how to get this menu to float right with 'menu 1'
being first in line?

Thank you.
-- 
Regards
Karl
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation Problem : IE

[Todd Silver]

Hello List,

I'm having a problem with my navigation on IE 7. It's pretty basic, 
stylized anchor tags in an , but doesn't work at all in IE 7. No 
hover effect, the links don't even work.

The XHTML is valid, I use some proprietary code in the CSS to stylize 
the blackboard's scrollbar in Explorer but I don't believe that should 
be effecting the navigation in such a way.

Here's the link:
http://www.toddsilverdesign.net/dev/dazil/fit_prof/intro.htm

And you can find the CSS here:
http://www.toddsilverdesign.net/dev/dazil/fit_prof/FitProfStyle.css

Any help would be greatly appreciated.

Thanks.

--Todd 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] navigation bar

[karuna sagar k]

Hi list,

I am facing problem in creating a page with a
navigation bar -

MARKUP:


 
  some content here
 


STYLE:

.nav_bar
{
margin: 1%;
width: 15%;
background-color: grey;
height: 98%; // i tried 98% thinking 1%+1% margin
(top and bottom) accounted (also, is there a way to
have comments in CSS?)
}

.main_container
{
border: 1px solid black;
width: 100%;
height: 100%
}

Now, when this is rendered, the nav_bar shoots-out of
the containing div. So, what I noticed here is that
the properties "width" and "height" refer to the
content box of the element and calculated as x% of
width of parent element (is that right?).

So, is there a way for me to specify the values for
the above properties relatively (as percent) and keep
the nav_bar inside the containing div? - i.e. I want
the nav_bar to occupy whole left portion of the
screen, with a white space between the border of the
containing div.

Thanks for the replies,
Karuna


  Try the revolutionary next-gen Yahoo! Mail. Go to 
http://mrd.mail.yahoo.com/dc/landing
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[James Gadrow]

trevor bayliss wrote:
> Hello everyone I am new!
>I am having problems with the last tab on a navigation bar. For some 
> reason I can´t make it fit with the light blue line above it and I am stuck 
> as to how to do it. Also the navigation bar doesn´t show up in Netscape 4.78 
> (no Flash) with Windows 2000 Professional and the thing just goes crazy with 
> Explorer 4.0 (no Flash) Windows 98. I imagine that the problem is that they 
> are too old so I won´t worry that much about them. What can I do to make the 
> navigation line up? Thanks 
>  
>  "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>
> 
> 
> 
> UL {
>  LIST-STYLE-TYPE: none
> }
> LI {
>  LIST-STYLE-TYPE: none
> }
> A {
>  COLOR: #7f99ae; TEXT-DECORATION: none
> }
> #topnav {
>  BORDER-TOP: #d8e1e9 4px solid; MARGIN: 9px 0px 0px
> }
> #topnav LI.l {
>  WIDTH: 20px
> }
> #topnav LI {
>  DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH: 
> 85px; HEIGHT: auto
> }
> #topnav LI SPAN.last-tab {
>  DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH: 
> 80px; HEIGHT: auto
>  }
> #topnav A {
>  BORDER-RIGHT: #d8e1e9 1px solid; DISPLAY: block; BACKGROUND: no-repeat left 
> top; FONT: 11px/20px tahoma, arial; WIDTH: 85px; COLOR: #fff; TEXT-ALIGN: 
> center
> }
> #topnav A:hover {
>  BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none
> }
> #topnav A.selected {
>  BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none
> }
> #width {
>  MARGIN-LEFT: auto; WIDTH: 882px; MARGIN-RIGHT: auto; TEXT-ALIGN: left
> }
> 
> 
> 
> 
> 
>   Home 
>   About 
>   Shops 
>   Entertainment 
>   Malls 
>   Environment 
>   Local 
>   Information
>   Contact Us 
>   Login
> 
>
>
>
> You
>  snooze, you lose. Get messages ASAP with AutoCheck
> in the all-new Yahoo! Mail Beta.
> http://advision.webevents.yahoo.com/mailbeta/newmail_html.html
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
Ok... I worked this out and I'm not sure it's what you want. But the 
reason you can't get things lining up is you didn't take off the default 
padding/margin on your list. This design could benefit from a rewrite 
but I have no idea what your project specs are so I left most of your 
code alone. Below is the code to duplicate the effect I created. I only 
tested in FF and IE7 but I figured this'll give you a good baseline to 
work from.

http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>



UL {
 LIST-STYLE-TYPE: none;
 padding: 0;
 margin: 0;
}
LI {
 LIST-STYLE-TYPE: none;
}
A {
 COLOR: #7f99ae; TEXT-DECORATION: none;
}
#topnav {
 BORDER-TOP: #d8e1e9 4px solid; MARGIN: 9px 0 0 0;
}
#topnav LI.l {
 width: 89px;
}
#topnav LI {
 DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; 
WIDTH: 88px; HEIGHT: auto;
}
#topnav A {
 BORDER-RIGHT: #d8e1e9 1px solid; DISPLAY: block; BACKGROUND: no-repeat 
left top; FONT: 11px/20px tahoma, arial; WIDTH: 100%; COLOR: #fff; 
TEXT-ALIGN: center;
}
#topnav A:hover {
 BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none;
}
#topnav A.selected {
 BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none;
}
#width {
 MARGIN-LEFT: auto; WIDTH: 882px; MARGIN-RIGHT: auto; TEXT-ALIGN: left;
}





  Home 
  About 
  Shops 
  Entertainment 
  Malls 
  Environment 
  Local 
  Information
  Contact Us 
  Login


-- 
Thanks,

Jim

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation

[trevor bayliss]

Hello everyone I am new!
   I am having problems with the last tab on a navigation bar. For some reason 
I can´t make it fit with the light blue line above it and I am stuck as to how 
to do it. Also the navigation bar doesn´t show up in Netscape 4.78 (no Flash) 
with Windows 2000 Professional and the thing just goes crazy with Explorer 4.0 
(no Flash) Windows 98. I imagine that the problem is that they are too old so I 
won´t worry that much about them. What can I do to make the navigation line up? 
Thanks 
 
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>



UL {
 LIST-STYLE-TYPE: none
}
LI {
 LIST-STYLE-TYPE: none
}
A {
 COLOR: #7f99ae; TEXT-DECORATION: none
}
#topnav {
 BORDER-TOP: #d8e1e9 4px solid; MARGIN: 9px 0px 0px
}
#topnav LI.l {
 WIDTH: 20px
}
#topnav LI {
 DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH: 
85px; HEIGHT: auto
}
#topnav LI SPAN.last-tab {
 DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH: 
80px; HEIGHT: auto
 }
#topnav A {
 BORDER-RIGHT: #d8e1e9 1px solid; DISPLAY: block; BACKGROUND: no-repeat left 
top; FONT: 11px/20px tahoma, arial; WIDTH: 85px; COLOR: #fff; TEXT-ALIGN: center
}
#topnav A:hover {
 BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none
}
#topnav A.selected {
 BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none
}
#width {
 MARGIN-LEFT: auto; WIDTH: 882px; MARGIN-RIGHT: auto; TEXT-ALIGN: left
}





  Home 
  About 
  Shops 
  Entertainment 
  Malls 
  Environment 
  Local 
  Information
  Contact Us 
  Login



   
You
 snooze, you lose. Get messages ASAP with AutoCheck
in the all-new Yahoo! Mail Beta.
http://advision.webevents.yahoo.com/mailbeta/newmail_html.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation not sitting in the div - advice please

[Mauricio Samy Silva]

Hi Phil,
You put the "keyline" on the *div#davinci_nav* which comes in the markup 
before the horizontal navigation, and set 30px high
for that DIV, and it's just what is appearing when the code is renderized, 
e.g. two lines 30px spaced just over the navigation.
You can achieve the effect you are intending in doing the following:

Assign a class for the paragraph [1] that encloses the navigation.
Say:


http://www.maujor.com/

> Hi everyone
> I know this is a simple solution but its evading me
>
> http://www.philturner-uk.com/kruger/davinci.html
>
> I've put an extra div in the main content area and wanted a keyline
> top and bottom
> to look like this
> 
>Smart Range   Roll Towels   Luxury Range   Standard Range
> Economy Range
> 
>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation not sitting in the div - advice please

[~davidLaakso]

Phil Turner wrote:
> Hi everyone
> I know this is a simple solution but its evading me
>
> http://www.philturner-uk.com/kruger/davinci.html
>
>   
Think of it as a list of stuff that is set horizontally rather than 
vertically:
CSS
#stuffcontainer ul { border-top: 1px solid red; border-bottom: 1px solid 
red; text-align: center; padding: 5px 0;margin: 0; width: 100%/* or px  
width of column*/; }
#stuffcontainer ul li { display: inline; padding: 0 5px; }
#stuffcontainer ul li a { padding: 5px 10px;text-decoration: none; }
Markup


Item one
Item two
Item three
Item four
Item five




-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] navigation not sitting in the div - advice please

[Phil Turner]

Hi everyone
I know this is a simple solution but its evading me

http://www.philturner-uk.com/kruger/davinci.html

I've put an extra div in the main content area and wanted a keyline  
top and bottom
to look like this

Smart Range   Roll Towels   Luxury Range   Standard Range
Economy Range


can someone tell me why its not happening and show me whats gone  
wrong please

Regards






Phil Turner
FREELANCE DESIGNER
TEL: 0161 439 1669
Chartered Graphic Designer MCSD  BA Hons
[EMAIL PROTECTED]
http://www.philturner-uk.com
V I S I T  M Y  D E S I G N  B L O G
http://www.philturnerdesigner.blogspot.com/

NEW BOOK - YOUR PLANET NEEDS YOU
http://www.yourplanetneedsyou.org


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation being hidden in IE

[Phil Turner]

Thanks for the help Gunlaug
The float is still not clearing shouldnt the navigation div push the  
image divs down?

although the footer clears now :-)  Thanks

>> http://www.philturner-uk.com/kruger/





Phil Turner
FREELANCE DESIGNER
TEL: 0161 439 1669
Chartered Graphic Designer MCSD  BA Hons
[EMAIL PROTECTED]
http://www.philturner-uk.com
V I S I T  M Y  D E S I G N  B L O G
http://www.philturnerdesigner.blogspot.com/

NEW BOOK - YOUR PLANET NEEDS YOU
http://www.yourplanetneedsyou.org


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation being hidden in IE

[Gunlaug Sørtun]

Phil Turner wrote:
> The image boxes should be below the navigation in IE they are lying 
> over the top

An old IE 'float won't clear float' bug.
Add...

* html #leftimageboxone{
float: none;
}

...after existing #leftimageboxone declarations.

To cure header-problems in IE6, add...

#header img {
display: block;
}
#topimaged {
margin-right: -3px;
}

> ALSO need some help to push the footer below everything I've read a 
> few tutorials on this but no success

Delete the height on rightcolumn, or change it to...

#rightcolumn {
height: auto;
}

...as good browsers won't let a container grow beyond declared height.

> http://www.philturner-uk.com/kruger/

Maybe a good idea *not* to use pixels for font-size and line-height, and
*not* fix size on all containers..?

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation being hidden in IE

[Phil Turner]

Hi Everyone
Site validates ok but having a positioning problem in IE

The image boxes should be below the navigation in IE they are lying  
over the top

ALSO need some help to push the footer below everything I've read a  
few tutorials on this but no success
I've found putting spacers or returns in the main content pushes it  
down but this doesnt seem the right solution
if I move the div outside the wrapper that fails also can someone  
give me a few pointers thanks

SITE IS HEREhttp://www.philturner-uk.com/kruger/






Phil Turner
FREELANCE DESIGNER
TEL: 0161 439 1669
Chartered Graphic Designer MCSD  BA Hons
[EMAIL PROTECTED]
http://www.philturner-uk.com
V I S I T  M Y  D E S I G N  B L O G
http://www.philturnerdesigner.blogspot.com/

NEW BOOK - YOUR PLANET NEEDS YOU
http://www.yourplanetneedsyou.org


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation problems help please

[Éric Vesque]

Phil Turner a écrit :
> Hi, please can someone advise me, I've styled my navigation list but  
> for some reason that I can't see
> its not working in the hover state and the underline wont go
> I'm currently looking at it in Firefox
> 
> Nav list is here
> 
> http://www.philturner-uk.com/kruger/
> 
> 
> 
> 
> Kind Regards
> 
> Phil Turner
Hi,

may I suggest you try validating your markup:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.philturner-uk.com%2Fkruger%2F
Some missing  may be the reason why your navigation isn't working 
as expected.

best regards.

-- 
Éric Vesque
imprimerie Print, Limoges
http://www.affaire-imprimerie.com


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation problems help please

[jeffrey morin]

remove the space after a: i am seeing a: hover. change to a:hover, a:link,
a:visited

Jeff

On 3/12/07, Phil Turner <[EMAIL PROTECTED]> wrote:
>
> Hi, please can someone advise me, I've styled my navigation list but
> for some reason that I can't see
> its not working in the hover state and the underline wont go
> I'm currently looking at it in Firefox
>
> Nav list is here
>
> http://www.philturner-uk.com/kruger/
>
>
>
>
> Kind Regards
>
> Phil Turner
> FREELANCE CREATIVE
> TEL: 0161 439 1669
> Chartered Graphic Designer MCSD  BA Hons
> [EMAIL PROTECTED]
> http://www.philturner-uk.com
> YOUR PLANET NEEDS YOU - NEW BOOK
> http://www.pyourplanetneedsyou.org
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] navigation problems help please

[Phil Turner]

Hi, please can someone advise me, I've styled my navigation list but  
for some reason that I can't see
its not working in the hover state and the underline wont go
I'm currently looking at it in Firefox

Nav list is here

http://www.philturner-uk.com/kruger/




Kind Regards

Phil Turner
FREELANCE CREATIVE
TEL: 0161 439 1669
Chartered Graphic Designer MCSD  BA Hons
[EMAIL PROTECTED]
http://www.philturner-uk.com
YOUR PLANET NEEDS YOU - NEW BOOK
http://www.pyourplanetneedsyou.org

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation list problem in ie mac

[Philippe Wittenbergh]

On Mar 1, 2007, at 11:09 PM, ochieng' nelson wrote:

> I'm using unordered lists for my navigation. It is okay in most  
> browsers
> except mac internet explorer where the list items refuse to float and
> display as block level elements. Any help?
Did you specify a width on the floated blocks ?


Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] navigation list problem in ie mac

[ochieng' nelson]

I'm using unordered lists for my navigation. It is okay in most browsers
except mac internet explorer where the list items refuse to float and
display as block level elements. Any help?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation height expanding!

[jeffrey morin]

It's because you're positioning "in thin air". That #mainNav isn't

> positioned relative to any element in the page, so browsers either
> position it relative to body - which vary with browser-window, or drop
> it where it suits them.
>
> 1: add...
> #wrapper {
> position: relative;
> }
> ...to create a relation.
>
> 2: correct to...
> #mainNav {
> top: 147px;
> right: 0;
> }
> ...to position it correctly in relation to #wrapper.
>
> Result: no more guesswork for those poor browsers, so they'll all get it
> right :-)
>
> regards
> Georg
> --
> http://www.gunlaug.no
>


i always have had trouble with absolute positioning. that worked perfectly!
thanks a lot.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation height expanding!

[Gunlaug Sørtun]

jeffrey morin wrote:
> sorry to keep at this but does anyone know why the absolute positioning
> looks fine on ff on my mac but gets shifed about 75px on a pc?
> 
> www.goutcleanse.com

It's because you're positioning "in thin air". That #mainNav isn't 
positioned relative to any element in the page, so browsers either 
position it relative to body - which vary with browser-window, or drop 
it where it suits them.

1: add...
#wrapper {
position: relative;
}
...to create a relation.

2: correct to...
#mainNav {
top: 147px;
right: 0;
}
...to position it correctly in relation to #wrapper.

Result: no more guesswork for those poor browsers, so they'll all get it 
right :-)

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation height expanding!

[jeffrey morin]

sorry to keep at this but does anyone know why the absolute positioning
looks fine on ff on my mac but gets shifed about 75px on a pc?

www.goutcleanse.com

-- 
Jeffrey Morin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation height expanding!

[jeffrey morin]

On 2/21/07, Tim White <[EMAIL PROTECTED]> wrote:
>
> Jeff said:
> >
> >#mainNav a {
> >float: left;
> >}
> >
> >that did it thanks so much!
> >
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation height expanding!

[Tim White]

Jeff said:
>
>#mainNav a {
>float: left;
>}
>
>
>my problem is that ie6 (i'm starting with this ie) is expanding the
>links so
>that they are not floating right next to eachother. they float left
>but it
>looks like steps going down tus expanding the height of the box.
 

Try changing 
#mainNav a 

to

 #mainNav li.

In a quick test that seemed to do the trick. 


~ Tim

tjameswhite.com'>http://www.tjameswhite.com";>tjameswhite.com





 

Never Miss an Email
Stay connected with Yahoo! Mail on your mobile.  Get started!
http://mobile.yahoo.com/services?promote=mail
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] navigation height expanding!

[jeffrey morin]

i have a main nav at the top of my page set up like so








(i didn't want to use images for these but our designer insisted on using
this font )

the css looks like this

#mainNav {
position: absolute;
right: 236px;
top: 148px;
background: #006f3a;
height: 22px;
padding: 0;
margin: 0;
}



#mainNav a {
float: left;
}


my problem is that ie6 (i'm starting with this ie) is expanding the links so
that they are not floating right next to eachother. they float left but it
looks like steps going down tus expanding the height of the box. i've tried
adding line height and i've tried display: block as well as inline. if
anyone knows what's going on here please let me know. thanks!


www.goutcleanse.com

-- 
Jeffrey Morin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation not showing in IE 6 and other problems - added

[David Roberts]

Hi all,

The URL is: http://www.campbeltowngrammar.org.uk/cgs/index.php/ 
campbeltowngrammar/index/


I forgot to add also that the 3 pictures on the home page, in IE,   
the last one goes below the other two for some reason.


I have just started building this site and would like to get the  
navigation working correctly before I go any further.

There are a number of problems mostly with the navigation in IE6 -  
which is the only version I have looked at.

1 There are 3 different navigation sections in the header and in IE  
the two main ones are not showing up at all and the top links are  
'dropping down' from there correct position. Works in Firefox.

I have used  'float' and 'clear:both' in the CSS,  but it has not  
helped.

2 In Safari the second nav bar is over to the left not the right were  
it should be.

3 I cannot get the second and third nav bar to align on the right had  
side so that 'Parents Resources' and 'School Board' are aligned.

4 In col 2 'Pupil Notice' and 'New Images' are not aligning in  
Firefox but are OK in safari.

Thanks .

David

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation not showing in IE 6 and other problems

[David Roberts]

Hi all,

The URL is: http://www.campbeltowngrammar.org.uk/cgs/index.php/ 
campbeltowngrammar/index/

I have just started building this site and would like to get the  
navigation working correctly before I go any further.

There are a number of problems mostly with the navigation in IE6 -  
which is the only version I have looked at.

1 There are 3 different navigation sections in the header and in IE  
the two main ones are not showing up at all and the top links are  
'dropping down' from there correct position. Works in Firefox.

I have used  'float' and 'clear:both' in the CSS,  but it has not  
helped.

2 In Safari the second nav bar is over to the left not the right were  
it should be.

3 I cannot get the second and third nav bar to align on the right had  
side so that 'Parents Resources' and 'School Board' are aligned.

4 In col 2 'Pupil Notice' and 'New Images' are not aligning in  
Firefox but are OK in safari.

Thanks .

David 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] navigation jumps some pixel down in IE6 when hovering over it

[Beate De Nijs]

Dear list,

I have another problem, sample page is here:
(the last time the email broke the URL in two lines, which resulted  
in an 'object not found', in case it happens again, please delete the  
%20 from the URL)



stylesheets:
http://www.fabian-helmich.de/css/fabian_base.css
http://www.fabian-helmich.de/css/fabian_p1.css
In Internet Explorer 6 when you hover over the top navigation bar the  
two other lines below jump some pixels down ...
this should not happen! how can I prevent this, what in my settings  
do I have to change?


bye,
beate

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation button spacing

[Gunlaug Sørtun]

Suzanne Bernard wrote:
> The navigation buttons on my website (http://www.nycss.org) are 
> styled on http://www.nycss.org/stylesmain.css, under the class 
> "navbuttons." So they should look the same on every page, right?  But
>  in IE6 on http://www.nycss.org/join.html, they're spaced further 
> apart than on the other pages (example: 
> http://www.nycss.org/index.html). Why?

Some of your pages are triggering standard mode, while some leave the
browsers in quirks mode (the old rendering modes from before any
standards existed). Plenty of differences between those rendering modes,
and there are a number of quirks modes.

Solution: put an identical *and* complete doctype declaration in your
pages. That is: trigger standard mode across browser-land.
That will even out most variations. I'll recommend HTML 4.01 Strict.

Ref:



Also, try to write the source-code in accordance with the chosen
standard, as results like these...


...makes the whole thing a gamble in error-recovery across browser-land.

> Also, in Firefox 2.0, they're spaced further apart on all the pages 
> than in IE. How do I get them closer together in Firefox?

You're relying on font-size/line-height and fix-sized backgrounds, which
is not a reliable solution when it comes to consistent spacing and look.

Be that as it may; you'll get better results once the doctype-issue is
fixed.

> And finally, one more Firefox issue: on 
> http://www.nycss.org/links.html, I want the list items in the table 
> (id="linkstable") to line up with the heading rather than being 
> indented. I've managed to make these lists look the way I want in IE,
>  but not in Firefox.

Firefox has default paddings on lists while IE use margins, so you
should add...
#linkstable ul {padding: 0;}
...to get the result you want.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation button spacing

[Suzanne Bernard]

The navigation buttons on my website (http://www.nycss.org) are styled on 
http://www.nycss.org/stylesmain.css, under the class "navbuttons." So they 
should look the same on every page, right?  But in IE6 on 
http://www.nycss.org/join.html, they're spaced further apart than on the other 
pages (example: http://www.nycss.org/index.html). Why? Also, in Firefox 2.0, 
they're spaced further apart on all the pages than in IE. How do I get them 
closer together in Firefox?  And finally, one more Firefox issue: on 
http://www.nycss.org/links.html, I want the list items in the table 
(id="linkstable") to line up with the heading rather than being indented. I've 
managed to make these lists look the way I want in IE, but not in Firefox. Any 
thoughts welcome.

Suzanne Bernard
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css-d Navigation menu inconsistencies between IE & everything else

[Roger Roelofs]

Jan,

On Oct 23, 2006, at 7:27 AM, <[EMAIL PROTECTED]>  
<[EMAIL PROTECTED]> wrote:

> I'm having a problem with the bottom nav bar on some of my pages -
> the correct version is here: http://www.hillerypriest.co.nz/test/ 
> pr01.html
> and the incorrect version is here: http://www.hillerypriest.co.nz/ 
> test/commercial.html
> The css is http://www.hillerypriest.co.nz/test/css/all.css
>
> For some reason, it's working fine in FF, Safari, Camino etc, but  
> in IE 6 &IE 7 the nav bar appears to be out by 20px or so on some  
> of the pages.

Welcome to the list.  I'm behind on answering mail as usual, but I  
didn't see any other replies to your post.  You may have fixed the  
page already as it only looked about 5px off from firefox to me.  You  
are already hacking for ie anyway, so why not

* html #navigation li ul { bottom: 12px; }

hth

-- 
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] css-d Navigation menu inconsistencies between IE & everything else

[janmcintyre]

Hi list,

I'm having a problem with the bottom nav bar on some of my pages -
the correct version is here: http://www.hillerypriest.co.nz/test/pr01.html
and the incorrect version is here: 
http://www.hillerypriest.co.nz/test/commercial.html
The css is http://www.hillerypriest.co.nz/test/css/all.css

For some reason, it's working fine in FF, Safari, Camino etc, but in IE 6 &IE 7 
the nav bar appears to be out by 20px or so on some of the pages.

Any suggestions would be much appreciated,
Thanks,

Jan
(first time poster)

-
Find the home of your dreams with eircom net property
Sign up for email alerts now http://www.eircom.net/propertyalerts


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation check, please!

[~davidLaakso]

[EMAIL PROTECTED] wrote:
> I've just put together a navigation menu based on the suckerfish dropdown. 
> http://dev.kaizenhealingarts.com/template.htm
>   
[...]
> So I think I've got a solution that produces the same effect that would be 
> achieved with background images, but without the annoying IE6 flicker.
> [...]
> Please let me know if you find any issues with the navigation, or if you can 
> suggest any improvements to the code.
>   
I am useless at fixing stuff, so just a couple of observations after a 
very quick look, Marcello.
re: xp
In ie/6.0 I think it may be difficult to hold the drop-downs long enough 
to click them at any other font-size setting than 'medium'
(I must admit, I did a double-take when the drop-down text enlarged, but 
primary menu text did not-- I forgot about the images).
The #fff  border-bottom breaks right at 'larger' and 'largest.'
You might view it 'accessibility mode' and see what you think.

It seemed fine to me in firefox/1.5.0.7 and opera/9.01. Take a look in 
both browsers with images disabled ( don't forget a background-color for 
the page when you get to the final version-- defaulting to fuchsia in 
opera, here).
> Many thanks!
> -- Marcello

Best,
~dL

-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation check, please!

[marcello09]

I've just put together a navigation menu based on the suckerfish dropdown. 
You can see the template for the navigation here:

http://dev.kaizenhealingarts.com/template.htm

There were only supposed to be 2 modifications to the suckerfish dropdown:

1) Subnavs fly out to the right, instead of dropping down below.
2) The addition of background images.

As many of you know, background images in the suckerfish dropdown "flicker" 
in IE6. I scoured the 'net (including the archives of this list) and didn't 
find a workable solution.

So instead of background images, I'm using foreground images. But I still 
wanted the text links in the subnav to lay on top of the images, so I put 
the text in a  tag below the image, then gave the  tag a 
negative margin-top to bring the text within the image, then gave the  
tag a z-index of 5 to make sure that it appeared in front of the image.

So I think I've got a solution that produces the same effect that would be 
achieved with background images, but without the annoying IE6 flicker.

I've tested the current version on IE6, IE7, FF1.5, Opera 8.5 and Opera 9 
for Windows. I tested an earlier version on Safari and Firefox for the Mac. 
There's an odd glitch in Opera 9 for Windows that causes the subnav to break 
up. If anyone else sees this and can offer any solutions, I'd greatly 
appreciate it!

Outside of the Opera 9 glitch, I believe that the navigation should be 
working properly in the vast majority of browsers currently in use, except 
perhaps IE5, which I have not tested on.

Please let me know if you find any issues with the navigation, or if you can 
suggest any improvements to the code.

Many thanks!

-- Marcello



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation woes

[Tim Kadlec]

Vicki,

Not sure about your problem with Opera.

However, for IE, the problem is the padding below:

#nav li{ /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width : 188px;
/*width : 11em;*/
padding: 5px 0 0 3px;
}

Change it to:

#nav li{ /* all list items */
position : relative;
float : left;
line-height : 1.25em;
width : 188px;
/*width : 11em;*/
margin: 5px 0 -1px 3px;
}

The links will then work fine. You may find you need to add a little padding 
on the right to #nav though.

Tim Kadlec

Message: 4
Date: Sun, 20 Aug 2006 08:43:42 +1000
From: Vicki Stebbins <[EMAIL PROTECTED]>
Subject: [css-d] Navigation woes
To: css-d@lists.css-discuss.org
Message-ID: <[EMAIL PROTECTED]>
Content-Type: text/plain; charset="us-ascii"; format=flowed

Hi all,

I've just begun a redesign of a site (a love job) and am having trouble
with my navigation div.

In IE the popout menu appears but you can only select the top menu item, in
other words if it shows:
* cats
* dogs
only cats can be selected and the menu disappears for dogs.

In Opera the width of the div grows to house the popout menu within the div
instead of popping out outside of the div.

Works fine in FF and validates well for the CSS and xhtml.

I'm trying to keep this site easy and clean and easy to update... the
previous site has ended up cluttered and difficult to maintain other the
cats and dogs.

The page is at http://www.animalrights.org.au/new/
CSS at http://www.animalrights.org.au/new/styles/arrg.css

I've used the menu before and didn't have this problem but this time I was
wanting the main nav to show as the boxes.

Hoping someone can help.

Many thanks

Vicki

"I'd put my money on the Sun and solar energy. What a source of power!
I hope we don't have to wait until oil and coal run out before we tackle 
that."
-Thomas Edison

_
On the road to retirement? Check out MSN Life Events for advice on how to 
get there! http://lifeevents.msn.com/category.aspx?cid=Retirement

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/