Re: [css-d] Complete Stylesheet for Each IE Version - No Trickle Down
Melbeach wrote: Each IE version can now be targeted in complete isolation. Another advantage of this approach is that each IE version only has to download one stylesheet, rather than two or three or four, so that's fewer HTTP requests. So I'm wondering if any of the experts here see a problem with doing this. My main concern is that some obscure low-tech browser might see this !--[if !IE]!-- and go into some sort of infinite loop routine, burning up the old cpu. That would definitely be a bug in the browser, not your code, and such a browser would be unlikely to handle common web content. Is there a tool available that would allow me to check that? Nope. You'd have to test: http://browsers.evolt.org/ http://en.wikipedia.org/wiki/List_of_web_browsers -- Benjamin Hawkes-Lewis __ css-discuss [EMAIL PROTECTED] 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] Firefox 3 vs IE7 spacing between links
Hello, I'm having a small issue with spacing between links. I have a series of links in my sidebar (include file) each separated by an underline image. The links are spaced as I would like them in Firefox3, but their further apart in IE7. I've tried to zero the padding and margins, but the gap stays. All of the pages are W3C validated. Any help is greatly appreciated. http://www.pavetosuccess.org/pave/pave3.css (style sheet) http://www.pavetosuccess.org/pave/includes/sidebar.ssi (sidebar include) http://www.pavetosuccess.org/pave/home.html (home page) Thanks, Keith _ Windows Live Hotmail now works up to 70% faster. http://windowslive.com/Explore/Hotmail?ocid=TXT_TAGLM_WL_hotmail_acq_faster_112008 __ css-discuss [EMAIL PROTECTED] 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] Firefox 3 vs IE7 spacing between links
Keith LaFrenier wrote:
help is greatly appreciated.
Hi Keith--
Looks like your images need to be set to display:block.
To test it in IE7, call up your URL and paste this bookmarklet into the
address bar and press enter:
--- Copy and paste content below this line ---
javascript:(function(){a=document.getElementById('services-subcontainer').getElementsByTagName('img');i=a.length;while(i--)a[i].style.display=block;})();
--- Copy and paste content above this line ---
For a more permanent solution, place this rule in your style sheet:
--- Copy and paste content below this line ---
#services-subcontainer img {display:block}
--- Copy and paste content above this line ---
Hope it helps.
Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
css-discuss [EMAIL PROTECTED]
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] inconsistent rendering among compliant browsers
On this page [1] on Mac OS X 10.4.11 there is wild variation of the distance between the top border of the image and the top border of the container. Latest versions of: Opera-- approx 31px Safari/WebKit-- approx 21px (get it right) Camino-- approx 7px FF-- 14px Who gets it right? Or, what's more probable, where have I gone wrong? [1] http://www.chelseacreekstudio.com/ca/cssd/test-66.html -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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] inconsistent rendering among compliant browsers
David Laakso wrote: On this page [1] on Mac OS X 10.4.11 there is wild variation of the distance between the top border of the image and the top border of the container. Latest versions of: Opera-- approx 31px Safari/WebKit-- approx 21px (get it right) Camino-- approx 7px FF-- 14px Who gets it right? Or, what's more probable, where have I gone wrong? [1] http://www.chelseacreekstudio.com/ca/cssd/test-66.html I think it depends on the font metrics. The preceeding p class=c container has a computed height of 144px in Safari, but 136px in Firefox when Helvetica is chosen. Different fonts may give other results. The image in the second container would get a different starting point in y-achsis. regards, Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.com __ css-discuss [EMAIL PROTECTED] 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] inconsistent rendering among compliant browsers
David Laakso wrote: On this page [1] on Mac OS X 10.4.11 there is wild variation of the distance between the top border of the image and the top border of the container. Who gets it right? Or, what's more probable, where have I gone wrong? The problem may not be too obvious but it's actually the line-height of the text in the green bordered box that is the issue. If you set .c to line-height: 18px; just for example then you'll less variation. -Adam Ducker (http://adamducker.com) __ css-discuss [EMAIL PROTECTED] 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] inconsistent rendering among compliant browsers
Ingo Chao wrote:
David Laakso wrote:
On this page [1] on Mac OS X 10.4.11 there is wild variation of the
distance between the top border of the image and the top border of the
container.
Who gets it right? Or, what's more probable, where have I gone wrong?
[1] http://www.chelseacreekstudio.com/ca/cssd/test-66.html
I think it depends on the font metrics. The preceeding p class=c
container has a computed height of 144px in Safari, but 136px in Firefox
when Helvetica is chosen. Different fonts may give other results. The
image in the second container would get a different starting point in
y-achsis.
regards,
Ingo
Bingo! Thanks to Ingo and Adam.
Revision on server:
body {
font : 100%/normal /*helvetica, deleted*/arial, sans-serif;
}
img {
margin : /*-141px*/ -155px 1px 10px 20px;
}
.c {
line-height: 1/*added*/;
}
The above on Mac 10.4 make Opera, Safari, Camino, and WebKit the same.
Firefox has been let to ride the image a little tighter to the top than
the other browsers...
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
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] Firefox 3 vs IE7 spacing between links
David Hucklesby wrote: Of course, if your design includes images that need to display inline, that won't work. So be careful with this. Another possible solution is to declare vertical-align: bottom; on relevant images. David, Vertical-align:bottom doesn't remove the spaces on my IE7/WinXP. The CSS rule I sent through is targeting only the relevant images in his menu, not his entire design. It looks like Keith is using display:block and that seems to solve it. Best, Bill -- ~~~ Bill Brown, MacNimble.com :: From dot concept to dot com since 1999 WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ css-discuss [EMAIL PROTECTED] 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] Firefox 3 vs IE7 spacing between links
On Sun, 09 Nov 2008 09:49:18 -0500, Bill Brown wrote:
Keith LaFrenier wrote:
[...]
Looks like your images need to be set to display:block.
[...]
For a more permanent solution, place this rule in your style sheet:
--- Copy and paste content below this line ---
#services-subcontainer img {display:block}
--- Copy and paste content above this line ---
Of course, if your design includes images that need to display inline,
that won't work. So be careful with this.
Another possible solution is to declare vertical-align: bottom;
on relevant images.
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
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] The best book on CSS of ever: Ingo Chao's Fortgeschrittene CSS Techniken
I've read about 11 books on CSS, but the first book of Ingo Chao really strucked me. This book speaks from the real world point of view, not from an abstract idea of CSS as an ideal tool for separating content from presentation. In this book, Ingo shows various techniques that are hard to find even on the web. Do you know how to create a floated image that will be entirely wrapped by the text of two adjacent columns? Do you know how to create an advanced layout that works even on IE6? Do you know how to make 'display: inline-block work also in IE6? Do you know how to debug your CSS also in standard compliant browsers (yes, even such browsers may have bugs)? The only difficulty of this book is that is all in German, but the examples in the DVD are understandable even for an English speaker. If you're not afraid of German and want to improve your CSS knowledge to the limits, visit http://www.galileocomputing.de/katalog/buecher/titel/gp/titelID-1668?GalileoSession=26288972A3w0sT-sU-Q ^.^ -- http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://mimicry.css-zibaldone.com (Blog) http://www.flickr.com/photos/[EMAIL PROTECTED]/ (Flickr) __ css-discuss [EMAIL PROTECTED] 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] CSS help - IE problems
On Sat, 08 Nov 2008 17:21:24 -0500, Felix Miata wrote: On 2008/11/08 13:12 (GMT-0800) David Hucklesby composed: what Richard Rutter recommended a year ago.[1] [1] http://www.alistapart.com/articles/howtosizetextincss That article was a follow-up designed to expand the damage he did over 3 years previous on his blog: http://clagnut.com/blog/348/ Some damage explained demonstrated: http://www.bergamotus.ws/misc/sensible-css-text-sizing.html http://fm.no-ip.com/SS/Clagnut/bbcnSS.html http://fm.no-ip.com/SS/Clagnut/eonsSS.html ~~~ Thank you so much for pointing out the limitations of using pixel-based font sizes, Felix. I should have done so myself. What I was trying to say is that this is the only way I have found that ensures complete consistency in EM and percentage sizes. Few designs actually need that, so your caution is well-advised. Cordially, David -- __ css-discuss [EMAIL PROTECTED] 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/
