[css-d] CSS solution for a "curly" apostrophe
Is there a way I can use css to replace all dump apostrophes with curly ones? I¹m getting sick of searching and replacing with an html entity. I¹d like to apply it to the body so that it applies to all apostrophes. Thanks, Jeff > __ 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] CSS solution for a "curly" apostrophe
On 10/9/15, 12:35 PM, "css-d-boun...@lists.css-discuss.org on behalf of Chris Williams" <css-d-boun...@lists.css-discuss.org on behalf of ch...@clwill.com> wrote: >You mean the one that shows up as an unknown character on many platforms? >For reference either a superscript 3 or 1 in my email below... > >1) These characters are font dependent. Unless you are specifically >calling out fonts that you use, you risk using glyphs that will not be >found on your target machine. > >2) I don't believe you can use CSS to do it, but you certainly could do it >programmatically on the server (e.g. in PHP or whatever) or on the client >(in Javascript). For example, Wordpress typically does it in the backend. > > >On 10/9/15, 9:23 AM, "css-d-boun...@lists.css-discuss.org on behalf of >Gates, Jeff" <css-d-boun...@lists.css-discuss.org on behalf of >gat...@si.edu> wrote: > >>On 10/9/15, 12:20 PM, "Philip Taylor" <p.tay...@rhul.ac.uk> wrote >> >>> >>> >>>Gates, Jeff wrote: >>> >>>> Is there a way I can use css to replace all dump apostrophes with >>>>curly >>>> ones ? >>> >>>Google has never heard of "dump apostrophe(s)" (and neither have I), so >>>I regret that I can't help with this one. >>> >>>Philip Taylor >> >> >>Instead of a ³tick² mark for an apostrophe, I¹d like a mark like you see >>here: ¹ >>This: ¹ Not this: ' Thanks all. > __ 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] CSS solution for a "curly" apostrophe
On 10/9/15, 12:20 PM, "Philip Taylor" <p.tay...@rhul.ac.uk> wrote > > >Gates, Jeff wrote: > >> Is there a way I can use css to replace all dump apostrophes with curly >> ones ? > >Google has never heard of "dump apostrophe(s)" (and neither have I), so >I regret that I can't help with this one. > >Philip Taylor Instead of a ³tick² mark for an apostrophe, I¹d like a mark like you see here: ¹ This: ¹ Not this: ' __ 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] Changing Visibility on Just One Element
On 12/17/14, 5:28 PM, MiB digital.disc...@gmail.com wrote:
dec 17 2014 22:34 Gates, Jeff gat...@si.edu:
Jukka and Joergen, I¹ve already tried #cart-contents legend {
visibility:
hidden; } and it didn¹t work. Actually, that was the first thing I
tried.
Use the web developer tools in here:
https://www.mozilla.org/en-US/firefox/developer/ and you can be *certain*
what rules are used on what html elements. Why guess and look for the
needle in the stack?
Of course there is no needle. It¹s your perception playing games with
you. If you think you affected the look of an element and it doesn¹t
change, you didn¹t.
While intelligent suggestions like those you can get from the members
here certainly are useful, also do yourself a service and learn yourself
why things work and doesn¹t work by using tools that guide you with
relevant information.
View it as a learning adventure. Take apart pages, your own and others
and experiment. It¹s a great way to learn. Give yourself half an hour a
day at least to do that.
MIB, thanks for your email.
I spent a good amount of time in this ³learning adventure² before I even
wrote the CSS list. I¹ve learned to try things for myself before going to
any list.
There is something specific to this problem that limits my adventure. And
that is that I¹m dealing with a third party¹s backend in which I don¹t
have access to stylesheets or even the HTML. The shopping cart does allow
for changing the CSS through a form they have on their site but other than
that, my access is very limited. So, I have certain restrictions that
don¹t allow me full access and, therefore, I have to find workarounds
within their system. (If I did have access to their HTML I could have
easily done what I needed to do in about 15 seconds.
The problem with using #cart-contents is that it controls the WHOLE page
of the shopping cart. Hide that ID and the page turns blank.
Jeff
__
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] Changing Visibility on Just One Element
On 12/17/14, 4:52 PM, Jukka K. Korpela jkorp...@cs.tut.fi wrote:
2014-12-17, 23:34, Gates, Jeff wrote:
I¹ve already tried #cart-contents legend { visibility:
hidden; } and it didn¹t work. Actually, that was the first thing I
tried.
Where did you put that rule? Does *anything* work where you placed it?
To see the entire code go to
http://americanart.si.edu/support/donate/index.cfm, then click on any of
the Donate buttons to bring you to our third party shopping cart. Then
click the green CHECK OUT button on the lower right to take you to the
page I¹m trying to alter.
I did that, and modified the page CSS on the fly by adding the rule,
using Firefox Web Developer Extension, and it worked: the legend
disappears.
So my guess is that you placed the rule e.g. in an external style sheet
that just does not get loaded due to some error in referring to it.
Yucca
Yucca, question: when you used the Firefox Web Developer Extension, did
you notice if every legend disappeared or just the very first one (Your
Shopping Cart)? Second, I am not allowed access to either the shopping
cart¹s stylesheets directly nor to the HTML. So, I am limited in how much
control I have here. There is a field in their Cart Customization page
that allows me to put CSS that will override their CSS so finding the
right place within the stylesheet to place my CSS is not an option.
Jeff
__
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] Changing Visibility on Just One Element
On 12/18/14, 10:04 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote 2014-12-18, 16:26, Gates, Jeff wrote: Yucca, question: when you used the Firefox Web Developer Extension, did you notice if every legend disappeared or just the very first one (Your Shopping Cart)? There is no other legend element on the page. Second, I am not allowed access to either the shopping cart¹s stylesheets directly nor to the HTML. So, I am limited in how much control I have here. There is a field in their Cart Customization page that allows me to put CSS that will override their CSS so finding the right place within the stylesheet to place my CSS is not an option. You may need to find out how that actually works. On the page tested, there are no CSS settings for the visibility property, so any setting for that property should override the default. But maybe their setup someone filters out part of the CSS code that you try to inject. Using some browser’s developer tools, you should be able to look at the CSS code that actually gets sent to browsers. Yucca Actually, on that page, no, there aren’t any more legends but if you click to the next page (click on the green CHECKOUT button) there are three legends. I was having a problem just hiding the first. But I FINALLY figured it out. Yes, it was what you and others said to do but, I swear, the first time I did it with that exact CSS every single legend disappeared. I stand corrected and, most of all, I appreciate everyone’s help. Jeff __ 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] Changing Visibility on Just One Element
I¹m trying to find a workaround for hiding one headline on a shopping cart
hosted page. I don¹t have access to the code on the page but I can create
some CSS to hide the element. Unfortunately, it also hides other headlines
on the page.
This is the CSS that will hide ALL headlines on the checkout page:
form fieldset legend {visibility:hidden;}
I only want to hide one headline. Here is the code for that headline:
fieldset id=cart-contents
legend accesskey=yYour Shopping Cart/legend
/fieldset
But I want these headlines to remain visible. Here is the code for these
other headlines:
fieldset id=billing-address
legend accesskey=bBilling Information/legend
/fieldset
fieldset id=payment-tabs
legend accesskey=pPayment Information/legend
/fieldset
fieldset id=comments
legend accesskey=cAdditional Comments to Museum Staff/legend
/fieldset
I¹ve tried this to hide only ³Your Shopping Cart²:
#cart-contents form fieldset legend {visibility:hidden;}
But this does nothing. It doesn¹t hide ³Your Shopping Cart².
Considering I don¹t have access to the page itself as it¹s ³hardcoded² by
the shopping cart vendor and I can only change CSS, can anyone tell me how
I can hide the first headline without hiding all the others?
Thanks,
Jeff
__
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] Changing Visibility on Just One Element
On 12/17/14, 3:43 PM, Jukka K. Korpela jkorp...@cs.tut.fi wrote:
2014-12-17, 22:24, Gates, Jeff wrote:
I only want to hide one headline. Here is the code for that headline:
fieldset id=cart-contents
legend accesskey=yYour Shopping Cart/legend
/fieldset
If that is the entire element, you can hide it with
#cart-contents { visibility: hidden; }
If it contains other elements, especially controls and their labels, as
it should, and you want to hide just the legend, use
#cart-contents legend { visibility: hidden; }
I¹ve tried this to hide only ³Your Shopping Cart²:
#cart-contents form fieldset legend {visibility:hidden;}
Well, it matches no elements, since the element with id=cart-contents
does not contain any form or any fieldset. It *is* a fieldset, so it
could be referred to with fieldset#cart-contents, but it is simpler to
use just #cart-contents.
Yucca
Jukka and Joergen, I’ve already tried #cart-contents legend { visibility:
hidden; } and it didn’t work. Actually, that was the first thing I tried.
To see the entire code go to
http://americanart.si.edu/support/donate/index.cfm, then click on any of
the Donate buttons to bring you to our third party shopping cart. Then
click the green CHECK OUT button on the lower right to take you to the
page I’m trying to alter.
Thanks.
Jeff
__
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] Too much space in header
I've noticed a problem with how my header displays on individual blog post pages when the site is viewed on a smartphone. It's a WP responsive template. The media queries defining both seem to be the same (unless I'm missing something, which is possible). Here is an example of what it looks like: http://outtacontext.com/blog/2013/08/china-the-search-is-the-holy-grail/ (resize window to see that there is a lot of white space around the header graphic). However, on every other page on the site it looks like this (this is the correct way it should display): http://outtacontext.com/blog/category/fairly-odd-parents-present/a-trip-bac k-home-to-china/ The header graphic is flush with the top and it is a bit larger. Again, this the correct way and the way it displays on every other page on my site. Using Firebug to see where the difference is coming from, while it appears that the height of the #header is different in both of these examples, I can't find the differences in the css being used. Here are two images showing the problem design (http://outtacontext.com/images/wrong.png) and the correct design (http://outtacontext.com/images/correct.png). There is too much space in the first one. But I can't tell what's defining that extra space. I can't find it in the css. Any help you can give would be appreciated. Thanks. Jeff __ 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 Browser Mode; IE Document Mode
From: Tom Livingston tom...@gmail.commailto:tom...@gmail.com Date: Wednesday, January 30, 2013 9:01 AM To: Philippe Wittenbergh e...@l-c-n.commailto:e...@l-c-n.com Cc: Jeff Gates gat...@si.edumailto:gat...@si.edu, css-d@lists.css-discuss.orgmailto:css-d@lists.css-discuss.org css-d@lists.css-discuss.orgmailto:css-d@lists.css-discuss.org Subject: Re: [css-d] IE Browser Mode; IE Document Mode I was going to reply earlier with the meta I use, which is: meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 This does what Philippe describes as well as utilize Chrome Frame if the user has it installed. On Tue, Jan 29, 2013 at 9:16 PM, Philippe Wittenbergh e...@l-c-n.commailto:e...@l-c-n.com wrote: Le 30 janv. 2013 à 02:22, Gates, Jeff gat...@si.edumailto:gat...@si.edu a écrit : Right now we use a tag on our pages that tells the page to render in IE7: meta http-equiv=X-UA-Compatible content=IE=7. In working on a new splash page all looked good in Firefox, Chrome, Safari but there were some strange things going on when I looked at it in IE8. I see that when I change the meta tag to display the page in IE8 instead of IE7 most of those issues go away. So with that in mind: If we change the meta tag to display in IE8 instead of IE7 what will people who are using IE7 see (what mode will our page be displayed in)? We no longer are supporting IE6 and below. Depending on the answer to this question, perhaps we should stop developing for IE7 as well. What's your opinion? For _new_ documents, you should always push IE to display in the latest mode (that it supports): meta http-equiv=X-UA-Compatible content=IE=edge Then test in older versions and add some adjustments as needed (i.e.via conditional comments). If we changed this to: !DOCTYPE html html How would this affect what IE7 and IE8 render our pages? With the HTML5 doctype, IE 6 and up will all render in 'strict' mode, or their understanding of it…; there are some differences with what you use now (strict vs transitional). But as noted above, adjust for older browsers if needed. Philippe -- Philippe Wittenbergh http://l-c-n.co m Thanks Phillipe and Tom. I read about using edge in the meta tag but in a number of places I found that it is recommended that edge be used for testing, not production. So, why not use: meta http-equiv=X-UA-Compatible content=IE=7,8,9,10 / ? I realize that would mean we would have to update the tag whenever a new IE version comes out but it only appears once, in our head include. Also, I ran some stats on which IE browsers our users use and it was encouraging: IE9=13%, IE8=9.6%, IE7=1.5%, and wonderfully IE6=.1%. __ 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 Browser Mode; IE Document Mode
From: Tom Livingston tom...@gmail.commailto:tom...@gmail.com Date: Wednesday, January 30, 2013 9:35 AM To: Jeff Gates gat...@si.edumailto:gat...@si.edu Cc: Philippe Wittenbergh e...@l-c-n.commailto:e...@l-c-n.com, css-d@lists.css-discuss.orgmailto:css-d@lists.css-discuss.org css-d@lists.css-discuss.orgmailto:css-d@lists.css-discuss.org Subject: Re: [css-d] IE Browser Mode; IE Document Mode I was going to reply earlier with the meta I use, which is: meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 This does what Philippe describes as well as utilize Chrome Frame if the user has it installed. Right now we use a tag on our pages that tells the page to render in IE7: meta http-equiv=X-UA-Compatible content=IE=7. In working on a new splash page all looked good in Firefox, Chrome, Safari but there were some strange things going on when I looked at it in IE8. I see that when I change the meta tag to display the page in IE8 instead of IE7 most of those issues go away. So with that in mind: If we change the meta tag to display in IE8 instead of IE7 what will people who are using IE7 see (what mode will our page be displayed in)? We no longer are supporting IE6 and below. Depending on the answer to this question, perhaps we should stop developing for IE7 as well. What's your opinion? For _new_ documents, you should always push IE to display in the latest mode (that it supports): meta http-equiv=X-UA-Compatible content=IE=edge Then test in older versions and add some adjustments as needed (i.e.via conditional comments). [snip] With the HTML5 doctype, IE 6 and up will all render in 'strict' mode, or their understanding of it…; there are some differences with what you use now (strict vs transitional). But as noted above, adjust for older browsers if needed. Philippe -- Philippe Wittenbergh http://l-c-n.co m Thanks Phillipe and Tom. I read about using edge in the meta tag but in a number of places I found that it is recommended that edge be used for testing, not production. So, why not use: meta http-equiv=X-UA-Compatible content=IE=7,8,9,10 / ? I realize that would mean we would have to update the tag whenever a new IE version comes out but it only appears once, in our head include. That seems odd to me. Why test and develop against 'edge', then back off by substituting it with, say, 8 before going live? Seems like you'd be running the risk of adding problems back into your page. Maybe I'm just not understanding it all enough. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.comhttp://mlinc.com Understood. I did a bit of sleuthing and many do use: meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1. Thanks Tom. Jeff __ 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 Browser Mode; IE Document Mode
I'd like some clarification on how !DOCTYPE and legacy modes affect the look of a web page in versions of IE. I work with many people so I am not in total control of how pages are coded. But I would like to know enough to bring up a discussion amongst my fellow workers so we can be consistent and present the best page possible. So I have a number of questions. Right now we use a tag on our pages that tells the page to render in IE7: meta http-equiv=X-UA-Compatible content=IE=7. In working on a new splash page all looked good in Firefox, Chrome, Safari but there were some strange things going on when I looked at it in IE8. I see that when I change the meta tag to display the page in IE8 instead of IE7 most of those issues go away. So with that in mind: If we change the meta tag to display in IE8 instead of IE7 what will people who are using IE7 see (what mode will our page be displayed in)? We no longer are supporting IE6 and below. Depending on the answer to this question, perhaps we should stop developing for IE7 as well. What's your opinion? Our doctype at the moment is: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; If we changed this to: !DOCTYPE html html How would this affect what IE7 and IE8 render our pages? I'm trying to understand if there is any reason we shouldn't start stipulating an HTML5 doctype and if forcing to render our pages in IE8 (and perhaps IE9 as well) would adversely affect those viewing our pages in IE7. Thanks. Jeff __ 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] Media Query Not Working
I am redesigning a splash page and in it I have a jquery slider (which is
responsive). The page has to reformat gracefully from a full site to a
smartphone size. Most of our site is mobile already. The slider is
resizing nicely but the captions that are included in some of the slides
are not.
Firebug is showing that when it's resized it's still applying the regular
style for the caption which is:
.theme-default .nivo-caption {
font-family: Lucida Sans Unicode,Lucida
Grande,Arial,Helvetica,sans-serif;
font-size: 16px;
}
}
I created a media query to resize it to 10px but that doesn't seem to be
taking and I can't figure out why. Here's the media query style:
/* Mobil Caption on Slider */
@media only screen and (max-device-width: 480px) {
.theme-default .nivo-caption {
font-family: Lucida Sans Unicode,Lucida
Grande,Arial,Helvetica,sans-serif;
font-size: 10px;
}
}
And here is the page in question:
http://americanart.si.edu/index_newsplash3.cfm (don't be concerned about
the gray and black boxes under the slider).
Can anyone tell me how to fix this? Thx.
Jeff
__
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] Media Query Not Working
2012-12-19 21:11, Gates, Jeff wrote:
Firebug is showing that when it's resized it's still applying the
regular
style for the caption
[...]
@media only screen and (max-device-width: 480px) {
The rule tests for device width, not viewport width. For the latter, you
would use max-width.
http://americanart.si.edu/index_newsplash3.cfm
There are 26 errors reported by the W3C Markup Validator and 65 errors
reported by the W3C CSS Validator when testing against CSS3 and defining
vendor extensions as warnings only. Although many of the CSS errors are
caused by using IE-specific methods, some of them are relevant and may
even relate to the problem at hand.
Yucca
Thanks 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] Footer Needs a Couple CSS Tweaks
On 9/27/12 3:53 PM, Tom Livingston tom...@gmail.com wrote: On Thu, Sep 27, 2012 at 3:45 PM, Gates, Jeff gat...@si.edu wrote: On 9/27/12 3:05 PM, Tom Livingston tom...@gmail.com wrote: On Thu, Sep 27, 2012 at 2:59 PM, Gates, Jeff gat...@si.edu wrote: On 9/27/12 2:45 PM, Tom Livingston tom...@gmail.com wrote: On Thu, Sep 27, 2012 at 2:37 PM, Gates, Jeff gat...@si.edu wrote: On 9/27/12 2:09 PM, Tom Livingston tom...@gmail.com wrote: I think #2 is related to #1... On Thu, Sep 27, 2012 at 2:04 PM, Gates, Jeff gat...@si.edu wrote: I am creating a new footer for our organization's website. And I almost have it but can't seem to fix a couple things. You can see the page in question here: http://americanart.si.edu/collections/index_footer.cfm The issues are: 1. I can't seem to get rid of the white space under the brown footer (but above the institutional and copyright links). The white is part of the container CSS and I don't know what's making it appear there. 2. I'd like the image on the right to be flush with the top, right, and bottom edges. The top is fine. But the right seems to be an issue with, I believe a margin or padding of the container style again. How can I override that? The bottom is because of the the padding I put on the .colmask style to extend the brown just a bit. The footer is basically three columns and the image is the last column. But within the 3 col div I can't get it to move to the right nor to the bottom. It's almost as if I need to take the image column out of the footer container. Suggestions? Thanks! Jeff Tom, thanks for the pointer about #1. I fixed it. As for number 2, fixing number 1 didn't do anything for #2. Jeff I'm still seeing the white under the brown footer in Chrome OSX 22.x Did you post the change? The changes should be visible now. Looking good. You looking to get rid of the gap at the bottom? colmask has a padding bottom... Yes, I am trying to get rid of the gap of brown just below the image. I put the padding there so that the text in the footer would have some space below it. If you can tell me how I can get that to work, that would be perfect. Kind of a tough one. You have a fixed dimension element next to text. You could - obviously - reduce the text size (move your footer bottom padding to the col1 and col2 divs, just in case) or increase the image height. Obviously, there are gotchas with those. I guess another way to go is make the photo a BG image of col3 and play with the background-size property. THis would require col3 to be 100% height of the footer, and still move the padding to inside col1 and col2. Okay, I have everything working in this footer except for one thing. And, of course, it's an IE thing. The URL in question is http://americanart.si.edu/collections/index_footer.cfm I want the image in the footer of this page to be flush top, flush bottom, and flush right. In order to do that I included it in the footer background image. That did the job for Firefox, Safari but not IE 8 or 9. Instead, it becomes the background image for the whole content area. If you want to see how it should look, view it in one of those other browsers. Can anyone tell me how to adjust the code so this doesn't happen in IE? Thanks. Jeff __ 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] Footer Needs a Couple CSS Tweaks
On 9/28/12 11:03 AM, Tom Livingston tom...@gmail.com wrote:
On Fri, Sep 28, 2012 at 11:01 AM, Tom Livingston tom...@gmail.com wrote:
On Fri, Sep 28, 2012 at 10:36 AM, Gates, Jeff gat...@si.edu wrote:
On 9/27/12 3:53 PM, Tom Livingston tom...@gmail.com wrote:
On Thu, Sep 27, 2012 at 3:45 PM, Gates, Jeff gat...@si.edu wrote:
On 9/27/12 3:05 PM, Tom Livingston tom...@gmail.com wrote:
On Thu, Sep 27, 2012 at 2:59 PM, Gates, Jeff gat...@si.edu wrote:
On 9/27/12 2:45 PM, Tom Livingston tom...@gmail.com wrote:
On Thu, Sep 27, 2012 at 2:37 PM, Gates, Jeff gat...@si.edu wrote:
On 9/27/12 2:09 PM, Tom Livingston tom...@gmail.com wrote:
I think #2 is related to #1...
On Thu, Sep 27, 2012 at 2:04 PM, Gates, Jeff gat...@si.edu
wrote:
I am creating a new footer for our organization's website. And
I
almost
have it but can't seem to fix a couple things.
You can see the page in question here:
http://americanart.si.edu/collections/index_footer.cfm
The issues are:
1. I can't seem to get rid of the white space under the brown
footer
(but
above the institutional and copyright links). The white is
part of
the
container CSS and I don't know what's making it appear there.
2. I'd like the image on the right to be flush with the top,
right,
and
bottom edges. The top is fine. But the right seems to be an
issue
with,
I
believe a margin or padding of the container style again. How
can
I
override that? The bottom is because of the the padding I put
on
the
.colmask style to extend the brown just a bit.
The footer is basically three columns and the image is the last
column.
But within the 3 col div I can't get it to move to the right
nor
to
the
bottom. It's almost as if I need to take the image column out
of
the
footer container.
Suggestions?
Thanks!
Jeff
Tom, thanks for the pointer about #1. I fixed it. As for number
2,
fixing
number 1 didn't do anything for #2.
Jeff
I'm still seeing the white under the brown footer in Chrome OSX
22.x
Did you post the change?
The changes should be visible now.
Looking good. You looking to get rid of the gap at the bottom?
colmask
has a padding bottom...
Yes, I am trying to get rid of the gap of brown just below the
image. I
put the padding there so that the text in the footer would have some
space
below it. If you can tell me how I can get that to work, that would
be
perfect.
Kind of a tough one. You have a fixed dimension element next to text.
You could - obviously - reduce the text size (move your footer bottom
padding to the col1 and col2 divs, just in case) or increase the image
height. Obviously, there are gotchas with those.
I guess another way to go is make the photo a BG image of col3 and
play with the background-size property. THis would require col3 to be
100% height of the footer, and still move the padding to inside col1
and col2.
Okay, I have everything working in this footer except for one thing.
And,
of course, it's an IE thing. The URL in question is
http://americanart.si.edu/collections/index_footer.cfm
I want the image in the footer of this page to be flush top, flush
bottom,
and flush right. In order to do that I included it in the footer
background image. That did the job for Firefox, Safari but not IE 8 or
9.
Instead, it becomes the background image for the whole content area. If
you want to see how it should look, view it in one of those other
browsers.
Can anyone tell me how to adjust the code so this doesn't happen in IE?
Thanks.
Jeff
Did you try .footer{clear: both;} ?
--
My bad. IE's dev tools aren't that great nevermind.
Actually, Tom, clear: both; worked! However, in IE the image is no longer
flush to the top and, in fact, the text looks like it's sitting too close
to the top.
__
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] Footer Needs a Couple CSS Tweaks
I am creating a new footer for our organization's website. And I almost have it but can't seem to fix a couple things. You can see the page in question here: http://americanart.si.edu/collections/index_footer.cfm The issues are: 1. I can't seem to get rid of the white space under the brown footer (but above the institutional and copyright links). The white is part of the container CSS and I don't know what's making it appear there. 2. I'd like the image on the right to be flush with the top, right, and bottom edges. The top is fine. But the right seems to be an issue with, I believe a margin or padding of the container style again. How can I override that? The bottom is because of the the padding I put on the .colmask style to extend the brown just a bit. The footer is basically three columns and the image is the last column. But within the 3 col div I can't get it to move to the right nor to the bottom. It's almost as if I need to take the image column out of the footer container. Suggestions? Thanks! Jeff __ 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] Footer Needs a Couple CSS Tweaks
On 9/27/12 2:09 PM, Tom Livingston tom...@gmail.com wrote: I think #2 is related to #1... On Thu, Sep 27, 2012 at 2:04 PM, Gates, Jeff gat...@si.edu wrote: I am creating a new footer for our organization's website. And I almost have it but can't seem to fix a couple things. You can see the page in question here: http://americanart.si.edu/collections/index_footer.cfm The issues are: 1. I can't seem to get rid of the white space under the brown footer (but above the institutional and copyright links). The white is part of the container CSS and I don't know what's making it appear there. 2. I'd like the image on the right to be flush with the top, right, and bottom edges. The top is fine. But the right seems to be an issue with, I believe a margin or padding of the container style again. How can I override that? The bottom is because of the the padding I put on the .colmask style to extend the brown just a bit. The footer is basically three columns and the image is the last column. But within the 3 col div I can't get it to move to the right nor to the bottom. It's almost as if I need to take the image column out of the footer container. Suggestions? Thanks! Jeff Tom, thanks for the pointer about #1. I fixed it. As for number 2, fixing number 1 didn't do anything for #2. Jeff __ 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] Footer Needs a Couple CSS Tweaks
On 9/27/12 2:45 PM, Tom Livingston tom...@gmail.com wrote: On Thu, Sep 27, 2012 at 2:37 PM, Gates, Jeff gat...@si.edu wrote: On 9/27/12 2:09 PM, Tom Livingston tom...@gmail.com wrote: I think #2 is related to #1... On Thu, Sep 27, 2012 at 2:04 PM, Gates, Jeff gat...@si.edu wrote: I am creating a new footer for our organization's website. And I almost have it but can't seem to fix a couple things. You can see the page in question here: http://americanart.si.edu/collections/index_footer.cfm The issues are: 1. I can't seem to get rid of the white space under the brown footer (but above the institutional and copyright links). The white is part of the container CSS and I don't know what's making it appear there. 2. I'd like the image on the right to be flush with the top, right, and bottom edges. The top is fine. But the right seems to be an issue with, I believe a margin or padding of the container style again. How can I override that? The bottom is because of the the padding I put on the .colmask style to extend the brown just a bit. The footer is basically three columns and the image is the last column. But within the 3 col div I can't get it to move to the right nor to the bottom. It's almost as if I need to take the image column out of the footer container. Suggestions? Thanks! Jeff Tom, thanks for the pointer about #1. I fixed it. As for number 2, fixing number 1 didn't do anything for #2. Jeff I'm still seeing the white under the brown footer in Chrome OSX 22.x Did you post the change? The changes should be visible now. __ 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] Footer Needs a Couple CSS Tweaks
On 9/27/12 3:05 PM, Tom Livingston tom...@gmail.com wrote: On Thu, Sep 27, 2012 at 2:59 PM, Gates, Jeff gat...@si.edu wrote: On 9/27/12 2:45 PM, Tom Livingston tom...@gmail.com wrote: On Thu, Sep 27, 2012 at 2:37 PM, Gates, Jeff gat...@si.edu wrote: On 9/27/12 2:09 PM, Tom Livingston tom...@gmail.com wrote: I think #2 is related to #1... On Thu, Sep 27, 2012 at 2:04 PM, Gates, Jeff gat...@si.edu wrote: I am creating a new footer for our organization's website. And I almost have it but can't seem to fix a couple things. You can see the page in question here: http://americanart.si.edu/collections/index_footer.cfm The issues are: 1. I can't seem to get rid of the white space under the brown footer (but above the institutional and copyright links). The white is part of the container CSS and I don't know what's making it appear there. 2. I'd like the image on the right to be flush with the top, right, and bottom edges. The top is fine. But the right seems to be an issue with, I believe a margin or padding of the container style again. How can I override that? The bottom is because of the the padding I put on the .colmask style to extend the brown just a bit. The footer is basically three columns and the image is the last column. But within the 3 col div I can't get it to move to the right nor to the bottom. It's almost as if I need to take the image column out of the footer container. Suggestions? Thanks! Jeff Tom, thanks for the pointer about #1. I fixed it. As for number 2, fixing number 1 didn't do anything for #2. Jeff I'm still seeing the white under the brown footer in Chrome OSX 22.x Did you post the change? The changes should be visible now. Looking good. You looking to get rid of the gap at the bottom? colmask has a padding bottom... Yes, I am trying to get rid of the gap of brown just below the image. I put the padding there so that the text in the footer would have some space below it. If you can tell me how I can get that to work, that would be perfect. __ 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] Responsive images not scaling down
Two images on a page don't seem to be resizing as they should when I reduce the
viewport. The page in question is http://www.outtacontext.com/wp2/about/past7/
I have a three column layout on this page with images in the left div and the
right div. Text is in the middle div. I have a max-width:100% style to all
images (on other pages using the same template and css they are working but
these pages are not three columns). Here's the CSS for the three columns:
#past_background div#left {
float: left;
width: 38%;
text-align: right;
padding-right: 1%;
}
#past_background div#right {
float: right;
width: 38%;
text-align: left;
padding-left: 1%;
}
#past_background div#middle {
margin: 0px;
}
Can someone tell me why the images aren't scaling down? Thanks.
Jeff
__
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] Responsive images not scaling down
From: css-d-boun...@lists.css-discuss.org [css-d-boun...@lists.css-discuss.org] On Behalf Of Georg [gunla...@c2i.net] Sent: Sunday, July 15, 2012 6:38 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Responsive images not scaling down On 15.07.2012 23:45, Gates, Jeff wrote: Can someone tell me why the images aren't scaling down? Thanks. Images scale fine - never wider than 100% of their containers, but with only 22% width left for the center column the layout doesn't force image scaling until page is so narrow that center column looks broken. regards Georg Thanks Georg. I can see what you're saying. And I started to play around with increasing the side div percentages. However, what I'd like to maintain is a somewhat narrow middle column for the text (I'd like the text to be more vertical than horizontal as a block). How can I do that? Jeff __ 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] Problems Centering an Image
On 7/10/12 7:40 PM, Isabel Santos unboun...@gmail.com wrote:
Sorry Jeff,
spoke too soon, tested this solution:
!DOCTYPE html
html
head
style type=text/css media=screen!--
#wrap {width:60%; margin:0 auto; position:relative;}
img{width:100%; top:0; margin-left:50%; left:-50%; display:block;
position:absolute;}
--/style
/head
body
div id=wrap
img src=img/yourimage1.jpg
img src=img/yourimage2.jpg
/div
/body
/html
seams to work
the idea is relatively positioning a wrapper with the dimensions you need;
Then you can give 100% width to the images so they scale;
left and margin-left will keep it centered
hope this one helps,
isabel
On Tue, Jul 10, 2012 at 11:47 PM, Isabel Santos unboun...@gmail.com
wrote:
Jeff,
the problem is if you need to put images one on top of the other you
need
to use absolute positioning, wich relies on the position on the page
relative to the closest positioned parent and not on the position of the
closest parent.
The solution is old and has support on most browsers: centering a zero
width closest parent (by closest I mean next up in the stack).
You have a good exemple here:
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
hope it helps,
isabel
On Tue, Jul 10, 2012 at 9:55 PM, Georg gunla...@c2i.net wrote:
On 10.07.2012 19:40, Gates, Jeff wrote:
Hmmm, I added a max-width of 800px (which is the width of the actual
image
and I think it's working!
#past_background div.past5 {
display: block;
margin-left: auto;
margin-right: auto;
width:60%;
max-width: 800px;
border: 1px solid orange;
}
If you reverse the width declaration to 'width: 800px; max-width:
60%;',
you will get the same behavior in a container that behaves responsive
the
same way as the images. Although appearance/responsiveness will be the
same
this behavior may be easier to grasp..?
Images should have a 'max-width: 100%' of its container.
But, of course, I don't understand why. And this is what bothers me
with
developing a responsive design. If I create a style and it doesn't
work I
play with it until it does (or end up writing this list if nothing I
do
works) but I often feel like I'm striking in the dark, hoping to hit
it,
if you know what I mean. -g
The original problem lies in that the image on top was/is absolute
positioned to the top/left of its container, and as the container
expands
it stays top/left regardless of centering of real image. Making the
container no larger than the real image and centering it, makes
top/left
position the same for both images, so positioned and non-positioned
images
stay and respond the same.
regards
Georg
Thanks Georg and Isabel!! I appreciate the explanations.
Jeff
__
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] Problems Centering an Image
I am trying to center an image within a container in a responsive
Wordpress web design. The URL of the problematic page is:
http://www.outtacontext.com/wp2/about/past5/ I have put an orange border
around the container to help show you the problem. When the viewport gets
very wide, the image is no longer centered within the container.
I have other similar pages where it is centered but this page is a bit
different. I'm using a Wordpress plugin for an image swap (roll over the
image and you will see it). This changes the code a bit and I can't get
the image centered.
The code for this page (I've identified in comments the code the WP plugin
adds and which I can't alter) is:
body id=past_background
div class=past_center
div class=past5
!--Style added by image swap plugin --
style
.himage
{
-webkit-transition: opacity .2s ease-out 0s;
-moz-transition: opacity .2s ease-out 0s;
-o-transition: opacity .2s ease-out 0s;
transition: opacity .2s ease-out 0s;
}
/style
!--div style added by plugin --
div style=position:relative;a
href=http://outtacontext.com/wp2/past6; class=nounderlineimg
src=/wp2/wp-content/themes/sentence/images/past/past5_on.jpg width=
height= /
!--style, onmouseover, and onmouseout added by plugin --
img class=himage
src=/wp2/wp-content/themes/sentence/images/past/past5_of.jpg width=
height= onmouseover=this.style.opacity=0;
onmouseout=this.style.opacity=1; style=position:absolute; top:0;
left:0; //a/div/div
div class=text
pWhen I graduated from high school I got about as far away from the
Valley as I could./p
/div
The CSS I am using is, specific to this page:
#past_background div.past5 {
display: block;
margin-left: auto;
margin-right: auto;
width:60%;
border: 1px solid orange;
}
#past_background div.text {
display: block;
margin: 0 auto 0 auto;
width:34%;
}
Just for comparison, a page that doesn't use the plugin but does center
the image is http://www.outtacontext.com/wp2/about/past2-2/ (Ignore the
white border around the text. I'm just using the border to observe how
parts of the page work in the responsive design.). The CSS that does
center the image on this page is:
#past_background img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
But because of the rollover plugin and how it works, I can't use this
style on the problem page.
I'd love to know how I can keep the rollover images centered horizontally
within the past5 page.
Thanks, Jeff
__
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] Problems Centering an Image
On 7/10/12 12:34 PM, Georg gunla...@c2i.net wrote:
On 10.07.2012 17:19, Gates, Jeff wrote:
I am trying to center an image within a container in a responsive
Wordpress web design. The URL of the problematic page is:
http://www.outtacontext.com/wp2/about/past5/
Add...
a.nounderline {display: table;
margin: 0 auto;
position: relative;}
...and it will center in all browsers that support positioning on CSS
table.
regards
Georg
Thanks Georg. The problem with that is the image no longer resizes as the
viewport gets smaller.
Jeff
__
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] Problems Centering an Image
On 7/10/12 12:52 PM, Tom Livingston tom...@gmail.com wrote:
Add...
a.nounderline {display: table;
margin: 0 auto;
position: relative;}
...and it will center in all browsers that support positioning on CSS
table.
regards
Georg
Thanks Georg. The problem with that is the image no longer resizes as
the
viewport gets smaller.
Jeff
Didn't look at the page, but have you tried display:block; and margin
x auto x auto; ??
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
Yes, Tom. I used this CSS on the container around the [two] images (the on
and off images):
#past_background div.past5 {
display: block;
margin-left: auto;
margin-right: auto;
width:60%;
}
The problem is is that I can't use that on the images because, for some
reason, I can only affect the off image. I can move it around, but not
the hover/on image. Obviously, they need to be positioned one on top of
the other.
Here's the code that is generated by my WP template and the image swap
plugin:
a class=nounderline href=http://outtacontext.com/wp2/past6;
img width= height=
src=/wp2/wp-content/themes/sentence/images/past/past5_on.jpg
img class=himage width= height= style=position: absolute; top:
0px; left: 0px; opacity: 1; onmouseout=this.style.opacity=1;
onmouseover=this.style.opacity=0;
src=/wp2/wp-content/themes/sentence/images/past/past5_of.jpg
/a
Jeff
__
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] Problems Centering an Image
On 7/10/12 1:26 PM, Tom Livingston tom...@gmail.com wrote:
Yes, Tom. I used this CSS on the container around the [two] images (the
on
and off images):
#past_background div.past5 {
display: block;
margin-left: auto;
margin-right: auto;
width:60%;
}
The problem is is that I can't use that on the images because, for some
reason, I can only affect the off image. I can move it around, but not
the hover/on image. Obviously, they need to be positioned one on top of
the other.
Here's the code that is generated by my WP template and the image swap
plugin:
I don't have time to test this, but could you add a max-width on
#past_background div.past5 of the size of the full-size image, and let
it do the centering? So it only gets as big as the full-size image and
stops and it's margins do the centering? Only flaw here is varying
sized images...
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
Hmmm, I added a max-width of 800px (which is the width of the actual image
and I think it's working!
#past_background div.past5 {
display: block;
margin-left: auto;
margin-right: auto;
width:60%;
max-width: 800px;
border: 1px solid orange;
}
But, of course, I don't understand why. And this is what bothers me with
developing a responsive design. If I create a style and it doesn't work I
play with it until it does (or end up writing this list if nothing I do
works) but I often feel like I'm striking in the dark, hoping to hit it,
if you know what I mean. -g
Thanks Tom.
Jeff
__
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] Getting Social Icons to Reposition Properly in Responsive Layout
I'm new to responsive web design. I am trying to get a row of social media
icons to move to the correct positions using a responsive WordPress template as
you make the screen smaller. But I'm having trouble. You can see the website in
progress at http://outtacontext.com/wp2 The row of social media icons is in the
upper area of the right sidebar.
The css in the layout.css is:
#top #sidebar_bg .social_bookmarks{
position: absolute;
right:143px;
z-index: 152;
margin-top:120px;
}
That looks good when the screen is the largest. However, as you make the window
smaller, the sidebar reduces in width and you can see that the icons don't move
accordingly. So I created a style using media queries for one of the smaller
viewport sizes to test it out:
@media only screen and (max-width: 959px) {}
#top #sidebar_bg .social_bookmarks {
margin-top: 80px;
position: absolute;
right: 100px;
z-index: 152;
}
However, when I add that style, the @media style controls the large viewport as
well and the original style is ignored. I tried making media query styles for
each max-width but it didn't make any difference. I believe the last style in
the list was always the one that was followed. (Now, at a certain point, the
social media icons become hidden as the screen goes even smaller. That's fine.
It's just the intermediary sizes that are presenting a problem.) Firebug helps
me see the icons shift as I change the parameters however, it doesn't help me
figure out why the row of icons isn't shifting properly at each size.
I have taken the media query style out so that you can see the original issue.
However, I'd like to know why my css for max-width: 959px isn't working right
as well. And I'd love to learn how to solve this problem. Thanks.
Jeff
__
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 Search Appliance Results Not Looking Good in IE 8
I am using the Google Search Appliance for our search on a website I'm developing. The appliance page layout page allows you to put in header and footer code to match the look of the results page with the site design. It looks fine in Firefox but the header looks really bad in IE 8 (I assume other IE's as well). Here's a search results page: http://si-pwebsrch02.si.edu/search?q=Malcolm+XbtnG=Searchsite=africanamericanartclient=africanamericanartproxystylesheet=africanamericanartoutput=xml_no_dtd I copied my header code from the rest of the site, making all links absolute. So the styles should be transferring to this results page. The yellow bar should be at the top of the page, to the right of the logo (look at this page for the way the header should look: http://africanamericanart.si.edu/art). The main menu items should be in tabs but those styles are also not transferring. In addition, each tab has a Superfish set of dropdown menus. Again, they aren't showing up. I know this is complicated. But can anyone lend a hand here? Thx. Jeff __ 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] Suddenly, A Strange CSS Occurrence
I'm suddenly seeing a strange CSS problem just with Firefox and Safari on a Mac on a site I've been working on. It's fine on Firefox, IE7 and Safari on a PC (this in itself is bizarre). Here's a sample page: http://africanamericanart.si.edu/items/show/89 If you click on View Related Material you should see a number of images with text. The images are supposed to float: right with the text on the left and wrapping underneath if there's enough text. The class that defines the float is related_image. But on my Mac browsers only the image appears above its text. And the style that floats it doesn't seem to be working. It's not even showing up in Firebug. Strange thing is, it was working just fine a few days ago. As I said, it's working on the browsers on my PC and Firebug IS showing the related_image style. I'd love to know what's going on and would appreciate any help you can give. Thx. Jeff __ 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] Suddenly, A Strange CSS Occurrence
I'm suddenly seeing a strange CSS problem just with Firefox and Safari on a Mac on a site I've been working on. It's fine on Firefox, IE7 and Safari on a PC (this in itself is bizarre). Here's a sample page: http://africanamericanart.si.edu/items/show/89 If you click on View Related Material you should see a number of images with text. The images are supposed to float: right with the text on the left and wrapping underneath if there's enough text. The class that defines the float is related_image. But on my Mac browsers only the image appears above its text. And the style that floats it doesn't seem to be working. It's not even showing up in Firebug. Strange thing is, it was working just fine a few days ago. As I said, it's working on the browsers on my PC and Firebug IS showing the related_image style. I'd love to know what's going on and would appreciate any help you can give. Thx. Jeff Mystery solved thanks to CSS list member, Tim. I had an extraneous #right just about the style. Don't even know how that got there. Thanks Tim!! Jeff __ 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] Styling Submenus on a Dropdown Menu
I have a question about styling submenus differently from the primary menus of
a dropdown menu. I've created styles for the dropdown menus, but at the moment
these dropdowns are inheriting the tabbed look of my primary menus.
I'm experimenting with using the Superfish dropdown menu. Here's my html:
div id=primary-nav
div class=tab_navigation
ul class=sf-menu
li class=nav-introductiona href=#Introduction/a
ul
li class=nav-about-oh-freedoma href=/introAbout Oh
Freedom!/a/li
li class=nav-faqa href=/faqFAQ/a/li
li class=nav-site-guidea href=/site_guideSite
Guide/a/li
lia href=mailto:africanamerican...@si.edu;Contact
Us/a/li
/ul
/li
li class=nav-explore-history-in-arta href=#Explore History in
Art/a
ul
li class=nav-timelinea href=/timelineTimeline/a/li
li class=nav-arta href=/artArt/a/li
li class=nav-artistsa href=/artistsArtists/a/li
li class=nav-collecta href=/myomeka/helpCollect/a/li
/ul
/li
li class=nav-lesson-plansa href=#Lesson Plans/a
ul
li class=nav-overviewa href=/overviewOverview/a/li
li class=nav-create-a-lesson-plana href=/shareCreate a
Lesson Plan/a/li
li class=nav-view-lesson-plansa href=/viewView Lesson
Plans/a/li
li class=nav-start-a-conversationa href=/discussStart a
Conversation/a/li
/ul
/li
li class=nav-more-resourcesa href=#More Resources/a
ul
li class=nav-curriculum-standardsa
href=/standardsCurriculum Standards/a/li
li class=nav-teacher-bibliographya
href=/teacher_bibliographyTeacher Bibliography/a/li
li class=nav-student-bibliographya
href=/student_bibliographyStudent Bibliography/a/li
li class=nav-general-bibliographya
href=/general_bibliographyGeneral Bibliography/a/li
li class=nav-glossarya href=/glossaryGlossary/a/li
li class=nav-subject-indexa href=/subject_indexSubject
Index/a/li
/ul
/li
/ul
/div!-- close tab-navigation --
/div!-- close primary-nav --
And here's my css:
#primary-nav {
float:left;
width:750px;
padding-left: 170px;
margin-top: 10px;
background:
url(http://africanamericanart.si.edu/themes/fromscratch/images/bg.gif;)
repeat-x bottom;
font-family:calibri, helvetica, verdana, san-serif;
font-size:20px;
line-height:normal;
}
#primary-nav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#primary-nav li {
float:left;
background:url(http://africanamericanart.si.edu/themes/fromscratch/images/left.gif;)
no-repeat left top;
margin:0;
padding:0 10px 0 9px;
}
#primary-nav a {
float:left;
display:block;
background:url(http://africanamericanart.si.edu/themes/fromscratch/images/right.gif;)
no-repeat right top;
padding:2px 13px 4px 4px;
text-decoration:none;
font-weight:bold;
color:#000;
}
#primary-nav a:hover {
color:#333;
}
/* Superfish Dropdowns */
/* ESSENTIAL STYLES */
.sf-menu, .sf-menu * {
margin:0;
padding:0;
list-style:none;
}
.sf-menu {
line-height:1.0;
}
.sf-menu ul {
position:absolute;
top:-999em;
width:10em; /* left offset of submenus need to match (see
below) */
}
.sf-menu ul li {
width:100%;
}
.sf-menu li:hover {
visibility:inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float:left;
position:relative;
}
.sf-menu a {
display:block;
position:relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left:0;
top:26px; /* match top ul list item height */
z-index:99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left:10em; /* match ul width */
top:0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left:10em; /* match ul width */
top:0;
}
/*Style of dropdowns*/
.sf-menu li li {
float:left;
margin-bottom:1em;
}
/* borders dropdown menus */
.sf-menu li li a {
border-left:1px solid #fff;
border-top:1px solid #000;
padding: .75em 1em;
text-decoration:none;
}
/* link color for dropdowns */
.sf-menu li li a, .sf-menu li li a:visited { /* visited pseudo selector so
IE6 applies text colour*/
color:#000;
}
/*background dropdown menus */
.sf-menu li li {
background:#fff;
}
/* hover background for dropdown menus */
.sf-menu li li:hover, .sf-menu li li.sfHover,
.sf-menu li
Re: [css-d] Styling Submenus on a Dropdown Menu
On 4/28/11 11:02 AM, Chetan Crasta chetancra...@gmail.com wrote:
To apply styles only to the first level lis, use this selector:
#primary-nav .tab_navigation ul li
I'm sorry, Chetan, but I'm not getting it. Is #primary-nav .tab_navigation
ul li the actual way you are suggesting writing the id? And, if so, which of
the styles are you suggesting I apply it to?
I tried substituting that selector verbatum for all styles of the id
#primary-nav. That didn't work. Then I tried it with just the li and with just
the li and ul styles. That didn't work. Then I got rid of the (thinking you
meant apply #primary-nav .tab_navigation to just the styles for the ul and
the li. That didn't work. So I'm stymied. Could you explain what you mean in a
bit more detail. Thanks.
Here's the css for that id again:
#primary-nav {
float:left;
width:750px;
padding-left: 170px;
margin-top: 10px;
background:
url(http://africanamericanart.si.edu/themes/fromscratch/images/bg.gif;)
repeat-x bottom;
font-family:calibri, helvetica, verdana, san-serif;
font-size:20px;
line-height:normal;
}
#primary-nav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#primary-nav li {
float:left;
background:url(http://africanamericanart.si.edu/themes/fromscratch/images/left.gif;)
no-repeat left top;
margin:0;
padding:0 10px 0 9px;
}
#primary-nav a {
float:left;
display:block;
background:url(http://africanamericanart.si.edu/themes/fromscratch/images/right.gif;)
no-repeat right top;
padding:2px 13px 4px 4px;
text-decoration:none;
font-weight:bold;
color:#000;
}
#primary-nav a:hover {
color:#333;
}
Jeff
__
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] Update: Re: Styling Submenus on a Dropdown Menu
Update: I forgot to add the comment-out marks to your css. I did and I now see the submenus are different. However, I've lost part of my tabs for the primary menus. Take a look to see what I mean. http://africanamericanart.si.edu/intro Jeff __ 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] Styling Submenus on a Dropdown Menu
On 4/28/11 3:41 PM, Chetan Crasta chetancra...@gmail.com wrote: I have made the corrections and put the page here: http://roughtech.com/t/intro.html Regards, Chetan Crasta Chetan, THANK YOU very much. I really appreciate the help! Jeff __ 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] Styling Submenus on a Dropdown Menu
On 4/28/11 11:53 AM, Chetan Crasta chetancra...@gmail.com wrote:
Remove this style:
#primary-nav li
{
/* background:
url(http://africanamericanart.si.edu/themes/fromscratch/images/left.gif;)
no-repeat scroll left top transparent; */
}
and put it here
#primary-nav .tab_navigation ul li
{
background:
url(http://africanamericanart.si.edu/themes/fromscratch/images/left.gif;)
no-repeat scroll left top transparent;
}
Remove this style:
#primary-nav a
{
/* background:
url(http://africanamericanart.si.edu/themes/fromscratch/images/right.gif;)
no-repeat scroll right top transparent */
}
and put it here
#primary-nav .tab_navigation ul li a
{
background:
url(http://africanamericanart.si.edu/themes/fromscratch/images/right.gif;)
no-repeat scroll right top transparent;
}
Regards,
Chetan Crasta
Okay, I did as you suggested but the dropdowns are still styled like the tabs.
In addition, I've lost my current tab color (which should be white). What am
I doing wrong? Take a look: http://africanamericanart.si.edu/intro. Here's the
css I used:
#primary-nav {
float:left;
width:750px;
padding-left: 170px;
margin-top: 10px;
background:
url(http://africanamericanart.si.edu/themes/fromscratch/images/bg.gif;)
repeat-x bottom;
font-family:calibri, helvetica, verdana, san-serif;
font-size:20px;
line-height:normal;
}
#primary-nav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#primary-nav .tab_navigation ul li {
background:url(http://africanamericanart.si.edu/themes/fromscratch/images/left.gif;)
no-repeat left top;
}
#primary-nav li {
float:left;
margin:0;
padding:0 10px 0 9px;
}
#primary-nav .tab_navigation ul li a {
background:url(http://africanamericanart.si.edu/themes/fromscratch/images/right.gif;)
no-repeat right top;
}
#primary-nav a {
float:left;
display:block;
padding:2px 13px 4px 4px;
text-decoration:none;
font-weight:bold;
color:#000;
}
#primary-nav a:hover {
color:#333;
}
__
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] Problem with Display in IE8
I'm having a problem with a web page's display in IE 8. Here's a quick link I set up to show you how the page looks in IE8 and how it should look: http://americanart.si.edu/test2 I don't know where to begin with this one. You can see the real page at http://africanamericanart.si.edu/timeline Any help or pointers you could give will be appreciated. Thanks. Jeff __ 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] Problem with Display in IE8
On 3/24/11 2:18 PM, Alan Gresley a...@css-class.com wrote:
On 25/03/2011 4:00 AM, Alan Gresley wrote:
http://css-class.com/test/css/parsing/invalid-blocks.htm
I will try this again but this time with the link to the new test.
http://css-class.com/test/css/parsing/invalid-blocks2.htm
IE8 and IE9 see this.
p [background: blue}
.test1 {background: green}
.test2 {background: green}
And all other browsers see this,
p [background: blue}]
.test1 {background: green}
.test2 {background: green}
by repairing the string []. None of this explain why the first p
with .test1 is also dropped.
---
Alan, let me see if I am understanding you. Basically, you're saying there is a
[ when there should be a { in my CSS and that could foul things up with IE. Is
that correct?
Also, you're saying that the html needs to validate. Are those the two things
you're saying?
Thanks for looking at this.
Best, Jeff
__
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] Problem in IE
On 2/14/11 8:39 AM, Gates, Jeff wrote:
I'm in the middle of developing a website and have just made a change
to the CSS, making the header a light shade of gray to contrast it to
the content area below (it was white). It's showing up correctly in
Firefox but, of course, something is amiss in IE (I'm looking at it
in IE7).
A link to a typical page is:
http://americanartinvites.com/omeka/features The link to the style
sheet is:
http://americanartinvites.com/omeka/themes/fromscratch/css/screen.css
On 2/14/11 7:19 PM, David Hucklesby huckle...@gmail.com wrote:
Even more problems in IE 6... :)
The search FIELDSET expands in that browser-- I suggest replacing the
FIELDSET with a DIV to get it working cross-browser (unless someone else
has a better solution...)
I put these rules at the end of the screen.css as overrides. They fixed
the problems my end. Hope they help:
/* fix IE6 expanding width bug */
#wrap {overflow-x: hidden;}
/* width on #content makes it enclose floated content in IE 6 7
- you may like to add overflow: hidden; to do the same in real
browsers */
#content {background: transparent;}
/* fix doubled margin bug in IE 6 */
#search-wrap {display: inline;}
/* margin-top pokes thru container in old IE */
#primary-nav {
background: #ddd url(bg.gif) repeat-x bottom;
margin-top: 0;
padding-top: 10px;
}
BTW - Why do you link to a stylesheet in the middle of the BODY content?
--
Cordially,
David
--
David, thanks for your response. That did the trick and I am grateful for your
help. If there is a primer somewhere that addresses css issues with IE that you
would recommend I'd love to know since I need to get up to speed on the issues
inherent in developing in older versions of IE.
Your question about why I put a stylesheet link into the body is a fair and
good one. This site is being developed in a CMS that has a header include (the
CMS is Omeka, which is being developed for museums, but its structure is
similar to many WordPress themes with header includes). That particular link
gives each section of the site a different color band at the top and bottom of
the page. I didn't know how to parse out each section other than to put that
link within the body, given that they all use the same header. If you have
suggestions, I would love to hear them. I didn't feel comfortable doing it that
way.
Best, Jeff
__
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] PS Re: Problem in IE
On 2/14/11 8:39 AM, Gates, Jeff wrote: I'm in the middle of developing a website and have just made a change to the CSS, making the header a light shade of gray to contrast it to the content area below (it was white). It's showing up correctly in Firefox but, of course, something is amiss in IE (I'm looking at it in IE7). A link to a typical page is: http://americanartinvites.com/omeka/features The link to the style sheet is: http://americanartinvites.com/omeka/themes/fromscratch/css/screen.css On 2/14/11 7:19 PM, David Hucklesby huckle...@gmail.com wrote: Even more problems in IE 6... :) The search FIELDSET expands in that browser-- I suggest replacing the FIELDSET with a DIV to get it working cross-browser (unless someone else has a better solution...) David, I meant to ask you, by placing the search fieldset within a div do you mean just put div tags around it (no css)? Jeff __ 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] Problem in IE
I'm in the middle of developing a website and have just made a change to the CSS, making the header a light shade of gray to contrast it to the content area below (it was white). It's showing up correctly in Firefox but, of course, something is amiss in IE (I'm looking at it in IE7). A link to a typical page is: http://americanartinvites.com/omeka/features The link to the style sheet is: http://americanartinvites.com/omeka/themes/fromscratch/css/screen.css Any help in rectifying this would be appreciated. Thanks. Jeff __ 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] Styling Image Links
I have applied a style to my links with this css:
#right a:link {text-decoration: none;
border-bottom: dotted 1px #666;}
#right a:visited {text-decoration: none;
border-bottom: dotted 1px #666;}
#right a:hover {text-decoration: none;
border-bottom: dotted 1px #666;}
#right a:active {text-decoration: none;
border-bottom: dotted 1px #666;}
This puts a nice dotted line under each link. This looks nice for text but I
don't want it showing under my image links. I've tried all sorts of ways of
styling image links without the border-bottom but the dotted line always shows
up.
The class of one subset of image links is download-file. I've tried styling
that like this:
.download-file {text-decoration: none; border-bottom: none; } and various
variants like:
.download-file a {text-decoration: none; border-bottom: none;} plus others.
But none seem to override the #right a styles.
Here's the code that surrounds such an image (this code is being generated by
the cms from a database):
div class=item-file image-jpega class=download-file
href=/omeka/files/download/52/fullsize /
/a/div
I'd love to have a style for all linked images that eliminate the border-bottom
dotted line. Any
Jeff
__
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] Styling Image Links
On 1/14/11 10:07 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote:
The clean approach is to use selectors that are more specific than those in
rules that are to be overridden. E.g.
#right a.download-file:link { border-bottom: none; }
On 1/14/11 10:11 AM, Germán Martínez ger...@martinez.pe wrote:
it's not working because the selector #right a has a higher specificity than
.download-file.
I'm assuming that those images are also inside the #right element, then you
should use:
#right a.download-file {
border-bottom: none;
}
Thanks to both of you. That worked.
One of the variants I used was the more specific syntax using the #right id.
However, my syntax was wrong. I had
#right download-file a {
border-bottom: none;
}
Jeff
__
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] Link Style Not Showing Up in IE
I'm having a problem getting the CSS to work in an unordered list in IE7
(but probably other versions of IE as well). Of course, they show up
correctly in FF. And, I¹m only having this problem in the footer of the
site, no place else.
Here¹s a link to a sample page: http://americanartinvites.com/omeka/explore
In the footer at the bottom I have two unordered lists to the right of the
logos. (One is a set of links, the second will be links but aren¹t at the
moment). I want the link color to be the same gray as the list to the right
(#7d7d7d) but the style I've created isn¹t working at all.
My code at the moment is:
#footer a:link {color: #7d7d7d;
text-decoration:none;
}
#footer a:visited {color: #7d7d7d;
text-decoration:none;
}
#footer a:hover {color: #7d7d7d;
text-decoration:none;
}
#footer a:active {color: #7d7d7d;
text-decoration:none;
}
But I've also had variants of this but none work. I tried:
#footer a {color: #7d7d7d;
text-decoration:none;
}
then
#footer ul a {color: #7d7d7d;
text-decoration:none;
}
then
#footer ul li a {color: #7d7d7d;
text-decoration:none;
}
I¹ve done some sleuthing on the net but nothing I find works.
The CSS is validating in that area.
Do you have any pointers you can send my way? Thanks.
Jeff
__
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/
