[css-d] floating thumbnails
The following link displays an HTML fragment taken from a (home-brewed) content management system, stripped down to the relevant block area only: div id=main-gallery-disp ...stuff.../div The HTML: http://fliesfliesflies.com/fragments/Gallery/ttest.html The (stripped down) CSS: http://fliesfliesflies.com/css/rrobo.css In the CSS the codes related to floated thumbnails is at the bottom of the CSS file. Each thumbnail is enclosed in a paragraph element such as: p class=robonava href= http://fliesfliesflies.com/index.php?page=Gallery/Pelicans-skies.jpg; img src=/fragments/Gallery/archive/thumbs/tn-Pelicans-skies.jpg alt= Pelicans-skies.jpg //a/p In this Gallery page I'd like all thumbnails to float left around the main display image without making odd, unpredictable white space areas on the next line after a thumbnail runs off the right side of the display area. In other words I'd like the thumbnails to float into an orderly table like arrangement, controlled entirely by the browser, depending on current viewport width. is this possible with CSS only? -- /* Colin (Sandy) Pittendrigh --oO0 */ __ 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] floating thumbnails
On Thu, Mar 27, 2014 at 10:19 AM, Colin (Sandy) Pittendrigh sandy.pittendr...@gmail.com wrote: In this Gallery page I'd like all thumbnails to float left around the main display image without making odd, unpredictable white space areas on the next line after a thumbnail runs off the right side of the display area. In other words I'd like the thumbnails to float into an orderly table like arrangement, controlled entirely by the browser, depending on current viewport width. is this possible with CSS only? -- Images are different heights, so that makes p different heights, messing up the floats. Adding min-height: 5em; to .robonav cleaned it up nice for me. Adjust as desired. HTH -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] floating thumbnails
On 3/27/14, 7:19 AM, Colin (Sandy) Pittendrigh wrote: The following link displays an HTML fragment taken from a (home-brewed) content management system, stripped down to the relevant block area only: div id=main-gallery-disp ...stuff.../div The HTML: http://fliesfliesflies.com/fragments/Gallery/ttest.html [...] In this Gallery page I'd like all thumbnails to float left around the main display image without making odd, unpredictable white space areas on the next line after a thumbnail runs off the right side of the display area. In other words I'd like the thumbnails to float into an orderly table like arrangement, controlled entirely by the browser, depending on current viewport width. is this possible with CSS only? Not too sure what you are aiming at, but try this: - Take the float:left out of the h3 above the gallery, allowing it to occupy the full width - Take the float:left and min-height:3em out of p.robonav, replacing them with display:inline-block - You may like to add vertical-align:middle or vertical-align:top to p.robonav as well. Does this give you anything closer to what you want? -- Cordially, David __ 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] Google font use
I was doing this simple test with google fonts (via @import method).
body{
font-family: $roboto;
}
.bold{
font-weight: 500;
}
pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p
The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.
Am I implementing something wrong, or do I need to write rules like
strong{font-weight:500;font-style:normal;} to have this work right?
Thanks in advance.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Google font use
Hi Tom,
font-weight:500 means semi-bold, default for strong is bold, so I gess
you need to add that extra rule
strong {
font-weight: 500;
}
you can take a look at:
http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/
and
http://css-tricks.com/watch-your-font-weight/
hope it helps
isabel
On Thu, Mar 27, 2014 at 4:34 PM, Tom Livingston tom...@gmail.com wrote:
I was doing this simple test with google fonts (via @import method).
body{
font-family: $roboto;
}
.bold{
font-weight: 500;
}
pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p
The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.
Am I implementing something wrong, or do I need to write rules like
strong{font-weight:500;font-style:normal;} to have this work right?
Thanks in advance.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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-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] Google font use
On Thu, Mar 27, 2014 at 2:04 PM, Isabel Santos unboun...@gmail.com wrote:
Hi Tom,
font-weight:500 means semi-bold, default for strong is bold, so I gess
you need to add that extra rule
strong {
font-weight: 500;
}
you can take a look at:
http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/
and
http://css-tricks.com/watch-your-font-weight/
hope it helps
isabel
Thanks Isabel. All i can say is I'm glad it isn't a case of me just being
tick-headed. It's not just me.
I'll see if I can't come up with some sass for this...
Thanks
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Google font use
Thanks Isabel. All i can say is I'm glad it isn't a case of me just being tick-headed. It's not just me. Er, I mean thick-headed. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Google font use
Tom,
You're not using the strong tag for styling are you?
On March 27, 2014 at 12:34 PM Tom Livingston tom...@gmail.com wrote:
I was doing this simple test with google fonts (via @import method).
body{
font-family: $roboto;
}
.bold{
font-weight: 500;
}
pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p
The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.
Am I implementing something wrong, or do I need to write rules like
strong{font-weight:500;font-style:normal;} to have this work right?
Thanks in advance.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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-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] Google font use
2014-03-27 18:34, Tom Livingston wrote:
I was doing this simple test with google fonts (via @import method).
body{
font-family: $roboto;
}
.bold{
font-weight: 500;
}
I suppose you are using some special tools that convert that $roboto to
a real name. But how do you refer to the font? If you use Roboto as
hosted by Google and you use normal weight and 500 weight, you need, as
Google instructions say,
link href='http://fonts.googleapis.com/css?family=Roboto:400,500'
rel='stylesheet'
pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p
The strong element causes font-weight: bold, i.e. font-weight: 700, by
default. So you should either change that setting or include 700 into
the href attribute.
The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.
When settings ask for bold and the font in use has no bold typeface
(loaded), browsers may apply algorithmic (synthetic) bolding. The
results vary by browser and are generally typographically poorer than
real bold typeface.
Am I implementing something wrong, or do I need to write rules like
strong{font-weight:500;font-style:normal;} to have this work right?
If you want strong to appear in weight 500, then you need
strong { font-weight:500; }
There is no reason to set font-style on it, since font-style: normal is
the default. (Theoretically, some browser could have a different
default. Then there's probably some very good reason to that, and
authors should not interfere.)
Yucca
__
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] Google font use
Eric wrote: You're not using the strong tag for styling are you? I very much suspect that the browser neither knows nor cares why any particular tag has been used, Eric; it almost certainly renders the tagged element identically, regardless of the motivation for the tag's use. Philip Taylor __ 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] Google font use
On 3/27/14, 9:34 AM, Tom Livingston wrote:
I was doing this simple test with google fonts (via @import method).
body{
font-family: $roboto;
}
.bold{
font-weight: 500;
}
pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p
The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.
[...]
Does this address your problem? -
http://css-tricks.com/watch-your-font-weight/
--
Cordially,
David
__
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] Google font use
Yes, I realize that. I was just checking to see if a different CSS approach might be used. On March 27, 2014 at 2:53 PM Philip Taylor p.tay...@rhul.ac.uk wrote: Eric wrote: You're not using the strong tag for styling are you? I very much suspect that the browser neither knows nor cares why any particular tag has been used, Eric; it almost certainly renders the tagged element identically, regardless of the motivation for the tag's use. Philip Taylor __ 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] Google font use
This (small font families...few included weights) and the fact that the bulk of
the Yahoo Fonts are not the highest quality is the reason I moved to Typekit.
Personally I'll do anything to avoid a UA's faux bold and italic rendering.
If you need to use Google Fonts there are a couple of good articles that add to
the topic
On Smashing
http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
and
ALA http://alistapart.com/article/say-no-to-faux-bold
An interesting article on efficient use of web fonts
Web Fonts and the Critical Path
http://ianfeather.co.uk/web-fonts-and-the-critical-path/
Hope this helps a git,
Eric
On March 27, 2014 at 3:23 PM David Hucklesby huckle...@gmail.com wrote:
On 3/27/14, 9:34 AM, Tom Livingston wrote:
I was doing this simple test with google fonts (via @import method).
body{
font-family: $roboto;
}
.bold{
font-weight: 500;
}
pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p
The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.
[...]
Does this address your problem? -
http://css-tricks.com/watch-your-font-weight/
--
Cordially,
David
__
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] Google font use
On Thu, Mar 27, 2014 at 3:25 PM, Eric e...@minerbits.com wrote: Yes, I realize that. I was just checking to see if a different CSS approach might be used. On March 27, 2014 at 2:53 PM Philip Taylor p.tay...@rhul.ac.uk wrote: Eric wrote: You're not using the strong tag for styling are you? I very much suspect that the browser neither knows nor cares why any particular tag has been used, Eric; it almost certainly renders the tagged element identically, regardless of the motivation for the tag's use. Philip Taylor I'm using strong in place of b if that's what you mean. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] floating thumbnails
On 3/27/14, 9:25 AM, Colin (Sandy) Pittendrigh wrote: Thank you. I tried all of the above (hadn't noticed there was inline CSS in the h3, so I zapped that no matter what). display:inline-block and vertical-align:top didn't do much in Chrome on Mint linux. the min-height: 3em for p.robonav (Tom Livingston's suggestion) did do what I wanted. On Thu, Mar 27, 2014 at 10:06 AM, David Hucklesby huckle...@gmail.comwrote: Not too sure what you are aiming at, but try this: - Take the float:left out of the h3 above the gallery, allowing it to occupy the full width - Take the float:left and min-height:3em out of p.robonav, replacing them with display:inline-block Hmm. Sounds like you didn’t take the float:left out of p.robnav. That makes a whole lot of difference in any browser. :) FWIW I mostly avoid floats. There are better alternatives, IMHO. -- Cordially, David __ 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] Google font use
On Thu, Mar 27, 2014 at 2:44 PM, Jukka K. Korpela jkorp...@cs.tut.fiwrote:
2014-03-27 18:34, Tom Livingston wrote:
I was doing this simple test with google fonts (via @import method).
body{
font-family: $roboto;
}
.bold{
font-weight: 500;
}
I suppose you are using some special tools that convert that $roboto to a
real name. But how do you refer to the font? If you use Roboto as hosted by
Google and you use normal weight and 500 weight, you need, as Google
instructions say,
link href='http://fonts.googleapis.com/css?family=Roboto:400,500'
rel='stylesheet'
Yes, $roboto is a sass variable. And my @import from google is similar to
your example.
pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p
The strong element causes font-weight: bold, i.e. font-weight: 700, by
default. So you should either change that setting or include 700 into the
href attribute.
The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.
When settings ask for bold and the font in use has no bold typeface
(loaded), browsers may apply algorithmic (synthetic) bolding. The results
vary by browser and are generally typographically poorer than real bold
typeface.
Am I implementing something wrong, or do I need to write rules like
strong{font-weight:500;font-style:normal;} to have this work right?
If you want strong to appear in weight 500, then you need
strong { font-weight:500; }
There is no reason to set font-style on it, since font-style: normal is
the default. (Theoretically, some browser could have a different default.
Then there's probably some very good reason to that, and authors should not
interfere.)
OK, so I'm not (completely) crazy. I've used a few different font sources
and just wanted to confirm that a rule like strong{font-weight: 500;} is
needed in Google's case.
Yucca
Thanks all.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Google font use
On Thu, Mar 27, 2014 at 12:34 PM, Tom Livingston tom...@gmail.com wrote:
I was doing this simple test with google fonts (via @import method).
body{
font-family: $roboto;
}
.bold{
font-weight: 500;
}
pHi there span class=boldbolded text/span/p
pstrongI'm bold/strong/p
The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.
Am I implementing something wrong, or do I need to write rules like
strong{font-weight:500;font-style:normal;} to have this work right?
Thanks in advance.
So looks like so far my b,strong{font-weight:500;} rule solves the main
issue and even for cases like:
pSome text that has strongembold italic text/em/strong/p
Google seems to get the italic version of the 500-weight font correct, as I
am including the corresponding italic face for each weight, I just still
need b,strong{font-weight:500;} to avoid double-bolding.
Thanks again all
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/
