[css-d] IE7 dosen't show white background when menu item is hovered
Hi all, it's been a long time since my last presence here (maybe 2 years?), but I'm here again to share with you an issue I have with IE7. I prepared for a friend of mine a simple design and the result can be found in www.illuogo.org/roi/. I wrote the main html structure and the css, my friend later added some html-embedded css (for example that related to the background in the home page) and the text content. Please note that some of the css (and structure) was copied from another website I prepared some time ago (www.beatrizlozano.com); I'm saying this because the navigation menus are practically identical on both sites! You'll later understand why I'm mentioning this thing. Now the issue. On my friend's website the menu's item background colour is white when it is hovered (main.css) and it is correctly shown on FF and IE6, but with my complete surprise it is not shown in IE7. Yesterday I spent my time to find an explanation for this strange behaviour also because the hover has been worked on the other site. I positively checked with IE Developer Toolbar that the #fff value for background-color was set in IE7, but the colour kept on being black. After having tried different possible solutions (position: relative for the list items, background-color: #fff !important just for IE7, etc.) without any success, having considered that the only difference with the working website, I eventually changed the background colour to #ffe (almost a white) and it works! You can see that in ie7.css (and so only in IE7) the hovered menu items have an almost white background. I have no idea why IE7 behaves in that way. I'm happy with the solution I've found, but I thought you would like to know about this issue. If you have a valid explanation, please let me know. Thanks. Regards, Paolo PS Please, don't pay attention to the css layout for the printer, it has to be fixed! __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 dosen't show white background when menu item is hovered
Hi all, it's been a long time since my last presence here (maybe 2 years?), but I'm here again to share with you an issue I have with IE7. I prepared for a friend of mine a simple design and the result can be found in www.illuogo.org/roi/. I wrote the main html structure and the css, my friend later added some html-embedded css (for example that related to the background in the home page) and the text content. Please note that some of the css (and structure) was copied from another website I prepared some time ago (www.beatrizlozano.com); I'm saying this because the navigation menus are practically identical on both sites! You'll later understand why I'm mentioning this thing. Now the issue. On my friend's website the menu's item background colour is white when it is hovered (main.css) and it is correctly shown on FF and IE6, but with my complete surprise it is not shown in IE7. Yesterday I spent my time to find an explanation for this strange behaviour also because the hover has been worked on the other site. I positively checked with IE Developer Toolbar that the #fff value for background-color was set in IE7, but the colour kept on being black. After having tried different possible solutions (position: relative for the list items, background-color: #fff !important just for IE7, etc.) without any success, having considered that the only difference with the working website, I eventually changed the background colour to #ffe (almost a white) and it works! You can see that in ie7.css (and so only in IE7) the hovered menu items have an almost white background. I have no idea why IE7 behaves in that way. I'm happy with the solution I've found, but I thought you would like to know about this issue. If you have a valid explanation, please let me know. Thanks. Regards, Paolo PS Please, don't pay attention to the css layout for the printer, it has to be fixed! PS 2 I've already sent this message to the list, but I think was refused because I (sorry) forgot to disable html formatting. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Creating css Tables with vertical text
2009/5/30 Wade Smart wadesm...@gmail.com: 20090530 1600 GMT-5 Im wanting to create a table to hold the soccer states for the adult league (I play in). Im using a table to hold the data but, Im short on horizontal space so I wanted to turn the text from horizontal to say almost vertical on its side -- like in a spreadsheet. Current CSS recommendations don't provide any way to achieve this. You'll need to look to CSS 3 drafts or SVG - neither of which enjoys a great deal of support on the WWW. (The other option is pictures of text) -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Creating css Tables with vertical text
David Dorward wrote: 2009/5/30 Wade Smart wadesm...@gmail.com: 20090530 1600 GMT-5 Im wanting to create a table to hold the soccer states for the adult league (I play in). Im using a table to hold the data but, Im short on horizontal space so I wanted to turn the text from horizontal to say almost vertical on its side -- like in a spreadsheet. Current CSS recommendations don't provide any way to achieve this. You'll need to look to CSS 3 drafts or SVG - neither of which enjoys a great deal of support on the WWW. (The other option is pictures of text) 20090531 0945 GMT-5 Pictures are what I was thinking but, I wasn't sure if anyone had come up with a better way. Thanks.. Pictures it is. Wade -- Registered Linux User: #480675 Linux since June 2005 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Creating css Tables with vertical text
Im wanting to create a table to hold the soccer states for the adult league (I play in). Im using a table to hold the data but, Im short on horizontal space so I wanted to turn the text from horizontal to say almost vertical on its side -- like in a spreadsheet. Anyone doing this, ..,done this? I did some searching but Im not getting the right search time down as Im getting results but its not what Im looking for. In IE you can use writing-mode: writing-mode:tb-rl; -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, particularly on ie6 ?
yes yes, i know. but that will break my background image. that's what i
was trying to say before: the only reason i used overflow:hidden is that
it somehow made the bg work (what i'm talking about visually is that the
main/middle section of that vertical silver divider line).
i see now that this was the wrong way to get the image to tile; what's
the right way?
thanks!
josh
David Laakso wrote:
snak detek+0r wrote:
trimmed
actually, since i got to check this on ie6 today, i did notice a huge
problem (perhaps better asked under separate cover; not sure?). the
problem can be easily seen here:
http://tinyurl.com/nd27cr
IE/6 does not support min-height and is honoring height:500px;
The correction is to let content determine height. Compliant browsers,
and IE/7 will all go along with this; and, IE/6 will follow suit.
#content { border: 1px solid red (4 position only--delete);
width:580px;
overflow:hidden;
margin: 0 0 0 190px;
min-height:500px (delete rule);
height:auto !important (delete rule);
height:500px (delete rule);
}
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning select option text segments
Also, can anything else apart from text be placed within option tag? E.g. an image? All but text seems to be ignored by the browser. Regards, Stevo. On Fri, May 29, 2009 at 10:51 AM, Stevo Slavić ssla...@gmail.com wrote: Hello CSS'ers, Is it possible to align one part of the select option text with left edge, and the other part with right edge? I've tried several things, segmenting option text with div's and span's, but it seems that anything put within option besides text is simply ignored by the browser. Regards, Stevo. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, particularly on ie6 ?
snak detek+0r wrote: yes yes, i know. but that will break my background image. that's what i was trying to say before: the only reason i used overflow:hidden is that it somehow made the bg work (what i'm talking about visually is that the main/middle section of that vertical silver divider line). i see now that this was the wrong way to get the image to tile; what's the right way? thanks! josh Seems to tile fine in all my browsers, including IE 6/7/8, leaving it where you had it, on #container. Please see: http://chelseacreekstudio.com/ca/cssd/snak.htm What browser on your end does not tile it as you intend? PS Please bottom post in reply __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, particularly on ie6 ?
snak detek+0r wrote:
trimmed
actually, since i got to check this on ie6 today, i did notice a huge
problem (perhaps better asked under separate cover; not sure?). the
problem can be easily seen here:
http://tinyurl.com/nd27cr
IE/6 does not support min-height and is honoring height:500px;
The correction is to let content determine height. Compliant browsers,
and IE/7 will all go along with this; and, IE/6 will follow suit.
#content { border: 1px solid red (4 position only--delete);
width:580px;
overflow:hidden;
margin: 0 0 0 190px;
min-height:500px (delete rule);
height:auto !important (delete rule);
height:500px (delete rule);
}
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, particularly on ie6 ?
That's good to know. I guess it's not surprising; it is, however, rather disconcerting. My basic instinct is to set the base at 10px, simply so i can work in units that I'm used to. If everything is multiples of ten it makes ems a much more intelligible unit too. I guess I've been going about this all wrong all along. Better late then never, though! Felix Miata wrote: On 2009/05/30 09:45 (GMT-0700) David Hucklesby composed: FWIW - I have set a modest minimum font size of 12px on my browsers. My primary browser, Opera 9.6 on Mac, scales up _all_ fonts on pages that have the seemingly popular 62.5% font-size set on BODY. It amazes me how many pages break with that slight increase. :( .625 * 16 is 10. 12 is 120% of 10. I wouldn't call 20% particularly slight in a context where people notice as little as 1px differences. My minimum font sizes vary between 15px 18px depending on resolution and default setting (between 20px 24px). Few 62.5% body pages fail to at least partially disintegrate for me unless I make them useless by disabling minimum font size. :-( Good thing modern browsers allow to disable styles entirely. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 dosen't show white background when menu item is hovered
Paolo Candelari wrote:
I prepared for a friend of mine a simple design and the result can be
found in www.illuogo.org/roi/.
Now the issue. On my friend's website the menu's item background
colour is white when it is hovered (main.css) and it is correctly
shown on FF and IE6, but with my complete surprise it is not shown in
IE7.
Thanks.
Regards,
Paolo
The styles for the navigation in the conditional comments are not needed
and can be deleted.
Re-set the styles in the style sheet for the ul, ul li, ul li a, and the
hover, focus, active states to readt:
#navigation ul
{background-color: transparent;
text-align: left;
margin-left: 0;}
#navigation ul li { display: block;
float: left;
}
#navigation ul li a {
display: block;
padding: 5px 7px;
margin: 0 5px 0 0;
text-decoration: none;
color: #fff;
background: transparent;
font-weight: bold;}
#navigation ul li a:hover,
#navigation ul li a:focus,
#navigation ul li a:active {
background: #fff!important;
color: #000; }
The hasLayout [1] trigger for IE/ 7.0 is zoom: 1;
/* - Hack only for IE 7 - */
*+html #navigation ul li a:hover,
*+html #navigation ul li a:focus,
*+html #navigation ul li a:active { zoom: 1; }
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, particularly on ie6 ?
David Laakso wrote:
...
IE/6 does not support min-height and is honoring height:500px;
The correction is to let content determine height. Compliant browsers,
and IE/7 will all go along with this; and, IE/6 will follow suit.
#content { border: 1px solid red (4 position only--delete);
width:580px;
overflow:hidden;
margin: 0 0 0 190px;
min-height:500px (delete rule);
height:auto !important (delete rule);
height:500px (delete rule);
}
Oh, I understand what you're suggesting now. And yes, that doesn't
interfere with my tiling background. But it does end up with certain
pages looking a little silly:
http://tinyurl.com/mfyyuf
That's why I started using that min-height hack in the first place. Sure
you can just add line breaks, but since this is a CMS site, I'd like to
give the client something that is easier to use than that.
Isn't there an easier way? Or perhaps the question is: is there a better
way of achieving min-height? Or perhaps the best I'm going to get is to
make ie6 just work, and no more, while the other browsers will
actually work AND look good.
...josh
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, particularly on ie6 ?
On 2009/05/31 18:14 (GMT-0400) snak detek+0r composed: My basic instinct is to set the base at 10px, simply so i can work in units that I'm used to. If everything is multiples of ten it makes ems a much more intelligible unit too 10 does seem easy on the surface, as most of us are used to using metric values by now, it's preached by the Clagnut 62.5% article and its progeny, and practiced by a lot of sites, including some biggies. However, puters aren't so happy with base 10 as with base 2. When they need to divide 10px by 3, 4 or 6, they get fractions, which the browsers typically handle not too consistently. It's not as big a problem if you use the default default font size (1em=16px) as the base. That em is evenly divisible by 2, 4, 8 16, so you can work in 1/4's (.25), 1/8's (.125) /or 1/16's (.0625) and always be working in whole px. -- A fool gives full vent to his anger, but a wise man keeps himself under control. Proverbs 29:11 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Inline headers?
Is there a way to get the following visual style: *This is the header* This is the rest of the paragraph here. As you can see the header is inline visually. Visually, this works by setting the h2 to be inline. [p][h2]header[/h2] etc etc[/p] But is invalid. The valid solution I came up with is this: [div] [h4 style=display: inline]This is the header [/h4] [p style=display: inline]This is the paragraph here let's see how long we can make it blah blah blah.[/p] [/div] That works visually, but does require the extra DIV. Not a huge deal in most cases, but I won't be maintaining the site so am trying to reduce redundant or necessary markup wherever I can. Is there a valid method to create the layout I am after without adding HTML elements to the markup? -DA __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, particularly on ie6 ?
Index and all inside pages: Neither Opera or The IEs are capable of scaling line-height set in pixels. Try a raw number for line-height. wow. didn't even know i could do that. the w3 site doesn't even mention that you can use px, but everyone and their mom seem to, including ALA, some grid-layout people, etc. sheesh. i normally use em, when starting from scratch, but apparently that's wrong too? No, 'em' for line-height isn't wrong. The resulting line-height is just calculated different from when raw numbers are used. For line-height:'em' values gives line-heights based on actual font-size for an element's parent, which is ok if that's what you want. When raw numbers (no unit) are used, line-height is calculated from actual font-size of the element itself, which in most cases gives the best result. Since I'm still trying to get my mind around this (and the w3 rules are quite hard to parse IMO), I was just playing around with my own styles when I noticed that the original base line-height value for this project was set using %: font-size: 100%; This is taken directly from Eric Meyer's reset stylesheet http://meyerweb.com/eric/tools/css/reset/index.html And I always assume he knows what he's doing. Since he's also not changing the font size (100% pretty much means say the same), is this rule simply included to dictate the way line-height is calculated on descendants? josh __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, particularly on ie6 ?
snak detek+0r wrote: Oh, I understand what you're suggesting now. And yes, that doesn't interfere with my tiling background. But it does end up with certain pages looking a little silly: http://tinyurl.com/mfyyuf Nothing silly about that page in my humble opinion. The page is short because there is not much content on it. If you want it, and other pages that may have little content, to appear deeper-- get creative and add a generic image beneath the text of same. And if you are really concerned with what is truly silly consider your content text is clipped on the right side of pages whose text runs deeper than that short page; and, that landing on pages whose horizontal and vertical navigation is larger or more important than the primary content text that is set as mousetype is a real PITA. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, particularly on ie6 ?
On 2009/05/31 19:19 (GMT-0400) snak detek+0r composed: Since I'm still trying to get my mind around this (and the w3 rules are quite hard to parse IMO), I was just playing around with my own styles when I noticed that the original base line-height value for this project was set using %: font-size: 100%; This is taken directly from Eric Meyer's reset stylesheet http://meyerweb.com/eric/tools/css/reset/index.html And I always assume he knows what he's doing. Since he's also not changing the font size (100% pretty much means say the same), is this rule simply included to dictate the way line-height is calculated on descendants? Nothing to do with line-height, just insurance against IE bugs: http://css-discuss.incutio.com/?page=InternetExplorerWinBugs -- A fool gives full vent to his anger, but a wise man keeps himself under control. Proverbs 29:11 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Inline headers?
D A wrote:
Is there a way to get the following visual style:
*This is the header* This is the rest
of the paragraph here. As you can
see the header is inline visually.
Visually, this works by setting the h2 to be inline.
-DA
Yes, like this...
!DOCTYPE HTML
html lang=en
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
meta name=generator content=HTML Tidy for Windows (vers 1st January
2002), see www.w3.org /
titleUS STEEL/title
style type=text/css
body { font : 100%/normal georgia, serif; background: #fff; color:
#000; margin: 0; padding: 0;}
h1, p {font-size: 100%;display:inline;margin: 0; }
p {margin-left: 5px;}
/style
/head
body
div
h1US Steel/h1pthe best steel manufactured world wide, and then
some.../p
/body
/html
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Inline headers?
On Jun 1, 2009, at 8:14 AM, D A wrote:
s there a way to get the following visual style:
*This is the header* This is the rest
of the paragraph here. As you can
see the header is inline visually.
Visually, this works by setting the h2 to be inline.
In theory you could use
h2 {display:run-in;}
http://www.w3.org/TR/CSS21/visuren.html#run-in
but that is not supported by Firefox 3, 3.5b4 and IE 6 7.
Another option eventually:
h2 {float:left; margin: 0; }
h2headlineh2
pmy paragraph text that is quite long and should kinda wrap around
around the H2/p
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] hover nav bg?
Hi all, This is going to sound incredibly stupid. I just think my mind is giving up. I have a background image for my entire navigation bar (vertical). Then, I also have an image that is for each menu item hover: http://fossilbyte.com/1/images/arrowhead.gif (I know that it appears really rough around the edges, need to try and work that one out, too) Problem is that only a small section of the hover image appears: http://fossilbyte.com/1/template.html Right now it's only showing up for items 2 4. Trying to figure out why not on the other items, but will get to that problem once this one's solved! Thanks all. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hover nav bg?
Jenni Beard wrote: [...] I have a background image for my entire navigation bar (vertical). Then, I also have an image that is for each menu item hover: http://fossilbyte.com/1/images/arrowhead.gif (I know that it appears really rough around the edges, need to try and work that one out, too) Problem is that only a small section of the hover image appears: http://fossilbyte.com/1/template.html [...] The arrowhead appears on hover just fine this end (Mac). On what platform and browser / version are you having a problem? (Although I could guess...) :\ The main text is unreadable when it is enlarged. It overflows the background image onto an overflow area that is black. Perhaps you could add a mid-section with a background-image that tiles vertically to accommodate larger text, and allow the content determine the height. If I substitute Arial (your second choice) for Verdana (your first) then strange things happen to the left side as well. As Arial is smaller than Verdana, the shark appears much higher, and the speech bubble is covered by the nav background parchment scroll image. If this is confusing, simply change the text size in your browser - unless it is any version of Internet Explorer, where your pixel sized fonts don't allow changes to font size beyond ignore specified font sizes from the accessibility options. Use Firefox or Safari or Chrome... Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
