Re: [css-d] help with image opacity (?)
It looks to me like it’s transparency in the .png itself - nothing to do with
the CSS.
> On Mar 9, 2017, at 1:54 PM, Angela French wrote:
>
> Hello,
> I have a .png graphic that is white and gold on a transparent background. It
> is set over divs with a blue and a black background color. I cannot figure
> out what is
> "dulling down" the .png logo. It looks like an opacity issue, but there is
> no opacity set on it.
>
> Here is the page: http://www.dev.sbctc.edu/default-test-new-logo.aspx . It
> is the 50th anniversary logo in the upper left hand corner of the page.
>
> Here is the html:
> src="/_resources-for-tests/images/anniversary-logo.png"> width="175"
>
>
> Here is the css:
>
> .greyHeaderLeft {
>width:44%;
>float:left;
>display:block;
>
>}
>.greyHeaderLeft img {
>float:left;
>margin: 0;
>}
>
>
> Thank you for any advice.
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> www.sbctc.edu
Re: [css-d] Getting parent element to increase height when child element flex wraps
Try putting the height on the img tag rather than the div .logos > On Feb 24, 2017, at 11:44 AM, Tim Dawson wrote: > > Hello, > > I'm having a problem with a footer which will not automatically increase in > height when a row within it is wrapped using 'flex'. > There's an example at: http://new.gigaplusargyll.co.uk > > The footer contains a row of content (three divs), under which there is a div > of logos (images). I have set the logo div to 'flex-wrap: wrap;' so that when > the screen width is reduced the logo images form a second (or even third or > fourth) row. > > That part works as intended, but I cannot get the size of the footer (dark > background) to expand. I've set 'overflow: visible' so the additional rows > can be seen falling out of the footer. > > [NOTE about my method] > The three content divs and the logo div are themselves flex children of the > footer and the sizing of the content divs is set (33.33%) so the logo div HAS > to wrap under the content. It's like that because I have an alternative > layout where the logos form a fourth horizontal div with the logos themselves > in a column (achieved by reducing the width of the content divs). > > Googling around has shown there are (or have been) problems getting element > WIDTH to increase with flex in column mode, but I've not seen the same for > rows, which is what I have here. > > I'm aware that there are other issues in the body of the page when the screen > width is reduced, but it's the footer that concerns me here. Any suggestions, > please? > > Regards, > > Tim Dawson > > -- > Tim Dawson > Maolbhuidhe > Fionnphort > Isle of Mull PA66 6BP > > 01681 700718 > __ > 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] rendering of icon in Windows browsers
You led me to the right solution - thanks for letting me know that I wasn’t
using the right character.
The actual Athelas character did not have unicode. I found out I could access
it by using a regular text character and transforming it with
"font-feature-settings".
> On Jul 27, 2016, at 7:15 PM, Philippe Wittenbergh wrote:
>
>
>> On Jul 28, 2016, at 7:05 AM, Sara Haradhvala wrote:
>>
>> I set up this unicode in CSS
>>
>> .menu li::after {
>> content: “◆”;
>> font-family: athelas, serif;
>> font-weight:bold;
>> font-size: 16px;
>> }
>>
>> My problem is that the diamond is much bigger in IE and somewhat bigger in
>> FF on Windows.
>
> One guess [*], as I don’t have access to that font (athelas): it does **not**
> contain a glyph for the character you want to display, and neither does the
> default serif font, then system fallback occurs – that is: Firefox and IE
> (Edge also ?) fall back to the default system font that contains that glyph.
> That happens to be bigger than the default one on OS X. And who knows what
> happens on Android.
>
> There is not much you can do about it… except specifying a (fallback) font
> that is available cross platform (or via @font-face) that contains that
> glyph. For example:
>
> font-family: 'athelas', 'arial unicode MS', sans-serif. // Roboto, the
> default on Android, has very similar metrics
>
> [*] a quick test on fonts.com (the official provider of that font) shows
> that, indeed, it does not contain a glyph for that ‘◆’ character.
>
> 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] rendering of icon in Windows browsers
I think you’re right. The problem is that I need to use a glyph from photoshop
that isn’t assigned a unicode value. Is there any way to use this as text? Or
does it have to be turned into an svg image?
> On Jul 27, 2016, at 7:15 PM, Philippe Wittenbergh wrote:
>
>
>> On Jul 28, 2016, at 7:05 AM, Sara Haradhvala wrote:
>>
>> I set up this unicode in CSS
>>
>> .menu li::after {
>> content: “◆”;
>> font-family: athelas, serif;
>> font-weight:bold;
>> font-size: 16px;
>> }
>>
>> My problem is that the diamond is much bigger in IE and somewhat bigger in
>> FF on Windows.
>
> One guess [*], as I don’t have access to that font (athelas): it does **not**
> contain a glyph for the character you want to display, and neither does the
> default serif font, then system fallback occurs – that is: Firefox and IE
> (Edge also ?) fall back to the default system font that contains that glyph.
> That happens to be bigger than the default one on OS X. And who knows what
> happens on Android.
>
> There is not much you can do about it… except specifying a (fallback) font
> that is available cross platform (or via @font-face) that contains that
> glyph. For example:
>
> font-family: 'athelas', 'arial unicode MS', sans-serif. // Roboto, the
> default on Android, has very similar metrics
>
> [*] a quick test on fonts.com (the official provider of that font) shows
> that, indeed, it does not contain a glyph for that ‘◆’ character.
>
> 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] rendering of icon in Windows browsers
I set up this unicode in CSS
.menu li::after {
content: “◆”;
font-family: athelas, serif;
font-weight:bold;
font-size: 16px;
}
My problem is that the diamond is much bigger in IE and somewhat bigger in FF
on Windows. All looks good on Mac browsers and Chrome on Windows. IE seems to
generate a full-height diamond (which looks overwhelming), while other browsers
have space around the icon and it’s much smaller (and looks better). Any way
around this? Would you use an svg instead?
Thanks.
__
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] is this possible in RWD?
Hi David, Thanks - that's an interesting solution - I would never have thought of using table-caption for this! For the moment, I ended up using flexbox - only on mobile so IE9 didn't really matter. It seems good, but may have issues on older androids (before 4.4) - if that turns out to be a problem for us - I'll give this a shot. Sara On Feb 18, 2015, at 3:01 PM, David Hucklesby wrote: > On 2/17/15 4:50 PM, Sara Haradhvala wrote: >> doesn't that require the sidebar div to come first in the HTML? If so, >> then on mobile, it will also come first. Or is there another option? >> -- >> Sara Haradhvala >> Manager, Harlen Web Consulting LLC >> s...@harlenweb.com >> >> >> >> On Feb 17, 2015, at 6:43 PM, David Hucklesby wrote: >> >>> On 2/17/15 1:54 PM, Sara Haradhvala wrote: >>>> Am wondering - is it possible to have a responsive layout that has a main >>>> column and an optional sidebar where text from the main column flows under >>>> the sidebar - but where the sidebar drops under the main column in mobile >>>> view? Not using flexbox (need to support IE8 and IE9). Is JS necessary? >>>> >>> >>> Float the sidebar and give it a percent width, with that width set to 100% >>> on >>> narrow windows (via media query) perhaps? >>> > > You are right of course. To move the sidebar below the main content on narrow > screens, see if this code works for you: > > <http://codepen.io/hucklesby/pen/VYXWmM> > > -- > 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/
[css-d] is this possible in RWD?
Am wondering - is it possible to have a responsive layout that has a main column and an optional sidebar where text from the main column flows under the sidebar - but where the sidebar drops under the main column in mobile view? Not using flexbox (need to support IE8 and IE9). Is JS necessary? Thanks so much, Sara __ 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] aligning some text in td at bottom
I wanted two separate table cells, Karl. But thanks for responding.
Sara
On Nov 18, 2013, at 12:04 AM, Karl DeSaulniers wrote:
>
> On Nov 13, 2013, at 3:02 PM, Sara Haradhvala wrote:
>
>> Would really appreciate a suggestion and explanation from this group.
>>
>> I'd like to align a link at the bottom of a table cell. The rest of the text
>> should be aligned at the top of the cell. I'd also like to leave some
>> padding above the link so that I can reduce the width of the window and
>> there's room for the link to wrap to become 3 short lines rather than 1 long
>> line without bumping into the text. I'd like the cell sizes to be variable
>> if at all possible.
>>
>> Is this possible in all browsers? I got it to work in Firefox as follows,
>> but in Chrome and IE, the div doesn't grown to 100%. If I switch Chrome to
>> box-sizing:content-box, it works - but that doesn't work in Firefox. And
>> neither box-sizing works in IE.
>>
>>
>>
>>
>> Lorem Ipsum is simply dummy text of the printing and
>> typesetting industry. Lorem Ipsum has been the industry's standard dummy
>> text ever since the 1500s, when an unknown printer took a galley of type and
>> scrambled it to make a type specimen book. It has survived not only five
>> centuries, but also the leap into electronic typesetting, remaining
>> essentially unchanged. It was popularised in the 1960s with the release of
>> Letraset sheets containing Lorem Ipsum passages, and more recently with
>> desktop publishing software like Aldus PageMaker including versions of Lorem
>> Ipsum. link
>>
>>
>>
>>
>> Small amount of text link
>>
>>
>>
>>
>>
>>
>> * {
>> box-sizing:content-box;
>> -moz-box-sizing:border-box;
>> }
>> table, tr, td, div {
>> height:100%;
>> }
>> table {
>> border-collapse:collapse;
>> }
>> td {
>> vertical-align:top;
>> }
>> div {
>> position:relative;
>> padding-bottom:60px;
>> }
>> a {
>> position:absolute;
>> bottom:0;
>> display:block;
>> }
>
> Hi Sara,
> I THINK this is what your wanting.
>
>
> * {
> box-sizing:content-box;
> -moz-box-sizing:border-box;
> }
> table, tr, td, div {
> height:100%;
> display:block;
> }
> table {
> border-collapse:collapse;
> }
> td {
> vertical-align:top;
> border: 0px solid #fff;
> }
> ul {
> border-collapse:collapse;
> list-style:none;
> }
> li {
> vertical-align:top;
> }
> div {
> position:relative;
> padding-bottom:60px;
> }
> a {
> position:absolute;
> bottom:0px;
> display:block;
> }
>
>
>
>
>
>
> Lorem Ipsum is simply dummy text of the
> printing and typesetting industry. Lorem Ipsum has been the industry's
> standard dummy text ever since the 1500s, when an unknown printer took a
> galley of type and scrambled it to make a type specimen book. It has survived
> not only five centuries, but also the leap into electronic typesetting,
> remaining essentially unchanged. It was popularised in the 1960s with the
> release of Letraset sheets containing Lorem Ipsum passages, and more recently
> with desktop publishing software like Aldus PageMaker including versions of
> Lorem Ipsum. link
>
> Small amount of text href="#">link
>
>
>
>
>
> or maybe just this...
>
>
>
> * {
> box-sizing:content-box;
> -moz-box-sizing:border-box;
> }
> table, tr, td, div {
> height:100%;
> display:block;
> }
> table {
> border-collapse:collapse;
> }
> td {
> vertical-align:top;
> }
> ul {
> border-collapse:collapse;
> list-style:none;
> }
> li {
> vertical-align:top;
> }
> div {
> position:relative;
> padding-bottom:60px;
> }
> a {
> bottom:0px;
> }
>
>
>
>
>
>
> Lorem Ipsum is simply dummy text of the
> printing and typesetting industry. Lorem Ipsum has been the industry's
> standard dummy text ever since the 1500s, when an unknown printer took a
> galley of type and scrambled it to make a type specimen book. It has survived
> not only five centuries, but also the leap into electronic typesetting,
> remaining essentially unchanged. It was popularised in the 1960s with the
> release of Letraset sheets containi
Re: [css-d] aligning some text in td at bottom
Hi Karl - thanks. This doesn't work for me in IE. Did you see it working there?
Sara
On Nov 16, 2013, at 7:58 PM, Karl DeSaulniers wrote:
>
> On Nov 13, 2013, at 3:02 PM, Sara Haradhvala wrote:
>
>> Would really appreciate a suggestion and explanation from this group.
>>
>> I'd like to align a link at the bottom of a table cell. The rest of the text
>> should be aligned at the top of the cell. I'd also like to leave some
>> padding above the link so that I can reduce the width of the window and
>> there's room for the link to wrap to become 3 short lines rather than 1 long
>> line without bumping into the text. I'd like the cell sizes to be variable
>> if at all possible.
>>
>> Is this possible in all browsers? I got it to work in Firefox as follows,
>> but in Chrome and IE, the div doesn't grown to 100%. If I switch Chrome to
>> box-sizing:content-box, it works - but that doesn't work in Firefox. And
>> neither box-sizing works in IE.
>>
>>
>>
>>
>> Lorem Ipsum is simply dummy text of the printing and
>> typesetting industry. Lorem Ipsum has been the industry's standard dummy
>> text ever since the 1500s, when an unknown printer took a galley of type and
>> scrambled it to make a type specimen book. It has survived not only five
>> centuries, but also the leap into electronic typesetting, remaining
>> essentially unchanged. It was popularised in the 1960s with the release of
>> Letraset sheets containing Lorem Ipsum passages, and more recently with
>> desktop publishing software like Aldus PageMaker including versions of Lorem
>> Ipsum. link
>>
>>
>>
>>
>> Small amount of text link
>>
>>
>>
>>
>>
>>
>> * {
>> box-sizing:content-box;
>> -moz-box-sizing:border-box;
>> }
>> table, tr, td, div {
>> height:100%;
>> }
>> table {
>> border-collapse:collapse;
>> }
>> td {
>> vertical-align:top;
>> }
>> div {
>> position:relative;
>> padding-bottom:60px;
>> }
>> a {
>> position:absolute;
>> bottom:0;
>> display:block;
>> }
>
>
> Hi Sara,
> Is this what your talking about?
>
> http://designdrumm.com/test.zip
>
> This was a fluid layout template from dreamweaver with your html added to.
> I am not positive from your description that this is what your looking for.
> May still need some media queries of your own added though.
> HTH,
>
> Best,
> Karl
> __
> 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] aligning some text in td at bottom
Chris, I agree with this. And adding new rows means you have to turn off some borders to make it look right - you don't want borders between the text and its link. Sara On Nov 16, 2013, at 4:05 PM, Chris Rockwell wrote: >> >> >> Except that to position the link inside the table cell isn't the only >> solution, Why not on a new row for instance? Why must the link belong on >> the exact same row? I don't see that. >> > > Should the link not appear in the cell in which the content it relates to > resides? Putting it in a new row would take the link out of context and, > arguably, be a misuse of the table row - adding a row for styling purposes. > It would be acceptable (and semantically correct) to add a new row if the > links contained in the cells within that row were applicable to the entire > column (or adding a new cell if applicable to entire row) but if a link > only relates to the contents in that cell, I would argue it should be in > that cell. > > > >> Sometimes you may have to resort to scripting for good reasons, but >> commonly I try and rethink what I'm doing in that case. >> >> I've found in my experience this type of thing only creep up on me when I >> don't have the proper control over the design ideas that must be >> implemented. I had a scrolling column design once which controls just "had >> to" have the same look on all platforms and the only way to do that then — >> known to me at least — was to get some scripts for the controls. I still >> thought this was unwise and in the end I also couldn't use that site for my >> portfolio. Everyone loses from such situations. > > > This isn't an issue of JavaScript making things usable, it's using > JavaScript to make things look the most desired way. Think of it in > layers, get as close as you can with HTML, then as close as you can with > CSS, then finish it off with JavaScript. I don't think you'll ever get > some elements to look the exact same cross-browser even with JavaScript > (unless you use an image, of course). Use JavaScript to your advantage, > just as you do CSS. > __ > 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] aligning some text in td at bottom
Thanks, David. The flex solution is really nice - I'm so glad you worked that through! I have to support IE7+ (not my choice), so I would have to use JS in addition to this. (And for some reason, I'm not getting the flex tags in IE10 - but I haven't taken a look at why these aren't coming through) On Nov 15, 2013, at 7:23 PM, David Hucklesby wrote: > On 11/14/13, 5:43 AM, Sara Haradhvala wrote: >> I ended up using JavaScript to set the height of each cell - that seems to >> work in all browsers! >> >> On Nov 13, 2013, at 5:03 PM, Chris Rockwell wrote: >> > [...] >>> >>> Pretty sure display:flex is going to make this a non-issue, so if you're >>> only needing to work with latest releases, I'd go with that. >>> >>> >>> On Wed, Nov 13, 2013 at 4:02 PM, Sara Haradhvala >>> wrote: Would really appreciate a suggestion and explanation from this >>> group. >>> >>> I'd like to align a link at the bottom of a table cell. The rest of the >>> text should be aligned at the top of the cell. I'd also like to leave some >>> padding above the link so that I can reduce the width of the window and >>> there's room for the link to wrap to become 3 short lines rather than 1 >>> long line without bumping into the text. I'd like the cell sizes to be >>> variable if at all possible. >>> > [code snipped] > > A day late and a dollar short, as I am new to flex boxes. But Chris is right, > and here's my attempt, with table display fallback for old browsers. > > The flex seems to work for far more browsers than I thought. (But I cheated > and > use prefixfree.js to get old versions to work.) > > <http://cdpn.io/ynfie> > > Glad you got some JavaScript that works, Sara. Here's Chris Coyier's solution: > > <http://css-tricks.com/absolutely-position-element-within-a-table-cell/> > > -- > 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] aligning some text in td at bottom
I ended up using JavaScript to set the height of each cell - that seems to work
in all browsers!
On Nov 13, 2013, at 5:03 PM, Chris Rockwell wrote:
> My first question for these is always, does this have to be/should be an
> actual ?
>
> Second, I think, if I can understand the specs correctly, that Firefox is
> actually doing it incorrectly. Without an explicit height (do the specs mean
> explicit to be a non-percentage, non-auto value?) on the parent, declaring
> height:100% is the same as declaring height:auto, which would make your div
> wrap its content, and not necessarily expand to its parents height (unless
> that parent had an explicit height set).
>
> See this codepen showing an explicit (if I'm using this correctly per the
> specs) height set: http://codepen.io/chrisrockwell/pen/dLego
>
> Pretty sure display:flex is going to make this a non-issue, so if you're only
> needing to work with latest releases, I'd go with that.
>
>
> On Wed, Nov 13, 2013 at 4:02 PM, Sara Haradhvala wrote:
> Would really appreciate a suggestion and explanation from this group.
>
> I'd like to align a link at the bottom of a table cell. The rest of the text
> should be aligned at the top of the cell. I'd also like to leave some padding
> above the link so that I can reduce the width of the window and there's room
> for the link to wrap to become 3 short lines rather than 1 long line without
> bumping into the text. I'd like the cell sizes to be variable if at all
> possible.
>
> Is this possible in all browsers? I got it to work in Firefox as follows,
> but in Chrome and IE, the div doesn't grown to 100%. If I switch Chrome to
> box-sizing:content-box, it works - but that doesn't work in Firefox. And
> neither box-sizing works in IE.
>
>
>
>
> Lorem Ipsum is simply dummy text of the printing and
> typesetting industry. Lorem Ipsum has been the industry's standard dummy text
> ever since the 1500s, when an unknown printer took a galley of type and
> scrambled it to make a type specimen book. It has survived not only five
> centuries, but also the leap into electronic typesetting, remaining
> essentially unchanged. It was popularised in the 1960s with the release of
> Letraset sheets containing Lorem Ipsum passages, and more recently with
> desktop publishing software like Aldus PageMaker including versions of Lorem
> Ipsum. link
>
>
>
>
> Small amount of text link
>
>
>
>
>
>
> * {
> box-sizing:content-box;
> -moz-box-sizing:border-box;
> }
> table, tr, td, div {
> height:100%;
> }
> table {
> border-collapse:collapse;
> }
> td {
> vertical-align:top;
> }
> div {
> position:relative;
> padding-bottom:60px;
> }
> a {
> position:absolute;
> bottom:0;
> display:block;
> }
>
>
>
>
> __
> 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/
>
>
>
> --
> Chris Rockwell
__
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] aligning some text in td at bottom
Would really appreciate a suggestion and explanation from this group.
I'd like to align a link at the bottom of a table cell. The rest of the text
should be aligned at the top of the cell. I'd also like to leave some padding
above the link so that I can reduce the width of the window and there's room
for the link to wrap to become 3 short lines rather than 1 long line without
bumping into the text. I'd like the cell sizes to be variable if at all
possible.
Is this possible in all browsers? I got it to work in Firefox as follows, but
in Chrome and IE, the div doesn't grown to 100%. If I switch Chrome to
box-sizing:content-box, it works - but that doesn't work in Firefox. And
neither box-sizing works in IE.
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. link
Small amount of text link
* {
box-sizing:content-box;
-moz-box-sizing:border-box;
}
table, tr, td, div {
height:100%;
}
table {
border-collapse:collapse;
}
td {
vertical-align:top;
}
div {
position:relative;
padding-bottom:60px;
}
a {
position:absolute;
bottom:0;
display:block;
}
__
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] figured out the dropdown issue
Mobile Safari had trouble hiding the submenu using absolute positioning with a large negative left - unless there was a width on the submenu. However, there were no problems with changing display:none to display:block and using a variable submenu. In that case, one click on the top menu shows the item, and another click sends you to a page. Since the dropdowns are not essential (you can click through to a page with a side menu), I used that. __ 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] variable width dropdowns on ipad
Is it possible to have variable-width drop-down menus work on the ipad? When I add a width to the drop-down, the menu is sticky and stays open until i select an item. When I don't set a width, the menu disappears (isn't sticky) when i lift my hand off the top level to select an item in the dropdown. Thanks, Sara __ 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] scaling floated image
Thanks, Barney. I think I solved this by using px values for the width
(original width scaled to 80%) and % for the height. I can't give a URL
(behind a firewall), and I'll try to get a moment to copy the code -- but I
tried to simplify the example.
Sara
On Jul 27, 2011, at 2:40 PM, Barney Carroll wrote:
> Hi Sara,
>
> Combining fixed-unit (px) and proportional (%) measurements for macro-level
> layout often leads to problems. Without further details about the layout it's
> hard to see exactly how the problem is manifesting itself.
>
> Can you give us a URL of the work in question or paste the code into
> jsfiddle.net for us to have a closer look?
>
> Regards,
>
> Barney Carroll
> (+44) 742 9177 278
>
> On 27 Jul 2011, at 19:20, Sara Haradhvala wrote:
>
>> I have a captioned image that contains an image and caption - it's floated
>> left - and text flows around it. For the print stylesheet, I'd like to
>> size the image and caption down to 80%. So, I do this:
>>
>> #captionedImage {
>> width:100px;
>> height:100px;
>> }
>>
>> #captionedImage img, #captionedImage .caption {
>> width:80%;
>> height:80%;
>> }
>>
>> The scaling works fine --
>>
>> The problem is that the #captionedImage box is still 100 x 100 and so there
>> is a margin between the image/caption and text. Any way to get rid of that?
>>
>> Thanks so much,
>> Sara
>> __
>> 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/
__
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] scaling floated image
I have a captioned image that contains an image and caption - it's floated left
- and text flows around it. For the print stylesheet, I'd like to size the
image and caption down to 80%. So, I do this:
#captionedImage {
width:100px;
height:100px;
}
#captionedImage img, #captionedImage .caption {
width:80%;
height:80%;
}
The scaling works fine --
The problem is that the #captionedImage box is still 100 x 100 and so there is
a margin between the image/caption and text. Any way to get rid of that?
Thanks so much,
Sara
__
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] vertical centering
what's the best way to vertically center multi-line anchor text (text can wrap) where the anchor has a background image? Thanks, Sara __ 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] can someone explain?
Kevin - I understand the border now. The text was calculated to be 19.2px by
the browser, so adding a border made it 20.2, and the 2nd list element didn't
slide to the left. Your explanation has helped a lot. Thanks again.
Sara
On May 17, 2011, at 6:58 PM, Kevin A. Cameron wrote:
> I think this makes sense. Because the s are floated the s have 0
> height, so they both start at the same location. When you add negative margin
> to the first it's pulled above the containing . The second when
> floated left only sees the beginning of the and then is pulled up, and
> thereby overlapping.
>
> I'm sure someone here knows more about box model implementations by browsers
> and could provide a more technical answer.
>
> Kevin
>
>
> On Tue, May 17, 2011 at 12:13 PM, Sara Haradhvala wrote:
> Hi Jim,
>
> Margins and padding are 0.
>
> Here is the HTML:
>
>
>
>
>a1
>a2
>
>
>
>
>b1
>b2
>
>
>
>
> The CSS is:
>
> * {margin:0; padding:0}
> #menu {margin-top:20px}
> ul {list-style:none}
> ul * {float:left;}
> li {margin-top: -20px}
>
> Thanks,
> Sara
>
>
>
>
> On May 17, 2011, at 2:11 PM, JWN wrote:
>
> > Morning Sara
> >
> > You wrote
> >
> >
> >> Hi,
> >>
> >> I have two unordered lists, where each list has 1 list item with 2 links.
> >> If I float the list items and anchors left, all 4 anchors line up
> >> horizontally as expected. If I add a margin to the list items (but not the
> >> anchors), all anchors move down and are still horizontally lined up as
> >> expected. But if I put a negative margin on the list items instead, the
> >> anchors move up as expected, but the anchors from the 2nd list overlay
> >> the anchors from the first list instead of sitting to the right of them.
> >> I'm not understanding why this is, and hope someone can explain.
> >>
> >> I'm using firefox 4 on the Mac.
> >>
> >> Thanks,
> >> Sara
> >
> >
> > Just a guess but you might try zeroing out margins and padding on the body.
> >
> > body {
> > margin:0;
> > padding:0;
> > }
> >
> > Can you provide a link to an actual page or at least a test page showing
> > the problem? It's always easier to help when we can see what is going on
> > with the rest of CSS / xHTML.
> >
> > Best
> >
> > Jim Nannery
> > www.oldcurmudgeon.net
> >
>
> __
> 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] can someone explain?
Thanks so much for the explanation, Kevin. What you're saying totally makes
sense! And it explains why that negative margin acts differently from the
positive margin (in the latter case, the 2nd li bumps into the margin). But I'm
wondering why putting a1px border on the list elements makes the anchors align
- even with the negative margin. The uls are still zero height.
Sara
On May 17, 2011, at 6:58 PM, Kevin A. Cameron wrote:
> I think this makes sense. Because the s are floated the s have 0
> height, so they both start at the same location. When you add negative margin
> to the first it's pulled above the containing . The second when
> floated left only sees the beginning of the and then is pulled up, and
> thereby overlapping.
>
> I'm sure someone here knows more about box model implementations by browsers
> and could provide a more technical answer.
>
> Kevin
>
>
> On Tue, May 17, 2011 at 12:13 PM, Sara Haradhvala wrote:
> Hi Jim,
>
> Margins and padding are 0.
>
> Here is the HTML:
>
>
>
>
>a1
>a2
>
>
>
>
>b1
>b2
>
>
>
>
> The CSS is:
>
> * {margin:0; padding:0}
> #menu {margin-top:20px}
> ul {list-style:none}
> ul * {float:left;}
> li {margin-top: -20px}
>
> Thanks,
> Sara
>
>
>
>
> On May 17, 2011, at 2:11 PM, JWN wrote:
>
> > Morning Sara
> >
> > You wrote
> >
> >
> >> Hi,
> >>
> >> I have two unordered lists, where each list has 1 list item with 2 links.
> >> If I float the list items and anchors left, all 4 anchors line up
> >> horizontally as expected. If I add a margin to the list items (but not the
> >> anchors), all anchors move down and are still horizontally lined up as
> >> expected. But if I put a negative margin on the list items instead, the
> >> anchors move up as expected, but the anchors from the 2nd list overlay
> >> the anchors from the first list instead of sitting to the right of them.
> >> I'm not understanding why this is, and hope someone can explain.
> >>
> >> I'm using firefox 4 on the Mac.
> >>
> >> Thanks,
> >> Sara
> >
> >
> > Just a guess but you might try zeroing out margins and padding on the body.
> >
> > body {
> > margin:0;
> > padding:0;
> > }
> >
> > Can you provide a link to an actual page or at least a test page showing
> > the problem? It's always easier to help when we can see what is going on
> > with the rest of CSS / xHTML.
> >
> > Best
> >
> > Jim Nannery
> > www.oldcurmudgeon.net
> >
>
> __
> 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/
[css-d] Fwd: can someone explain?
To clarify - I'm not trying to find an alternate solution to improve my test
program work or make it work properly - I'm hoping someone can explain to me
why the combination of floats & negative margins that I'm using are behaving as
they are -- I'm just trying to understand this aspect of CSS.
(By the way, the CSS should have included
a {display:block}
Thanks,
Sara
Begin forwarded message:
> From: Sara Haradhvala
> Date: May 17, 2011 3:46:57 PM EDT
> To: Ric Nudell
> Subject: Re: [css-d] can someone explain?
>
> Hi Ric,
>
> Sorry -
>
> but it doesn't make a difference to the results.
>
>
>
> Sara
>
>
>
> On May 17, 2011, at 3:37 PM, Ric Nudell wrote:
>
>>
>> * {margin:0; padding:0}
>> #menu {margin-top:20px}
>> ul {list-style:none}
>> ul * {float:left;}
>> li {margin-top: -20px}
>
__
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] can someone explain?
Hi Jim,
Margins and padding are 0.
Here is the HTML:
a1
a2
b1
b2
The CSS is:
* {margin:0; padding:0}
#menu {margin-top:20px}
ul {list-style:none}
ul * {float:left;}
li {margin-top: -20px}
Thanks,
Sara
On May 17, 2011, at 2:11 PM, JWN wrote:
> Morning Sara
>
> You wrote
>
>
>> Hi,
>>
>> I have two unordered lists, where each list has 1 list item with 2 links. If
>> I float the list items and anchors left, all 4 anchors line up horizontally
>> as expected. If I add a margin to the list items (but not the anchors), all
>> anchors move down and are still horizontally lined up as expected. But if I
>> put a negative margin on the list items instead, the anchors move up as
>> expected, but the anchors from the 2nd list overlay the anchors from the
>> first list instead of sitting to the right of them. I'm not understanding
>> why this is, and hope someone can explain.
>>
>> I'm using firefox 4 on the Mac.
>>
>> Thanks,
>> Sara
>
>
> Just a guess but you might try zeroing out margins and padding on the body.
>
> body {
> margin:0;
> padding:0;
> }
>
> Can you provide a link to an actual page or at least a test page showing the
> problem? It's always easier to help when we can see what is going on with the
> rest of CSS / xHTML.
>
> Best
>
> Jim Nannery
> www.oldcurmudgeon.net
>
__
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] can someone explain?
Hi, I have two unordered lists, where each list has 1 list item with 2 links. If I float the list items and anchors left, all 4 anchors line up horizontally as expected. If I add a margin to the list items (but not the anchors), all anchors move down and are still horizontally lined up as expected. But if I put a negative margin on the list items instead, the anchors move up as expected, but the anchors from the 2nd list overlay the anchors from the first list instead of sitting to the right of them. I'm not understanding why this is, and hope someone can explain. I'm using firefox 4 on the Mac. Thanks, Sara __ 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] css son of suckerfish dropdowns
am running into a problem when i hover over a top-level link (drop-down appears) and click the top level link to visit a new page. when i return (back button), the hover state is still on until i move away from the back button. i guess it's due to caching. any css way to keep this from happening? the default state is to hide the dropdown, while the hover state is to show it. thanks. __ 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] overlay link
thanks. On Mar 28, 2011, at 10:02 AM, G.Sørtun wrote: > On 28.03.2011 15:04, Sara Haradhvala wrote: >> I have a block of content, and I'd like to overlay a transparent link on top >> of the whole block -- where the link is active both on top of the text and >> in the margins. > > Sounds ugly, and difficult to debug without a direct link. > > Nevertheless, the old hack for IE was to link in a "non-existing" background > image to trick that browser into covering everything with the overlayed link. > Don't know > if that will work in your case in whatever IE versions you have problems with. > > regards >Georg > __ > 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/
[css-d] overlay link
I have a block of content, and I'd like to overlay a transparent link on top of the whole block -- where the link is active both on top of the text and in the margins. I created a link (display block of the right dimensions) and absolutely positioned it over the containing div that contains the content (as well as the link). This works fine in all browsers but IE. In IE, the link is only active in the margins - not directly over the text. I've played around with z-index. Do I have to create all text as links? Right now, they are p tags. Thanks __ 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] height and width specifications
thanks! i specify the sizes in the CSS for groupings of images that are all the same size (e.g. tthumbnails in a carousel or image gallery) and was just wondering if that is the correct thing to do. Sara On Mar 24, 2011, at 9:44 PM, G.Sørtun wrote: >> Is there any reason to specify an image's height and width on the >> img tag rather than (or in addition to) specifying in the CSS? > > Setting and image's width and height in the HTML code, reserves the space for > that element before image gets loaded. I don't think there is any other > advantage, and I rarely ever set image width/height in the HTML code. > I don't set images' width/height in CSS either, other than as general and > standard-classes for max-width to make images play nice with my layouts. > >> Could specifying the width and height only in the CSS be a reason >> that an image might load more slowly (in modern browsers)? > > If one specify varying dimensions for loads of images in CSS everything may > slow down somewhat simply because of large CSS. > I haven't notices such slow-down for my own work since I don't set dimensions > anywhere. Have an example? > > regards >Georg > > __ > 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/
[css-d] height and width specifications
Is there any reason to specify an image's height and width on the img tag rather than (or in addition to) specifying in the CSS? Could specifying the width and height only in the CSS be a reason that an image might load more slowly (in modern browsers)? Thanks, Sara __ 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/
