Re: [css-d] Horizontal scrollbar bug on Safari/FF for div#nav a la Cederholm Bulletproof scalable navigation
Rob Newman wrote:
http://www.variandesigns.com
... However, is there a way to indent the navigation (as I have it
now at 10px) and still stop the horizontal scrollbar appearing?
Maybe...
#nav {width: 99%; margin: 0; padding: 0 0 0 1% ;}
...(or something like that) will suit you?
There won't be a scrollbar as long as 'width + margin + padding' don't
exceed 100%.
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] dynamic menus and z-index? (formerly More SOS)
Ingo Chao wrote:
[EMAIL PROTECTED] wrote:
http://spppa.littleberrystudio.com
For FirefoxCo,
#nav li ul {z-index:1}
should solve the problem of text+borders peeking through in flyouts of
preceding elements.
For IE, I don't have a solution, since IE establishes a new stacking
context for each relatively positioned element, meaning that
NewsEvents sits over any ul that is part of Alumni.
http://www.satzansatz.de/cssd/escher.html
Giving z-indexes to all these relatively positioned li from bottom to
top seems to be not a bright idea in multi-level flyouts.
Others who regularly use flyout menus should have a solution.
Ingo
Hi Paticia,
Viewing the page in 1024x786 resolution: 2 steps upscaling the font-size
in IE causes the dropping down of the nav-sidebar.
I think this has to be solved before finetuning the menu/submenus, as it
can influence all positions.
See testpage with solutions.
Also adapted the hidden gems (seen with Ctrl-A in the browser): for FF
the #header-h1, for IE the #navigation-h2; see source code of testpage.
***Hmm, provider troubles, - I cannot upload at the moment, the
testpage has to wait. I'll try again tonight.
While I'm in a hurry now, I'm sorry not to have other contributions for
the menu-problems.
Perhaps you can find some hints in the source code of the example The
Keyboardfish
http://home.tiscali.nl/developerscorner/css-discuss/the_Keybordfish.htm.
Greetings,
francky
__
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] wordpress OEM footer (Brian Cummiskey)
Hello Brian,
Just from a quick glance, your footer postion is 1 px to the right of the
elements above it. For example, div #content .narrowcolumn is positioned
let's say 12 px from the left, and your footer is 13 px from the left. I
haven't tested this, but my first try would be changing the footer CSS to:
#footer {
padding: 0;
margin: 0 auto;
width: 760px;
clear: both;
}
Instead of:
#footer {
padding: 0 0 0 1px;
margin: 0 auto;
width: 760px;
clear: both;
}
I hope it works!
John
__
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] IE7 hovers and a IE vertical list bug?
If you write the li's without line breaks between them, the space disappears. Searching around, there are a fair number of these whitespace-in-HTML-related bugs in browsers' CSS handling. I myself took the decision to postprocess my (X)HTML in order to be able to manage this. I do already use the HTML Tidy tool (http://www.w3.org/People/Raggett/tidy/), as an HTML postprocessor. Tidy is supposed to help avoid some of these whitespace browser bug issues, but unfortunately current versions of Tidy (as at early 2006) actually _introduce_ this kind of whitespace problem, and do so even if you do not choose Tidy's indent/pretty-print output option. So as a complete and lasting cure, I wrote a quick and dirty postprocessor tool, which I run to completely strip all newlines from the HTML. If anyone would like a copy of this tiny little newline stripper tool, just ask, e: cecilatcecilward.com. [The tool is indeed quick and dirty, a javascript program (Microsoft JScript dialect) running as a command line tool under Windows CSCRIPT, so I'm afraid this limits it to recent Microsoft o/ses. Mac OSX anyone? The current version also requires that your HTML sources be either in UTF-8 or in some single-byte character encoding such as ISO-8859-1, say. Character encodings such as UTF-16 are not (yet) supported.] Regards, Cecil Ward. __ 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] IE trouble, a tags refusing to display bottom border on hover
Hi there, I'm having trouble with some links, I've given them a bottom border that's hidden and then displays on hover. There are some similar links on the page however (#categories) where i have set the bottom border to 0. For some reason this is being picked up by the links in my navigation (#nav). The site is at http://www.thebusinesscommunity.co.uk/templates/westpennine/ There is an example of the effect i want that does work on the page, the 'contact us' link at the bottom. Rendering is spot on in FF (haven't checked Opera yet). If anyone could take a look or has had a similar problem I'd be grateful for any insights. Cheers, Rob O'Rourke __ 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] Clearing 2 floated content areas
http://www.itu.dk/people/antl/Webdesign_06/vestervold148/test1/vestervold148_v2/hjem.html
First, the white color behind the tabbed navigation does not extend
to the far right of the page as it does in Firefox, for example. I
thought I'd fixed this by giving the #nav div a fixed width of 713px.
But IE won't play nice.
Add...
* html ul#nav {width: 100%;}
...as a correction for IE only.
The other, more serious problem is that the footer div no longer
clears the floats and thus my footer now appears to be more of a
belt, than a footer :-(
Set...
#container {height: auto;}
...since IE doesn't know that 'height: 100%' should default to 'height:
auto' in such a layout.
I have only tested the above with inline-styles and made sure it works.
I've also only tested in Firefox 1.5.0.1, Opera 9tp2 and IE6, where all
3 browsers rendered a copy of your page (with changes) identical.
regards
Georg
A quick answer as always and right again Georg.
Thanks :-))
Tony
__
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] width auto problem
I have a simple 2 column layout with header and footer (http:// centrevilledesign.com/styles/2col.css). One column is the main column and the column on the right is a sidebar area, with a width of 22%. Here's the problem: If I give the main column width:auto the layout breaks on Macintosh browsers (Safari 2.03 and Firefix 1.5). If I give the main column a percentage width of 70%, for instance, the Mac browsers are good, but then I lose my layout if I shrink the width of the window. Width:auto works great on IE 6 / Win. Is there a work-around for this behavior? Thanks, Jack __ 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] IE7 build 5335 possible outstanding CSS parsing bug - comment handling with attribute selector
A question about the CSS specs and a bug report for IE7 build 5335.
IE7 build 5335 fails the test t1 in the test case below. I say fails in
the sense that I'm assuming that the consensus represented by the behaviour
shown by Firefox 1.5 and the current pre-release versions Opera 9 is assumed
to be correct.
Could someone tell me whether the test below is valid or fair?
That is, I am assuming that my reading of the unhelpful CSS 2/2.1 specs is
that comments are in a sense ignorable, in that they are not separators
equivalent to whitespace, so that a selector such as
*[lang]/**/[xmlns]
should be equivalent to *[lang][xmlns]
and not equivalent to
*[lang] [xmlns]
Is that correct?
Cecil Ward.
Test case follows:-
!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; xml:lang=en lang=en
head
title/title
style type=text/css
*[lang]/**/[xmlns] #t1 { font-style:italic; }
p/**/#t2{ font-style:italic;}
/style
/head
body
p id=t1Should be italic./p
p id=t2Should be italic./p
/body
/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] dynamic menus and z-index? (formerly More SOS)
Ingo Chao wrote:
[EMAIL PROTECTED] wrote:
http://spppa.littleberrystudio.com
For FirefoxCo,
#nav li ul {z-index:1}
should solve the problem of text+borders peeking through in flyouts of
preceding elements.
For IE, I don't have a solution, since IE establishes a new stacking
context for each relatively positioned element, meaning that
NewsEvents sits over any ul that is part of Alumni.
http://www.satzansatz.de/cssd/escher.html
...
Others who regularly use flyout menus should have a solution.
Looks like I have to learn it for myself.
Since the problem is that the position:relative is establishing a new
stacking context, which will paint over preceding ones:
- #nav li { position:relative;}
you could try to set this to position:static.
Set it to position:relative only on hover/over.
Haven't tried it, though. Maybe if my site should ever need a
three-leveled flyout menu with negative indent.
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/
[css-d] I also have a problem with background color change on hover
I also have a problem with background color change on hover, and the fix for
the problem K. Wilcox had did not work for me.
Perhaps someone can tell me what it is I am not doing correctly. The hover
on this site: http://www.changeswlc.com covers horizontally, but not
vertically.
My navigation code:
ul#nav {
list-style-type: none;
margin: 0;
padding-left: 20px;
padding-bottom: 24px;
font: bold 90% verdana, arial, sans-serif;
}
ul#nav li {
float: left;
height: 21px;
background-color: #AADFE0;
margin: 1px 1px 0 1px; /* this controls the space between tabs */
border: 1px solid #59C0C3;
border-bottom: 0;
}
ul#nav a:link, ul#nav a:visited {
display: block;
color: #BE32FE;
background-color: transparent;
text-decoration: none;
padding: 4px 15px;
}
ul#nav a:hover {
background-color: #BE32FE;
color: #F3F7D4;
font-weight: bold;
font-size: 100%;
}
body#home li.home, body#about li.about, body#tour li.tour, body#contact
li.contact, body#faqs li.faqs, body#coupons li.coupons, body#members
li.members {
border-bottom: 1px solid #fff;
color: #59C0C3;
background-color: #FF;
}
body#home li.home a:link, body#home li.home a:visited,
body#about li.about a:link, body#about li.about a:visited,
body#tour li.tour a:link, body#tour li.tour a:visited,
body#contact li.contact a:link, body#contact li.contact a:visited,
body#faqs li.faqs a:link, body#faqs li.faqs a:visited,
body#coupons li.coupons a:link, body#coupons li.coupons a:visited,
body#members li.members a:link, body#members li.members a:visited {
color: #59C0C3;
font-weight: bold;
background-color: #FFF;
}
I can always just remove the background on the hover, only showing a change
on the font color, but I would really like to know what is my problem for
future projects.
Thanks.
Joan
_
Dont just search. Find. Check out the new MSN Search!
http://search.msn.click-url.com/go/onm00200636ave/direct/01/
__
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] wordpress OEM footer (Brian Cummiskey)
Hi Brian, Now it appears to be off in IE. Sorry. I guess that wasn't the solution. I must say I am at a loss to say why this is happening, but I'm sure someone on this list could help out. It looks like IE is interpreting the padding differently than Mozilla. Hmm, I don't really have time to really get into it today; I might try googling it, or taking out the footer padding (as you did), and then adding 1 to the left margin to see if that produces anything different. Good luck! John Brian Cummiskey [EMAIL PROTECTED] com To [EMAIL PROTECTED] 03/29/2006 09:26 cc AMcss-d@lists.css-discuss.org Subject Re: [css-d] wordpress OEM footer (Brian Cummiskey) [EMAIL PROTECTED] wrote: I hope it works! It does! Thanks John. __ 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] css vertical menu that expands down
Any recommendations on a CSS menu that can be configured to expand down, pushing other menu items down, so that don't cover the subsequent items? __ 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] css vertical menu that expands down
ontheroad wrote: Any recommendations on a CSS menu that can be configured to expand down, pushing other menu items down, so that don't cover the subsequent items? I would highly recommend Chris Heilmann's PDE (Pure Dom Explorer) [0]. Regards, Ron [0] http://onlinetools.org/tools/dom-tree-menu-puredom/ __ 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] css vertical menu that expands down
Just use nested lists in the normal flow with something like the
suckerfish dropdowns. Also see the article at a list apart,
http://www.alistapart.com/articles/dropdowns/ if you get stuck.
just give your nav an id of #nav and put this script in your header:
script type=text/javascript
startList = function() {
if (document.alldocument.getElementById) {
navRoot = document.getElementById(nav);
for (i=0; inavRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName==LI) {
node.onmouseover=function() {
this.className+= over;
}
node.onmouseout=function() {
this.className=this.className.replace( over, );
}
}
}
}
}
window.onload=startList;
/script
Rob
[EMAIL PROTECTED] wrote:
Any recommendations on a CSS menu that can be configured to expand down,
pushing other menu items down, so that don't cover the subsequent items?
__
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] I also have a problem with background color change on hover
Hi Joan,
You get all kinds of problem when you're changing font-size on hover
but the problem lay in basic.css, you had a padding-top of 4px on all
lis. This css works for FF, not sure about IE but i can't see that it
would be any different:
ul#nav li {
float: left;
height: 27px;
background-color: #AADFE0;
margin: 1px 1px 0 1px; /* this controls the space between tabs */
border: 1px solid #59C0C3;
border-bottom: 0;
padding: 0; /* reset the padding */
}
ul#nav a:link, ul#nav a:visited {
display: block;
color: #BE32FE;
background-color: transparent;
text-decoration: none;
padding: 4px 15px;
height: 19px; /* fix the height to avoid it spilling downwards */
}
Hope that solves the problem.
Robert O'Rourke
Joanie Mae wrote:
I also have a problem with background color change on hover, and the
fix for the problem K. Wilcox had did not work for me.
Perhaps someone can tell me what it is I am not doing correctly. The
hover on this site: http://www.changeswlc.com covers horizontally, but
not vertically.
My navigation code:
ul#nav {
list-style-type: none;
margin: 0;
padding-left: 20px;
padding-bottom: 24px;
font: bold 90% verdana, arial, sans-serif;
}
ul#nav li {
float: left;
height: 21px;
background-color: #AADFE0;
margin: 1px 1px 0 1px; /* this controls the space between tabs */
border: 1px solid #59C0C3;
border-bottom: 0;
}
ul#nav a:link, ul#nav a:visited {
display: block;
color: #BE32FE;
background-color: transparent;
text-decoration: none;
padding: 4px 15px;
}
ul#nav a:hover {
background-color: #BE32FE;
color: #F3F7D4;
font-weight: bold;
font-size: 100%;
}
body#home li.home, body#about li.about, body#tour li.tour,
body#contact li.contact, body#faqs li.faqs, body#coupons li.coupons,
body#members li.members {
border-bottom: 1px solid #fff;
color: #59C0C3;
background-color: #FF;
}
body#home li.home a:link, body#home li.home a:visited,
body#about li.about a:link, body#about li.about a:visited,
body#tour li.tour a:link, body#tour li.tour a:visited,
body#contact li.contact a:link, body#contact li.contact a:visited,
body#faqs li.faqs a:link, body#faqs li.faqs a:visited,
body#coupons li.coupons a:link, body#coupons li.coupons a:visited,
body#members li.members a:link, body#members li.members a:visited {
color: #59C0C3;
font-weight: bold;
background-color: #FFF;
}
I can always just remove the background on the hover, only showing a
change on the font color, but I would really like to know what is my
problem for future projects.
Thanks.
Joan
_
Don't just search. Find. Check out the new MSN Search!
http://search.msn.click-url.com/go/onm00200636ave/direct/01/
__
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] IE display problem(s)
I did
On 3/29/06, Holly Bergevin [EMAIL PROTECTED] wrote:
Have you tried changing the ie.css file as I suggested before? I'll
suggest it once more. The following selectors and declarations are the ONLY
things that should be in your ie.css file.
#leftnav ul {
margin-left:-5px;
left:30px;
margin-top:13px;
}
#content {
height: 350px;
overflow: visible;
}
Thanks for the feedback. I tried that, as you can see at:
http://www.connorboyack.com/junk/tlr/
In IE 6 it looks fine. In IE 5.5, I still had to include a hack to push the
content div over by 210 pixels - before, it was overlayed on top of the left
navigation.
However, in IE7b2, the overflow:visible; doesn't get caught for whatever
reason, and it doesn't expand vertically. Anybody know a fix for this?
Thanks,
Connor
--
Connor Boyack
WebVid Productions
http://www.webvidpro.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] IE Highlighting Bug
On 3/28/06, Ingo Chao [EMAIL PROTECTED] wrote: Colin Sheaff wrote: I'm sure I could suss this out with enough hours of research and trial-and-error tweaking of the site, but I would love to resolve this quicker so I ask for your help. http://www.canastamusic.com/press For some reason when using the mouse to highlight text (to copy text to the clipboard) IE 6.0 will highlight in reverse to the begining of the page. This doesn't happen in Firefox 1.501, or Safari 1.3.2. This actually happens on all the pages on the site. I have a feeling it's an issue with relative positioning. Yes, looks like it depends on the position:relative you have applied to each p. What was the reason for doing so? And is there a good reason for putting text into the web with a font size of 10px? Ingo It's been a while since I carved this up, but I believe the position:relative p has less to do with it than the overall position:relative div structure. This was done to center what is effectively a three column display. I know I can fix the highlighting problem by throwing IE into quirks mode, but that totally destroys the format of the page. What I'm thinking of doing now is having a fixed-width table to encapsulate the main content and use absolute divs within that. I'm going to pull all the relative calls as soon as I can. As to the 10px font size, this was to tie the text size as much as possible to the graphics of the site. Many of the headers are in a custom font which we rendered as image files, so keeping the non-rendered text as static as possible seemed like a good idea. And I know the ideal is to keep the site as scalable as possible, but the client asked for very specific things early on and was willing to compromise on usability for visual aesthetic. Colin __ 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] dynamic menus and z-index? (formerly More SOS)
francky wrote: [...] Hi Paticia, Viewing the page in 1024x786 resolution: 2 steps upscaling the font-size in IE causes the dropping down of the nav-sidebar. I think this has to be solved before finetuning the menu/submenus, as it can influence all positions. See testpage with solutions. Also adapted the hidden gems (seen with Ctrl-A in the browser): for FF the #header-h1, for IE the #navigation-h2; see source code of testpage. ***Hmm, provider troubles, - I cannot upload at the moment, the testpage has to wait. I'll try again tonight. [...] ... phone call learned the ftp-server is down, can be tomorrow or the day after before it is repaired... But apart from my own site I've admittance to another, without ftp-problems. Here is the testpage http://www.cosbo.nl/tmp/test-spppa-1.htm! (I included Ingo's first addition) Greetings, francky __ 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] I also have a problem with background color change on hover
Hi Joanie
Thats a very odd one, but i've figured it out. I'm not sure why exactly
but you have float the a tags themselves left aswell ie:
ul#nav li a:link, ul#nav li a:visited {
display: block;
color: #BE32FE;
background-color: transparent;
text-decoration: none;
padding: 4px 15px;
height: 19px;
float: left;
}
Job done =)
Rob
Joanie Mae wrote:
It took your fix and the Dieringer fix for it to work... HOWEVER,
only in Firefox and Netscape. In IE the navigation has gone vertical
and each tab goes across the page. I loaded it online...
http://www.changeswlc.com. What is with that???
From: Robert O'Rourke [EMAIL PROTECTED]
To: Joanie Mae [EMAIL PROTECTED]
Subject: Re: [css-d] I also have a problem with background color
change on hover
Date: Wed, 29 Mar 2006 17:28:14 +0100
Hi Joan,
You get all kinds of problem when you're changing font-size on
hover but the problem lay in basic.css, you had a padding-top of 4px
on all lis. This css works for FF, not sure about IE but i can't
see that it would be any different:
ul#nav li {
float: left;
height: 27px;
background-color: #AADFE0;
margin: 1px 1px 0 1px; /* this controls the space between tabs */
border: 1px solid #59C0C3;
border-bottom: 0;
padding: 0; /* reset the padding */
}
ul#nav a:link, ul#nav a:visited {
display: block;
color: #BE32FE;
background-color: transparent;
text-decoration: none;
padding: 4px 15px;
height: 19px; /* fix the height to avoid it spilling downwards */
}
Hope that solves the problem.
Robert O'Rourke
Joanie Mae wrote:
I also have a problem with background color change on hover, and the
fix for the problem K. Wilcox had did not work for me.
Perhaps someone can tell me what it is I am not doing correctly. The
hover on this site: http://www.changeswlc.com covers horizontally,
but not vertically.
My navigation code:
ul#nav {
list-style-type: none;
margin: 0;
padding-left: 20px;
padding-bottom: 24px;
font: bold 90% verdana, arial, sans-serif;
}
ul#nav li {
float: left;
height: 21px;
background-color: #AADFE0;
margin: 1px 1px 0 1px; /* this controls the space between tabs */
border: 1px solid #59C0C3;
border-bottom: 0;
}
ul#nav a:link, ul#nav a:visited {
display: block;
color: #BE32FE;
background-color: transparent;
text-decoration: none;
padding: 4px 15px;
}
ul#nav a:hover {
background-color: #BE32FE;
color: #F3F7D4;
font-weight: bold;
font-size: 100%;
}
body#home li.home, body#about li.about, body#tour li.tour,
body#contact li.contact, body#faqs li.faqs, body#coupons li.coupons,
body#members li.members {
border-bottom: 1px solid #fff;
color: #59C0C3;
background-color: #FF;
}
body#home li.home a:link, body#home li.home a:visited,
body#about li.about a:link, body#about li.about a:visited,
body#tour li.tour a:link, body#tour li.tour a:visited,
body#contact li.contact a:link, body#contact li.contact a:visited,
body#faqs li.faqs a:link, body#faqs li.faqs a:visited,
body#coupons li.coupons a:link, body#coupons li.coupons a:visited,
body#members li.members a:link, body#members li.members a:visited {
color: #59C0C3;
font-weight: bold;
background-color: #FFF;
}
I can always just remove the background on the hover, only showing a
change on the font color, but I would really like to know what is my
problem for future projects.
Thanks.
Joan
_
Don't just search. Find. Check out the new MSN Search!
http://search.msn.click-url.com/go/onm00200636ave/direct/01/
__
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/
_
Express yourself instantly with MSN Messenger! Download today - it's
FREE! http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
__
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] css vertical menu that expands down
[EMAIL PROTECTED] wrote: Any recommendations on a CSS menu that can be configured to expand down, pushing other menu items down, so that don't cover the subsequent items? I've done this with CSS alone, but it creates serious usability issue. I'd use PDE [0], as already suggested, or ECMAScript Menu System [1]. As a side note, all navigation links are accessible with PDE, but that can be a pain for people relying on keyboard navigation. Regards, Thierry | www.TJKDesign.com [0] http://onlinetools.org/tools/dom-tree-menu-puredom/ [1] http://juicystudio.com/article/ecmascriptmenu.php __ 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] minimum height in a div
How i can manage a minimum height on a div? __ 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] minimum height in a div
How i can manage a minimum height on a div?
div{
min-height:300px;
}
MSIE does not get this though, so you need to do a
div{
height:300px;
}
htmlbody div{
height:auto;
min-height:300px;
}
As MSIE doesn't grasp the htmlbody selector it won't get the settings.
Other reads:
http://css-discuss.incutio.com/?page=MinWidth
The workarounds are the same for width and height.
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
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] Menu working as expected in Firefox but not IE
Big surprise to the group I'm sure g I have a menu that works as expected in Firefox but I can't get it to work in IE. I have tried everything and searched high and low but nothing. I stripped out everything except what the problem is. Test Page: http://veign.com/preview/menu/menu.html CSS: http://veign.com/preview/menu/style.css Problem: Hover effect doesn't show properly in IE. Also, page needs to stay in a table cell (hands are tied on this one). Chris __ 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] Margins with nested DIVs in FF
Geoffrey Alan Colbath wrote:
Hey all,
I'm looking for some help with funky margin issues in FF. Amazingly
enough, IE is displaying everything just fine. Here's a link to what I'm
working on:
http://www.id.iit.edu/~colbath/StratCon06/about.html
You can see the div with the more... graphic isn't aligning with the
header div. I had to wrap all the little sidebar divs in a container to
solve some other layout issues... and now I'm getting this funky margin.
This may(?) help, at least in FF:
#sideBarContainer {
position: absolute;
/*top: 100px;*/
top: 92px;
left: 588px;
padding: 0 0 0 0;}
In general, using absolute positioning to layout a page, and setting
height on containers, often proves problematic.Same for the tiny pixel
set fonts and line-height. The page should hold font zoom in all
browsers-- even IE. Those good folks at the Illinois Institute of
Technology Institute of Design Strategy (whatever that means) might go
for your page with colors disabled-- I did, and I'm from Chicago, well I
was from there-- they kicked me out.
-=gc=-
Best,
~davidLaakso
--
Typography exists to honor content.
--Robert Bringhurst
http://www.dlaakso.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] CSS to format dl as tabbed pane
At 04:08 PM 3/29/2006, Peter Michaux wrote:
I'd like to learn how to use CSS to display a definition list as a
tabbed pane. I think this would be a nice way to relate the tab and
the content in case the browser is not CSS or the document is being
presented aurally. Any tips on how to do this might get me headed in
the right direction.
Peter,
Here's one way to implement a tab control with DL:
_
Apply styling to change the DL to a tab control only when JavaScript
runs. Run the DTs across the top as your tabs, and show only the one
currently-selected DD below:
_
1) In HTML, make each DT a hyperlink to facilitate accessible
navigation. JavaScript will add the jstabs id to the DL so that
the following CSS will apply only when js executes.
dl id= class=
dt class=item1a href=#item1Coffee/a/dt
dd class=item1Black hot drink/dd
dt class=item2a href=#item2Milk/a/dt
dd class=item2White cold drink/dd
/dl
(These enumerated class names could easily be added by JavaScript.)
_
2) JavaScript initializes by adding the id and the class of the
default (or requested) tab:
dl id=jstabs class=item1
...
_
3) In CSS, lay out the DT tabs as a horizontal row of blocks:
dl#jstabs dt
{
display: block;
float: left;
width: #em;
etc.
}
_
4) Show only the currently selected DD panel:
/* set the DL as the framework for its absolutely-positioned children */
dl#jstabs
{
position: relative;
}
/* default = panels hidden */
dl#jstabs dd
{
position: absolute;
left: -1000em;
width: 999em;
}
/* on-state = panel shows */
dl#jstabs.item1 dd.item1,
dl#jstabs.item2 dd.item2,
dl#jstabs.item3 dd.item3,
etc.
{
left: 0;
top: #em; /* move it down below list of DT tabs */
width: ##em;
etc.
}
_
5) When JavaScript initializes, it assigns the onclick behavior to
the DTs (or their As). The onclick function copies the DT's
className to its parent, replacing any existing item# class in the DL.
_
I've used a method of displaying the current panel by matching class
names between parent and child. An alternative method assigning an
active class to the currently-selected DT DD and remove it from
the previously-selected tab panel. The way I usually do that is to
establish a global variable that points to the object that's
currently selected, so when the next item is selected I can easily
remove the class name from the globally-pointed element without
having to search the list for active.
If either JavaScript or CSS is disabled, the markup will render as a
(vertical) sequence of DT-DD pairs.
If you want the tabs to appear at the beginning like a table of
contents to the panels when JS or CSS aren't active, you'll need to
use another markup structure such as a list of links followed by a
list of panels.
Regards,
Paul
__
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] CSS to format dl as tabbed pane
At 04:56 PM 3/29/2006, Paul Novitski wrote: If either JavaScript or CSS is disabled, the markup will render as a (vertical) sequence of DT-DD pairs. PS: The model I described works in the absence of JavaScript with a server-side script supplying the necessary classNames: __ dl id=jstabs class=item# dt class=item#a href=?item=#Coffee/a/dt dd class=item#Black hot drink/dd ... __ where # is the tab/panel number, suppied by the server-side script. When a tab is clicked, the page reloads, the server-side script supplying the requested item#. Doing so, however, assumes the CSS is enabled. Paul __ 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] CSS to format dl as tabbed pane
Hi Paul, Thanks for the reply. Interesting approach. Is there anyway to avoid this line? top: #em; /* move it down below list of DT tabs */ The reason this causes some grief is I don't know how many rows of tabs might exist or maybe I don't want to add padding to the dt elements without recalculating the top offset for the dd elements. There must be some trick like floating all the dt's to the left and all the dd's to the right with some clever clearing or something. Peter __ 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] css vertical menu that expands down
[EMAIL PROTECTED] wrote: Any recommendations on a CSS menu that can be configured to expand down, pushing other menu items down, so that don't cover the subsequent items? If you want only a pure css-hover for expanding (with collapsing back when mouseout), then for real browsers it can't be so difficult. Quick and dirty testpage http://www.cosbo-amsterdam.nl/tmp/test_vertical_expanding_cssmenu.htm. I guess it will be possible to get it working in IE with the Suckerfish-IE-script, or the csshover.htc method. pro: accessible @nostyle, contra: ugly backflashing submenus, pulling the menu-items with them; not accessible with tab-key. Greetings, francky __ 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] Menu working as expected in Firefox but not IE
http://veign.com/preview/menu/menu.html
Hover effect doesn't show properly in IE. Also, page needs to stay
in a table cell (hands are tied on this one).
You may try adding...
#navbar li a {position: relative;}
...to make it render properly in IE.
You should also make sure it survives with a bit of font-resizing across
browser-land.
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] CSS to format dl as tabbed pane
Peter Michaux wrote: Hi, I'd like to learn how to use CSS to display a definition list as a tabbed pane. I think this would be a nice way to relate the tab and the content in case the browser is not CSS or the document is being presented aurally. Any tips on how to do this might get me headed in the right direction. The definition list would be simple HTML like dl dtCoffee/dt ddBlack hot drink/dd dtMilk/dt ddWhite cold drink/dd /dl Hi Peter, This is something I'm working on right now. Example 2 may be what you're looking for: http://www.tjkdesign.com/articles/TJK_ToggleDL/extension/TJK_1.asp It works in IE5 Mac (it just needs a CC for IE5 Win to move the tabs up a little bit) Regards, Thierry | www.TJKDesign.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] Menu working as expected in Firefox but not IE
Perfect. Thanx
Chris
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
Gunlaug Sørtun
Sent: Wednesday, March 29, 2006 9:19 PM
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Menu working as expected in Firefox but not IE
http://veign.com/preview/menu/menu.html
Hover effect doesn't show properly in IE. Also, page needs
to stay in
a table cell (hands are tied on this one).
You may try adding...
#navbar li a {position: relative;}
...to make it render properly in IE.
You should also make sure it survives with a bit of
font-resizing across browser-land.
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/
__
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] Menu working as expected in Firefox but not IE
Veign wrote:
Big surprise to the group I'm sure g
I have a menu that works as expected in Firefox but I can't get it to work
in IE. I have tried everything and searched high and low but nothing. I
stripped out everything except what the problem is.
Test Page:
http://veign.com/preview/menu/menu.html
CSS:
http://veign.com/preview/menu/style.css
Problem:
Hover effect doesn't show properly in IE. Also, page needs to stay in a
table cell (hands are tied on this one).
Chris
Hi Chris,
1.
Before I try everything and search high and low, sometimes I don't
forget to validate.
The html-validator
http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fveign.com%2Fpreview%2Fmenu%2Fmenu.html
reports there is no charset, and the div is missing the /div end
tag; probably get lost in one of your versions. Surprise! ;-)
What happens after repairing this?
2.
It seems the #mainmenu {height: 30px} is prohibiting the cell/table to
expand giving also troubles in FF when then visitor has scaled up the
fontsize. The fixed height causes the menu-items are coming out of the box.
3.
If you don't have planned dropdown submenu's, the sfHover-script is not
needed, I think: a css-hover is enough. - If you want to make submenus,
then the class .sfhover has to be added in the li-style. See
Suckerfish-article http://www.htmldog.com/articles/suckerfish/dropdowns/.
Greetings,
francky
__
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] Menu working as expected in Firefox but not IE
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of francky
Sent: Wednesday, March 29, 2006 10:20 PM
Hi Chris,
reports there is no charset, and the div is missing the
/div end tag; probably get lost in one of your versions.
Surprise! ;-) What happens after repairing this?
Those were removed by accident when I created the stripped down page.
Stripped a little too much out.
2.
It seems the #mainmenu {height: 30px} is prohibiting the
cell/table to expand giving also troubles in FF when then
visitor has scaled up the fontsize. The fixed height causes
the menu-items are coming out of the box.
Font sizing issues I will be taking care of once I get this bug worked out.
Once I got stuck with this I couldn't get my mind past it.
3.
If you don't have planned dropdown submenu's, the
sfHover-script is not needed, I think: a css-hover is enough.
- If you want to make submenus, then the class .sfhover has
to be added in the li-style. See Suckerfish-article
http://www.htmldog.com/articles/suckerfish/dropdowns/.
You are correct.
Greetings,
francky
Seems the post from Georg resolved the issue (adding #navbar li a {position:
relative;})
Chris
__
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] IE Highlighting Bug
On Wed, 29 Mar 2006 10:14:49 -0800 (PST), Colin Sheaff wrote: As to the 10px font size, this was to tie the text size as much as possible to the graphics of the site. You might like to take a look at graphics text vs. your 10px text with the aid of a magnifier. (The one in Windows that comes under Start All Programs Accessories Accessibility Magnifier will do.) Crank it up to five times or more and notice the difference between the graphics and the regular text. Text created by graphics tools are usually anti-aliased - they have hints of gray around the characters to make them easier to read. The regular content text generally does not. Bottom line - the text created by graphics tools is likely to be easier to read than regular text of the same size. Regular text needs to be larger to compensate for this. Moreover, there is likely much more regular text than graphics text. While I am okay with reading the fine print on a CD cover, I would not want to read a whole magazine printed that small! Cordially, David -- David Hucklesby, on 3/29/2006 http://www.hucklesby.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] AlphaImageLoader creates unwanted gap in IE6/SP1
Kara Szostek wrote:
... On certain pages (but not all), the actual height of
#inner-wrap-mid is 1px taller than it's background image, creating a
sliver between the background image and the image underneath it. This
only happens in IE6/Service Pack 1.
http://grendelfly.com/white-ink-build/text-only2.html
I think you can eliminate the gap by adding...
* html #inner-wrap-mid {padding-bottom: 1px;}
* html #inner-wrap-bot {margin-top: -1px;}
...but the filter will then create a slight, negative,
overlapping-effect on some pages/font-sizes, and it may not work
properly in IE6/SP2.
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/
[css-d] Getting rid of the line under a hyperlinked image
I have image and a text hyperlinked together. In IE only the text is
underlined, but in Firefox Opera, the image is too.
How do I get rid of it?
I took a gamble at
a img{
text-decoration: none;
}
But then realised it's not actually text.
Joanne
__
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] Getting rid of the line under a hyperlinked image
At 11:45 PM 3/29/2006, Joanne wrote:
I have image and a text hyperlinked together. In IE only the text is
underlined, but in Firefox Opera, the image is too.
How do I get rid of it?
Try img { border: none; }
Paul
__
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/
