16 replies [Last post]
chikoppi
Offline
Enthusiast
Last seen: 9 years 45 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

I had the idea to create styled pop-up descriptions using nested lists.

http://www.rightmindinc.com/lift/capabilities/index.html

When a list item is hovered by the mouse a pop-up window should appear:

example

However, I'm told it doesn't work in some versions of IE. While I can test the static display of IE I can't test the interactive elements, because I'm on a Mac.

Can anyone suggest why this CSS list behavior breaks in IE? (It works perfectly in Safari and FF.)

Lift!

Capabilities

Mouse over each entry for a brief description.

  • Brand Strategy
    • Brand Strategy:

      The foundational element for capturing serious market share from your competitors. Brand Strategy aligns you with the concepts most highly valued by your target market.

      Can you name the candy bar that “satisfies?” That’s Brand Strategy.

  • Corporate Logo & Identity System
    • Corporate Logo & Identity System:

      If the logo is your signature, then the identity system is what creates personality.

      A good identity system does a lot of heavy lifting. It creates clarity and cohesion across many communication mediums through color, composition, style, and language. It conveys meaning and value to the customer.

  • Corporate Web Site
  • Corporate Brochure
  • Product/Service Sales Material
  • Sales Presentations
  • Print/Media Advertising Design
  • Point of Purchase & Packaging Design
  • Trade Show Display and Marketing
  • Direct Marketing Campaigns
  • Employee Marketing & Communications
  • RFP/RFQ Preparation
  • Advertising Specialties and Fulfillment
  • Meeting and Conference Management
  • Public Relation Events
  • Entertainment Production
  • Event and Sports Marketing
  • Grand Opening Celebrations
  • Venue Research, Selection, Coordination
  • Destination and Travel Management
  • Guest Speaker and Talent Coordination
  • VIP/Hospitality Services
  • Theme/Decor Design and Management
  • On Site Event Logistics

ul#caplist { padding-top: 60px; background-image: url(images/bg_caplist_top.gif); background-repeat: no-repeat; }

ul#caplist a {
display: block;
padding-right: 160px;
text-decoration: none;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
color: #600;
background-repeat: no-repeat;
}

.caplist111 {
display: block;
background-image: url(images/bg_caplist_111.gif);
}

.caplist110 {
display: block;
background-image: url(images/bg_caplist_110.gif);
}

.caplist100 {
display: block;
background-image: url(images/bg_caplist_100.gif);
}

.caplist010 {
display: block;
background-image: url(images/bg_caplist_010.gif);
}

.caplist001 {
display: block;
background-image: url(images/bg_caplist_001.gif);
}

.caplist011 {
display: block;
background-image: url(images/bg_caplist_011.gif);
}

.caplist101 {
display: block;
background-image: url(images/bg_caplist_101.gif);
}

#caplist li ul { /* second-level lists */
position : absolute;
left: -999em;
width: 220px;
margin-left : 310px;
margin-top : -30px;
display: block;
}

#caplist li ul li {
padding: 5px;
background-color : #FFF;
border: 1px solid #600;
}

#caplist li ul li p {
margin: 4px 0 0 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color : #600;
}

#caplist li:hover ul ul, #caplist li:hover ul ul ul, #caplist li.sfhover ul ul, #caplist li.sfhover ul ul ul {
left: -999em;
}

#caplist li:hover ul, #caplist li li:hover ul, #caplist li li li:hover ul, #caplist li.sfhover ul, #caplist li li.sfhover ul, #caplist li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

Triumph (not verified)
Anonymous's picture
Guru

Wow, nice design.

Wow, nice design. Beautiful. :thumbsup:

In IE7 the stars and borders show but the popups do not. In IE6 the stars and borders disappear as you roll over them and do not reappear until you roll over something like the menu on the left. The popups never show in IE6. :shrug:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You shouldn't really be

You shouldn't really be using lists for the popup material because there's only a single item for each one. You can also avoid the use of javascript for IE6 by placing the additional content in a span inside the anchor as described at http://meyerweb.com/eric/css/edge/popups/demo.html

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

chikoppi
Offline
Enthusiast
Last seen: 9 years 45 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

Tyssen wrote:You can also

Tyssen wrote:
You can also avoid the use of javascript for IE6 by placing the additional content in a span inside the anchor as described at http://meyerweb.com/eric/css/edge/popups/demo.html

Hm... That's an interesting approach. Thanks for the link!

I put together an implementation here:

http://www.rightmindinc.com/lift/capabilities/newpop.html

I'm not sure yet how I feel about this version. I have two reservations.

First, I'd really prefer to style the text within the pop-up with spacing for paragraphs.

Second, the way the list items bounce around when rolling the mouse over the titles is a bit distracting. I switched to relative positioning because I need to have the pop-up appear next to the title, as opposed to the source at Eric Meyer's page, which uses absolute positioning.

Can a few of you who use IE take a quick look and let me know if the pop-ups are appearing when the titles are hovered?

P.S.

The forum post page has been causing my browser(Drunk to crash lately - both Safari and Firefox.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Ideally, you would use

Ideally, you would use paragraphs but as we're talking about nesting elements inside a span, they have to be other inline elements, so you could use spans, set them to display: block and add margins or padding as you would for paragraphs. And you don't have to change away from absolute positioning - you just need to change the coordinates that you use so that they appear where you want them.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

chikoppi
Offline
Enthusiast
Last seen: 9 years 45 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

Tyssen wrote:Ideally, you

Tyssen wrote:
Ideally, you would use paragraphs but as we're talking about nesting elements inside a span, they have to be other inline elements, so you could use spans, set them to display: block and add margins or padding as you would for paragraphs.
Hm. Well, I currently have the nested span tag set up thus:

#caplist li a:hover span {
display: block;
position: relative;
top: 0;
left: 0px;
padding: 10px;
line-height: 16px;
text-align: left;
color: #930;
background-color: #FFF;
border-bottom: 1px solid #F90;
border-left: 1px solid #F90;
border-right: 1px solid #F90;
}

Is it possible to add a span with a class inside another span? If so, I could create paragraphs:

#caplist li a:hover .spanpara { padding: 0 0 10px 0; border: none; }

LINKParagraph OneParagraph Two Although... something tells me that isn't going to work(!). Maybe I could contextually alter some other text-related tag, like "br"?

As for using absolute positioning, I'd have to assign coordinates to each link - something I'd rather avoid as this list will likely change occasionally.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Quote:As for using absolute

Quote:
As for using absolute positioning, I'd have to assign coordinates to each link - something I'd rather avoid as this list will likely change occasionally.

Not if you make #caplist li a { position: relative } as well and then give the span a width, a z-index value and use a right value instead of left, e.g.:

#caplist li a { position:relative }

#caplist li a:hover span {
background-color:#FFFFFF;
border-bottom:1px solid #FF9900;
border-left:1px solid #FF9900;
border-right:1px solid #FF9900;
color:#993300;
display:block;
line-height:16px;
padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0pt;
width:100px;
z-index:100;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

chikoppi
Offline
Enthusiast
Last seen: 9 years 45 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

Tyssen wrote:Not if you make

Tyssen wrote:
Not if you make #caplist li a { position: relative } as well and then give the span a width, a z-index value and use a right value instead of left, e.g.:

Ha! Now I have another problem... it works (at least in Safari), but I'm not sure I understand why!

http://www.rightmindinc.com/lift/capabilities/tyssen.html

OK. As near as I can tell the application of "position:relative" to the link (parent of the span) resets the reference point that the span uses for "position:absolute." Is this correct?

ul#caplist li a { background-repeat: no-repeat; color: #600; display: block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 30px; padding-right: 150px; position: relative; text-align: left; text-decoration: none; }

ul#caplist li a:hover {
color: #FFF;
}

#caplist li a span {
display: none;
}

#caplist li a:hover span {
background-image: url(images/bg_balloon.gif);
background-repeat: no-repeat;
color: #930;
display: block;
line-height: 16px;
padding: 10px 10px 10px 30px;
position: absolute;
right: -40px;
text-align: left;
top: 0;
width: 250px;
z-index: 100;
}


  • Brand Strategy(+) The foundational element for capturing serious market share from your competitors. Brand Strategy aligns you with the concepts most highly valued by your target market. (+) Can you name the candy bar that “satisfies?” That’s Brand Strategy.

  • Corporate Logo & Identity System(+) If the logo is your signature, then the identity system is what creates personality. (+) A good identity system does a lot of heavy lifting. It creates clarity and cohesion across many communication mediums through color, composition, style, and language. It conveys meaning and value to the customer.

  • Corporate Web SiteDonec venenatis tristique pede. Suspendisse pulvinar tristique sapien. Nunc justo. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam quis nunc quis nunc varius volutpat. In blandit faucibus purus.

If this is correct (and the relative/absolute positioning relationship degrades reliably across all browsers) then I've just become far, far more comfortable with my understanding of CSS positioning.

Thanks so much for taking the time to point out this technique!

chikoppi
Offline
Enthusiast
Last seen: 9 years 45 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

P.S. Browser Compatibility

P.S.

Not that I care about this particular browser, by I can verify that the technique does not display properly on IE5.5 for the Mac. It therefore worries me that other browsers (FF, IE5+ on Windows, etc.) may not display properly either?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

chikoppi wrote:OK. As near

chikoppi wrote:
OK. As near as I can tell the application of "position:relative" to the link (parent of the span) resets the reference point that the span uses for "position:absolute." Is this correct?

Yes. Setting position: anything (other than static) sets a new 'positioning context' so that any positioned descendants take their coordinates from this parent.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

chikoppi wrote:I can verify

chikoppi wrote:
I can verify that the technique does not display properly on IE5.5 for the Mac. It therefore worries me that other browsers (FF, IE5+ on Windows, etc.) may not display properly either?

You shouldn't base any assumptions on how something displays in any Windows browser based on how it looks in IE5/Mac. Even IE5 Windows will probably display quite differently than it's Mac counterpart.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

chikoppi
Offline
Enthusiast
Last seen: 9 years 45 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

Well, I had some friends

Well, I had some friends test this page in IE6 on Windows and there does appear to be some display problems:

http://www.rightmindinc.com/lift/capabilities/tyssen.html

The page renders correctly, but hovering over the list items fails to produce the pop-up window (though the list item text does change color as intended). HTML and CSS included above.

Any thoughts on how I can build-in some backwards compatitbility?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE needs a rule specified

IE needs a rule specified for a:hover as well before it'll work for a:hover element, e.g.:

#caplist li a:hover { line-height: 1 }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

chikoppi
Offline
Enthusiast
Last seen: 9 years 45 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

Tyssen wrote:IE needs a rule

Tyssen wrote:
IE needs a rule specified for a:hover as well before it'll work for a:hover element, e.g.:

Hm. I already have "color:#FFF" specified for #caplist li a:hover, so I can assume it isn't just any rule that will trigger the correct behavior? Are there valid options other than "line-height," such as width, height, or padding? What about the display property?

Also, am I reading the situation regarding IE correctly by observing that for IE the ":hover" property does not adopt the rules of the originating class for purposes of functionality? To the point, I do have "line-height" specified for #caplist li a but must specify it again for #caplist li a:hover in order to correctly trigger functionality in IE?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

When you have a:hover

When you have a:hover something, you need a rule on a:hover for IE6 to accept the other rule. You don't have to use line-height, but it appears that not all rules will be a trigger. Background-color is one, but it's not always appropriate. It doesn't matter what rules you've set on the anchor link state, you have to specify something on a:hover for a:hover anthingelse to work.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

chikoppi
Offline
Enthusiast
Last seen: 9 years 45 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

Still no display in IE6

I added a "line-height" declaration to a:hover, but the pop-up windows still aren't appearing in IE6.

http://www.rightmindinc.com/lift/capabilities/tyssen.html (validated XHTML Transitional)

  • Corporate Web SiteDonec venenatis tristique pede. Suspendisse pulvinar tristique sapien. Nunc justo. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam quis nunc quis nunc varius volutpat. In blandit faucibus purus.

ul#caplist { background-image: url(images/bg_caplist_top.gif); background-repeat: no-repeat; padding-top: 60px; }

ul#caplist li a {
background-repeat: no-repeat;
color: #600;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
position: relative;
padding-right: 150px;
text-decoration: none;
text-align: left;
}

ul#caplist li a:hover {
color: blue;
line-height: 30px;
}

.caplist110 {
background-image: url(images/bg_caplist_110.gif);
display: block;
}

#caplist li a span {
display: none;
}

#caplist li a:hover span {
background-image: url(images/bg_balloon.gif);
background-repeat: no-repeat;
bottom: 15px;
color: #930;
display: block;
line-height: 16px;
padding: 10px 10px 10px 30px;
position: absolute;
right: -40px;
text-align: left;
width: 250px;
z-index: 100;
}

In the past, I've had success using nested list menus in IE6 by adding javascript, but if there's a way to do it via pure CSS I'd much prefer that route - even if it means jumping through a few hoops to get there.

Your generous help has already brought me much closer to a complete site. Any further suggestions on what I might try to overcome this nagging obsticle?

chikoppi
Offline
Enthusiast
Last seen: 9 years 45 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

OK. I'm now quite sure I'm

OK. I'm now quite sure I'm losing my mind.

I've tried just about everything to get a pop-up text box to display when a link is hovered by the mouse. IE6 has steadfastedly refused to cooperate in every instance.

http://www.rightmindinc.com/lift/capabilities/index.html
http://www.rightmindinc.com/lift/capabilities/new.html
http://www.rightmindinc.com/lift/capabilities/new2.html
http://www.rightmindinc.com/lift/capabilities/new3.html
http://www.rightmindinc.com/lift/capabilities/newpop.html
http://www.rightmindinc.com/lift/capabilities/test.html
http://www.rightmindinc.com/lift/capabilities/tyssen.html

The above pages utilize either nested lists or a variant of Eric Meyer's "a:hover span" technique:
http://meyerweb.com/eric/css/edge/popups/demo.html
http://psacake.com/web/jl.asp

Can anyone point me to a reliable, functioning model for pop-up displays that can beat the IE6 challenge?