[WSG] Please Help! Hover not working to trigger display:block in FF
Hello All -
I've done this successfully in one previous project, but can't for the life
of me understand what I'm doing wrong now.
I've got a UL nav bar with a number of li's.
I've set one of the li's as css trigger (via a class name) in order to show
a drop-down menu (a UL) that has a default value of display:none.
Unfortunately, nothing I try will initiate the declaration containing the
display:block.
My CSS and test.html page validates so I don't know where I'm going wrong.
Could someone please show me the error of my ways?
To see this live, please go here: http://www.x7m.us/_problems/test.htm and
hover over the Industry li . of course, you won't see anything happen as
this is the crux of my problem.
HTML and CSS copied below for convenience.
Appreciate any and all guidance on how to fix this
Cole
HTML
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
link href=a/style/test.css rel=stylesheet type=text/css
media=screen /
/head
body
div id=wrapper
ul id=navTop
li class=noLeftPaddingHome/li
li class=testIndustry/li /*class .test is suppose to be
the trigger*/
liClientele/li
liPartners/li
liCareers/li
liAbout/li
liContact/li
/ul
ul id=industry class=menu
liImmigration Information/li
liPOEA Regulations/li
liDisciplinary Guidelines/li
liPOEA Sample Contract/li
liQuestions and Answers/li
/ul
/div
/body
/html
CSS
/* --- Global Properties
--- */
* {
margin: 0;
padding: 0;
border: none;
}
html{
height: 100%;
}
body{
min-width: 770px;
min-height: 101%;
text-align: center;
font-family: Arial, Verdana, Tahoma, Helvetica, Geneva,
sans-serif;
font-weight: normal;
font-size: 100%;
background-color: #000;
color: #000;
}
#wrapper {
position: relative;
width: 770px;
height: 500px;
margin: 0px auto;
text-align: left;
color: inherit;
background-color: #FFF;
}
ul {
list-style: none;
}
/* --- Nav Top
*/
#navTop { /*THIS IS A UL*/
height: 42px;
padding-left: 10px;
padding-top: 3px;
background-color: #00CC00;
}
#navTop li {
display: inline;
border-right: 1px solid white;
padding-top: 12px;
padding-bottom: 24px;
padding-right: 26px;
padding-left: 6px;
font-weight: bold;
font-size: 0.75em;
}
#navTop li.noLeftPadding {
padding-left: 0;
}
/* --- Drop Down Menus
*/
#industry {
position: absolute;
top: 45px;
left: 70px;
display: none; /*INDUSTRY UL IS HIDDEN BY DEFAULT*/
}
ul#navTop li.test:hover ul#industry { /*I THINK THIS IS THE PROBLEM
AREA*/
display: block;
}
li.test {
cursor: pointer;
}
.menu {
background-color: #FFCC99;
}
.menu li {
padding: 5px 10px;
font-size: 0.75em;
border-bottom: 1px solid black;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Targeting specific images with overflow:hidden
Hello All
I've designed some templates for a blogging system about 6 months back, but
neither I nor my client, anticipated
non-breaking text strings or oversized images being uploaded into these
non-liquid designs.
Designs are typical two column floats (nav and main content area are
floated) so when something is put into these
areas which are over the maximum width level we get float drops.
Of course, and as usual, Firefox handles these problems without breaking the
layout, and in IE i've used the
proprietary text-wrap property to deal with over-sized strings. Now I'm
trying to work out how to handle oversized
images.
I can put overflow:hidden in a div which has images - which does the trick
for IE - but then FireFox truncates any
overflowing text which may also be within that div.
What I want to do is target any img within the site
img {
font-size: 80%;
color: #000;
background-color: inherit;
border: none;
overflow:hidden;
}
with overflow:hidden - but for some reason, it's not working.
I've even tried using a class -
img.overflow {
overflow:hidden;
}
on each image, but that doesn't work either. Hummm.
What does work is if I hook overflow:hidden to a div which contains the
image, but like I said, that causes text
overflow problems in FireFox.
To see what's going on, please go here:
http://www.x7m.us/_problems/index_problem.htm.
According to my client, overflowing text and images is acceptable in firefox
- although it's ugly - but he can't have it break the site in IE.
Sure would appreciate any advise on how I can get overflow:hidden to target
just the images on this site.
Thanks to all in advance!!!
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] cursor: default; or something else
Taco For what its worth, I always use the default cursor (arrow) on my nav hrefs that are nulled (#) on a landing page. IMO its much better indication that the hover is not clickable. Cole From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Taco Fleur Sent: Monday, July 10, 2006 1:11 PM To: wsg@webstandardsgroup.org Subject: [WSG] cursor: default; or something else Out of interested, what would one consider the most user friendliest cursor to display on hover http://www.apartmentrealty.com.au/site/apartment/full-detail.cfm?apartmentIdentity=1? I have cursor: default; I don't want to display the hand as it makes people think it is clickable. Kind regards, Taco Fleur free call 1800 032 982 or mobile 0421 851 786 fax 07 3414 6464, international +61 7 3325 5103 www.pacificfox.com.au an industry leader with commercial experience since 1994 our services: online, print, marketing information technology website, branding, logo, business cards, letterheads accept online credit card payments www.commerceengine.com.au domain registrations, .com for as low as fifteen dollars a year, .com.au for fifty dollars two years! **The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help** **The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
[WSG] Access Keys and large sites
Title: Access Keys and large sites Hello All Im pretty new to the whole accessibility thing but Im trying. The latest question mark that arose in my mind regards to access keys: since theres only 10 numeric keys (including 0) what does one do if youre building a site that exceeds 10 pages? The one Im working on now looks like its going to top-out at over 50 pages with some sections containing 2 different drill-down levels No need for anyone to go into a lot of explanation on what to do if theres simply a good link that can be provided that will answer my question. Appreciate all insight in advance. Cole **The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
RE: [WSG] OT - but really need help
Del
I have tried IE CC, and it does work for
my purposes. Thanks for weighing in. I was really wondering if I was doing
something wrong in the CSS to cause this, or if its just the nature of
the beast (IE) thats causing the problem.
So, so-far, IE CC is the way Ill go
unless someone can say: Hey Cole, this is what youre doing wrong
with your css. Do ***this*** and itll be fixed without the need to use
IE CC
Cole
From:
listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of del usr
Sent: Thursday, June 15, 2006 9:42
AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] OT - but really
need help
Have you tried conditional comments??
Place this in the head section of your code and change the div_name to whatever
it should be.
!--[if IE]
style type=text/css
#div_name {bottom: -4px;}
/style
![endif]--
More info:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
http://www.quirksmode.org/css/condcom.html
On 6/15/06, Cole
Kuryakin [EMAIL PROTECTED]
wrote:
I know this type of question is off topic for this list, but I've
almost
pulled the last of my hairs out over this problem.
If anyone can help me solve it, I'd be VERY greatful.
Here's the link: http://www.x7m.us/_problems/problem.htm
Layout displays as per spec in FF, Netscape, Opera. But look at it in IE and
you'll see the y-repeated background in both the #nav_bar and #content divs
are increasing the height of the wrapper by about 3px.
IE 3px bug? Peekaboo bug? That's what I thought, as the wrapper does contain
2 floated divs. But I've tried every solution I've found on the net for this
problem yet the issue persists.
The only thing that works is declaring bottom: -4px; to
both #nav_footer
and #content_footer. Of course, this screws-up footer area big-time in FF,
N, and O.
Is there something I've overlooked and/or am doing wrong? Or is this simply
the perfect scenario to implement IE conditional comments in order to alter
the rules for the sake of IE?
Great appreciation to everyone in advance,
Cole
**
The discussion list for
http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
RE: [WSG] OT - but really need help
Thanks Paul. I'll take a look. I try to stay away from hacks as much as possible, but I'll give it a look. Thanks for the link. Cole -Original Message- From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Paul Bennett Sent: Thursday, June 15, 2006 9:41 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] OT - but really need help Hi Cole, I dunno if I can SOLVE it (and I see the problem in IE), but instead of conditional comments couldn't you use Tanta's box-model hack to serve the bottom negative margin to IE? http://www.tantek.com/CSS/Examples/boxmodelhack.html I know it's still a hack, but due to the discrepancies between gecko and IE box models it may be the only way? Paul ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Winner! OT - but really need help
Thanks to all for their suggestions regarding my issue.
Georg, however DID solved the issue nicely - and without the need for IE
CC's - with his explanation below.
His instruction about adding an empty comment to each of the two divs in
quested eliminated the problem by 80%; when I completed his instruction by
amending the .homePage height from 585px to 580px, the fix was complete.
NOW, here's an interesting side note: I wondered why altering the .homePage
class height to an even number (580px vs the original 585px) would complete
the fix. So I tried 586px - which also worked - where 587px did not.
Things that make you go hum: so - I guess for some reason - IE not
only doesn't like empty divs, it also doesn't care for odd numbered height
declarations.
Georg, thanks to you I still have a few hairs left. Your assistance was
great!
Cole
-Original Message-
From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED]
On Behalf Of Gunlaug Sørtun
Sent: Thursday, June 15, 2006 9:51 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] OT - but really need help
Cole Kuryakin wrote:
http://www.x7m.us/_problems/problem.htm
Layout displays as per spec in FF, Netscape, Opera. But look at it in
IE and you'll see the y-repeated background in both the #nav_bar and
#content divs are increasing the height of the wrapper by about 3px.
IE/win doesn't see empty divs as being empty, without something else
inside those divs. Thus, IE will add 'line-height' to what it sees as a
space.
So, add a comment in there...
div id=nav_footer!-- --/div
div id=content_footer!-- --/div
...and even IE/win will get the message.
Then, correct the height slightly, from...
.homePage {height: 585px;}
...to...
.homePage {height: 580px;}
...and it should work.
Of course: fixed heights will easily make content overflow containers,
if anyone ever apply font-resize at the User end. Not part of _this_
problem though.
Georg
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Validation Errors - a big thanks to everyone!
I really appreciate everyone who weighed in on this topic and will not worry so much about these warnings given the reasonable explanations offered. I will, as well, be printing off a number of these replies to show my twitchy client to help back up the facts of the matter. Thanks again to all of you! Cole Kuryakin ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Validation Errors - Follow up.
As Bruce - and perhaps others - had mentioned in a few of the replies, I tried inherit as the background-color property on all rules in question, revalidated, and PERFECT. No errors or warnings at all. I just offer this for everyone's information. Cole Kuryakin ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Custom bullets not showing in IE
Title: Custom bullets not showing in IE
Hello all
Got an IE specific problem: Got a few custom bullets in lis that work (display) perfectly in FF, NN, Opera, but they dont shown in IE; IE 6 specifically.
What Ive done pretty much comes directly from Listorial so I cant see where Im going wrong in IE.
Can anyone help?
Heres the html snippet:
ul id=copyLinks
li class=emailClick a href="" to make a Tourer product inquiry./li
li class=downloadClick a href="" to download the Tourer Specification./li
/ul
And the attending CSS:
ul {
list-style-type: none;
}
#copyLinks {
margin: 15px 15px;
}
#copyLinks li {
margin-bottom: 10px;
font-size: 0.7em;
font-weight: bold;
color: white;
padding-left: 25px;
padding-bottom: 2px;
}
#copyLinks li.email {
background-image:url(../c/email_icon.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#copyLinks li.download {
background-image:url(../c/download_icon.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#copyLinks li a {
color: #6B7787;
text-decoration: none;
}
#copyLinks li a:hover {
color: #99;
text-decoration: underline;
}
