[css-d] navigation menu issues
Hello, I was asked by my boss to create a new layout for our site and thought I'd take the opportunity to create it in CSS. I've looked at a lot of web sites and read a bit too and for a novice have gotten it pretty far. I am having a bear of a time with the main horizontal navigation in getting it to look similar between Firefox 1.X, Safari 2 and IE5.2 (all for the Macintosh). And I have no idea what it looks like on Windows. Have I left out a line or two in the CSS to increase uniformity across platforms? My second issue is getting the three "columns" to line up in the same place so the background image is in the right location. It works in Firefox and Safari, but it appears to be off by a pixel or two in IE (again, all Macs). Any assistance would be greatly appreciated. The CSS is in the page, which is at http://www.inventionshow.com/development/layout.html Thanks. Saul Straussman __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] li:hover does not work in IE
Hello, I'm trying to use the :hover pseudo element for a list, and it works great in Firefox and Safari but not at all in IE (all Macintosh). Is there a trick to getting the :hover element to work in Explorer? http://inventionshow.com/development/layout.html Thanks, Saul Straussman __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] li:hover does not work in IE
Thank you to everyone for the assist. I'm working on a couple of the suggestions. Saul On Jun 22, 2005, at 1:19 PM, Justin Smith wrote: saul wrote: Hello, I'm trying to use the :hover pseudo element for a list, and it works great in Firefox and Safari but not at all in IE (all Macintosh). Is there a trick to getting the :hover element to work in Explorer? If you're not concerned with having 100% valid css, you can use the proprietary IE 'behavior' property to emulate the :hover pseudoclass. There's a good tutorial on how to do just that here: http://www.vladdy.net/Demos/IEPseudoClassesFix.html -- Justin. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Window IE flow problem
Hello, I've managed to get my page to work on Safari, FF, and IE5.X (with the exception of the ':hover' pseudo class in IE - I know it doesn't support it.) - all for Mac. It also appears to work in FF for windows. However, the center content area is not flowing properly in IE Windows (at least from the screen shots some friends have sent me). It appears to bump down to below the left column content. Can an IE Windows CSS guru/guress tell me what's happening. I'm on a Mac. CSS is in the document. http://www.inventionshow.com/development/layout.html Thanks, Saul Straussman __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Window IE flow problem
Hi Holly,
Thank you for taking the time. I've implemented those suggestions and
am waiting on a couple of friends with XP machines to tell me if IE
gets it right.
cheers,
Saul
On Jun 24, 2005, at 6:25 PM, Holly Bergevin wrote:
From: saul <[EMAIL PROTECTED]>
Date: Thu, 23 Jun 2005 09:53:44 -0400
the center content area is not flowing properly in IE Windows
(at least from the screen shots some friends have sent me). It appears
to bump down to below the left column content.
http://www.inventionshow.com/development/layout.html
Hi Saul,
A couple of changes and this will probably work for IE (except the
li:hover).
First, you have a selector that I'm pretty sure is written incorrectly
for what you want. -
#sidebarL #img {
margin-left: -5px;
margin-right: -5px;
}
I couldn't find any elements with an ID of img (#img) in your
#sidebarL element, so I'm thinking what you really wanted was -
#sidebarL img {...}
With that change, you also will need to get rid of the margin-left
property -
#sidebarL img {margin-right: -5px;}
Then you'll need a new selector to solve IE's problem with dropping
the content -
#content div img {margin: 0 -3px;}
Finally, at least finally with the browsers I looked at, my (old)
Opera doesn't like the construction of the very first elements in
#sidebarL. If you'll put a break element *after* the non-breaking
space you have between the two images, the appearance in Opera will
improve significantly.
< a href="#" >< img [snip]/ >< /a >&nb sp;< br / >< img {snip]/ >
[and the rest of the code - extra spaces are added on purpose so that
MY email program doesn't attempt to render the HTML]
hth,
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS navigation needs some assistance
Hello, I'm trying to create a CSS-driven top navigation to function and have two issues. The first is that the drop-down menu drops behind the main content. I've added a z-index, but it doesn't want to work. The other issue is there appears (at least on Mac browsers) to be an extra ghost line to the right of the navigation element. I cannot fathom what I did to create that. Though I hope some can. The page can be found here: http://www.inventionshow.com/development/newProductScout/ newProductScoutPage.html Thanks in advance for any help. Saul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari/Mac Testing?
Jon, There shouldn't be too many people out there using OS9 only. However, if they are, they have IE5.0 available, as well as Netscape, though which version escapes me (I haven't used OS9 in a couple of years -but it could be version 5). Also there is a difference between Safari 1 and Safari 2. However, Safari is only available in OSX. HTH Saul On Jul 7, 2005, at 10:08 PM, Jon Trelfa wrote: I'm Mac-ignorant I know that I can use Konqueror in Linux to test what websites will look like in Safari...but it's my understanding that it only covers more recent versions of Safari? Do I assume that *most* Mac users have OSX? Is there a percentage still using OS9? If so, what do I use to test pages for them? Do I test different versions of Safari as I would different versions of IE and Netscape? What versions would be the most prevalent? Like I said...I'm Mac ignorant I know this is a CSS group, but testing for cross-browser compatibility is paramount, so I figured this is the right list to ask. Thanks, Jon __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] two CSS nav issues...
Hi, I have a navigation that appears to be working properly (at least in FF 1.04 - Macintosh) with the exception of two issues, and I'm assuming they are related to 'width' somehow. The first is there is a small beige horizontal 'bar' on the right of the elements when in the li:hover state only. I cannot figure out how to make it not appear. The second is the black border on the top between the graphic and the navigation has a gap after the final nav element, before it starts up again. link is http://www.inventionshow.com/development/newProductScout/ newProductScoutPage.html Thanks, Saul Straussman __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] more navigation problems...
Hello, I had a chance to look at the navigation I created on a windows computer and watched as none of the drop-down menus worked. The menus are in CSS and work using FF 1.04 and Safari 1.2 (macintosh). Any assistance would be appreciated. http://www.inventionshow.com/development/newProductScout/ newProductScoutPage.html Thank you. Saul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE issues
Hello List, I'm having terrific issues with IE Mac and Windows. For example, on the left hand subnavigation (listing articles 1, etc.) the little graphic in the third item repeats three times (once for each line). Also, is there a good way to make IE accept a minimum width so the layout doesn't break. This appears to be particularly acute in IE/Mac. The page validates both for CSS (except for the behavior property in body) and as XHTML 1.0 Transitional. It is pretty close to working properly in FF and semi in Safari 1.2 http://www.inventionshow.com/development/newProductScout/ newProductScoutPage.html Any assistance would be appreciated. Saul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE issues
Knew about the lack of support for Mac IE. Didn't know it's not in Tiger. I'm more concerned with Win IE users experiences since they have such a huge market share (particularly in the US). Thanks, Saul On Jul 13, 2005, at 11:21 AM, Gerry Creighton wrote: Mac IE is no longer supported by MS ever since Apple introduced Safari so I wouldn't put much time into troubleshooting that browser. If you have Panther installed the default browser is Safari so I don't know if you are going to have too many users on IE Mac. Also Tiger doesn't come with IE. Just thought I'd let you know about that...if you didn't already know. Gerry On Jul 13, 2005, at 10:49 AM, saul wrote: Hello List, I'm having terrific issues with IE Mac and Windows. For example, on the left hand subnavigation (listing articles 1, etc.) the little graphic in the third item repeats three times (once for each line). Also, is there a good way to make IE accept a minimum width so the layout doesn't break. This appears to be particularly acute in IE/Mac. The page validates both for CSS (except for the behavior property in body) and as XHTML 1.0 Transitional. It is pretty close to working properly in FF and semi in Safari 1.2 http://www.inventionshow.com/development/newProductScout/ newProductScoutPage.html Any assistance would be appreciated. Saul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble with a LI navigation
you might want to make current a class instead of an id and get rid of
the 'id=active'. if you need the color swap, put it in the 'current'
style
#leftnav li.current {
list-style-image: url(test.gif);
color: #B57F35;}
I believe IE has issues with multiple id's.
hth
Saul
On Jul 13, 2005, at 11:46 AM, Tom Dell'Aringa wrote:
Hi,
I'm doing a simple navigation using LI elements. Only the currently
selected nav item should show
the bullet, and that is working fine. My problem is that the space
between the bullet and the LI
item is different in IE vs. Gecko. I know I am missing a setting
somewhere but search me if I can
find it (and I know it's right in front of me).
You can see the problem in this gif:
http://www.pixelmech.com/rev/space.gif
My code is as follows:
Home
Investor Information
Corporate Governance
Press Releases
(snipped)
and the CSS
#leftnav {
margin: 10px 20px 0 20px;
padding: 0px; }
#leftnav li {
font-family: arial, sans-serif;
font-size: 11px;
font-weight: bold;
list-style: none;
list-style-image: none;
padding: 0 0 8px 0;
margin: 0; }
#leftnav li#current {
list-style-image: url(test.gif); }
#leftnav a:link, #leftnav a:visited, #leftnav a:active {
color: #68695B; }
#leftnav a:hover {
color: #B57F35;
text-decoration: underline; }
#leftnav a#active {
color: #B57F35; }
Any help is appreciated, thanks.
Tom
http://www.pixelmech.com/
Melissa: Ace, Where are you?
Ace Ventura: I'm in Psychoville and Finkle's the Mayor.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] three-column layout question
Hello, I'm having a bear of a time getting the three columns to function correctly. I've looked at a number of suggested ways to achieve this, but cannot get it to work correctly. Any assistance would be appreciated. http://inventionshow.com/development/home.html Thanks, Saul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] three-column layout question
Yeah, that's what I'm trying to achieve. I've seen a number of sites that have done it and looked at their CSS (including those in the WIKI). They use inner- and outer Containers. I just can't seem to get them set up properly. Saul On Jul 14, 2005, at 5:07 PM, jason zietz wrote: Saul, It looks like it's working as it should. What are you having problems with? Keep in mind that the column heights won't match unless they have the same amount of content or you use some Javascript: http://www.paulbellows.com/getsmart/balance_columns/ jason saul wrote: Hello, I'm having a bear of a time getting the three columns to function correctly. I've looked at a number of suggested ways to achieve this, but cannot get it to work correctly. Any assistance would be appreciated. http://inventionshow.com/development/home.html Thanks, Saul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] three-column layout question
Thank you everyone for the links and the article. Yeah, the code is a bit confusing. I've sort of cobbled it together from articles and tutorials. Next step is simplification. Saul On Jul 14, 2005, at 7:32 PM, David Laakso wrote: saul wrote: Hello, I'm having a bear of a time getting the three columns to function correctly. I've looked at a number of suggested ways to achieve this, but cannot get it to work correctly. Any assistance would be appreciated. http://inventionshow.com/development/home.html Thanks, Saul Saul, Nothing wrong with the layout you are using, I just find it particularly complicated and somewhat confusing. In all likelihood someone on the list will come up with a fix. In the meantime, this may be of interest: <http://www.dlaakso.com/sandbox/3c-h-menu.html>. It's a demo done for someone else on another list-- based on this article: <http://www.alistapart.com/articles/negativemargins/>. I added the double h-nav bars for that demo-- might come in handy for you as you're trying to cram a lot into one bar now? The vertical col. widths can be whatever you like. Background images produce the fake same height cols. Read the article. Your welcome to my demo if it helps... Hang in there! Regards, David Laakso -- David Laakso http://www.dlaakso.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE help. Please
Hello List, I'm having a lousy time with IE 5.X getting the main content to flow properly in the layout. And in IE 6, when the width gets too small, the center content disappears altogether. I know it's probably a small item in the CSS that's causing it, but I cannot seem to get it right. http://www.inventionshow.com/development/newProductScout/ newProductScoutPageB.html Any help is always appreciated. Cheers, Saul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE help. Please
Sorry about that. The link is http://www.inventionshow.com/development/newProductScout/ newProductScoutPageB.html There was a space in the last posting. Saul On Jul 21, 2005, at 12:54 PM, David Laakso wrote: saul wrote: http://www.inventionshow.com/development/newProductScout/ newProductScoutPageB.html , Saul Saul, 403: error directory listing denied David Laakso -- David Laakso http://www.dlaakso.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE help. Please
Hello, I getting the page to work in IE, I have made it unwork in FF and Safari. Saul On Jul 21, 2005, at 1:17 PM, saul wrote: Sorry about that. The link is http://www.inventionshow.com/development/newProductScout/ newProductScoutPageB.html There was a space in the last posting. Saul On Jul 21, 2005, at 12:54 PM, David Laakso wrote: saul wrote: http://www.inventionshow.com/development/newProductScout/ newProductScoutPageB.html , Saul Saul, 403: error directory listing denied David Laakso -- David Laakso http://www.dlaakso.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] A little more IE help - 3-col layout
Hello, I'm still having a bit of a problem getting IE/Win to flow this 3-col page correctly. (It works fine in FF 1.X and Safari 1.2) It is based on the ALA negative margins article and augmented with some tweaks courtesy of David Laakso (with much appreciation). However, IE still does not want to flow properly (though it's better than it was). Problem One: IE is leaving a huge gap between the horizontal navigation and the center column. Problem Two: the left column is not visually extending to the bottom of its container div (using a background GIF). Problem Three: The text in the Right Column does not appear. Here are links to screen shots: <http://www.inventionshow.com/development/newProductScout/images/ screenshotTop.jpg> <http://www.inventionshow.com/development/newProductScout/images/ screenshotBottom.jpg> The link to the page is: <http://www.inventionshow.com/development/newProductScout/ newProductScoutPageD.html> Any thoughts would be appreciated. Cheers, Saul Straussman __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A little more IE help - 3-col layout
saul wrote: Hello, I'm still having a bit of a problem getting IE/Win to flow this 3-col page correctly. (It works fine in FF 1.X and Safari 1.2) It is based on the ALA negative margins article and augmented with some tweaks courtesy of David Laakso (with much appreciation). However, IE still does not want to flow properly (though it's better than it was). Saul Straussman Please see: <http://www.dlaakso.com/sandbox/saul-01.html>. You've taken *some* of what I provided and mixed it with what you had. Maintain the basic structure. Forget the bells, whistles, smoke, and mirrors(for the time being). Regards, David Laakso -- David Laakso http://www.dlaakso.com/ On Jul 22, 2005, at 11:50 AM, David Laakso wrote: Thank you David, again, for the assist. As per you suggestion, I actually rewrote the structure code from scratch using your template and the negative margins article at A List Apart. I'll continue stripping out code until it works in IE. Thanks to all who looked at this... Saul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] navigation list and other issues
Hello, I was asked by my boss to create a new layout for our site and thought I'd take the opportunity to create it in CSS. I've looked at a lot of web sites and red a bit too and for a novice have gotten it pretty far. First-off, I am having a bear of a time with the main horizontal navigation in getting it to look similar between Firefox 1.X, Safari 2 and IE5.2 (all for the Macintosh). And I have no idea what it looks like on Windows. Have I left out a line or two in the CSS to increase uniformity across platforms? My second issue is getting the three "columns" to line up at the top of the inner container div. It does so in IE5.2 but not Safari or Firefox. Any assistance would be greatly appreciated. The CSS is in the page, which is at http://www.inventionshow.com/development/layout.html Thanks. Saul Straussman __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
