[css-d] IE7: Non-floated h2 next to floated element
Hey everyone. I have been looking at this issue for far too long, and I'm hoping that one of you can save me. The website I'm working on is here: http://superluxefibers.com/dev/blog/. The issue is in IE7. The first blog post shows the h2 correctly lines up next to the div containing the date. However, in the 2nd post, the alignment has changed, and the h2 element appears to be clearing the div containing the date, and it is not expanding to fill the containing div. Can anyone help me figure out what's wrong? Thanks! Valerie Wininger www.21rubylane.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] css validation help
Alan Gresley wrote: Erik Vorhes wrote: On Fri, Jul 17, 2009 at 1:29 AM, Alan Gresleya...@css-class.com wrote: The best way is to only hack IE7 or lower since all modern browsers (including IE8) should render a page the same way. I would not recommend hacking your HTML with IE Conditional comments since they are not in one location and thus not easily removed. Alan, Decentralization of CSS may sometimes pose an issue, but using conditional comments for IE isn't actually a hack. It's using a proprietary Microsoft extension; every other browser simply treats conditional comments as regular comments. The additional benefit of conditional comments is that you can use other proprietary Microsoft CSS extensions (e.g., zoom and various JScript expressions) within them without causing your code to invalidate. Hello Erik, This is still hacking HTML for IE7 or lower due to lack of support for CSS2.1. My CSS and hacks are *centralized* as oppose to being *decentralized* in the HTML. They can be removed in a flash. All your conditional comment (in the HTML) needs to contain is a style link pulling in whatever stylesheet you want to feed IE. Then your CSS is not in the HTML, just the stylesheet an IE browser pulls in when it processes your conditional comment. -- David gn...@hawaii.rr.com authenticity, honesty, community __ 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: Non-floated h2 next to floated element
On Jul 18, 2009, at 4:28 PM, Valerie Wininger wrote:
http://superluxefibers.com/dev/blog/.
The issue is in IE7. The first blog post shows the h2 correctly
lines up next to the div containing the date. However, in the 2nd
post, the alignment has changed, and the h2 element appears to be
clearing the div containing the date, and it is not expanding to fill
the containing div. Can anyone help me figure out what's wrong?
Not sure about IE 7 (N.A. here, right now), but based in IE 6:
.post {
/*float:left;
clear:both;*/
padding-top:1px
}
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] IE7: Non-floated h2 next to floated element
Not sure about IE 7 (N.A. here, right now), but based in IE 6:
.post {
/*float:left;
clear:both;*/
padding-top:1px
}
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
Philippe,
That did the trick--Thank you SO much!!
Valerie Wininger
www.21rubylane.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] css validation help
Just 2 notes on this: On Jul 17, 2009, at 3:29 PM, Alan Gresley wrote: I would not recommend hacking your HTML with IE Conditional comments since they are not in one location and thus not easily removed. 1. If your website is larger than 3 pages and reuses the same stylesheets, I hope you use server-side templates :-). From the humble (yet quite powerful) SSI to PHP, ASP or other name-you-favourite server side language, an include to load your block of link rel=stylesheet ... with CC's in it. No need for support for IE anymore? Just remove a couple of lines out of that include, upload done. Let the server do the rest of the job. 2. multiple @imports and nested constructs: On Jul 18, 2009, at 12:31 AM, Alan Gresley wrote: My regular CSS, http://css-class.com/test/epsilon-0-1.css You do know that such constructs are detrimental to performance and page load, esp. in IE, do you? Fex: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ take this with a grain of salt, but I did some similar tests with IE running on an older machine, and multiple @imports do slow down things. My 2¥, 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] css validation help
Philippe Wittenbergh wrote: Just 2 notes on this: On Jul 17, 2009, at 3:29 PM, Alan Gresley wrote: I would not recommend hacking your HTML with IE Conditional comments since they are not in one location and thus not easily removed. 1. If your website is larger than 3 pages and reuses the same stylesheets, I hope you use server-side templates :-). From the humble (yet quite powerful) SSI to PHP, ASP or other name-you-favourite server side language, an include to load your block of link rel=stylesheet ... with CC's in it. No need for support for IE anymore? Just remove a couple of lines out of that include, upload done. Let the server do the rest of the job. 2. multiple @imports and nested constructs: On Jul 18, 2009, at 12:31 AM, Alan Gresley wrote: My regular CSS, http://css-class.com/test/epsilon-0-1.css You do know that such constructs are detrimental to performance and page load, esp. in IE, do you? Fex: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ take this with a grain of salt, but I did some similar tests with IE running on an older machine, and multiple @imports do slow down things. My 2¥, 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/ This page discusses using php to load stylesheets automatically.http://www.veridian-systems.com/blog/blogs/blog5.php/2009/07/17/php-site-maintenance __ 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] css validation help
david wrote: Alan Gresley wrote: [...] Hello Erik, This is still hacking HTML for IE7 or lower due to lack of support for CSS2.1. My CSS and hacks are *centralized* as oppose to being *decentralized* in the HTML. They can be removed in a flash. All your conditional comment (in the HTML) needs to contain is a style link pulling in whatever stylesheet you want to feed IE. Then your CSS is not in the HTML, just the stylesheet an IE browser pulls in when it processes your conditional comment. This is what I do anyway by this. @import test-ie; /* For IE/Win */ All other browsers (non IE7 or lower) will skip that import since it is invalid. All comments !-- -- are downloaded by every browser. Even if the code is a server side template, each and every page visited by a browser has to download such possible code. !--[if lt IE 7] link rel=stylesheet type=text/css ref=site.css / script type=text/javascript src=sfhover.js/script ![endif]-- Though with my CSS file with IE @import, all browser have the CSS already cached so is only downloaded once. If I wrong in this, please point out my error. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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] css validation help
Philippe Wittenbergh wrote: Just 2 notes on this: On Jul 17, 2009, at 3:29 PM, Alan Gresley wrote: I would not recommend hacking your HTML with IE Conditional comments since they are not in one location and thus not easily removed. 1. If your website is larger than 3 pages and reuses the same stylesheets, I hope you use server-side templates :-). From the humble (yet quite powerful) SSI to PHP, ASP or other name-you-favourite server side language, an include to load your block of link rel=stylesheet ... with CC's in it. Hello Philippe, Yes I do use server side includes which I would place CC comments in if needed. This I do not frown on since it's centralized. I only state this issue about CC because coders who are new to this list may pollute their non server-side templates or standard HTML with CC on the advice that CC are ok to use. The whole head element or elements within the head element can be server-side templates. No need for support for IE anymore? Just remove a couple of lines out of that include, upload done. Let the server do the rest of the job. 2. multiple @imports and nested constructs: On Jul 18, 2009, at 12:31 AM, Alan Gresley wrote: My regular CSS, http://css-class.com/test/epsilon-0-1.css You do know that such constructs are detrimental to performance and page load, esp. in IE, do you? Internet Explorer is a detriment to the progress (interoperability) of the of the Internet or Intranet. Surely this list isn't here just to nurse *that browser* along. Is the detriment to performance balanced by the lessor code that is is in the CSS and HTML. Yes the CSS is targeting many elements at once but the matching of this against ids' or classes in the HTML is not needed. Fex: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ take this with a grain of salt, but I did some similar tests with IE running on an older machine, and multiple @imports do slow down things. My 2¥, Philippe --- Philippe Wittenbergh http://l-c-n.com/ I accept your point of view Philippe. I do like to help others with IE7 at least. But I see that the continue focus of a legacy does hold back where CSS can go. I not saying that my method is a good way, just that it is an option. My used of @imports is just to support IE7 or lower. I have been influenced by Georg and his masterpiece. http://www.gunlaug.no/contents/wd_1_02_01.html I just see no point in compromising ones code just to fit in with IE bugs and legacy behavior. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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] Problem with all Mac browsers according to BrowserCam
I have an inline, unordered list for a horizontal navigation menu. What I'm seeing on BrowserCam, all Mac browsers increase the size of the text in those hnav links, causing the list to wrap to a new line where the wrapped text gets lost against the background. That's BrowserCam, a Mac user tells me that this is only a problem with Safari. That the display is correct with Mac/FF. I do not have a Mac machine available locally so second-hand reports and BrowserCam has been my workaround. Before I start posting code or links, are there any known issues with Mac (or Mac/Safari) that would explain this different handling of linked, inline list elements? I tried searching the Wiki but mac font size didn't bring up any results, neither did safari font size. Reese __ 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] css validation help
Alan Gresley wrote: I have been influenced by Georg and his masterpiece. http://www.gunlaug.no/contents/wd_1_02_01.html Indeed. Interesting fellow, Georg: On feeding styles to Redmond... http://www.gunlaug.no/contents/wd_additions_12.html (works for me) __ 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] Problem with all Mac browsers according to BrowserCam
Reese wrote: I have an inline, unordered list for a horizontal navigation menu. What I'm seeing on BrowserCam, all Mac browsers increase the size of the text in those hnav links, causing the list to wrap to a new line where the wrapped text gets lost against the background. Reese Are all of your browsers set to default font-size. Are all your browsers set at their default-- minimum font-size. Are the list-items letter-spaced. Are the list-items calling Verdana. Is the list easily broken with font-scaling. Is your friend on Mac 10.4 or 10.5 Best bet is a clickable link to the page... __ 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] Problem with all Mac browsers according to BrowserCam
Hello David, David Laakso wrote: Are all of your browsers set to default font-size. Are all your browsers set at their default-- minimum font-size. All the Win-platform browsers, yes and yes. Are the list-items letter-spaced. Yes. Are the list-items calling Verdana. No. Geneva, Arial, Helvetica, sans-serif. Is the list easily broken with font-scaling. It doesn't break with font-scaling - except IE6. IE6 breaks, but does not easily break. Is your friend on Mac 10.4 or 10.5 I don't know. I've asked before, I'll ask again. Ditto for the version of Safari he's using. Best bet is a clickable link to the page... Yes, but it's proprietary stuff for a client so I hoped to avoid extracting the relevant code for public viewing. Reese __ 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] Problem with all Mac browsers according to BrowserCam
David Laakso wrote: Wild guess... Try: font-family: Helvetica Neue, Geneva, Arial, sans-serif; and comment-out the letter-spacing. Helvetica Neue? The latest BrowserCam results indicate that dropping the letter spacing fixed the line wrap (and the array of list items appears to be a nearly identical length on both the Win and Mac platforms), but Helvetica Neue gives me a serif font everywhere except in Konqueror (Fedora Core 6). I'll have to play with the letter-spacing now that I know it's the problem child, thank you for the help. Reese __ 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] Problem with all Mac browsers according to BrowserCam
Reese wrote: Are the list-items letter-spaced. Yes. Are the list-items calling Verdana. No. Geneva, Arial, Helvetica, sans-serif. Wild guess... Try: font-family: Helvetica Neue, Geneva, Arial, sans-serif; and comment-out the letter-spacing. __ 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] Problem with all Mac browsers according to BrowserCam
David Hucklesby wrote: ... I suggest you make the link container, probably an LI, a fixed width, and take out any padding to the left and right of the text. Give the link text breathing room to expand, at least to the entire width of its container. That way, differences in text size and font widths will have a less detrimantal effect on your design. I agree with you that your suggestion is the preferred option, but the menu items range from 5 to 20 characters (with spaces, some of them). The text of those items is not negotiable with the client so I don't see that getting very far. I suppose the other option is to use images instead of text, I don't like that option. It isn't as SEO-friendly as text links and SEO-friendliness is important. Reese __ 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] Problem with all Mac browsers according to BrowserCam
Reese wrote: David Laakso wrote: Wild guess... Try: font-family: Helvetica Neue, Geneva, Arial, sans-serif; and comment-out the letter-spacing. Helvetica Neue? The latest BrowserCam results indicate that dropping the letter spacing fixed the line wrap ... I think that what David is trying to tell you is that different fonts have different widths, so changing the font-family will cause the links to be wider or narrower than you intend. Because you have absolutely no control over the size of text that displays on a visitor's computer, I suggest you make the link container, probably an LI, a fixed width, and take out any padding to the left and right of the text. Give the link text breathing room to expand, at least to the entire width of its container. That way, differences in text size and font widths will have a less detrimantal effect on your design. 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/
Re: [css-d] Problem with all Mac browsers according to BrowserCam
From: Reese howel...@inkworkswell.com I agree with you that your suggestion is the preferred option, but the menu items range from 5 to 20 characters (with spaces, some of them). The text of those items is not negotiable with the client so I don't see that getting very far. I suppose the other option is to use images instead of text, I don't like that option. It isn't as SEO-friendly as text links and SEO-friendliness is important. That images are an SEO liability is a debatable issue (at worst). Image replacement is another option. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/apm An Accessible Elegant Accordion __ 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/
