[css-d] Review site for IE
Please review the following site in IE 6. http://www.kucia.com/kucia/sua/ I am able to test in Mac FF, Safari and Opera as well as Windows IE 7. Would like to get feedback in IE 6 environment. Noticed on IE 6 render site that IE 6 stacks the main nav. Any feedback would be great. Thanks, Eric __ 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 pseudo-class unusual behavior in Webkit
I've encountered something that I haven't been able to resolve concerning Safari/Chrome rendering. It originated in a post on MS's EW2 forum. Here's the original: After much experimentation and blind guessing, I modified some code from CSSplay (which I will credit in my html once I get this resolved) to make small images in a side column enlarge when hovered over. It works great in IE7 and FF. I can live with it not working in IE6, and I haven't tried Opera yet (just downloaded it) but I found out that Safari and Chrome don't work. Error console doesn't show any problems, and the small pics show just fine, but there is no zoom feature. Look at the pics here: http://www.fcphd.org/community.html I checked it out in FF3.0.6, IE7, and Opera 9.something, and the zoom works fine in all three. However, it does not work at all in either of the Webkit-based browsers. I looked at the markup and the CSS and can't see anything wrong, and Firescope's reference shows the :hover pseudo-class as fully supported in all versions of Safari. Has anyone encountered anything similar in Webkit-based browsers? I read something somewhere that they do have a problem with negative z-indexes, but that's moot in this case. This isn't really my problem, but it's got my curiosity aroused, and this guy's gone to a lot of trouble as a novice to try to troubleshoot it on his own, so I'd kinda like to see if I can locate a solution for him, if possible. Thanks. cheers, scott __ 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 pseudo-class unusual behavior in Webkit
Scott Glasgow wrote: I've encountered something that I haven't been able to resolve concerning Safari/Chrome rendering. It originated in a post on MS's EW2 forum. Here's the original: After much experimentation and blind guessing, I modified some code from CSSplay (which I will credit in my html once I get this resolved) to make small images in a side column enlarge when hovered over. It works great in IE7 and FF. I can live with it not working in IE6, and I haven't tried Opera yet (just downloaded it) but I found out that Safari and Chrome don't work. Error console doesn't show any problems, and the small pics show just fine, but there is no zoom feature. Look at the pics here: http://www.fcphd.org/community.html cheers, scott You may want to check your version against Nicholls. I did not take the time to do so. The one I looked at [1] works fine (if you like that sort of thing ;-) ) in XP IE 6/7, on Mac OS 10.4.11 in the latest versions of Opera, FF, Safari, and WebKit... [1] http://www.cssplay.co.uk/menu/gallery.html -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.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] Font-color issue
Hi Link: http://ikjensen.dk/test/ In the bottom right corner I've have a Note-box. In IE6.x I can only see the headline ok, the rest of the text is blurred. The headline and text looks ok in FF 2.x, OP 9.5 and Safari 3.x. I've tried to change colors, without any result. -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ 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] Font-color issue
Els wrote:
Ib Jensen wrote:
Link: http://ikjensen.dk/test/
It's not the colour, it's the size. Up the size a bit, and the blur
will disappear. If you look at the body text, that's also smaller in
IE than in FF.
Just noticed you have this in your layout.css stylesheet:
html body{font-size:12px;}
IE6 doesn't pick that up, and it makes all the difference. If you take
that line out, FF also makes the text smaller and blurs that bit under
'Note'.
I'd take that line out, and up the main text from 80% to 100% in your
basis.css stylesheet.
--
Els
__
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] Font-color issue
2009/2/12, Els el...@tiscali.nl:
Els wrote:
Ib Jensen wrote:
Link: http://ikjensen.dk/test/
It's not the colour, it's the size. Up the size a bit, and the blur
will disappear. If you look at the body text, that's also smaller in
IE than in FF.
Just noticed you have this in your layout.css stylesheet:
html body{font-size:12px;}
IE6 doesn't pick that up, and it makes all the difference. If you take
that line out, FF also makes the text smaller and blurs that bit under
'Note'.
I'd take that line out, and up the main text from 80% to 100% in your
basis.css stylesheet.
Shouldn't bee 100.01% or 100.1%, as many suggests in favor of rounding errors ?
--
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
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] Font-color issue
Ib Jensen wrote: Shouldn't bee 100.01% or 100.1%, as many suggests in favor of rounding errors ? Must be nearly a decade since rounding errors on font-size: 100% created problems in a browser. Not that it hurts to add .1 to it, but it won't make a difference anywhere. As have been pointed out: having font-size: 80% on body, followed by font-size: 0.83em on #notizen p, means it isn't much font-size left anywhere in there. Simple font resizing doesn't seem to be enough in IE. Guess it was such cases Microsoft had in mind when they added ignore font size in web pages as an option in IE - a long time ago, while other browsers introduced minimum font size to counteract mouse-type. All you achieve by using such small text is that many visitors either can't read your words of wisdom, or have to override your font size in order to read it. FYI: I apply minimum font size = 14px to all web pages, and if the choice of font-family causes problems I change that to 16px - on 96dpi screens. Since you also have an em-sized layout I also find it necessary to apply fit to width to your page to make it stay within the browser window, so I don't have to deal with long text lines and horizontal scrollbars. The information on your pages is too interesting to be left unreadable, and Danish isn't a problem at my end ;-) regards Georg -- http://www.gunlaug.no __ 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] Font-color issue
2009/2/13, Gunlaug Sørtun gunla...@c2i.net: Ib Jensen wrote: Guess it was such cases Microsoft had in mind when they added ignore font size in web pages as an option in IE - a long time ago, while other browsers introduced minimum font size to counteract mouse-type. All you achieve by using such small text is that many visitors either can't read your words of wisdom, or have to override your font size in order to read it. FYI: I apply minimum font size = 14px to all web pages, and if the choice of font-family causes problems I change that to 16px - on 96dpi screens. Since you also have an em-sized layout I also find it necessary to apply fit to width to your page to make it stay within the browser window, so I don't have to deal with long text lines and horizontal scrollbars. The information on your pages is too interesting to be left unreadable, and Danish isn't a problem at my end ;-) Something tells me that, instead of trying to modyfie some templates, I'll should try to build at least the css-part up from scratch, maybe keeping some of it, using this template from Manuela Hoffmann, which I kind of like. -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ 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 pseudo-class unusual behavior in Webkit
On Feb 13, 2009, at 4:59 AM, Scott Glasgow wrote:
After much experimentation and blind guessing, I modified some code
from
CSSplay (which I will credit in my html once I get this resolved) to
make
small images in a side column enlarge when hovered over. It works
great in
IE7 and FF. I can live with it not working in IE6, and I haven't
tried Opera
yet (just downloaded it) but I found out that Safari and Chrome
don't work.
Error console doesn't show any problems, and the small pics show
just fine,
but there is no zoom feature.
Look at the pics here: http://www.fcphd.org/community.html
I checked it out in FF3.0.6, IE7, and Opera 9.something, and the
zoom works
fine in all three. However, it does not work at all in either of the
Webkit-based browsers. I looked at the markup and the CSS and can't
see
anything wrong, and Firescope's reference shows the :hover pseudo-
class as
fully supported in all versions of Safari.
WebKit based browsers still seem to have a problem changing the
display property on :hover.
You have 2 options:
1/ remove it:
.zoom:hover {
...
/* display:block */ /* -- remove */
...
}
or
2/ declare the display property in the .zoom ruleset:
.zoom {
...
display:block /* --- add */
...
}
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/
Re: [css-d] :hover pseudo-class unusual behavior in Webkit
- Original Message - From: David Laakso To: Scott Glasgow Cc: CSS-D List Sent: Thursday, February 12, 2009 3:59 PM Subject: Re: [css-d] :hover pseudo-class unusual behavior in Webkit Scott Glasgow wrote: I've encountered something that I haven't been able to resolve concerning Safari/Chrome rendering. It originated in a post on MS's EW2 forum. Here's the original: After much experimentation and blind guessing, I modified some code from CSSplay (which I will credit in my html once I get this resolved) to make small images in a side column enlarge when hovered over. It works great in IE7 and FF. I can live with it not working in IE6, and I haven't tried Opera yet (just downloaded it) but I found out that Safari and Chrome don't work. Error console doesn't show any problems, and the small pics show just fine, but there is no zoom feature. Look at the pics here: http://www.fcphd.org/community.html cheers, scott You may want to check your version against Nicholls. I did not take the time to do so. The one I looked at [1] works fine (if you like that sort of thing ;-) ) in XP IE 6/7, on Mac OS 10.4.11 in the latest versions of Opera, FF, Safari, and WebKit... [1] http://www.cssplay.co.uk/menu/gallery.html -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ Hmm, I see what you mean. He's made quite a few changes, no gallery or anchor containers, etc. Makes it a little difficult to compare what Jim did to the original Nicholls' markup. Well, he did say experimentation and blind guessing, so I guess it's not surprising that they are significantly different. What gets me is that his .zoom and .zoom:hover rules, while simpler, do seem to be appropriate to the purpose, and they do work in browsers not based on Webkit. Opera, IE, and Firefox all have no problem with it. I wonder what it is about the Webkit browsers that keeps that CSS from succeeding, while it works fine in the IE, FF, and Opera engines... cheers, scott __ 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 pseudo-class unusual behavior in Webkit
Scott Glasgow wrote: What gets me is that his .zoom and .zoom:hover rules, while simpler, do seem to be appropriate to the purpose, and they do work in browsers not based on Webkit. Opera, IE, and Firefox all have no problem with it. I wonder what it is about the Webkit browsers that keeps that CSS from succeeding, while it works fine in the IE, FF, and Opera engines... cheers, scott Follow Philippe. Then make the rest of that site simple and sexy, too. All will be well... As ever, Quasimodo -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.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] :hover pseudo-class unusual behavior in Webkit
Philippe Wittenbergh wrote:
On Feb 13, 2009, at 4:59 AM, Scott Glasgow wrote:
Look at the pics here: http://www.fcphd.org/community.html
WebKit based browsers still seem to have a problem changing the
display property on :hover.
A working variant, tailored to your layout, is to replace .zoom and
.zoom:hover styles with the following...
.zoom {
position:relative;
float: left;
margin: 0 0 4px 5px;
}
.zoom:hover {
width: 336px;
height: 252px;
border: 2px solid #ff;
z-index:10;
margin: 0 0 -166px -217px;
}
...which will do away with the horizontal scrollbar caused by relative
positioning that appears on :hover.
The above also eliminates the varying length of #right_col that pushes
#footer down on :hover. If you want that push effect - to keep all
reduced size images visible also during :hover, you can modify the
.zoom:hover margin...
.zoom:hover {
margin: 0 0 4px -217px;
}
...and then pull up the bottom margin on #right_col...
#right_col {
float: right;
width: 125px;
text-align: center;
margin-bottom: -220px;
}
...to keep it from pushing the #footer.
FYI: Whatever;hover...
http://www.xs4all.nl/~peterned/csshover.html
...can bring IE6 in on the game - if you like.
regards
Georg
--
http://www.gunlaug.no
__
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/
