Re: [css-d] navigation list with bullet and background color change.
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/
[css-d] navigation list with bullet and background color change.
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 list with bullet and background color change.
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/
Re: [css-d] navigation list with bullet and background color change.
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.
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?
!doctype html
html lang=en-us
head
meta charset=utf-8
titlemem/title
meta name=viewport content=width=device-width
style
html,body{margin:0;padding:0;}
nav ul{margin:0;padding:0}
nav ul li{list-style:none;}
nav ul li a {background: lime
url(http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif;)
no-repeat right center;border-top:1px solid #000;border-bottom:1px solid
#000;color:#000; font-size: 100%;display:block;margin:0 0 1px
0;padding:.5em 0;text-decoration:none}
nav ul li a:hover,nav ul li a:focus,nav ul li a:active{background: red
url(http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif;)
no-repeat right center;color:#fff}
/style
!--[if lt IE 9]
script src=//html5shim.googlecode.com/svn/trunk/html5.js/script
![endif]--
/head
body
navul
lia href=#Page One/a/li
lia href=#Page Two/a/li
lia href=#Page Three/a/li
lia href=#Page Four/a/li
/ul/nav
/body/html
Best,
Una Barth
Los Angeles
--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.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
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 e...@copywritecolombia.com 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
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 Goodsone...@copywritecolombia.com 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
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/
[css-d] navigation arrows
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 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 arrows
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/
Re: [css-d] navigation link a different colour when page is active
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
--- On Tue, 8/3/10, Duncan Hill dun...@gmail.com 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
On Tue, 03 Aug 2010 11:29:15 +0100, Bobby Jack bobbykj...@yahoo.co.uk 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
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
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 shortiedesi...@gmail.com wrote: Sorry - my original email was unclear - Im 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 theA 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 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. http://chelseacreekstudio.com/ca/cssd/8.html 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
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 theA 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
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: body id=markets lia id=nav-markets href=markets.htmlmarkets/a/li lia id=nav-products href=products.htmlproducts/a/li 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
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
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 theA 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, http://cfajohnson.com 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
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
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
On Mon, 02 Aug 2010 19:42:34 +0100, MB digital.disc...@gmail.com 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: body id=markets lia id=nav-markets href=markets.htmlmarkets/a/li lia id=nav-products href=products.htmlproducts/a/li 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/
[css-d] Navigation positioning awry?
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 positioning awry?
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/
Re: [css-d] Navigation positioning awry?
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 http://chelseacreekstudio.com/ca/cssd/laurie.htm css http://chelseacreekstudio.com/ca/cssd/laurie_files/primary_.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?
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/
[css-d] Navigation
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
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/
Re: [css-d] Navigation
On Thu, Jan 28, 2010 at 4:12 PM, e...@copywritecolombia.com 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
-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
On Thu, Jan 28, 2010 at 4:23 PM, Troy Harshman tmha...@gmail.com wrote: On Thu, Jan 28, 2010 at 4:12 PM, e...@copywritecolombia.com 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... div id=myContent /div ...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
You've got this floating around above your navigation... div id=myContent /div ...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
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 div id=navigation style=float:left to div id=navigation style=float: right, 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
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 div id=navigation style=float:left to div id=navigation style=float: right, 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/
[css-d] Navigation: Unordered list or simply float links
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 a=href ... links in a div, right aligning 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. Sincerely, Brian Curran __ 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
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 a=href ... links in a div, right aligning 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 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 a=href ... links in a div, right aligning 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
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 list problem in Safari 3.0
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 list problem in Safari 3.0
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: 'img src=down.gif border=0 /' 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/
Re: [css-d] Navigation list problem in Safari 3.0
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 li...@snadden.com wrote: From: Tim Snadden li...@snadden.com 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: 'img src=down.gif border=0 /' 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
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/
[css-d] Navigation Sidebar Problem:
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 Sidebar Problem:
On Sun, Dec 21, 2008 at 7:07 PM, Tony Frasketi webmas...@spacecovers.comwrote: 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/
Re: [css-d] Navigation Sidebar Problem:
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 bar
[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/
Re: [css-d] Navigation bar
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. http://css-class.com/test/images/email-client.png 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. http://www.mozilla.com/en-US/thunderbird/ 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. frameset frame frame base /frameset noframes If you are reading this text, your browser is frames challenged. More up to date browsers are readily available. /noframes 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] https://addons.mozilla.org/en-US/firefox/addon/60 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
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. http://css-class.com/test/images/email-client.png 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. http://www.mozilla.com/en-US/thunderbird/ 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. frameset frame frame base /frameset noframes If you are reading this text, your browser is frames challenged. More up to date browsers are readily available. /noframes 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] https://addons.mozilla.org/en-US/firefox/addon/60 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
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. g 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
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. g 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. 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. frameset frame frame base /frameset noframes If you are reading this text, your browser is frames challenged. More up to date browsers are readily available. /noframes 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. grin __ 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
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;
}
body
div id=navbar
ul
li class=onelinea href=Home.htm target=tepmainHOME PAGE/a/li
li class=onelinea href=VarietyDays.htm target=tepmainTHOSE
VARIETY DAYS/a/li
li class=twolinesa href=Liberace.htm target=tepmainLIBERACEbr
/LIVE FROM LAS VEGAS/a/li
li class=twolinesa href=MandMs.htm target=tepmainMAGIC AND THEBR
/MUSICALS/a/li
li class=twolinesa href=SwingCrazy.htm target=tepmainERIC
DELANEYbr /SWING CRAZY/a/li
li class=onelinea href=Palladium.htm target=tepmainPALLADIUM
MEMORIES/a/li
li class=twolinesa href=Cricket.htm target=tepmainJIMMY
CRICKET'Sbr /MATINEE MADNESS/a/li
li class=onelinea href=ThreeEms.htm target=tepmainMUSIC MUSIC
MUSIC/a/li
li class=onelinea href=Pantomime.htm
target=tepmainPANTOMIME/a/li
li class=onelinea href=Abracadabra.htm
target=tepmainABRACADABRA!/a/li
li class=onelinea href=Profnutty.htm target=tepmainPROFESSOR
NUTTY/a/li
li class=onelinea href=Summershows.htm target=tepmainSUMMER
SHOWS/a/li
li class=twolinesa href=Christmas.htm target=tepmainTHE MAGICbr
/OF CHRISTMAS/a/li
li class=onelinea href=Dates.htm target=tepmainSHOW DATES/a/li
li class=onelinea href=About.htm target=tepmainABOUT US/a/li
li class=onelinea href=Contact.htm target=tepmainCONTACT
DETAILS/a/li
/ul
/div
/body
/html
__
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
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 all wonky in IE6
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 li elements. One tested fix is to use the daddy class on
the anchor elements themselves.
lia class=daddy href=...Místní turistika/a
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] http://therealcrisp.xs4all.nl/meuk/iecssbug.html
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 problems. Can you help?
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/
Re: [css-d] Navigation problems. Can you help?
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... http://www.gunlaug.no/tos/alien/kb/test_07_1127.html http://www.gunlaug.no/tos/alien/kb/test_07_1127b.html http://www.gunlaug.no/tos/alien/kb/test_07_1127c.html 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 Problem : IE
Hello List, I'm having a problem with my navigation on IE 7. It's pretty basic, stylized anchor tags in an ul, 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
Hi list,
I am facing problem in creating a page with a
navigation bar -
MARKUP:
div class=main_container
div class=nav_bar
psome content here/p
/div
/div
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
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
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd;
HTMLHEAD
META http-equiv=Content-Type content=text/html; charset=utf-8
STYLE type=text/css
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
}
/STYLE
/HEAD
BODY id=body
DIV id=width
UL class=clearfix id=topnav
LIA title= href=index.cfmHome /A/LI
LIA title= href=About/A /LI
LIA title= href=Shops/A /LI
LIA title= href=Entertainment/A /LI
LIA title= href=Malls/A /LI
LIA title= href=Environment/A /LI
LIA title= href=Local/A /LI
LIA title= href=Information/A/LI
LIA title= href=Contact Us/A /LI
LI class=lA href=Login/A/LI
/UL/div
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.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd;
HTMLHEAD
META http-equiv=Content-Type content=text/html; charset=utf-8
STYLE type=text/css
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;
}
/STYLE
/HEAD
BODY id=body
DIV id=width
UL class=clearfix id=topnav
LIA title= href=index.cfmHome /A/LI
LIA title= href=About/A /LI
LIA title= href=Shops/A /LI
LIA title= href=Entertainment/A /LI
LIA title= href=Malls/A /LI
LIA title= href=Environment/A /LI
LIA title= href=Local/A /LI
LIA title= href=Information/A/LI
LIA title= href=Contact Us/A /LI
LI class=lA href=Login/A/LI
/UL/div/body/html
--
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
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
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd;
HTMLHEAD
META http-equiv=Content-Type content=text/html; charset=utf-8
STYLE type=text/css
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
}
/STYLE
/HEAD
BODY id=body
DIV id=width
UL class=clearfix id=topnav
LIA title= href=index.cfmHome /A/LI
LIA title= href=About/A /LI
LIA title= href=Shops/A /LI
LIA title= href=Entertainment/A /LI
LIA title= href=Malls/A /LI
LIA title= href=Environment/A /LI
LIA title= href=Local/A /LI
LIA title= href=Information/A/LI
LIA title= href=Contact Us/A /LI
LI class=lA href=Login/A/LI
/UL/div
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
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
div id=stuffcontainer
ul id=stufflist
lia href=#Item one/a/li
lia href=#Item two/a/li
lia href=#Item three/a/li
lia href=#Item four/a/li
lia href=#Item five/a/li
/ul
/div
--
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/
Re: [css-d] navigation not sitting in the div - advice please
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:
p class=keylines
a title=Smart Range/a
p
And stylize that class with the keylines:
.keylines {
border: #5e287f solid;
border-width: 1px 0;
}
PS: Review the CSS rules for #davinci_nav:
1-) Get rid of the borders;
2-) There is no needs for two sets of CSS rules for that DIV. Use one set
with all rules;
3-) There is a typo: float:lefdivt; ??
[1] The properly HTML element for markup a set of links (menu) is de LI
element not a P element.
Regards,
Maurício Samy Silva
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/
[css-d] Navigation being hidden in IE
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 being hidden in IE
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/
Re: [css-d] Navigation being hidden in IE
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 problems help please
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/
Re: [css-d] navigation problems help please
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=1uri=http%3A%2F%2Fwww.philturner-uk.com%2Fkruger%2F Some missing /li 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/
[css-d] navigation list problem in ie mac
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 list problem in ie mac
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 ? http://l-c-n.com/IE5tests/float2misc/#flwidth Philippe --- Philippe Wittenbergh http://emps.l-c-n.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 height expanding!
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/
[css-d] navigation height expanding!
i have a main nav at the top of my page set up like so
ul id=mainNav
lia href=index.htmlimg src=images/nav-images/navigation_01.gif
alt=Home //a/lilia href=how_it_works.htmlimg
src=images/nav-images/navigation_02.gif alt=How it Works //a/li
lia href=physician_testimonials.htmlimg
src=images/nav-images/navigation_03.gif alt=Physician Testimonials
//a/li
lia href=about_bioneutrix.htmlimg
src=images/nav-images/navigation_04.gif alt=Bioneutrix Brand //a/li
lia href=order.htmlimg src=images/nav-images/navigation_05.gif
alt=Order Now //a/li
/ul
(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/
Re: [css-d] navigation height expanding!
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/
[css-d] Navigation not showing in IE 6 and other problems - added
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
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
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) http://www.fabian-helmich.de/seiten/portrait_1/ p1_1_sun_angelika_1.html 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
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:
http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Also, try to write the source-code in accordance with the chosen
standard, as results like these...
http://validator.w3.org/check?uri=http://www.nycss.org/
http://validator.w3.org/check?uri=http://www.nycss.org/join.html
...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
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
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
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/
[css-d] Navigation check, please!
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 span tag below the image, then gave the span tag a negative margin-top to bring the text within the image, then gave the span 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 check, please!
[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/
Re: [css-d] Navigation woes
Hi all, I looked at http://www.ryanbrill.com/floats.htm which was related to the subject: Is this possible at all... and noticed that the layout was exactly what I was trying to achieve, so I took Georg's advice and modified as required. I've ended up solving my navigation woes... this layout made it easier to track where the problem was as well. Many thanks Georg! Regards 8-)) Vicki __ 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 tabs
ed gooddy wrote: Hi all, I am trying to work out how to create navigation tabs using images for the curved sides and backgroundsbut I am getting comfused. I have made three examples: http://www.villa-corti.com/indexnav.html In the first example- navtabs div -I have an image rightside.jpg which I put on the A link and repeat which creates the background for the link text. I put left_side.gif as the background image for the UL for the lefthand curved sides. There is a problem with the tabs not being side by side. Is this a good way to do it? How do I make the tabs side by side? In the second example -navtabs1 div-I have an image rightside.gif which I put on the A link and don`t repeat which creates the right curved sides. I put left_side.gif as the background image for the lefthand curved sides. How do I put a background on the link? The third example -navtabs2 div- is the same as the second example but I put a background-color on the a link which covers the curved side. How do I put a background- I don´t know how to put another image on the a link? What is the solution? I know there are various ways to do curved backgrounds usgin css without images but at this stage I want to try and find the best way to do this with images and then I will check and see if they work with different browsers. Any comments greatly appreciated, Thanks! It sounds like Douglas Bowman's Sliding doors technique is what you need. Ne created curved corner tabs that adjust to the width of text in the tabs, and has been well tested in many browsers. http://alistapart.com/articles/slidingdoors/ -- Bob Easton Accessibility Matters: http://access-matters.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 woes
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 \(.)^(.)/ --0-- Keenstreet Communications http://www.keenstreet.com.au __ 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 tabs
Hi all, I am trying to work out how to create navigation tabs using images for the curved sides and backgroundsbut I am getting comfused. I have made three examples: http://www.villa-corti.com/indexnav.html In the first example- navtabs div -I have an image rightside.jpg which I put on the A link and repeat which creates the background for the link text. I put left_side.gif as the background image for the UL for the lefthand curved sides. There is a problem with the tabs not being side by side. Is this a good way to do it? How do I make the tabs side by side? In the second example -navtabs1 div-I have an image rightside.gif which I put on the A link and don`t repeat which creates the right curved sides. I put left_side.gif as the background image for the lefthand curved sides. How do I put a background on the link? The third example -navtabs2 div- is the same as the second example but I put a background-color on the a link which covers the curved side. How do I put a background- I don´t know how to put another image on the a link? What is the solution? I know there are various ways to do curved backgrounds usgin css without images but at this stage I want to try and find the best way to do this with images and then I will check and see if they work with different browsers. Any comments greatly appreciated, Thanks! - Yahoo! Messenger - with free PC-PC calling and photo sharing. __ 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 - Roll-Over Effect
Mathew, Change your #nav a:hover to #mainnav a:hover. That seems to fix it for me. Finally, an error I can help with :-). Regards, Rahul. __ 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 - Roll-Over Effect
At the end of the CSS file you have #nav a:hover instead of #mainnav a:hover - Bethany On 8/10/06, Matthew Stoneback [EMAIL PROTECTED] wrote: Need some guidance with something.. I developed a main navigation bar for a client's site using a demonstration from the book, Bulletproof Web Design. In doing this, I changed some of the CSS and XHTML to suit my design. After everything was all said and done, I can not get the roll-over effect to work (Hovering Swap). I believe have made a mistake in the last CSS rule as everything was looking good before then. Can anyone spot the problem? Here are the links to my test HTML and CSS documents. XHTML: http://www.eddysound.com/tams/test_pages/navtest.htm CSS: http://www.eddysound.com/tams/test_pages/navtest.css Thanks in advance for your help. Matthew Stoneback __ 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-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 - Roll-Over Effect
Ah yes I was up way too late last night and could not figure it out. I am a little red in the face, but thankful. Thanks, Matthew Stoneback __ 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 list items too far to the right in IE
Hello, all. I'm coding a site for a webcomic my brother's starting--he already gave me the design, and he just wants me to code it since he doesn't know HTML. I've been using table-based layouts in HTML for a few years now, but this is my first time using CSS for layout instead. My main problem right now is the sidebar: I've got three sections to it (per his design), and the second is a navigation menu marked up as an unordered list. This renders correctly in all of my test browsers except IE: IE 5 on Mac nudges all of the list items 33 pixels to the right, and IE 5-7 on XP nudges them 40 pixels to the right. I've posted the HTML and CSS for the sidebar at http://silenceisdefeat.org/~etg/sidebar, as well as screenshots from all of the browsers I have lying around. A less obnoxious though still puzzling problem is that in Mozilla 1.7 on XP, the bottom (Announcements) section's content and header have a line of space between them. I've got a few other layout-related problems with the rest of the page, but I think I can figure those out sooner or later (famous last words--I'll probably be back). Any ideas? Thanks, Justin Myers [EMAIL PROTECTED] __ 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 Background Image
Hi Guys I want to stretch the navigation background image on this site to fill 100% across. http://www.weddingcompanycornwall.co.uk/ http://www.weddingcompanycornwall.co.uk/wp-content/themes/ yourdayagain/style.css I mean the navigation that starts Our Designers. However, I am not sure how to do this. Any ideas please? Thanks -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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 Background Image
Richard Brown wrote:
I want to stretch the navigation background image on this site to
fill 100% across. http://www.weddingcompanycornwall.co.uk/
Adding...
#nav {background:url(buttons/bg.gif) repeat-x; float: left; width: 100%;}
...seems to work well. The background-image isn't tall enough to take
much font-resizing though.
regards
Georg
--
http://www.gunlaug.no
__
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
Hi Ingo On 24 Mar 2006, at 00:16, Ingo Chao wrote: Hope that helps. Is click to enlarge meant to sit next to the image? Thank you so much for that. It now works perfectly! The click to enlarge is meant to sit underneath and the image is meant to have padding: 5px but with the navigation issue I haven't really looked into it. Any ideas please? Thanks once again for all the help I have received. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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
Richard Brown wrote:
http://www.theoldcoachworks.org.uk/
http://www.theoldcoachworks.org.uk/wp-content/themes/WordpressRooms/
style.css
I have some recollection that this is a WinIE bug. i.e that it doesn't
display text under a box but alongside it whatever the quoted width.
Some problems with IE in this menu.
- Remove all rules related with .header, .box, .box-width,
and replace them with:
.header {
float: left; /* contains the floating boxes */
width: 100%; /* prevents shrink-wrapping */
background-color: #fff;
}
.box, .box-wide {
margin: 9px 9px 0 9px;
padding: 5px;
font-size: 85%;
font-weight: 600;
}
.box {
float: right;
width: 100px;
text-align: center;
background-color: #FBFBF1;
}
.box-wide {
float: left;
width: 185px;
text-align: left;
}
/* clickable link area */
.box a, .box-wide a {
display: block;
}
/* line-break after img, or keep the br */
.box a img, .box-wide a img {
display: block;
}
- Insert a Conditional Comment at the end of the head section
!--[if IE]
style
/* IE6 fixes */
.box, .box-wide {
display: inline; /* doubled float margin bug */
overflow: hidden; /* stops expanding of the box */
}
/* IE6-7 */
.box a, .box-wide a {
position: relative; /* allows for leaving the overflown box */
}
/style
![endif]--
/head
- Remove the br after the images (optional).
Hope that helps.
Is click to enlarge meant to sit next to the image?
Ingo
--
http://www.satzansatz.de/css.html
__
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
Dear All Many thanks to Don and Els! I have played with the ideas a bit further and have now ended up with this. I feel the site is beginning to take shape and provides an excellent building platform. I am a bit worried that the header nav still drops down. Could folks check this for me please? http://www.theoldcoachworks.org.uk/ http://www.theoldcoachworks.org.uk/wp-content/themes/coachworks/ style.css On 10 Mar 2006, at 14:23, Don - htmlfixit.com wrote: As you can see it is a bit of a mess! What I would like to do is to produce a small photo with a word underneath. The whole to be contained within a border and to be the link. Is it possible to do this please and if so how? Here is the right direction ... perhaps. I note that the menu drops down in ie6. I suspect it may be a width issue or something. I didnt' bother to look. Here is my quick play at it: http://bestfoot.com/temp/temp3.html Note that I added br tags to all of these little picture/word links. I added some embedded css to do what I am doing (changing the background color on hover and so forth. Hope that makes sense. So the answer is you can do it. Many thanks -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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
From: Richard Brown [EMAIL PROTECTED]
I am a bit worried
that the header nav still drops down. Could folks check this for me
please?
http://www.theoldcoachworks.org.uk/
http://www.theoldcoachworks.org.uk/wp-content/themes/coachworks/
style.css
The problem you're having in IE is that you've encountered the IE doubled
float-margin bug [1]. The usual fix is to give the element a non-sensical
{display: inline;}. Even if the .out divs weren't already (display:) block
elements, they take on that property by virtue of being floated and do not need
{display: block;} to be declared.
Therefore, you'll need to change your display property in the following
selector to overcome the margin bug. This fix is not likely to bother other
browsers, but certainly could be hidden from them if you so choose.
.out {
display: inline; /* change this */
background: #bbb;
border: 1px solid #ddd;
float: left;
margin: 1em;
}
I hope that helps,
~holly
[1] http://www.positioniseverything.net/explorer/doubled-margin.html
__
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 Woes
Hi Could anybody help me please or maybe send me in the right direction? I am trying to build a navigation for this site: http://www.theoldcoachworks.org.uk/ http://www.theoldcoachworks.org.uk/wp-content/themes/coachworks/ style.css As you can see it is a bit of a mess! What I would like to do is to produce a small photo with a word underneath. The whole to be contained within a border and to be the link. Is it possible to do this please and if so how? Many thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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
Richard Brown wrote:
Hi
Could anybody help me please or maybe send me in the right
direction?
I am trying to build a navigation for this site:
http://www.theoldcoachworks.org.uk/
http://www.theoldcoachworks.org.uk/wp-content/themes/coachworks/
style.css
As you can see it is a bit of a mess! What I would like to do
is to produce a small photo with a word underneath. The whole
to be contained within a border and to be the link. Is it
possible to do this please and if so how?
lia href=..img src=... alt=..brtext/a/li
li{
list-style:none;
width:60px;
text-align:center;
border:1px solid black;
margin-bottom:5px;
}
li a{
display:block;
text-decoration:none;
}
li a img{
border:0;
}
Obviously, when the width of the word becomes larger than the
width of the li, the word will stick out, or in the case of IE,
make the li wider.
--
Els
http://locusmeus.com/
http://locusoptimus.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/
Re: [css-d] Navigation Woes
As you can see it is a bit of a mess! What I would like to do is to produce a small photo with a word underneath. The whole to be contained within a border and to be the link. Is it possible to do this please and if so how? Here is the right direction ... perhaps. I note that the menu drops down in ie6. I suspect it may be a width issue or something. I didnt' bother to look. Here is my quick play at it: http://bestfoot.com/temp/temp3.html Note that I added br tags to all of these little picture/word links. I added some embedded css to do what I am doing (changing the background color on hover and so forth. Hope that makes sense. So the answer is you can do it. __ 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
Richard Brown wrote:
I am trying to build a navigation for this site:
http://www.theoldcoachworks.org.uk/
Following up on my earlier answer where your menu was dropping ... it is
a total width issue that triggers the problem in ie6.
You can easily fix the width issue:
#sidebar{
/*width: 200px;*/
width: 180px;
}
I also added a text align to that in my example to make it match in ff
and ie.
Seems to fix the dropping menu ... I updated my demo:
http://bestfoot.com/temp/temp3.html
There is still a text jump that needs to be fixed on hover over the links.
__
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/
