Re: [css-d] menu problems
Jeralyn Merideth wrote:
...Could someone help me figure out why my hover isn't filling up the entire
space of the menu block?
http://216.119.67.187/js/index.htm#
It is difficult to archive such a menu in an inline context.
With setting line-height:2em; for the link, as you did, you don't change
the content's height, but only the line box height. On hover, the
content gets another background, but not the line box.
You can change the content height by applying a small vertical padding,
say 0.5em to the link. This fills the vertical space of the line-box
ul a { padding: 0.5em 1em; line-height: 2em; ... }
But browsers do not align this the same, and content which becomes
taller than its line-height bleeds into the context.
ul { ... overflow: hidden;}
For the horizontal gap between the list entries, remove all
white-space/return between the
\li li
like so
lia href=#Home/a/li
lia href=#About Us/a/li
lia href=#Personal Products/a/li
...
Currently, this seems to break if the font is zoomed or the the line
wraps. js_nav-btn-bg.jpg is just not tall enough. Added an olive
bg-color and removed repeat-y to show the content height. See what
happens if the line wraps on small window sizes, compared in IE vs. Fx.
The tiling and positioning of backgrounds is undefined for inline
elements. A white-space:nowrap does not really help, since it will put a
stop to all the wrapping.
Another difference is noticeable with this version in IE. The list entry
is expanded by the link+padding, this is wrong. But the delimiter, the
white-border, gets taller.
This example is broken in IE-Mac, the hover interacts with other
buttons. I don't know why. Hope someone else sees what I am missing.
http://www.satzansatz.de/cssd/tmp/jsnav.html
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/
Re: [css-d] menu problems
Ingo Chao wrote: This example is broken in IE-Mac, the hover interacts with other buttons. I don't know why. Hope someone else sees what I am missing. http://www.satzansatz.de/cssd/tmp/jsnav.html Updated the file with a IE-Mac hack. It's always good to have a resource that has the solution to all IE-mac problems. http://www.l-c-n.com/IE5tests/phantom-links/ 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/
Re: [css-d] Random Space
Felix Miata wrote: text-align:left/*center*/ Hi Felix, I've googled this intriguing bit of markup and got nothing. Also looked for David's term : 'flush left/scatter right' to no avail. What /exactly/ does it do, and have you got any links to it? Thanks -- Best Regards, Bob McClelland Cornwall (UK) www.gwelanmor-internet.co.uk __ 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] Random Space
Designer wrote: Felix Miata wrote: text-align:left/*center*/ Hi Felix, I've googled this intriguing bit of markup and got nothing. Also looked for David's term : 'flush left/scatter right' to no avail. What /exactly/ does it do, and have you got any links to it? Thanks Hi Designer, It sets the text aligned left, and comments out your original markup. David probably means either text-align: left for flush left and text-align: right for scatter-right. Regards, Rahul. __ 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 problems
Thanks you guys! I could see the background image for hover on both examples of the fixes, but when I added the solutions to my css and rendered my page, all I could see was the olive color on hover and not the original gradient image. Why is this and did I miss something? Thanks again, J Ingo Chao [EMAIL PROTECTED] wrote: Ingo Chao wrote: This example is broken in IE-Mac, the hover interacts with other buttons. I don't know why. Hope someone else sees what I am missing. http://www.satzansatz.de/cssd/tmp/jsnav.html Updated the file with a IE-Mac hack. It's always good to have a resource that has the solution to all IE-mac problems. http://www.l-c-n.com/IE5tests/phantom-links/ 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/ - Do you Yahoo!? Everyone is raving about the all-new Yahoo! Mail Beta. __ 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] container div doesn't grow to hold images
Hi there, I have a problem with a page of a personal page. The url is this: http://www.gritter.org/trouwen/pics.html As you'll see, the pictures are not contained by their parent div. To me it looks like they float but in the css they're not defined as floating... Could anyone tell us what the problem could be? Thanks! Ivar ** __ 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 float bug perhaps-column overlaps footer
Gunlaug Sørtun wrote:
:-)
The usual: IE/win needs its 'hasLayout'[1] trigger.
Add...
#footer {height: 100%;}
...and it'll be fine.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
Thank you Georg. I may have to start sending you royalty checks...you
always seem to have the answer to my questions ;-)
Don
__
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] Horizontal menu continuous background issue
Test page: http://bonjela.si8s.co.uk/menus/alchemyMAmodified/alch-testpage.php. Using Head 1 as an example, on hover the sub-menu appears with the same background color as Head 1. However, if I then move the cursor down over the sub-menu the background of Head 1 reverts to its unhovered state. How do I change this so the backgrounds of Head 1 and the sub-menu remain the same except for the sub-menu item currently hovered over? TIA... Mike A. __ 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] container div doesn't grow to hold images
- Original Message From: Ivar van Duuren [EMAIL PROTECTED] I have a problem with a page of a personal page. The url is this: http://www.gritter.org/trouwen/pics.html As you'll see, the pictures are not contained by their parent div. To me it looks like they float but in the css they're not defined as floating... - Hi Ivar, You've got markup errors on this page. See http://validator.w3.org/check?uri=http%3A%2F%2Fwww.gritter.org%2Ftrouwen%2Fpics.html /br / should be br / See if fixing those helps... Looks like it was a nice wedding. Congratulations! -Ann __ 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 Formatting
Hi guys, Michael Geary of the jQuery list suggested I continue a discussion I started there on this list related to CSS. Essentially, I created a set of CSS Formatting guidelines designed to get designers to create readable CSS that other designers could quickly get up to speed on. The spec is available in PDF form at http://www.yehudakatz.com/CSSf-1-5-1-Spec.pdf. An example stylesheet formatted almost 100% according to the CSSf spec is available at http://www.yehudakatz.com/sample.css. I say almost 100% because I'm using it in a production setting, and I've changed the spec somewhat after a spirited conversation on the jQuery list. I also use a Ruby on Rails implementation of Sean Inman's SSC, which definitely further simplifies the CSS and makes it more readable. You can take a look at the SSC structure at http://paste.css-standards.org/1500. I'm not sure how long those pastebins last. -- Yehuda Katz Web Developer (ph) 718.877.1325 (fax) 718.686.4288 __ 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] container div doesn't grow to hold images
Do this: Add overflow: hidden and margin-left: 0 to your #right div. -- Yehuda Katz On 7/16/06, Ann Adamcik [EMAIL PROTECTED] wrote: - Original Message From: Ivar van Duuren [EMAIL PROTECTED] I have a problem with a page of a personal page. The url is this: http://www.gritter.org/trouwen/pics.html As you'll see, the pictures are not contained by their parent div. To me it looks like they float but in the css they're not defined as floating... - Hi Ivar, You've got markup errors on this page. See http://validator.w3.org/check?uri=http%3A%2F%2Fwww.gritter.org%2Ftrouwen%2Fpics.html /br / should be br / See if fixing those helps... Looks like it was a nice wedding. Congratulations! -Ann __ 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/ -- Yehuda Katz Web Developer (ph) 718.877.1325 (fax) 718.686.4288 __ 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 validation question
When I'm validating my CSS, I keep getting warnings such as listed below using the W3C validation service: - Line : 5 (Level : 1) You have no color with your background-color : body - Line : 11 (Level : 1) You have no color with your background-color : #content - Line : 29 (Level : 1) You have no background-color with your color : h2 - Line : 36 (Level : 1) You have no background-color with your color : #text - Line : 55 (Level : 1) You have no background-color with your color : #nav In each of these instances I DO have the color attritubes identified with a hex code, and the respective element validates later in the results. I'm confused! Am I missing something here? Thanks, Peg __ 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 validation question
Hi Peggy, Can you send a link to the page? Riva Peggy Coats wrote: When I'm validating my CSS, I keep getting warnings such as listed below using the W3C validation service: - Line : 5 (Level : 1) You have no color with your background-color : body - Line : 11 (Level : 1) You have no color with your background-color : #content - Line : 29 (Level : 1) You have no background-color with your color : h2 - Line : 36 (Level : 1) You have no background-color with your color : #text - Line : 55 (Level : 1) You have no background-color with your color : #nav In each of these instances I DO have the color attritubes identified with a hex code, and the respective element validates later in the results. I'm confused! Am I missing something here? Thanks, Peg __ 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 validation question
Peggy Coats wrote:
When I'm validating my CSS, I keep getting warnings such as listed below
using the W3C validation service:
- Line : 5 (Level : 1) You have no color with your background-color :
body
- Line : 11 (Level : 1) You have no color with your background-color :
#content
- Line : 29 (Level : 1) You have no background-color with your color :
h2
- Line : 36 (Level : 1) You have no background-color with your color :
#text
- Line : 55 (Level : 1) You have no background-color with your color :
#nav
In each of these instances I DO have the color attritubes identified with a
hex code, and the respective element validates later in the results. I'm
confused! Am I missing something here?
Hi Peggy,
I think I know what is happening. The css-validator loves to see pairs
of colors and background colors. So if you give a background color in
the body (line 5), and the text color in a #text container (line 36), it
is giving 2 warnings. For the body that the text on body level has no
color defined, for the #text that the background on #text level has no
background color! The ratio of this is in short: be aware that the
contrast between the letter colors and the background is enough for
accessibility at each level. It can happen when you have no good pairs,
that changing the color of a background can make the text invisible in a
page (or dynamically changed containers) far away from the stylesheet.
Also personal browser preferences of a visitor can make things invisible
or hard to read, if txt and bg are not in pairs.
But the validator warnings are not completely waterproof:
* There can be a warning while the contrast is ok. - Probably in
your case. You can give each bg-color a concrete txt-color (and
v.v.), the easy way I often do it, is to add {color: inherit;} or
{background: inherit;} I'm quick finished, the validator is happy.
* There can be no warning, while the contrast is very bad. - For
instance a dark grey letter on a black background. And even when
there is only 1 of 256 point difference on the hue scale, the
validator sees aha, different, no warning needed. As I am not an
eagle, in this case I can see only a background without any text...
So an optical check is always needed too (try on different monitors, the
differences can be enornous!).
Illustration: greyscale with contrast values
http://home.tiscali.nl/developerscorner/css-discuss/images/greyscale.gif.
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/
[css-d] Internal Anchor Tag Breaks Layout in FF
I started learning CSS a few months ago so I'm still very much a beginner at this. The problem I'm having can be see at http://www.erotophilia.com/July2006/brokenlayout.html When any of the anchor links on top are clicked, the page layout breaks in FF, but seems to work find in IE. This is a fairly simple page so I'm hoping the problem is also a simple fix. I would greatly appreciate any help or suggestions in how to debug this. Thanks! ~Amy __ 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/
