Re: [css-d] a:link behaviors
On Jul 28, 2011, at 2:36 PM, Ghodmode wrote: you can check athttp://www.expressionofmind.com/ thanks I really need some help. The first problem I noticed is with the names of your fonts. I stole this line directly from the spec: To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens Right, that is some advice or recommendation, not a requirement. Left unquoted works fine. On the other hand, it is a good practice (amongst other things, it improves readability :-) ) FWIW, url for that part of the spec: http://www.w3.org/TR/CSS21/fonts.html#font-family-prop It might not be matching one font on the Mac, and another one on the PC (or on the Mac)... Is that font's name Myriad Pro (uppercase 'P')? That doesn't matter, browser normalise to lowercase during parsing of the stylesheet, I think. Do the fonts exist on the PC? For example, my system doesn't have Myriad pro, Lucida Grande, or Calibri, so it would fallback to sans-serif and probably look much different than you intended. Calibri is installed on Windows Vista and up by default, and anyone who has installed MS Office 2007 or newer. Lucida Grande is installed by default on OS X, Myriad Pro comes with Adobe CS suite. So there should be something for every platform. That said, you make a good point below: The font replacement shouldn't really affect the font size, but it would definitely make it look different. Both Myriad Pro and Calibri have a smallish aspect ratio, whereas Lucida Grande, and the default sans-erif font on most platforms have a large aspect ratio. That could give the impression that font size is different. But this doesn't explain why the font-size would change between a:link and a:visited or from page to page. I've tested that on OS X, Linux Ubuntu and Win XP with different browsers, and I can't reproduce it. Nor do I see anything in the stylesheet that would justify that behaviour. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@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] FW: Multi column layout
Good day, I have created a test page to fiddle around with a multi-column layout: http://www.nextdesigns.ca/multi.htm I have a single content div with a column-width set to 380px, and column-gap set to 40px, and column-count set to auto. I had presumed that the div would create as many 380px-wide columns as necessary to contain the content. What surprised me was that as I increased or decreased the width of the browser window, so would the width of the columns increase or decrease. Is there some way to make the width of those columns predictable without adding a non-auto width to the div? Also, when I return the clientWidth of the columnified div, I actually return the width of the browser viewport, as that div is too wide to be accommodated by the browser viewport. Is there any way to return the amount of pixels the div takes up? Regards, Chris __ css-discuss [css-d@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] FW: Multi column layout
Is there some way to make the width of those columns predictable without adding a non-auto width to the div? It depends on how predictable you'd like. From my experimenting, it created columns with a min-width of 380px, and a max-width of (presumably) 759px. (How many 380px columns fit in 700px? 2. So make 2 equal width columns to fit the available space.) So the width of a column should be: columnCount = int(clientWidth/380); columnWidth = ( clientWidth - (columnCount-1)*40 )/columnCount; ---Tim __ css-discuss [css-d@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] FW: Multi column layout
Right, but that would give me the count of visible columns. Is there a way to determine the number of all columns, including those outside the viewport? Thanks for your response, Chris -Original Message- From: Tim Climis [mailto:tim.cli...@gmail.com] Sent: July-28-11 9:42 AM To: Hardie, Chris; css-d@lists.css-discuss.org Subject: RE: [css-d] FW: Multi column layout Is there some way to make the width of those columns predictable without adding a non-auto width to the div? It depends on how predictable you'd like. From my experimenting, it created columns with a min-width of 380px, and a max-width of (presumably) 759px. (How many 380px columns fit in 700px? 2. So make 2 equal width columns to fit the available space.) So the width of a column should be: columnCount = int(clientWidth/380); columnWidth = ( clientWidth - (columnCount-1)*40 )/columnCount; ---Tim __ css-discuss [css-d@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] IE 7 issue with navigation bar
Css3 menu IE7 issue with menu bar completely disappearing from time to time. This is IE7 with SP2 and 3 problem. Can't seem to find the fix for this http://www.aipg-ohio.org/testindex.php Thanks for any suggestions. Carol __ css-discuss [css-d@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] IE 7 issue with navigation bar
On 7/28/11 3:42 PM, Carol Swinehart wrote: Css3 menu IE7 issue with menu bar completely disappearing from time to time. http://www.aipg-ohio.org/testindex.php Carol Unable to reproduce in IE/7 in IETester Parallels OS X 10.4. If it is still happening on your end see IE7 layout-trigger[s] here: http://www.satzansatz.de/cssd/onhavinglayout.html ~d -- http://chelseacreekstudio.com/ __ css-discuss [css-d@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] parse error on *html
Just ran the latest version of my page through CSS validator, and it
came up with 1 error:
Parse Error *html .livebar{height:100%; /*For IE6 since overflow:auto
does not trigger hasLayout*/}
Do I need to be concerned about this? This is a bit of code which
makes IE6 behave itself, correct, and as such, the validator might be
choking on it, tho it is not actually a problem?
the page in question is:
http://coffeeonmars.com/test/16NewIndex.html
thank you,
John
__
css-discuss [css-d@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] parse error on *html
Though I'm rusty on *HTML hacks- havent used one in years - the validator is a
tool, not law. If you know that is correct and need it for a fix, then it's
fine.
However, I'd recommend another method for teaching IE 6 a lesson, and wrap it
in conditional comments. Either embedded in the head, or an external IE sheet.
HTH
Sent from my iPhone
On Jul 28, 2011, at 8:21 PM, John j...@coffeeonmars.com wrote:
Just ran the latest version of my page through CSS validator, and it came up
with 1 error:
Parse Error *html .livebar{height:100%; /*For IE6 since overflow:auto does
not trigger hasLayout*/}
Do I need to be concerned about this? This is a bit of code which makes IE6
behave itself, correct, and as such, the validator might be choking on it,
tho it is not actually a problem?
the page in question is:
http://coffeeonmars.com/test/16NewIndex.html
thank you,
John
__
css-discuss [css-d@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-discuss [css-d@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] parse error on *html
On 7/28/11 8:21 PM, John wrote:
Just ran the latest version of my page through CSS validator, and it
came up with 1 error:
Parse Error *html .livebar{height:100%; /*For IE6 since overflow:auto
does not trigger hasLayout*/}
Do I need to be concerned about this? This is a bit of code which
makes IE6 behave itself, correct, and as such, the validator might be
choking on it, tho it is not actually a problem?
the page in question is:
http://coffeeonmars.com/test/16NewIndex.html
thank you,
John
John,
There should be a space between the star and html:
* html .whatever {...}
This will not make it valid.
Wrapping it in a conditional comment won't make it valid, either [but
the validator will not see it].
Putting it a separate style sheet and wrapping it in a conditional
comment won't make it valid, either [but the validator will not see it].
My personal opinion is simply to leave as the last item in your style
sheet and not lose any sleep over it not being valid...
Best,
~quasimodo
--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/
__
css-discuss [css-d@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] parse error on *html
On 29 July 2011 12:21, John j...@coffeeonmars.com wrote:
Just ran the latest version of my page through CSS validator, and it came up
with 1 error:
Parse Error *html .livebar{height:100%; /*For IE6 since overflow:auto does
not trigger hasLayout*/}
I'm pretty sure it should have a space there, as in * html, not *html.
Nothing wrong with * html hacks as long as you understand the
implications, and they are inside a @media block at the END of the
style sheet, although I'm personally with Tom and prefer conditional
comments.
HTH
--
/*Mark
__
css-discuss [css-d@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] parse error on *html
Mr. Modo is correct, none of these suggestions will validate but I was just
suggesting an alternate method to achieving the same end. Some people do sleep
better having the offending code outside their main sheet so it does pass the
validator.
Merely my opinion and another possible course to take.
HTH
Sent from my iPhone
On Jul 28, 2011, at 8:45 PM, David Laakso da...@chelseacreekstudio.com wrote:
On 7/28/11 8:21 PM, John wrote:
Just ran the latest version of my page through CSS validator, and it came up
with 1 error:
Parse Error *html .livebar{height:100%; /*For IE6 since overflow:auto does
not trigger hasLayout*/}
Do I need to be concerned about this? This is a bit of code which makes IE6
behave itself, correct, and as such, the validator might be choking on it,
tho it is not actually a problem?
the page in question is:
http://coffeeonmars.com/test/16NewIndex.html
thank you,
John
John,
There should be a space between the star and html:
* html .whatever {...}
This will not make it valid.
Wrapping it in a conditional comment won't make it valid, either [but the
validator will not see it].
Putting it a separate style sheet and wrapping it in a conditional comment
won't make it valid, either [but the validator will not see it].
My personal opinion is simply to leave as the last item in your style sheet
and not lose any sleep over it not being valid...
Best,
~quasimodo
--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/
__
css-discuss [css-d@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-discuss [css-d@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] 100% height issue, and graphic placement q's
http://coffeeonmars.com/testing/17NewIndex.html might not be perfect code, but I believe it addresses many of the issues several of you commented on. *Many* thanks for the generous help. I hope to be able to evolve this thing to meet my design goals. Now, time for a beer. J __ css-discuss [css-d@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] parse error on *html
On Jul 29, 2011, at 9:45 AM, David Laakso wrote:
There should be a space between the star and html:
* html .whatever {...}
Indeed.
This will not make it valid.
Nope. * html {} is perfectly valid (CSS1, 2, 3, 4, and beyond).
In a decent browser, it won't select anything and nothing though... That hack
relies on the fact that the simple little mind of IE 6 7 ‘thinks’ there is an
element that wraps around the root element (html). Of course there is none.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@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] safari
A little mystery. Why is the letter 'm' in the word 'Sitemap' uppercase
in Safari Version 4.1.3 (4533.19.4)
h2Sbi/b#173;te#173;bma/bp/h2
body#x .page.c2 h3 b,
body#p .page.c2 h2 b,
body#r .page.c2 h2 b,
body#c .page.c2 h2 b
{color:rgb(0,0,0);font-size:100%!important;font-style:normal;font-weight:normal;text-transform:
lowercase!important;}
http://chelseacreekstudio.com/site/sitemap/index.php
Actually I kind of like it uppercase. Just don't understand how come
only Safari makes it uc when every other browser I'm running at the
moment shows it lc?
Thoughts?
Thanks.
~d
--
http://chelseacreekstudio.com/
__
css-discuss [css-d@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] safari
On Jul 29, 2011, at 12:21 PM, David Laakso wrote: http://chelseacreekstudio.com/site/sitemap/index.php Actually I kind of like it uppercase. Just don't understand how come only Safari makes it uc when every other browser I'm running at the moment shows it lc? Thoughts? The soft-hyphen preceding the 'bma' makes Safari think there is a word boundary. (Why do you need the soft hyphen ?) Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@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] safari
On 7/28/11 11:21 PM, David Laakso wrote: A little mystery. Why is the letter 'm' in the word 'Sitemap' uppercase in Safari Version 4.1.3 (4533.19.4) Resolved. Neglected to upload latest style sheet to server. ~d PS I need a vacation... -- http://chelseacreekstudio.com/ __ css-discuss [css-d@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] safari
Thoughts? Chrome 14.0.825 shows it uppercase too. And I've figured it out... It's the text-transform: capitalize rule around line 45. It's capitalizing the M because a soft hyphen is (at least in Webkit, presumably) a word-break character. Seems a bit off, imo. And then your lowercase!important; rule doesn't seem to actually exist in the stylesheet, so it's not overruling the capitalize transform. (at least when I download and look at the styles, I don't see it...) ---Tim __ css-discuss [css-d@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] safari
And then your lowercase!important; rule doesn't seem to actually exist in the stylesheet, so it's not overruling the capitalize transform. (at least when I download and look at the styles, I don't see it...) Ah. nevermind, just saw your last email... __ css-discuss [css-d@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] safari
On 7/28/11 11:34 PM, Philippe Wittenbergh wrote: On Jul 29, 2011, at 12:21 PM, David Laakso wrote: http://chelseacreekstudio.com/site/sitemap/index.php (Why do you need the soft hyphen ?) Because that headline on some pages will throw an horizontal scrollbar in narrow windows on desktop or in a mobile handset in portrait view if the fonts are scaled. I suppose there probably are other and better ways around this..? Philippe Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [css-d@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] parse error on *html
On 29/07/2011 12:27 PM, Philippe Wittenbergh wrote:
On Jul 29, 2011, at 9:45 AM, David Laakso wrote:
There should be a space between the star and html:
* html .whatever {...}
Indeed.
This will not make it valid.
Nope. * html {} is perfectly valid (CSS1, 2, 3, 4, and beyond).
In a decent browser, it won't select anything and nothing though...
That hack relies on the fact that the simple little mind of IE 6 7
‘thinks’ there is an element that wraps around the root element
(html). Of course there is none.
Philippe -- Philippe Wittenbergh http://l-c-n.com/
This is not correct. For IE6 and earlier, there is an element outside
html. I received this message offlist (not stating the list) in 2008.
| I mean the fact that
| * html {...}
| Ever applied to anything was a bug. I wrote the
| original selector-matching code that had this bug
| in it. We had a special hidden root container
| node in our element tree for some internal reasons,
| and I forgot to explicitly skip it in the selector
| node matching code. We didn't discover this for
| years. :)
This means that IE6- sees this.
root-container
html ... /html
/root-container
This bug was partly corrected in IE7 but the universal selector '*' was
now selecting the !doctype as if it was an element. This is why a
sibling selecting was needed in the IE7 only hack.
*+html { /* IE7 style */ }
!doctype + html
For anyone following this thread, the below article gives some history
of IE hacks (with links). The article is worded to suit the times of IE8
beta release.
http://css-class.com/test/bugs/ie/ie-hacks.htm
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@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] safari
On Jul 29, 2011, at 1:13 PM, David Laakso wrote: (Why do you need the soft hyphen ?) Because that headline on some pages will throw an horizontal scrollbar in narrow windows on desktop or in a mobile handset in portrait view if the fonts are scaled. I suppose there probably are other and better ways around this..? I was just curious… I suppose you /could/ use the wordbreak property, although that would result in much uglier splitting (and no hyphen) - as in sit emap On the other hand, e.g. iOS doesn't have a setting to change the (default) font-size of Safari. When you zoom in, it scales the whole page, those words are never broken up. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@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/
