[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
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml";>
Home
Industry /*class .test is suppose to be
the trigger*/
Clientele
Partners
Careers
About
Contact
Immigration Information
POEA Regulations
Disciplinary Guidelines
POEA Sample Contract
Questions and Answers
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]
***
[WSG] HTML and BODY backgound image conflict
Hello all -
I know this is OT for this group, but I'm at my wits end.
Development URL: http://www.x7m.us/_clients/terapad/framework/index.htm
Look at it in FF, all is well. Look at it in IE, and my background
attachment image on the body is thrown to the bottom right of the page
CONTENT, not the view port as it should be - and is in FF.
Have found through my own testing that the background image AND/OR
background color (either one) in the HTML is the cause for the problem in
IE. Take out any reference to background image or color in the HTML, and the
logo in the BODY returns to the bottom right of the viewport as designed.
Essential CSS regarding this issue is as follows:
html{
background-image: url(../images/body_gradient.jpg);
background-repeat: repeat-x;
background-position: top left;
}
body{
min-width: 770px;
min-height: 101%;
text-align: center;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-weight: normal;
font-size: 100%;
background-image: url(../logos/logo_terapad_jewel.gif);
background-repeat: no-repeat;
background-position: 99% 99%;
background-attachment: fixed;
}
If anyone can give me a clue to what to do about this - or an ie-specific
work-around, I'd be HUGELY grateful.
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] cursor: default; or something else
Taco – For what it’s worth, I always use the “default” cursor (arrow) on my nav hrefs that are nulled (“#”) on a landing page. IMO it’s 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 – I’m pretty new to the whole accessibility thing but I’m trying. The latest question mark that arose in my mind regards to access keys: since there’s only 10 numeric keys (including “0”) what does one do if you’re building a site that exceeds 10 pages? The one I’m working on now looks like it’s 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 there’s 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**
[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...
...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
**
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 **
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 it’s just the nature of the beast (IE) that’s causing the problem. So, so-far, IE CC is the way I’ll go unless someone can say: “Hey Cole, this is what you’re doing wrong with your css. Do ***this*** and it’ll 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. 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**
[WSG] OT - but really need help
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 **<>
RE: [WSG] Validation Errors - Follow up.
Walter: >>sorry to labour the point, but presumably you mean you >>toiled through everywhere you'd defined a colour then said >>background-color : inherit. Yes? Essentially, yes. A true labor of hate; but it validated so in the end I accomplished my goal. Was there an easier way to accomplish what I did? As per all previous posts to my question, I realized that this wasn't really necessary for me to do, but I mainly did it from a standpoint of building out my understanding of how CSS works. Best Regards, 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] 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] 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 that don't exist - does the validator work?
Title: Validation Errors that don't exist - does the validator work?
Felicity –
Thanks for the suggestion, but I’ve
already tried that. It may validate under those circumstances, but in many
cases I don’t want a “real” background-color on many of these
rules.
For example, on all “a” tags,
the design calls for a link color and then on-hover color, but no background
color.
So, if I change the rule from:
a:link, a:visited {
color:
#CC3300;
background-color:
transparent;
}
To:
a:link, a:visited {
color:
#CC3300;
background-color:
#00FF00;
}
That’s what I get… a block of
#00FF00 behind each a link. But, boy, would the client throw a fit about that.
So, is the problem that the validator
doesn’t understand or accept a background-color property of “transparent”?
That can’t be, because I have other
rules in my style sheet that declare a text color and a background-color of
transparent and I don’t get errors on those lines.
I keep thinking that it’s me that’s
doing something wrong, but I can’t see where.
It would be easy to blame the validation
service – and if it can be proved the validator is wrong in it’s
errors I’d be out of the woods with the client.
But then again, if the W3C CSS validator was
proved to be incorrect in it’s errors, what does that mean for the
standards community who are trying to do everything “by the book”?
Cole
From:
listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Felicity Farr
Sent: Thursday, May 18, 2006 1:32
PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Validation
Errors that don't exist - does the validator work?
Put colour references in
instead of ‘transparent’ and it will validate - guaranteed.
-Original Message-
From:
listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Cole Kuryakin
Sent: Thursday, 18 May 2006 3:14
PM
To: wsg@webstandardsgroup.org
Subject: [WSG] Validation Errors
that don't exist - does the validator work?
Hello All –
I’m getting a number of errors from the
W3C CSS validator that just aren’t there.
Here’s what I get:
·
Line : 217 (Level : 1) You have no background-color with your color : a:visited
·
Line : 217 (Level : 1) You have no background-color with your color : a:visited
·
Line : 222 (Level : 1) You have no background-color with your color : a:hover
·
Line : 228 (Level : 1) You have no background-color with your color : .active
·
Line : 265 (Level : 1) You have no background-color with your color : a.active
·
Line : 295 (Level : 1) You have no background-color with your color : .display
h4
·
Line : 305 (Level : 1) You have no background-color with your color : .display
p
·
Line : 392 (Level : 1) You have no background-color with your color :
#bottom_nav li a:visited
·
Line : 392 (Level : 1) You have no background-color with your color :
#bottom_nav li a:visited
·
Line : 397 (Level : 1) You have no background-color with your color :
#bottom_nav li a:hover
Now, as an example, here’s what I have on line
217 (reference the above error) of my css:
a:link, a:visited {
color:
#CC3300;
background-color:
transparent;
}
Another example from line 295 (again, reference error
above):
.display h4 {
margin: 14px
10px 0 10px;
color:
#9933CC;
background-color:
transparent;
}
Clearly the background-color declaration
for
both of these rules (as well as all others the validator is complaining about)
IS
present. So, what’s going on?
Can the validator be trusted? Is my syntax somehow
incorrect?
Also, any idea why it’s throwing multiple
errors of the same type for the same line-item?
I trust the validator because I’m dedicated to
doing things “right” but I don’t understand why
it’s giving me these errors unless the validator it
self is broken.
One of the stipulations of this particular project
from my client is that “the CSS MUST validate..and
I’m going to check it myself to make sure it does.”
Any insight from anyone who knows what is going on
will be greatly helpful.
Cole Kuryakin
[WSG] Validation Errors that don't exist - does the validator work?
Title: Validation Errors that don't exist - does the validator work?
Hello All –
I’m getting a number of errors from the W3C CSS validator that just aren’t there.
Here’s what I get:
· Line : 217 (Level : 1) You have no background-color with your color : a:visited
· Line : 217 (Level : 1) You have no background-color with your color : a:visited
· Line : 222 (Level : 1) You have no background-color with your color : a:hover
· Line : 228 (Level : 1) You have no background-color with your color : .active
· Line : 265 (Level : 1) You have no background-color with your color : a.active
· Line : 295 (Level : 1) You have no background-color with your color : .display h4
· Line : 305 (Level : 1) You have no background-color with your color : .display p
· Line : 392 (Level : 1) You have no background-color with your color : #bottom_nav li a:visited
· Line : 392 (Level : 1) You have no background-color with your color : #bottom_nav li a:visited
· Line : 397 (Level : 1) You have no background-color with your color : #bottom_nav li a:hover
Now, as an example, here’s what I have on line 217 (reference the above error) of my css:
a:link, a:visited {
color: #CC3300;
background-color: transparent;
}
Another example from line 295 (again, reference error above):
.display h4 {
margin: 14px 10px 0 10px;
color: #9933CC;
background-color: transparent;
}
Clearly the background-color declaration for both of these rules (as well as all others the validator is complaining about) IS present. So, what’s going on?
Can the validator be trusted? Is my syntax somehow incorrect?
Also, any idea why it’s throwing multiple errors of the same type for the same line-item?
I trust the validator because I’m dedicated to doing things “right” but I don’t understand why it’s giving me these errors unless the validator it self is broken.
One of the stipulations of this particular project from my client is that “the CSS MUST validate..and I’m going to check it myself to make sure it does.”
Any insight from anyone who knows what is going on will be greatly helpful.
Cole Kuryakin
[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 li’s that work (display) perfectly in FF, NN, Opera, but they don’t shown in IE; IE 6 specifically.
What I’ve done pretty much comes directly from Listorial so I can’t see where I’m going wrong in IE.
Can anyone help?
Here’s the html snippet:
Click
Click
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;
}
[WSG] UL/LI or DL/DT for drop down menu
Hello All I'm putting together a drop down menu that currently uses UL as the container and LI's as the tag for each menu item. What does everyone think of this in regards to symantics? Should I be using a DL/DT pairing instead - it seems to me that drop-down lists could be considered definition lists. I don't know, I go back and forth on this. Menu would be the obvious choice, but it's been deprecated. Interested in this communities opinion. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
