Re: [css-d] Flexbox question
I found it very helpful. I was only looking for syntax to plug into my page fast. It provided that. I didn't need to look at their layout other than to see if it solved my problem. Nancy On Tue, Apr 25, 2017 at 10:24 PM, Tom Livingston <tom...@gmail.com> wrote: > I think his breakoints aren't quite right for that 3-column layout. > The site itself is very useful and informative. > > On Tue, Apr 25, 2017 at 9:04 PM, Chris F.A. Johnson > <ch...@cfajohnson.com> wrote: >> On Tue, 25 Apr 2017, crestchristop...@gmail.com wrote: >> >>> What is that image ? I know what it is but it appears as junk ? >> >> >> It's a screenshot of the page in question. >> >> >>> >>> Christopher >>> >>> From: Chris F.A. Johnson >>> Sent: Tuesday, April 25, 2017 7:57 PM >>> To: CSS Discussion Group >>> Subject: Re: [css-d] Flexbox question >>> >>> On Tue, 25 Apr 2017, Nancy Johnson wrote: >>> >>>> In the past I used it only for equal heights only but there is a great >>>> deal I am learning about. It is a very powerful tool. >>>> You do have to be careful for older browsers and have a fall back for >>>> those. >>>> >>>> This link has been very helpful for me >>>> https://css-tricks.com/snippets/css/a-guide-to-flexbox/ >>> >>> >>> Not a page I'd use as a good example: http://b.cfaj.ca/flex.jpg >>> >>> >> >> -- >> Chris F.A. Johnson, <http://cfajohnson.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/ > > > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > #663399 > __ > 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] Flexbox question
In the past I used it only for equal heights only but there is a great deal I am learning about. It is a very powerful tool. You do have to be careful for older browsers and have a fall back for those. This link has been very helpful for me https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Nancy On Sat, Apr 22, 2017 at 2:10 AM, <crestchristop...@gmail.com> wrote: > Interesting method of using FlexBox; for someone whom has never used Flexbox > > Christopher > > From: Tom Livingston > Sent: Monday, April 10, 2017 5:40 PM > To: CSS Discussion Group > Subject: Re: [css-d] Flexbox question > > On Mon, Apr 10, 2017 at 5:24 PM, Al Sparber <aspar...@roadrunner.com> wrote: > >> On 4/10/2017 4:01 PM, Tom Livingston wrote: >> >>> List, >>> >>> I haven't used flex at all basically, but have an opportunity to. >>> >>> I have rows of 3 items. I would like them evenly spaced, but if the last >>> row has only 2 items, I'd like the same amount of space between but I want >>> them aligned to the left (like text-align:left). I can't seem to get this. >>> Is it possible? I've gotten close, but last two items are far left and far >>> right. >>> >> >> See if you can work with this: >> http://www.projectseven.com/csslab/flexbox/tom-cssd/ >> It's all in the head. >> >> > > This looks good. I think I might be able to run with this. Thanks Al. > > Seems like the key to what I was after was flex-direction: column (as > opposed to row) - to keep the last two items to the left. > > Thanks again. > > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > #663399 > __ > 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/
Re: [css-d] using floats vs inline-block..
Yes I do use flex box if I want the left and right to have the same vertical height, but you are correct, it does a whole lot more. Nancy On Tue, Sep 20, 2016 at 2:06 AM, Göldi <peter.goe...@gmail.com> wrote: > Use Flexbox, it's really a goos thing, once you're used to it! > > Cheers > Peter > > 2016-09-19 19:01 GMT+02:00 Tom Livingston <tom...@gmail.com>: >> >> I tend to favor floats myself. The biggest issue I've run into is having >> to >> remove the gap between items that are inline-block. I guess I'm just so >> used to floats now that I tend to use them without thinking about it. >> >> I do rely on inline-block more for horizontal navbars, which causes the >> gap >> to be more of an issue. >> On Mon, Sep 19, 2016 at 12:44 PM Nancy Johnson <njohnso...@gmail.com> >> wrote: >> >> > I have been using display: inline block more than float:left/right >> > when I want to display two divs side by side. >> > >> > I find it easier with less code even though I need to add >> > vertical-align:top. >> > >> > My question is: am I alone in feeling this way? >> > Why do grid systems within bootstrap or bourbon neat sill depend on >> > floats. >> > >> > Thanks >> > >> > Nancy >> > __ >> > 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] using floats vs inline-block..
I have been using display: inline block more than float:left/right when I want to display two divs side by side. I find it easier with less code even though I need to add vertical-align:top. My question is: am I alone in feeling this way? Why do grid systems within bootstrap or bourbon neat sill depend on floats. Thanks Nancy __ 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] [ADMIN] Hello, my friends, hello
Eric, I appreciate having this list and thank you for all your work. I am not a large user of the list, but rely on this list for complex css3/html questions. I know when I post I am getting the best information available. If it can continue, I would love to see it expand to JS/JQuery as it is more and more integral to client-side coding. Nancy On Sun, Dec 27, 2015 at 2:16 PM, John D <xfs...@hotmail.com> wrote: > The way I see it is that we should expand this list to make it more appealing > to Web designers and creators. To do this we could allow discussion on > matters such as: > > HTML > CSS > Javascript > jquery > Bootstrap styles > glyphicons > And anything else relevant to Web designs and web sites. > > > There is another newsgroup for webDesigns but It is too retrictive and > moderator doesn't allow my questions or answers so I gave up. Also, there > aren't anything suitable forums or newsgroups for Bootstraps so perhaps we > coud be the first to get started before somebody else gets into it. > > > > __ > 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] W3C errors. in application....
Thank you, I did not realize either. I will not use section going forward... When I first used section I don't remember the W3C validator throwing a warning... I may be incorrect as I focus more on errors. Nancy On Wed, Jul 9, 2014 at 6:40 PM, Eric e...@minerbits.com wrote: Technically the error was thrown correctly: http://www.w3.org/html/wg/drafts/html/master/sections.html#the-section-element http://html5doctor.com/the-section-element/ Eric On July 9, 2014 at 8:32 AM Nancy Johnson njohnso...@gmail.com wrote: I do application development and the W3C throws an error: 1 with an Accessible counter I pulled off the web, that goes with a textarea box name= is used with span or div span id=abc name=789r aria-atomic=true aria-live=polite class=fontsize085 2000/span The back-end developer used rid='1' with a datepicker input id=111 name='pickup value=07/07/2014 type=text class=width5 rid=1 section I am using without a heading... and it throws a warning.. Am I used section incorrectly? This site is in development and will always be a private application so I cannot show it. Thanks Nancy __ 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] W3C errors. in application....
I do application development and the W3C throws an error: 1 with an Accessible counter I pulled off the web, that goes with a textarea box name= is used with span or div span id=abc name=789r aria-atomic=true aria-live=polite class=fontsize085 2000/span The back-end developer used rid='1' with a datepicker input id=111 name='pickup value=07/07/2014 type=text class=width5 rid=1 section I am using without a heading... and it throws a warning.. Am I used section incorrectly? This site is in development and will always be a private application so I cannot show it. Thanks Nancy __ 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 queries
Is there a standard method to use media queries? I took the W3C mobile course about 3 years ago and since then there are many more devices out there each with different size and/or retinal display. Thanks, Nancy Johnson __ 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] Best practices in only targeting only Styles needed for a page in an external style sheet?
My question comes from running some some sites through a Website Optimization tool. This anaylizer seemed to load all the images in a stylesheet even if that background image wasn't called. http://www.websiteoptimization.com/services/analyze/ Thanks Nancy On Fri, May 10, 2013 at 8:34 AM, Tim Climis tim.cli...@gmail.com wrote: With one stylesheet, Image sprite 2 is being called on page A B and C even though the image is only displayed on page C Aren't browsers smart enough to not load an image if it's not being used? From my quick examination, I have a style sheet that references minus.gif. On a page where minus.gif does not appear, it's not showing up in the page resources. So I don't think an image is actually loaded by the browser just because it's referenced in a style sheet. I think there actaully needs to be an element it applies to first. So if the goal is to limit page load time, this is a non-issue. ---Tim __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Best practices in only targeting only Styles needed for a page in an external style sheet?
I have a question in the best practices for style sheet use and targeting only the styles needed for a specific page. @import? Less.js? mulitple stylesheets? Example: There are : 3 themed pages A B C, Two image sprites 1 2, one stylesheet, All pages utilize image sprite 1 page C only utilizes image sprite 2 With one stylesheet, Image sprite 2 is being called on page A B and C even though the image is only displayed on page C Thanks Nancy Johnson __ 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] Question regarding the use of section
When I first went live with a website a few months ago, the following code validated and now it doesn't. Why? section role=main Thank you, Nancy Johnson __ 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] Struts 2 syntax for inputs and html5 specific tags
Hi, I hope someone can help me with this and its not too off-topic. We are implementing a website using Struts 2. I can't seem to find the appropriate syntax to render input type=email etc. in the browser They have something called s:textfield.. which renders input type =text.. in the browser, and can add type=email which renders input type=text type=email Has anyone encountered this? and is there a resolution? Thank you in advance, Nancy __ 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] Question regarding Absolute Positioning and Responsive Design
Is there a better way to layer inline text on top of an inline image than using position absolute? Thanks, Nancy Johnson __ 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] Ipad 3 and media queries
I have a very simple one page site that I just added media queries to view in all devices. It is not live, but can be viewed at: http://www.welcometomycorner.com/webtest/ In the meta tag I added the viewpoint meta name=viewport content=width=device-width,initial-scale=1.0 I am having trouble with my Ipad3.. when I go from landscape to portrait and back to landscape -- at this point the default is much larger than my screen. Do I need to add some special code? am I doing something incorrectly? Thanks for your time, Nancy Johnson __ 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] Internet Explorer
I know that in some cases this not possible, but if someone reports issues with IE, I'd politely ask whether they have tried late versions of Firefox or Chrome :-) Yes but Ie8 is still widely used in XP systems and about 48% of the people are still using XPs. It is not easy to ignore all these people especially if you are selling something. XP systems are still suported (or extended support) by M$ until April 2014. Even after support stops, there will possibly be a greater percentage of XP with IE8 users than there have historically been with outdated browsers because older versions of, for example, DreamWeaver, do not run on Vista or 7, and IE9 (and presumably 10) does not run on XP. In this economy the cost of upgrading all software to be compatible with Windows 7 is probably beyond the reach of many businesses. *sigh* NESB __ 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] w3c mobileOK checker question
Has anyone used the w3c mobileOK checker? http://validator.w3.org/mobile/. I used html5 and it comes back with an error telling me that the doctype doesn't validate against the xhtml basic or mp 1.2. Thank you, Nancy Johnson __ 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] Table Trouble in IE
Thanks to Phu I figured out the trouble (dynamic div created by JS) … plus adding a tr width fixed the IE7 troubles. Nancy On Nov 14, 2011, at 2:59 PM, mem wrote: On Nov 14, 2011, at 20:14 , Nancy Timper wrote: Hi, Thanks much for ideas / suggestions…. Hello, Before you attempt to fix any css issue at all, you must first validate your markup. Otherwise, it's very difficult (if not impossible) to fix whatever error you may have on styling your page. Clear your errors, and post back your questions, and someone may help you then. :) Regards, mem __ 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] input width suggestiions in a fluid width layout
Hi, Question: when adding text/textarea/selects, . I've always added a width to line them up vertically. How would one create consistent width in a fluid width layout ? I am testing my first fluid grid and media query. I am taking an existing very pixel based site and utilizing a combination of % and ems, with a min- and max-width in pixels for the overall on the wider areas. I found the thread css measures - em grid system makes sense ? very interesting. Thank you, Nancy Johnson __ 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] Table Trouble in IE
Hi, Previewing my test site using Adobe BrowserLab, I see trouble with the table holding my photo slideshow. http://www.frshore.com/new/Sunsets_Sunrises_Storms.html In IE8 and IE9, the table appears, but too low on the page. (The containing div seems to be OK.) In IE7, the right-hand column of thumbnails is way off the main content area. Excuse my imperfect CSS, and the over use of tables; relying on a template I purchased to combine slideshow functionality with PayPal shopping cart. Thanks much for ideas / suggestions…. will implement a IE conditional style sheet if I can figure out what the trouble is!! Nancy __ 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] Mysterious Div
(I admit I don't know nearly enough about CSS. So please be kind. And I built this page a while ago.) I'm trying to do something so simpleadd a background color to the div #newslinks. Previews OK in DW CS5; when live, nada. Furthermore, trying to target elements within the div gets me nowhere. Help! __ 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] Mysterious Div URL
DUH. http://www.datecreekranch.com 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/
[css-d] hgroup
Hi, I have a question about hgroup. I'm trying to remember. Was this going to be removed from the html5 spec? or am I thinking of something else. Thanks for you time, Nancy Johnson. __ 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] HTMLdog website / Son of Suckerfish
Interesting.. I just used it not more than 6 wks ago.. I was thinking of upgrading to Superfish.. http://users.tpg.com.au/j_birch/plugins/superfish/ On Mon, Jun 27, 2011 at 11:18 AM, David Laakso da...@chelseacreekstudio.com wrote: On 6/27/11 10:20 AM, Koen van der Drift wrote: Hi, I was trying to look at a tutorial about drop down menu's from http://www.htmldog.com (called Son of Suckerfish), but all I get are 403 errors (Forbidden, You don't have permission to access / on this server). Is this website still active, and if not, is there another place where I can find the Son of Suckerfish info? - Koen. Don't know what became of htmldog.com. Not too fond of dropdowns myself but if push came to shove these look promising... http://www.tjkdesign.com/articles/new_drop_down/default.asp http://www.adipalaz.com/experiments/css/accessible_ddmenu_test.html Best, ~grasshopper -- http://chelseacreekstudio.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-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] @font-face and IE browsers....
Hi, I am just getting back to this @font-face works with IE browsers work on my local machine if I use 'localhost' in the address, however, if I use the computers' IP address or if I display on the testing servers @font-face no longer works with IE... Does anyone know why this would be so? Thanks in advance, Nancy On Thu, May 5, 2011 at 8:24 PM, Philippe Wittenbergh e...@l-c-n.com wrote: On May 6, 2011, at 2:39 AM, Nancy Johnson wrote: We are using @font-face... A URL would be useful to help debugging… The font we are using is an open source font from Google http://www.google.com/webfonts/family?family=Nobile#set I don't know how it was converted to .eot, .woff or .svg as these came to us already converted. This is the code that is used, the path is correct @font-face {font-family: 'Nobile'; src: url('font/nobile/nobile-webfont.eot'); src: url('font/nobile/nobile-webfont.eot?#iefix') format('embedded-opentype'), url('font/nobile/nobile-webfont.woff') format('woff'), url('font/nobile/nobile-webfont.ttf') format('truetype'), url('font/nobile/nobile-webfont.svg#NobileRegular') format('svg'); font-weight: normal;font-style: normal;} You don't need the first line src: url('font/nobile/nobile-webfont.eot'); http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax Tried already: src: local: instead src: local(local-name-of-font-here) only works when the font is installed on the machine (and IE 9 doesn't understand it anyway). on this line I tried changing this url('font/nobile/nobile-webfont.eot?#iefix') format('embedded-opentype'), to url('font/nobile/nobile-webfont.eot?iefix') format('eot'), also using an absolute path to the font instead of relative path. So what is the problem, and what version(s) of IE are affected ? (and if your site is on a IIS server, you may need to add a mime type for the woff file, according to the article linked above). 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] @font-face and IE browsers....
We are using @font-face... The font we are using is an open source font from Google http://www.google.com/webfonts/family?family=Nobile#set I don't know how it was converted to .eot, .woff or .svg as these came to us already converted. This is the code that is used, the path is correct @font-face {font-family: 'Nobile'; src: url('font/nobile/nobile-webfont.eot'); src: url('font/nobile/nobile-webfont.eot?#iefix') format('embedded-opentype'), url('font/nobile/nobile-webfont.woff') format('woff'), url('font/nobile/nobile-webfont.ttf') format('truetype'), url('font/nobile/nobile-webfont.svg#NobileRegular') format('svg'); font-weight: normal;font-style: normal;} Tried already: src: local: instead on this line I tried changing this url('font/nobile/nobile-webfont.eot?#iefix') format('embedded-opentype'), to url('font/nobile/nobile-webfont.eot?iefix') format('eot'), also using an absolute path to the font instead of relative path. Thanks in advance, Nancy __ 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] Looking for online reference re optimizing style sheet syntax
My stylesheets are quite a mess by the time we go live. I do clean them up, remove commented out items that were only for my eyes or internal developer's eyes, make sure they are grouped and global stuff on top. I like each style on one line. There are optimization checkers and I have used those but do it judicially. http://designshack.co.uk/articles/css/18-css-compression-tools-and-techniques One of the sites we did (and we produce the site not design) came to us with the stylesheet compressed to one line and had to uncompress it to work on it. What a pain as I had to uncompress and recompress each time we updated the site after it went live. Nancy Johnson On Mon, Apr 18, 2011 at 8:05 AM, Philippe Wittenbergh e...@l-c-n.com wrote: On Apr 18, 2011, at 9:17 AM, Keith Purtell wrote: I'm about 85 percent done with my site. The pages look acceptable but awaiting batch html/css validation. One thing I need to do is clean up the main style sheet. https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS 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-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] Has anyone ever seen rendering differences between Mac OS10.4, 10.5, and 10.6?
Hi Marissa, With Chris on that, although there are so many factors - since you mentioned inherited code my second thought was border collapse issues. Did you use a CSS reset or due to the inherited code, adding to many variables to the mix? I use a non profit vendor for one of the associations I support and their CMS membership system layout requirement are tables for the main structure (not sure if we are allowed to mention specific vendor providers here.) First thing I did was hunt down to see if they had border collapse set. Fortunately we have access to the CSS (ahem have found display none and - positioning a life saver for elements the vendor can not turn off.) I'm a long time Mac user (80s) and if one thing you could count on after Safari came out, the viewing experience is pretty consistent. But play with the font size in the prefs and all those em based themes for layout suddenly look odd. I used to always take that 16 default and put it to 12 until I figured out one of the WordPress popular themes relied solely on em layout and my viewing of them was toast. Best wishes, Nancy On Jan 28, 2011, at 1:34 PM, Chris F.A. Johnson wrote: On Thu, 27 Jan 2011, Goldsmith, Marissa wrote: Hi all, My apologies in advance for not having a link to the Web site I am talking about - when the issue I noticed came up, I had to make changes to how everything was done, and so the example I'm talking about is no longer live. So please bear with me and my horrible line art. The gist of my question is, has anyone ever noticed CSS rendering differences (especially regarding margins) between the various Mac OS10 versions? You can read on if you want to see specifically what my problem is, but I couldn't find any information on this elsewhere, and was wondering if I had just created a perfect storm, or if this was a known issue. The usual reason is that different people have different defualt font sizes in their browsers, and it has nothing to do with the OS (or even the specific browser). -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] CSS validators
Hi All, Maybe I'm being premature here but I really enjoy using some of the CSS3 techniques, of course making sure things degrade gracefully. Mostly using RGBA with a backup hex, shadow boxes, border radius, font face and others that are rather low impact and fairly popular. I'm not sure where to look up info on this, but would love to use the Validator for CSS for CSS3. Right now all those lovely CSS3 things come back as errors. I think 2012 is the closing of new submissions, does that mean we will be waiting until then for a validator? I miss having a means to test for everything. Did I overlook an available resource? Many thanks, Nancy __ 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 validators
Philip and David, If it were a snake... fantastic, I didn't know that had been added. So in checking this out - what limits does it have? Are vendor prefixes supported like Webkit etc? Thanks, Nancy On Jan 25, 2011, at 6:10 PM, Philip Taylor (Webmaster, Ret'd) wrote: Isn't that : More options / Profile / CSS level 3 ? Philip Taylor Nancy Seeger wrote: Hi All, Maybe I'm being premature here but I really enjoy using some of the CSS3 techniques, of course making sure things degrade gracefully. Mostly using RGBA with a backup hex, shadow boxes, border radius, font face and others that are rather low impact and fairly popular. I'm not sure where to look up info on this, but would love to use the Validator for CSS for CSS3. Right now all those lovely CSS3 things come back as errors. I think 2012 is the closing of new submissions, does that mean we will be waiting until then for a validator? I miss having a means to test for everything. Did I overlook an available resource? Many thanks, Nancy __ 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] Fwd: Re: Vendor-specific extensions: warnings, not errors
Hi Philip, That works much better with vendor extensions, at least in my current instance. I'll keep using it - bookmarking. This really helps, thank you! Nancy On Jan 25, 2011, at 6:40 PM, Philip Taylor (Webmaster, Ret'd) wrote: Sorry, attached message was lost in transit. Repeated below. Cyrille sent us a patch that was integrated. The result is available on the dev validator at http://qa-dev.w3.org:8001/css-validator/ Hmm. I just gave this a shot in direct input: .test { -moz-border-radius: 10px; } Changed the profile to CSS3.. but it returns 1 error Property -moz-border-radius doesn't exist. That's unexpected, right? You have a setting called Vendor extension by setting it to 'Warning it will validate (I just checked). Property -moz-border-radius is an unknown vendor extension -- __ 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] Font-face, alignment issue similar to images
On Jan 11, 2011, at 6:29 AM, css-d-requ...@lists.css-discuss.org wrote: From: Andrew Cunningham lang.supp...@gmail.com Nancy, you are mixing encodings within a document. If you do want to use a character rather than an image, you should use the appropriate Unicode character, considering the website is UTF-8: U+260E * * * * * * * * * Hi Andrew, this took a bit to find out, the web font is based on ASCII, should be readable by all unless I am misunderstanding but I double checked with the vendor and it's not Unicode based. * * * * * * * * * Look for a font that has this character. It will also allow browsers on various operating systems to sue font fallback mechanisms if the browser can't use web fonts. * * * * * * * * * That would be great. Unfortunately after some research, Wingdings uses a ( for the phone character which is not the same character as t for CombiSymbols1 for producing the phone. I'm not sure if the character is the same for each operating system also for Wingdings? It looks like Ubuntu has a comment box instead for (. With this web font, it is the letter t which renders a phone with CombiSymbols1, which as a fall back if the font were not to load, makes some relational sense since it is for the purposes of highlighting a phone number. I would have loved to have gone with an image, but IE6 was my issue on this one can would render most alpha transparency pngs except when included in an li tag with unitpngfix.js assistance. Its a great script, but with all of the WordPress ID + Class combos inherit in the default theme, I didn't want to spend more time on just a phone graphic. I was assuming the combination of ID + Class was too much for IE6 to handle. Web fonts in this case is a life saver - thanks all for helping me find a means to getting it to align. Many thanks, Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-face, alignment issue similar to images
Hi Jukka, It seems that the currently most important issue with embedded fonts (web fonts) is the varying quality in different browsing situations. As far as I have understood, Windows systems may not properly apply font smoothing to embedded fonts, or otherwise render them in suboptimal ways. I think you may be referring to what that Typekit blog describes about IE 7 8 Always use ClearType for HTML” that overrides the default OS font smoothing setting. in their article http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/ Although I'm not 100% comfortable on the Museo-Sans paragraph choice, it is their favorite and I made sure they saw IE lower browser renderings. Hopefully over time we will see improvement for font-hinting for IE 78 issues, I do see it being situational depending on the web font chosen. I still think the best approach here is to use an image - partly because none of the telephone symbols encoded as characters is really adequate in the 21st century. I think the issue of proper horizontal placement of an image on IE 6 is reasonably solvable, and even if it isn't, IE 6 has lost most of its significance, and anyone still browsing with it can't expect perfect layout. I originally tried that, image method for IE6 a bust. Because the header is a transparency (I used an alpha 24 png and RGBA backup for browsers that can use it) I needed a alpha 24 png for the phone. IE6 would not render the png even with unitpnxfix.js in use. This seemed to be only a problem for the navbar area, I'm not sure of the conflict but assumed it might have to do with the WP theme of ID plus Class on the li element. Telephones: the disk image usage you see to save is my take, obviously we don't use floppy disks as part of normal data storage but it is so commonly used people seem to know what the implied usage is. Retro phones with the old style you can find in a Pottery Barn and other retro style catalogs. May no longer be the average phone but the marketing goal is for a hint of retro to be approachable to the sector of the market not comfortable with computers, and the 40+ crowd will recognize the phone. I try to look at the usage stats of a site to see how far back with IE (one website I maintain I have AOL browser users, yikes.) Demographics plays a large part too. South and Central Americas seem to be at least 5 years behind with computer usage and keep them longer before replacing. on line height. Setting a sufficient line-height for all li elements within the ul might help. Thanks! The line-height seemed to be largely responsible, but the vertical-align within span tests really well. Love your background on web fonts info. Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-face, alignment issue similar to images
Hi Georg, Pretty much the same way as with images - as with all inline elements. Just make sure the line-height is in raw numbers or other non-fixed value there and for other sections (or else IE6 and other IE versions won't do well when font-resizing). Something like... .dingbat {font-size: ___%; vertical-align: -3em;} span class=dingbat?/span ...will give you optimal control. I'm afraid I'm nervous about using em/% with the WordPress Twenty-Ten theme which largely is styled with fixed width and has so many ID and classes frequently applied twice on an element. Applaud you with the comfort zone to use % and em, I haven't the bravery or comfort level yet in general but I'm certain you are correct. To compensate (and for an empty div this theme generates) I have an IE6 commented style sheet, the empty div masthead with this default theme loved to add extra space at the top for IE6. The authors most likely were not anticipating someone wanting the navbar at the top instead of the under the usual header area. This worked great George, thank you! Although still fixed widths, I applied your concept, seems to be working beautifully in browser tests. Many thanks, Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Font-face, alignment issue similar to images
Hi All, Please pardon my newness, have been lurking for a while trying to get a feel for what the accepted practices are for the list. So if I err, please just let me know, I will don the sack cloth accordingly. In my enthusiasm to embrace font-face, I have run into an issue I'm not quite sure where to research next to solve this issue that would I suppose be more of an image baseline type CSS alignment. The beta text area is located here - navbar area Contact with a web font phone: http://nina.artsassistance.com/ I'm taking the WordPress default theme and mucking it up to the clients wishes with design. In what I hoped would be more browser friendly, I used a ding bats type web font Combi Symbols for a telephone instead of using an image (mostly to satisfy IE6.) Since this is a web font, any thoughts on how I can apply what we would normally do the img {vertical-align: baseline;} to stop drifting upwards? It's still a bit rough, this isn't a finished site. Many thanks, Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Frameworks
On Thursday, December 16, 2010, David Hucklesby huckle...@gmail.com wrote: On 12/15/10 11:50 PM, Joseba Roldan wrote: Hi all, I've just discovered the amazing world of CSS frameworks. I've been using 960Grid so far and I think is pretty good. Anyway, do you know any other recommendable CSS framework? Rather than relying on one particular framework, I suggest studying as many frameworks as you can. There are many useful (and not-so-useful) ideas in all of them. I think I radically improved my CSS by trawling through as many as I could find. Also, many good ideas are consolidated in the HTML5 Boilerplate - even if you don't use HTML5: http://html5boilerplate.com/ Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ I have recently written code for 2 large cms sites using vignette. In one we received some basic mock ups using the 960 grid. The other the mock ups were older html. The grid really helped for this type of site, although can be confining. The second site was much more challenging to put a cms around it. The grid definitely has its uses. Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hack or conditional comments for small screen aps?
I had several long pages (requested to make them that way) with fixed menus on the left that are specific to each page. During a site redesign, the left menu area was required to be the same for all pages and not to include many levels of choices. So I moved the fixed menus to right. But now they do not show on cell phones (the new site has fixed widths). Is there a hack or conditional comment that would allow me to change the left positioning of the fixed menu when it is viewed on a cell phone browser? It is currently set at 737px, which, I realize, wouldn't display on a screen narrower than 800px either. Otherwise I will just have to put in a lot of return-to-tops and/or repeat the menu options throughout the page. Thank you, Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 0pt is wrong, right? And IE9 is doom, right?
IE9 will only run with Vista and later Windows OSs. Over 68% of Windows users are using XP... MS has even provided us with conditional comments, a fairy reliable way of telling which version of IE we're using. ... ---Tim Recently I discovered that IE7 and IE8 conditional comments don't work in IE8 because if the user has the button pressed to emulate IE7, the browser will still take the IE8 styles. So I wound up putting meta http-equiv=X-UA-Compatible content=IE=EmulateIE7 / in the head and served up IE7 conditional comments. I guess this will work with IE9 too, but it seems mind boggling. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 0pt is wrong, right? And IE9 is doom, right?
Two unrelated questions. 1. I am working on a website that can be edited by a variety of users using a web-based CMS. The CMS is rewriting inline style property values of zero. For example, if the inline style is entered as: p style=margin: 0;whatever text/p LiveWhale rewrites it as: p style=margin: 0pt;whatever text/p Before I inform the CMS developers that they need to correct this, I just wanted to make sure that I am correct in saying that this is incorrect style. Is it? The doctype they have chosen for the site is XHTML 1.0 Transitional. 2. IE9 is rumored to arrive in 2011. IE9 will only run with Vista and later Windows OSs. Over 68% of Windows users are using XP (see: http://socialmediaseo.net/tag/internet-explorer-9/ ), myself included, because I don't see why I should toss a perfectly fine scanner for which there are no drivers after XP, and because my PhotoShop 6 won't run on those later systems either, and I suspect many others face the same issues. This means not only will hacks have to be developed to deliver styles for the different flavors of IE, but we will have to test on different machines (yes, I know, IETester works fairly well, but...). I guess I should just prepare to sit back and watch the Internet get broken and/or IE to die its well-deserved painful death. Am I right? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS ListBox Styling - using multiple lines
Thank you, its interesting, I'll look more closely at this Nancy On Thu, Aug 5, 2010 at 3:42 PM, Alex Mitchell alex.mitch...@gumware.com wrote: On Wed, Aug 4, 2010 at 8:19 AM, Nancy Johnson njohnso...@gmail.com wrote: Hi, Is there any way to display content of one option area on multiple lines in a list box? select optionLots of text Lots of text / option optionMore text / option / select Appears something like this in design view Lot of text Lots of text Thanks in advance, Nancy I've been testing a few theories on this and haven't been able to come up with a way using strictly html and css. However, if you look at http://tunulo.us/ there's a hidden select element, which has its options recreated in ulli format which allows for much more flexible styling, and uses javascript to manipulate the hidden select element. Hope it helps, Alex Mitchell http://gumware.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS ListBox Styling - using multiple lines
Hi, Is there any way to display content of one option area on multiple lines in a list box? select optionLots of text Lots of text / option optionMore text / option / select Appears something like this in design view Lot of text Lots of text Thanks in advance, Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Does M$ filter fail in IE 7?
In my version of IE7, The filter doesn't work when I use the zoom tool, and the images are square and not circles as they are in Firefox. Nancy On Tue, Jun 8, 2010 at 10:24 AM, Mark Richards mark.richa...@date.com wrote: -Original Message- From: David Hucklesby [mailto:huckle...@gmail.com] Sent: June 8, 2010 10:13 To: Mark Richards Cc: css-d Subject: Re: [css-d] Does M$ filter fail in IE 7? Thanks for taking a look, Mark. But from your screen-shot, it does not look like you applied any zoom to the page? I know it works without zoom, but my client *loves* IE 7 zoom--and that's the problem I am experiencing. My mistake. When I apply the zoom the layout gets broken and the transparencies disappear. Mark __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] overflow:hidden not working in IE6 or 7
Can anyone tell me why the overflow:hidden doesn't work in IE6 or IE7 div.wrapper {margin-bottom:20px;background-image:url(../img/image.png);background-repeat:no-repeat;height:150px;overflow:hidden;} Thanks. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] overflow:hidden not working in IE6 or 7
The page is http://www.nhtsa.gov/Vehicle+Safety Nancy On Fri, May 14, 2010 at 2:47 PM, Nancy Johnson njohnso...@gmail.com wrote: Can anyone tell me why the overflow:hidden doesn't work in IE6 or IE7 div.wrapper {margin-bottom:20px;background-image:url(../img/image.png);background-repeat:no-repeat;height:150px;overflow:hidden;} Thanks. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] overflow:hidden not working in IE6 or 7
Thank you. I was mostly wondering if there was any known issues with overflow:hidden; with IE6 and 7. This issue existed with the static html pages from the designer that did validate and an uncompressed stylesheet. This site is a CMS system which caused most of the validation errors. The biggest thing about the CMS system is how little control the front end developer has both in code that the CMS system develops and code that content developers use to add the content areas. Nancy On Fri, May 14, 2010 at 5:56 PM, David Laakso da...@chelseacreekstudio.com wrote: Nancy Johnson wrote: The page is http://www.nhtsa.gov/Vehicle+Safety Nancy On Fri, May 14, 2010 at 2:47 PM, Nancy Johnson njohnso...@gmail.com wrote: Can anyone tell me why the overflow:hidden doesn't work in IE6 or IE7 div.wrapper {margin-bottom:20px;background-image:url(../img/image.png);background-repeat:no-repeat;height:150px;overflow:hidden;} Thanks. It could help to: 1/ Browsers understand compressed CSS files: no question about that. But when seeking assistance, decompressing the CSS, and validating the CSS2.1 CSS, prior to writing the list is always to your advantage. 2/ All browsers, and particularly IE 6/7 have a particularly difficult time, when attempting to load invalid markup; and, although this may not have anything directly to do with causing the problem you wrote about, it is always to your advantage to at least take a stab at correcting at least some of the 160 html errors. 3/ Re-read On Having Layout [1]: the specific answer to your question lies somewhere in that document and may become more apparent to you. If not, please do write back... [1] http://www.satzansatz.de/cssd/onhavinglayout.html#prop Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] hidden input fields causing an empty space in IE browsers
I have a form with hidden input fields and a submit button. It's inline with elements that are not in the form. In IE browsers there is an empty space where the hidden fields are. Is there a way using CSS to get rid of the space? Thanks in advance. Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] URL exceeds width of Pop up window and doesn't wrap
I have an Email a Friend using an open new window js. I've set the pop-up window size to be 525px wide. Many times the URL exceeds the width of the new window. I've set up some divs with pixel widths nothing works. I even tried a fixed width tabular structure. Is there any way through CSS to force the URL to wrap? This is a content management system and the URL (friendly url) is dynamically generated off the page title/or title of an article which can be extremely long. Thanks in advance Nancy Johnson __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] SOLVED Re: URL exceeds width of Pop up window and doesn't wrap
SOLVED Here is a link that seems to work in several browsers. http://forums.cocoaforge.com/viewtopic.php?f=13t=21981 On Mon, Apr 5, 2010 at 12:24 PM, Nancy Johnson njohnso...@gmail.com wrote: I have an Email a Friend using an open new window js. I've set the pop-up window size to be 525px wide. Many times the URL exceeds the width of the new window. I've set up some divs with pixel widths nothing works. I even tried a fixed width tabular structure. Is there any way through CSS to force the URL to wrap? This is a content management system and the URL (friendly url) is dynamically generated off the page title/or title of an article which can be extremely long. Thanks in advance Nancy Johnson __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Jquery Dropdown menu showing behind listboxes in IE6
Hi I may have posted this question before, but couldn't find it when I searched the archives. I have a jquery drop-down menu, and on a few of the pages, there is listbox showing up in front of the drop down. I could only replicate it in IE6 although a coleague was able to replicate it in Firefox. How can I make the list box show behind the drop down menu? Thanks in advance Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Jquery Dropdown menu showing behind listboxes in IE6
The z-index doesn't seem to be working unfortunately. Do you know of a good tutorial on Iframes? Thanks Nancy On Mon, Mar 22, 2010 at 11:06 AM, Thierry Koblentz thierry.koble...@gmail.com wrote: I may have posted this question before, but couldn't find it when I searched the archives. I have a jquery drop-down menu, and on a few of the pages, there is listbox showing up in front of the drop down. I could only replicate it in IE6 although a coleague was able to replicate it in Firefox. How can I make the list box show behind the drop down menu? Hi Nancy, You'll need to use an iframe to cover the select (put it behind the drop down menus). -- Regards, Thierry www.tjkdesign.com | articles and tutorials www.ez-css.org | ultra light CSS framework __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] div not floating in FF
I have a div containing 2 other divs, one is floated left, the other is floated right. I have a break with a clear equals all below the outer div. In Firefox and most browsers, the content of the right floated div is appearing below the outer div. In DreamWeaver and IE8 it is displaying correctly. What am I doing wrong? See: http://thesmudge.com/shapeshifter/Untitled-1.html TIA, Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div not floating in FF
Was using the tag attribute clear, not the style attribute. But I tried changing it to the style clear:both to no avail. Thanks anyway. -Original Message- From: Climis, Tim [mailto:tcli...@indiana.edu] Sent: Monday, March 22, 2010 12:05 PM To: 'nancy'; 'css-d@lists.css-discuss.org' Subject: RE: [css-d] div not floating in FF I have a break with a clear equals all below the outer div. Clear: all is not a valid value. Are you looking for clear: both? ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div not floating in FF
Dennis wrote: if you want to have the two floating divs side-by-side, I do believe you need to give them a width value And apparently he is correct. Thank you. Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css-sound joomla templates?
Can anyone recommend some sound css-layoutoriented Joomla templates out there? I'd rather buy something sound than learn Joomla template editing. Being a Java guy myself I'd rather spend my time doing that, but it seems I might have to do this one. Naturally I want to be able to swiftly edit the layout via CSS. /MB I'm currently using one based on a template from http://www.joomlart.com called ja_rochea. I moved around, eliminated, and added divs, and redid most of the css, so it's not much like the original. But at least it wasn't based on tables, if that's what you mean. Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Funeral for IE6
Since IE6 is being pronounced dead: http://www.cnn.com/2010/TECH/03/04/ie6.funeral/index.html?hpt=T2 I guess we are now being haunted by a ghost. Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noscript tags and degradation
This to me is a new way of thinking, as I Generally use noscript, The sites I work on are heavily js and jquery, and none of it is embedded all linked. . Can you tell me where I might find hands on tutorial? Thanks Nancy On Thu, Feb 18, 2010 at 1:38 PM, Thierry Koblentz thierry.koble...@gmail.com wrote: My need to utilize noscript tags or something similar stems from the exact problem mentioned here - styles won't kick in fast enough when adding .js to the body or some other method. For example, in my js degraded version, I Actually, I mentioned using the *HTML* element rather than BODY to do this. That way you don't run into the issue you describe. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Moving css to external css changes results?!
ed asked: http://bit.ly/dhg6xI For some reason that I cannot understand when I move my css from the html to the css file (even when I leave the conditional code in the html) the css messes up. Why on earth is this happening? Very strange. Maybe the onpage css takes precendce over the external css? ljr responded: I haven't looked at your URL, but the order of precedence is inline, embedded, and then external. You may be changing the cascade order by moving some of the styles from embedded to external. This is probably the case. For instance, in your external sheet you have: #wrapper { padding: 0px 10px 10px 10px; margin: 0px auto; width: 845px; height: 100%; background-color: #fff; text-align: left } But then you have this embedded (which will over-rule the external sheet): #wrapper { min-height:100%;/*Min-height instead to allow for expansion*/ height:auto;/*just remove the height you set*/ margin-top:-52px;/* -72px;total footer height*/ overflow:hidden;/*contain floats*/ padding-bottom:0; } So the wrapper will have a top margin of zero instead of negative 52 pixels and a bottom padding of zero instead of 10 pixels. If you are using an external style sheet, you should only use embedded styles to change the style for that particular page. You also have some inline styles, which will supercede both the embedded and external styles. -Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS to break lines in IE8?
It seems that the entities for zero width non-joiner and thin space don't work in IE8. Is there some CSS way of accomplishing the same thing? I'm showing examples of citations of online sources, some of which have long URLS or URLS that might start at the end of a line. The correct way to format these in APA style is to break the URL before a punctuation mark. So, for instance, I am using this: http://www.sage-ereference.comzwnj;/homelessness/Article_n83.html to force the line to break after com and before /homeless. It works in FireFox and IE7, but not IE8. Or this: http://images.nbii#8204;.gov/details.php?id=55510amp;cat=search%20results to force a line break after nbii and before .gov Breaks can look confusing if the width of the page varies, because the citations are in divs styled with: margin-left:20px; text-indent:-20px; line-height:200%; to show hanging indents. I guess I could just set a fixed width for the div and use a break. Or I may resort to a PDF, but thought I'd ask here first. And I thought I might find some folks to commiserate with in my frustration with IE8's lack of rendering of entities. Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Multiple IEs (was: Re: strange problem with float)
david gn...@hawaii.rr.com wrote: I believe there are also virtual machine images available from MS that can be used under MS' proprietary VM player, that include differing versions of IE. Oliver wrote: Found the link on the TheFreeCountry.com website (many good tutorials/info there): http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EFdisplaylang=en. It says they expire in April and/or 120 days. Not sure what is up with that. Do they let you renew? Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] verticle expandable menu
Thank you for all of these resources. I will check them out. Nancy On Sat, Oct 31, 2009 at 7:44 AM, tedd tedd.sperl...@gmail.com wrote: At 12:29 PM -0400 10/30/09, Nancy Johnson wrote: Can some one point me to a css-based verticle menu that expands with a hover, yet is keyboard accessible? It can also use jquery or javascript. Thanks in advance Nancy Nancy: http://webbytedd.com/ccc/accordion-v/ It's based upon jQuery. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] verticle expandable menu
Can some one point me to a css-based verticle menu that expands with a hover, yet is keyboard accessible? It can also use jquery or javascript. Thanks in advance Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css text rotation
Hi, Someone in my group asked if I could find a way to rotate text using CSS to be used in a table header. It will be in an internal site and we are only interested in IE6 IE7 and IE8 I found this article http://www.kavoir.com/2009/08/css-rotate-text-image-elements-by-90-180-or-270-degrees.html and got it to work in -webkit and -moz (Firefox 3.5) but how do you get it to work in IE? Here is what I have so far and have and haven't put it in a table yet and only the year will rotate. !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; head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleUntitled Document/title style .year {display: block; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } *html .year {display: block; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);} /style /head body div class=example-date span class=day31/span span class=monthJuly/span span class=year2009/span /div /body /html Thanks in advance Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ins, kbd, samp tags
Hi, I got a css style sheet from a client that we are going to develop and the following tags were included. I had never seen them before ins kbd samp Can anyone tell me what they are used for and the best time to use them? Thanks in advance Nancy Johnson __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Z-index issues in IE
... But in IE ...the background div is being displayed above the gallery. Here is my code: ... #wrapper { ... position: relative; } ... #slideshow_bg { position: absolute; z-index: 100; ...} ... .imageGalleryWrapper { ... position: absolute; z-index: 200; ... } ... body div id=wrapper div id=slideshow_bg/div ... div id=main-content h1Gallery/h1 div jsId=imageItemStore dojoType=dojo.data.ItemFileReadStore url=images.json/div div id=gallery dojoType=dojox.image.Gallery/div /div ... /div /body We really do need to see the page (or a page like it) live. But it's possible we could figure it out if we could see the structure of the code surrounding the element with the class imageGalleryWrapper (which you don't indicate at all in your code). Is imageGalleryWrapper perhaps contained within another element having a relative position? If so, IE might not respect imageGalleryWrapper's z-index designation unless you assign a z-index to its container. Here's a mock up based upon the code you supplied: http://thesmudge.com/shapeshifter/test.htm --which displays properly in IE6 and 7, but I only guessed where imageGalleryWrapper exists, so there must be more you haven't shown us. Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Conditional comments for Mac?
I'm on a committee that has access to the code for this online catalog: https://i-share.carli.illinois.edu/uc/vwebv/searchBasic?sk=en_US We are trying to move the search button over, see: https://i-share-test.carli.illinois.edu/uc/vwebv/searchBasic?sk=en_US by removing the text-align:right but it doesn't line up with the left margin. One answer would be: #searchLinks input { clear:both; display:block; margin:0 0 0 10px; } Was that what you were looking for? Cheers, Tim Yes! Thank you! The clear:both did the trick! Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Conditional comments for Mac?
Is it possible to specify conditional comments for FF and Safari on Mac v. FF and IE on PC? I'm on a committee that has access to the code for this online catalog: https://i-share.carli.illinois.edu/uc/vwebv/searchBasic?sk=en_US We are trying to move the search button over, see: https://i-share-test.carli.illinois.edu/uc/vwebv/searchBasic?sk=en_US by removing the text-align:right but it doesn't line up with the left margin. In fact, the div that contains the button is acting as if it is either floated right or displayed inline, but we can't find anything in any of the style sheets that is doing that. We even tried declaring float:none and display:block, and we tried adding a break. So I suggested using negative left margin declarations, but they line up differently on Mac browsers than PC. We'd like it to line up under the R in Records. TIA, Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] html 5 and styling
Thank you for your responses. I will be going through the resources and try what you suggested Nancy On Wed, Jun 10, 2009 at 12:07 PM, Erik Vorhese...@textivism.com wrote: On Wed, Jun 10, 2009 at 9:47 AM, David Dorwarddorw...@gmail.com wrote: 2009/6/10 David Hucklesby huckle...@gmail.com: Interesting. That's similar to Thierry's suggestion for enabling styling of ABBR in IE 5/6 - It is the same. Using DOM to generate an element of an unknown type in IE registers it in a way that makes that type available for styling. Yeah, it's something I picked up on John Resig's blog: http://ejohn.org/blog/html5-shiv/ And if you create an array of HTML5 elements (plus abbr) in JavaScript, you can loop through them, rather than hand-code each document.createElement(). (I have a minified file I threw together, if anyone's interested, at http://erikvorhes.com/static/_core/html5shiv.min.js, though host it on your own server rather than linking directly to it, please! :) Erik __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] html 5 and styling
Hi, I was playing around with html 5.0. This is my first time and I couldn't get the following to style correctly in Firefox 2 or 3 However, because of the javascript it worked fine in IE6 and 7. What am I doing wrong? I couldn't get the H1 style to work within the header. Also, what resources are available to learn HTML 5? !DOCTYPE html html head titleStandard Blog/title style header h1 {background-color:#00FF66; font-family:Arial, Helvetica, sans-serif;} /style script document.createElement('header'); /script /head body header h1a href=#Standard Blog/a/h1 /header Thanks in advance, Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hover using button in IE6
I am styling some buttons for an internal application that uses IE6 only. I would like to switch out the button on hover, because IE6 doesn't support hover I am wondering there is a work around to make IE6 work with hover, preferably CSS if not very simple js Here is the button button id=send title=xxx onclick=a('abc') alt=xxximg src=images/arrow_right.gif alt=xxx title=abc //button Here is the CSS #send { display:inline-block; width: 25px; height: 25px; background: url(images/arrow_right.gif) no-repeat 0 0; } #send:hover { background-position: 0 -23px; background: url(images/arrow_right_select.gif) no-repeat 0 0; } __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hover using button in IE6
I want to thank everyone for your answers. The .htc solution seemed to work, but I will look into the other solutions. The backend webdeveloper I work with wants to get rid of all the styling now and use the IE default which isn't my choice. Nancy On Thu, May 28, 2009 at 3:41 PM, Tim Snadden li...@snadden.com wrote: On 29/05/2009, at 1:24 AM, Nancy Johnson wrote: I am styling some buttons for an internal application that uses IE6 only. I'm so sorry for your pain. As they said, IE6 only supports hover on a. The advice about whatever:hover is good. Another option would be to add/remove a class name (e.g. 'hover') on mouseover/mouseout using javascript. You can make a static mockup with a button that has the class applied so that you can style it, then work out how to apply the javascript. This is outside of list scope I'm afraid. #send { display:inline-block; IE 6 doesn't support display: inline-block. You can achieve the same effect by triggering 'hasLayout' and by setting display to 'inline'. So for an IE 6 only app I believe it would be: #send { display: inline; zoom: 1; width: 25px; height: 25px; background: url(images/arrow_right.gif) no-repeat 0 0; } Cheers, Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Tables and font-size and Chrome
The site which I work on has an older form that is several pages long. The outer shell is doctype 4.0, tabular with so many coding errors I could only make it work in all browsers. Currently, I updated the out shell to be standards css based with xhtml transitional but kept the form in the older tabular format. I developed a special style sheet for the tabular section and works in all browsers I support IE 6 7 8, Firefox 2 and 3, Safari 3. Although we don't officially support Google Chrome, but had some time so I was going through the site in this browser. The font-sizes within the tables were so much larger in Google than any other browser. body { font-size:1em; } The entire tabular structure is in a container I called .outer within that are several nested tables which I didn't deal with so I put. .outer { font-size: 75%; line-height:130%; .outer td {font-size: 100%; } .outer td table tr td {font-size: 100%;} .outer td table tr td table tr td {font-size: 100%; } This is a small piece of the css and nothing is live so I cannot show you. Thanks in advance Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Faux Column and equal heights with image
Hi, I've emailed this list before regarding issues I am having with equal heights and am trying a simple faux column with a background image. My question is, in IE6, IE7 Firefox 2 and I think safari, the image width doesn't increase when the user changes the text-size within the browser. Is there any fix for this, would creating a .png file help? The image nav.jpg is 152.px wide .content is the wrapper .content { width:100%; background-color:#a9a9a9; float: left; clear:both; display: block; background: #a9a9a9 url(/test/nav.jpg) repeat-y ; min-height: 100%; } * html #content { height: 100%; } Navigation column .leftnav { /*background-color:#33; */ width:9.5em; float:left; } Content area .contentcopy { float: right; padding: .19em; margin: 0em; width:41.3em; } Thank you in advance Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Faux Column and equal heights with image
Thank you all, I get it, put a wider image in the background for the leftnav and put a color in the content area. Thanks On Mon, Mar 30, 2009 at 12:12 PM, David Laakso da...@chelseacreekstudio.com wrote: Nancy Johnson wrote: I've emailed this list before regarding issues I am having with equal heights and am trying a simple faux column with a background image. My question is, in IE6, IE7 Firefox 2 and I think safari, the image width doesn't increase when the user changes the text-size within the browser. Is there any fix for this, would creating a .png file help? The image nav.jpg is 152.px wide Use a much wider image? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Equal heights solutions
Thank you for all your solutions and apologise for my slow response. I have been busy. I haven't looked into Faux columns. I will look into that as well. On Wed, Mar 18, 2009 at 7:05 AM, Gunlaug Sørtun gunla...@c2i.net wrote: bruce.som...@web.de wrote: to suit the constraints of CSS implementations What is to be the successor to CSS that will actually solve the open problems and enable web designers? None, since this is about implementation. CSS may need another level, or five, and will probably get them over time. However, that in itself won't help much when it comes to implementation in browsers. We need new generations of browsers and eradication of the old ones. It is after all the old browsers - mainly IE - that stand in the way. So, ask the browser vendors and the end users to enable us, as they're the only ones that can do it. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Equal heights solutions
Hi, I just posted this got some wonderful answers, but I'm still looking for an ideal solution to equal heights problem This is an older intereractive site. http://www-odi.nhtsa.dot.gove/ewr/ I had been using YellowPencil's javascript solution until I discovered it didn't work with IE8. I then tried the CSS solution, I believe from Position is everything #wrapper {overflow:hidden;} #left, right {padding-bottom: 5000em; margin-bottom: -4999.5em;} It was great! however, we have one page with div id anchor tags in which is a known error to this solution I finally chose to use another javascript: script type=text/javascript src=/includes/p7_eqCols2_10.js/script body onLoad=P7_equalCols2(0,'left','p','main','p') which I don't like very much as you can always see the leftnav catch up with the content area. We are also considering some expandable menus in the content area and so far they didn't work in Firefox. I also began to look at CSS tables, cool, and it doesn't work in IE6 ir IE7 and I would have to rebuild the entire site. Thanks in advance for any other solutions. Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble with IE8 Vista Operating system and wordpress site
Hi, I ran into a snag with the overflow:hidden and that is there is one page full of anchor tags on professional site the updates are live not yet live. The fix seems very complicated for anchor tags, so I started to exploring css tables, and looks fine so far in my version of IE8, however there was some indication that beta versions had some issues, do you know of any updates on this? Thanks, On Thu, Mar 5, 2009 at 7:50 AM, Nancy Johnson njohnso...@gmail.com wrote: Thank you for your suggestions. I actually was using equalheights.js on two sites. One my professional site and the other the one I linked to which is volunteer. On my professional site, which is not live yet, I was able to use the position is everything solution for every browser except IE6 and 7, which I will continue to use the javascript. I have at least one very long page of user driven data that can go up to 41 printed pages and that got truncated in IE6 and 7. However in the http://www.pleasantstreetchurch.org/wordpress site, I couldn't get the overflow:hidden to work at all and I couldn't figure out what was wrong, but since it only had to do with a border and not background color, I put a right border in the left container and a left border in the sidebar and used a margin of -1px in the sidebar and so far that seems to work although I need to test it further. Nancy On Mon, Mar 2, 2009 at 7:57 PM, Gunlaug Sørtun gunla...@c2i.net wrote: Nancy Johnson wrote: http://www.pleasantstreetchurch.org/wordpress Not directly related to CSS - IE8rc1 gets stuck on the 'equalheight.js' script. Comment out that script and IE8 will behave ok. There are many alternatives to that script. Equal Height Columns is one that may work for you... http://www.positioniseverything.net/articles/onetruelayout/equalheight ...and I have listed/linked to a few more options here... http://www.gunlaug.no/contents/wd_additions_22.html regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble with IE8 Vista Operating system and wordpress site
Thank you for your suggestions. I actually was using equalheights.js on two sites. One my professional site and the other the one I linked to which is volunteer. On my professional site, which is not live yet, I was able to use the position is everything solution for every browser except IE6 and 7, which I will continue to use the javascript. I have at least one very long page of user driven data that can go up to 41 printed pages and that got truncated in IE6 and 7. However in the http://www.pleasantstreetchurch.org/wordpress site, I couldn't get the overflow:hidden to work at all and I couldn't figure out what was wrong, but since it only had to do with a border and not background color, I put a right border in the left container and a left border in the sidebar and used a margin of -1px in the sidebar and so far that seems to work although I need to test it further. Nancy On Mon, Mar 2, 2009 at 7:57 PM, Gunlaug Sørtun gunla...@c2i.net wrote: Nancy Johnson wrote: http://www.pleasantstreetchurch.org/wordpress Not directly related to CSS - IE8rc1 gets stuck on the 'equalheight.js' script. Comment out that script and IE8 will behave ok. There are many alternatives to that script. Equal Height Columns is one that may work for you... http://www.positioniseverything.net/articles/onetruelayout/equalheight ...and I have listed/linked to a few more options here... http://www.gunlaug.no/contents/wd_additions_22.html regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE8 and forcing scroll bar
Hi, I had placed the following code in my stylesheet to deal with the issue that Firefox and Safari has of moving slightly back and forth depending on whether the page has a scroll bar or not, however, it doesn't seem to work in IE8 html { font-size: 100%; overflow: -moz-scrollbars-vertical !important; min-height: 100%; margin-bottom: 1px; } Any suggestions? Thanks, Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Trouble with IE8 Vista Operating system and wordpress site
Hi, My Wordpress site, validates in the W3c validator and seems to work in all browsers I've tried except IE8. It freezes every time I try it. It gets stuck downloading images. But the other thing is that the global navigation doesn't seem to work in IE8. Can anyone tell me what I am doing wrong? http://www.pleasantstreetchurch.org/wordpress Thanks, Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New to List First question.
A side note to IE6. I just bought my dad a brand new Dell mini computer and guess what, it came with IE6 installed! I was a bit perturbed at this... Nancy On Mon, Feb 16, 2009 at 7:58 PM, Ryan Little @ Gusto r...@goforgusto.com wrote: Not really sure how relevant browser statistic are regarding the practical application of CSS. Nevertheless, there was a very long thread last month, on somewhat related matters, that may help be of interest to you. It begins here: http://markmail.org/search/?q=the+css+overlords#query:the%20css%20overlords+page:1+mid:eq3b3ynqjk46m7xs+state:results If the link breaks in transmission, the subject line is: The CSS Overlords Hi David, Thanks for the welcome, sorry If the css got lost in there :) The reason I brought the browsers up in relation to the CSS is because I have to make a CSS file to deal with older browsers if people would just upgrade to current or at least a newer browser than one set of CSS works. (at least so far) IE 7 and 8 are behaving a great deal more than 6 and lower did. Goes back to lurking :) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Review site for IE
I only saw padding differences between Firefox 2 and IE6, The differences I saw was the padding below the global nav and search. There was more padding in IE6. Maybe thats what you saw in what you said below. Nancy On Fri, Feb 13, 2009 at 8:40 AM, Virgilio Quilario virgilio.quila...@gmail.com wrote: Please review the following site in IE 6. http://www.kucia.com/kucia/sua/ I am able to test in Mac FF, Safari and Opera as well as Windows IE 7. Would like to get feedback in IE 6 environment. Noticed on IE 6 render site that IE 6 stacks the main nav. Any feedback would be great. you can download and use ie tester. it has ie 5.5 up to ie8b1 and it won't conflict with ie7. http://www.my-debugbar.com/wiki/IETester/HomePage Virgil http://www.jampmark.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Different looking site in different browsers?
Will your client notice the differences and would it be an issue to your client? The global nav on the site which I work on looks different in IE and Firefox, and I don't think the clients have even noticed. http://www-odi.nhtsa.dot.gov/ I had almost no input in the structure of this page nor the structure of the global nav. Nancy On Mon, Jan 26, 2009 at 12:17 PM, David Laakso da...@chelseacreekstudio.com wrote: Sarah Atkinson wrote: Any opinions? Sarah Good to go with IE functional but a little different, imho. -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Arial Narrow pixelated in FireFox
Why would Arial Narrow be pixelated in FireFox but smooth in IE? Thanks in Advance, Nancy Sosna Bohm P.S. I appreciate being able to read the different views in the current discussions of inline styles and multiple style sheets. I am at the point where I need to join IA (Inline Styles Anonymous). It is an addiction. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pragmatic look at our CSS future - ripped from: The CSS Overlords
The problem with getting rid of IE6 is too many internal applications especially in the business community will only work in IE6, like the internal application we use. There is no budget to make the updates and I'm sure they are massive. Nancy On Thu, Jan 22, 2009 at 3:27 AM, Alexandru Dinulescu alex.d.a...@gmail.com wrote: My opinion is that standards for old browsers should be dumped, and then force people to upgrade to anything newer. I for one do not offer support for anything lower than ie6, and ie6 is paid support. Because it's a pain to create and make sure everything works on IE6 quircks, and i dislike the use of javascript inside css to get ie6 to behave properly. You can do that by simply deleting all your CC for your old sites, how the site renders with the main stylesheet is that's how it renders. I dont think IE6 will live to see 2010 to be honest, already it has around 20% of the marketshare, and will drop rapidly, and for those who do not upgrade their browsers, then that's their problem, a small sign when you enter the website will check for your browser version, if it's IE6 or below, FF2 or below, safari 2 or below or etc a big message will appear saying Please upgrade your browser, otherwise this website may not work properly. And as for the designs to css implementation, almost never will a design be pixel perfect transcoded into the HTML, 95% it may be possible, but anything above that line, it's just wasted time (and lot's and lots of time). At least thats my opinion and so far it's profitable. --- Alexandru Dinulescu Web Developer (X)HTML/CSS Specialist Expert Guarantee Certified Developer XHTML: http://www.expertrating.com/transcript.asp?transcriptid=1879053 CSS : http://www.expertrating.com/transcript.asp?transcriptid=1870619 RentACoder Profile: http://www.rentacoder.com/RentACoder/DotNet/SoftwareCoders/ShowBioInfo.aspx?lngAuthorId=6995323 MainWebsite: http://alexd.adore.ro Portofolio: http://alexd.adore.ro/project_page.php __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pragmatic look at our CSS future - ripped from: The CSS Overlords
The problem is the custom javascripts etc, that were built into the application in 2001 and continually are added to since. I'm not sure its that unusual. On Thu, Jan 22, 2009 at 1:59 PM, Monica Nath msmonica...@yahoo.com wrote: Isn't upgrading the IE browser free? I guess it would take the helpdesk employee's time. As one who works for a technologically challenged company, I feel your pain From: Nancy Johnson njohnso...@gmail.com To: Alexandru Dinulescu alex.d.a...@gmail.com Cc: Gunlaug Sørtun gunla...@c2i.net; David Laakso da...@chelseacreekstudio.com; css discuss css-d@lists.css-discuss.org Sent: Thursday, January 22, 2009 10:46:15 AM Subject: Re: [css-d] Pragmatic look at our CSS future - ripped from: The CSS Overlords The problem with getting rid of IE6 is too many internal applications especially in the business community will only work in IE6, like the internal application we use. There is no budget to make the updates and I'm sure they are massive. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pragmatic look at our CSS future - ripped from: The CSS Overlords
A few weeks I was talking to a web design faculty member at a well-known art school, and was surprised to hear that she didn't know much about css and when her design broke, she had to ask a web developer to fix it. To me design/development go hand in hand. How can one design without knowledge of the limitations of the medium. It seems to me that the biggest mistake early on was when print designers who started design webpages found they couldn't control the font and look and started designing with Photoshop, then sliced and diced into a web page. Nancy On Wed, Jan 21, 2009 at 12:10 AM, Gunlaug Sørtun gunla...@c2i.net wrote: David Laakso wrote: Gunlaug Sørtun wrote: Erika Meyer wrote: The way toward change in web design trends is always by setting examples, especially high-profile examples. Know of any existing ones out here? There are some out there. Not many. There will be more. Someone will break the barrier. Others will follow suit... After having gone through all responses so far, my (maybe somewhat premature) conclusions and follow-up questions are as follows: 1: most barriers are not really web design related, and they are not well defined. Makes it hard to break them. 2: the basic design-goals are quite narrow - look/feel/use in regular browsers on regular screens. If/when media requirements change, these basic goals tend to limit freedom of movement. Ron Zisman wrote: because i do photoshop mock-ups doesn't mean i'm using tables and slicing and dicing graphics to make 100lb pages You're perfectly right - it doesn't. However, you deal with both design *and* coding, so you can make those sides meet in a balanced way. The front-end coder handed a photoshop design and being told to code this, may not be so fortunate. - Sticking to those regular browsers on regular screens: 1: it's unclear where one draws the lines between new/supported and old/obsolete browsers. 2: it is unclear how one (somewhat safely and intelligently) deals with browsers above and below those lines(1:). 3: it is unclear if/when/how one tests beyond a limited range of new/supported browsers. Think I've just touched on a few barriers that definitely are inside our playing-field, to the degree clients/time/economics allow for. Can someone provide input on these issues? (No back and forth arguing, please, as we don't need to reach consensus. Having many alternatives listed up is better than defining best practices.) Myself, I naturally enough approach the support-issue from the top down, and drill as far down as I get paid for. Since pay isn't an issue on my own site, I tend to drill a little further there... http://www.gunlaug.no/contents/wd_1_02_02.html ...not just because I can, but also because I may need the know-how one day. - Looking beyond those regular browsers on regular screens: 1: often it's like hearing a what? anything there? response, followed by a sorry, we didn't take that into account during the various design phases. To a large (and growing) degree HTML/CSS can deal with other media, so I guess it is up to us. 2: using WCAG2 as short-cut for widening the horizon beyond regular screens and browser-defaults... To a large (and growing) degree our humble HTML/CSS can deal with all those requirements/needs too, so that's up to us too. Also well within our playing-field, and the demand (from clients and others) seems to grow. The question is: how, if at all, are we dealing with this? - Revisiting the start of this thread: Ingo Chao wrote: How about a discussion like: how do we use CSS 3 with an IE6-userbase of greater than x% in years to come? IE6 vs. CSS3 doesn't create many problems, since IE6 doesn't support much of what's in the CSS3 modules. IE6 needs fallbacks so it doesn't go completely nuts with its buggy and weak CSS1/2 support, that's all. Searching around reveals quite a wide spread of browsers in use on various screens and operating systems - some of which can't/won't be upgraded, and with numbers of web users well above one billion already I find calculating in, and basing graded support on, percentages a little short-sighted. FWIW: Firefox 2.x and other versions using the same and older Gecko engines, are more of a problem than IE6 when it comes to CSS3, at my end. If we can present and share practical solutions for various issues based on what HTML/CSS can deliver and browsers can absorb without going nuts, we may be able to design better in the future. I think that's a pretty common goal, so I'm asking for more input that can lead us towards that goal. The CSS-D Wiki pages are showing age and weaknesses, and could do with some updates/upgrades. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http
Re: [css-d] Retrieving info from a contact form
Another group that may help you is web weavers webweav...@googlegroups.com Forms require a combination of Front End html/CSS and a back end interactive component to make the form work. Nancy On Fri, Jan 9, 2009 at 3:04 PM, Joseph Sims metronom...@yahoo.com wrote: I understand that this is more of a code question than a css question, but I could really use the help. You should join Web Design List to ask questions like this. http://webdesign-l.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS and iFrames
On Thu, Dec 11, 2008 at 12:26 PM, Adam Ducker a...@plugged-n.biz wrote: s...@ssyed.com wrote: Is there a way to control embedded CSS that in an iFrame? I am able to add hooks to control the CSS for the iFrame but I want to be able to control the CSS hooks in the iFrame. How is this achieved if at all? Thanks. As far as I know CSS will not cascade down into iFrame content. You could possibly attack the content with a JavaScript function that would apply inline styles but that's too off topic for this list. -Adam Ducker (http://adamducker.com) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ I've had luck putting the same CSS into the iframe page itself. Nancy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help: three columns with the same height
I chose javascript method http://www.paulbellows.com/getsmart/balance_columns/ You can see on my site: http://www-odi.nhtsa.dot.gov/ewr/names.cfm http://www-odi.nhtsa.dot.gov/includes/equalheight.js Nancy On Wed, Oct 29, 2008 at 11:41 AM, MEM [EMAIL PROTECTED] wrote: Hi all… This is my first post, any help will be greatly appreciated. I'm a CSS total newbie, so please, have patience. Ok. Yes I know this is the old table design déjà vu and we must avoid it etc… etc… I know we maybe have a .js solution (I don't want it thank you). I know about faux columns, but that doesn't allow me to play with the pseudo-left and pseudo-right columns border witdh, because we… we don't have them. So… I also have seen: http://pmob.co.uk/temp/3colfixedtest_explained.htm (too much hacks) http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/ (aaah…. it haven't work) http://www.sitepoint.com/newsletter/viewissue.php?id=3 http://www.sitepoint.com/newsletter/viewissue.php?id=3issue=70 issue=70 (uses a .js method that I'd like to avoid, and don't work fine cross browser). http://www.killersites.com/blog/?s=matching+column (.js and I haven't found where is the complete and recent post on this). http://www.alistapart.com/articles/multicolumnlayouts (and this one, may be very nice, but, has no REAL borders, the autor have use them for the layout). I'm looking for a simple 3 columns with the same height solution with a footer and a header in CSS only. Here is what I have so far from here http://www.htmlsource.co.uk/3-equal-columns-with-a-fixed-width-layout-using- css/ : the body: body div id=headerHEADER/div div id=container div id=leftSideThis is some text some text/div div id=centreThis is some text This is some text This is some text /div div id=rightSideThis is some text This is some text This is some text This is some text /div /div div id=footerFOOTER/div /body The CSS: style #header, #footer { width:770px; margin:0px auto 0px auto; height:50px; background-color:#dedede; } #leftSide, #rightSide { width:150px; } #leftSide { float:left; background-color:blue; padding:0px 0px 1000px 0px; margin:0px 0px -1000px 0px; } #rightSide { float:right; background-color:red; padding:0px 0px 1000px 0px; margin:0px 0px -1000px 0px; } #container { width:770px; margin:0px auto 0px auto; overflow:hidden; } #centre { width:470px; float:left; background-color:green; } #footer { clear:both; } /style The problem: The background of the #center does not follow the height of the highest column. How can we make it do it and work cross-browser? Thanks, and PLEASE, I really need some feedback on this. Talofo __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 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] Site Check Please: Cedar Lake Inn - Round #2
The height issue is definitely fixed in IE6. The entity issue is only an issue in the address line, but is not an issue in the times that the restaurant is open, yet uses some of the same bullets. Can you use the same coding for the bullets in the address line that you use in the times that the restaurant is open line? Nancy On Mon, Oct 27, 2008 at 10:30 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: David Laakso wrote: Peter Hyde-Smith wrote: http://www.fatpawdesign.com/CedarLakeInn/CLIindex.html http://www.fatpawdesign.com/CedarLakeInn/CLIdining.html http://www.fatpawdesign.com 1/ Dunno. Clear the cache? No got Avant here. I do not see the large gap you mention in any of my XP or Mac OS X 10.4.11 browsers. Avant uses existing Trident (MSIE) - the IE7 version in this case. Check in IE7 - big gaps. Declare... #bottomnav {height: 1%;} ...directly - no '* html' hack - and Avant/IE7 will behave itself. You can then delete the '* html #bottomnav' below '#bottomnav '. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 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] Site Check Please: Cedar Lake Inn
The height attribute in IE6 are not displaying correctly, The image on the homepage is 1/2 high and the first line of address is cut so only the bottom half shows. It could be because IE6 doesn't recognize min-height. Nancy On Sat, Oct 25, 2008 at 7:25 PM, David Laakso [EMAIL PROTECTED] wrote: Peter Hyde-Smith wrote: 10/25/2008 Nefore I get much further, would appreciate a site check of new Cedar Lake Inn index page and one interior page here, http://www.fatpawdesign.com/CedarLakeInn/CLIindex.html http://www.fatpawdesign.com/CedarLakeInn/CLIdining.html http://www.fatpawdesign.com/CedarLakeInn/CLIresetcss.css http://www.fatpawdesign.com/CedarLakeInn/CLIpagecss.css Some funkification of double borders in most browsers, and loss of #footer top margin in Opera. Education by the code and art elves always welcome. Cheers, Peter www.fatpawdesign.com developing in: WinXP/SP2 + FF3.0.3 at 1024x768 and 1280x1024 checking in: IE8.0beta/O9.61/Av11.6/Cr0.2/Orca1.1 validated (X)HTML and CSS In God we trust, all else bring data... Only checked in Mac Opera and Mac FF. Changes made live in FF-- no guarantee cross-browser (or in FF, for that matter) Re-set: #content{ height: 323px; } To read (in order to prevent text from heading for the Equator with scaling): #content{ min-height: 323px; } * html #content{ min-height: 323px; } #topnav, #dinnernav { padding: 0; :: not needed? padding-bottom: 20px; :: add } #topnav li a, #bottomnav li a, #dinnernav li a{ line-height: 1.6; -:: delete line-height: 0.7; -:: add -- less horsey when scaled } #bottomnav { /*float: right;*/float:left; :: amend margin-top: /*8px*/120px; :: amend } #addressblock{ line-height:0.5; --- :: less lead margin-top: /*18px*/30px; --- more lead } #footer{ border-top: 1px solid fuchsia/*test only*/; clear:both; margin: 280px 0 0 0;--:: delete font-size: 0.80em;--:: delete padding: 16px 0; } #footer p{ font-size: 0.7em; - :: add margin-left: 16px;- :: add margin-bottom: 8px;--:: delete } Fwiw, line-height usually needs no unit of measure-- a raw number will do. -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 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] Site Check Please: Cedar Lake Inn
You could try that. I have done the same thing and it works. Nancy On Mon, Oct 27, 2008 at 11:49 AM, David Laakso [EMAIL PROTECTED] wrote: Nancy Johnson wrote: The height attribute in IE6 are not displaying correctly, The image on the homepage is 1/2 high and the first line of address is cut so only the bottom half shows. It could be because IE6 doesn't recognize min-height. Nancy Peter Hyde-Smith wrote: http://www.fatpawdesign.com/CedarLakeInn/CLIindex.html http://www.fatpawdesign.com/CedarLakeInn/CLIdining.html Peter I hope this will bring IE/6 on board and level out some compliant browsers issues * html { :: delete :: overflow: hidden; } * html #content{:: delete :: min-height: 330px; } * html #content{ :: add :: height: 330px; } #addressblock{ line-height: /*0.5*/1.1; :: amend:: float: left; display: inline; ---:: delete both:: } #bottomnav { float: left; display: inline;---:: delete both:: } * html #bottomnav { height: 1%;---:: add:: border:1px solid fuchsia;---:: 4 position only:: } #bottomnav li{ float: left; :: add :: float: right;display: inline;---:: delete both:: } #footer{ padding: 16px 0;:: delete :: } #footer p{ padding-left: 16px;:: delete :: padding: 16px 0 16px 16px; :: add :: } #topnav li a, #bottomnav li a, #contentnav li a{ :: amend:: line-height: /*0.7*/1; } __ css-discuss [EMAIL PROTECTED] 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] Moving Layout
This is a great article. I was having the same problem with short pages. I had previously put a min-height in my footer which had a transparent background and forced a scrollbar on each page, but this , min-height: 100%; margin-bottom: 1px; , works better. Nancy On Thu, Oct 16, 2008 at 10:26 AM, David Laakso [EMAIL PROTECTED] wrote: Adam Stemple wrote: www.passivepokerincome.com Hovering over login reveals the login using overflow:hidden. In IE it works fine, but in FF it shifts the whole layout over. Thanks. See this article on correcting short page shift: http://www.communitymx.com/content/article.cfm?cid=528A0 -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 only: zoom text issue with global navigation
Thank you I will try this. On Thu, Oct 2, 2008 at 9:49 AM, Serge Krul [EMAIL PROTECTED] wrote: oops i wrote .navabar2 li {} instead of .navbar2 li a {} __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 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] hr size=1 noshade / and xhtml strict
Thank you for all your responses. I will keep these css hr set aside, but I think I'm changing the doctype to xhtml transitional instead of strict, because I have only started to convert this site to CSS and there are far too many issues that will come up with XHTML strict. Thanks for that suggestion. Nancy On Fri, Sep 26, 2008 at 4:12 PM, Brad Kelley [EMAIL PROTECTED] wrote: On Sep 26, 2008, at 12:07 PM, Chris Akins wrote: hr {border:1px solid rgb(203,204,220); border-width: 1px 0 0; clear: both; margin: 15px 15%; height: 0; } I can't tell you why the clear:both and height:0 needs to be in there. Perhaps someone here can shed some light on those details. I believe that if you don't specify a zero height, you'll actually see the normal HR element, which is not what you're wanting. You're basically only seeing the border you're giving it, not the actual element. The clear:both simply means to negate any floating that may be to the left or right, so this thing has the whole line to itself. Hope this helps, Brad =) __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 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] IE7 only: zoom text issue with global navigation
http://www-odi.nhtsa.dot.gov/ewr/ewrsubmission.cfm I noticed as I am updating several items that when I use zoom text in IE7, the global navigation text looses the padding, making the text appear mushed together, however, if you click on a link, the links stay in the correct place. I have tried a few things off line but nothing has worked so far. any suggestions? /*global horizontal navigation only */ .globalnav {background-color:#00; /*creates outer black outline around navigation*/ padding: .062em; margin: 0 ; } .navbar2 {/*gray areas in top nav*/ background-color: #bdbdbd; text-align:center; padding: .1em 0em .15em 0em; } .navbar2 ul { margin: 0; padding: 0; color: #FFF; line-height: 1.78em; white-space: nowrap; } .navbar2 li { list-style-type: none; display: inline; font-size: .75em; } .navbar2 li a {/*provides background color, white text and appropriate padding which designates width and height of black area*/ text-decoration: none; padding: .15em 6% .15em 6%; color: #FFF; background-color:#00; border:medium double #a9a9a9; } .navbar2 li a:hover { /*underline for hovering*/ text-decoration: underline; } Thank you in advance, Nancy __ css-discuss [EMAIL PROTECTED] 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] hr size=1 noshade / and xhtml strict
I am converting a site with an older doctype to xhtml strict, not live. Throughout the older site I have always used for a rule: hr size=1 noshade Although hr size=1 noshade seems to view correctly in all browsers that we support using xhtml strict doesn't validate. I also tried this version and which also seems to view correctly, but doesn't validate hr noshade=noshade size=1px / Adding height: 1px to css; seems to view correctly in IE browsers, but not correctly in mozilla or chrome. and you lose the noshade Borders instead of hr would only work in a few cases. Are there any other suggestions for alternatives? Thank you in advance Nancy __ css-discuss [EMAIL PROTECTED] 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] padding or margin differences between Firefox3 for the Mac and Firefox3 for the pc
The current layout demands that the content area be flush left AND flush right which didn't allow for differences in margins and padding. In the proposed layout, besides changing the doctype , I have adjusted it so the the content area can be either flush right OR flush left allowing for differences in margins and paddings between browsers, mostly by changing the background colors. This means I can get rid of hacks and simplify the IE stylesheets. Thank you for all your help and allowing me to see what the future held for the current layout. Nancy Johnson On Fri, Sep 19, 2008 at 8:04 AM, Philippe Wittenbergh [EMAIL PROTECTED] wrote: On Sep 19, 2008, at 1:16 AM, Nancy Johnson wrote: I was having the same problem before with safari and someone suggested body: first of type. I am concerned that it breaks in Firefox 3.1. 1. Since you'll be using a doctype that triggers strict mode, if I understood correctly,, the difference you saw between WebKit (Safari) and Gecko (Firefox) will disappear, making your little hack unnecessary (the difference is due to a different box-model interpretation in quirks mode). 2. If you're not using a doctype that triggers strict (standard compliant mode), you should. That levels of the differences between browsers. And you'll simplify your life. A refresher on doctypes: http://hsivonen.iki.fi/doctype/ PS-1: Fx 3.1 is not yet ought. A beta is due in October somewhere. The behaviour I mentioned won't change, though. PS-2: bottom-posting, please, when replying to the list. Thank you. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [EMAIL PROTECTED] 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] Possible to install multiple versions of IE?
Another way to go is browsershots.org which I use occasionally. Its not perfect and slow to load so it has its limitations, but it does give a screen shot of how your pages look in many browsers and platforms. You can opt for several versions of IE. On Thu, Sep 18, 2008 at 11:15 AM, Dejan Kozina [EMAIL PROTECTED] wrote: Start VirtualPC, select your image and go to Settings; look at the 'Shared Folders' line. The first time you try to designate a folder as shared (between real Windows and the image) it will say you've to first install VirtualMachine additions. To do so launch the image, wait for it to fully load and you'll find 'Add VirtualMachine Additions' under the Action menu. Click it, click OK again and shutdown the image with 'Save state'. You'll be able then to add folders from your real disk as shared between the two. djn Mark Senff wrote: I'm using Microsoft Virtual PC for this kind of thing, but here's my problem. Whenever I start up any virtual machine, I can not seem to access my standard hard drive (I believe it has to do with security, that a virtual machine shouldn't be allowed to access the real hard drive or something). Any files I want to use in the virtual machine have to be either burned on a CD (or image file), OR I have to go online within the virtual environment. Does anybody know if it's possible to actually open a browser in my virtual PC and then just go straight to, say, C:\websites\blabla\index.html ? mS __ css-discuss [EMAIL PROTECTED] 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/ -- - Dejan Kozina Web design studio Dolina 346 (TS) - I-34018 Italy tel./fax: +39 040 228 436 - cell.: +39 348 7355 225 skype: dejankozina http://www.kozina.com/ - e-mail: [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 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] Testing css in browsers
On Sun, Sep 21, 2008 at 5:46 AM, Benjamin Hawkes-Lewis [EMAIL PROTECTED] wrote: Andy Borka wrote: When testing CSS in browsers, what ones should be tested and in what order? I need to narrow down the list so I don't end up testing in 30+ different ones. Also what OS are these browsers in. I heard that I should test with the following in order: 1. Safari 3.x (MAC OSX) 2. Firefox 3.x (Windows) 3. Firefox 2.x (Windows) 4. Opera 9.x (Windows) 5. IE 8, 7, 6 and optionally 5.5 (Windows). . Let me know if there is a different list or what exactly I need to do here. It depends what you're trying to accomplish. On different platforms, browsers use somewhat different widget sets and fonts, so looking at Firefox on Windows isn't a perfect guide to Firefox on Mac or Firefox on Ubuntu, for instance. Then there are browsers using completely different web engines like Konqueror, NetSurf, Links, ELinks, Lynx, and the outdated iCab 3.x (still the best browser for pre-OS X Apple systems). -- Benjamin Hawkes-Lewis __ css-discuss [EMAIL PROTECTED] 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/ Doesn't it also somewhat depend on your user base? If you have a general user base than this is fine. Web developers may use Firefox more. Graphic designers often prefer Macs over windows. There is the scientific community that in some instances may lean toward Linux. We have an intranet site which only is optimized for IE6. Knowing your user base is important. __ css-discuss [EMAIL PROTECTED] 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] padding or margin differences between Firefox3 for the Mac and Firefox3 for the pc
Thank you I did find a fix, that seemed to work in both versions of Firefox, by adjusting by bottom margin slightly There is one other issue between Firefox3 for the pc and Firefox3 for the mac. It doesn't seem to matter the doctype. What is live is standards but an old doctype. I have a div entitled content and a very dark gray and it houses two divs leftnav and contentcopy. leftnav has no background color, contentcopy is a lighter gray. Firefox 3 for the Mac you can see content div appear on the right as a thin line whereas Firefox3 for the PC it is hidden as it should be. In the past, I have had to give slightly different widths to the leftnav for each browser including using a hack for Safari to achieve this affect. http://www-odi.nhtsa.dot.gov/ewr/. Is there a way to fix this? Thanks in advance Nancy On Tue, Sep 16, 2008 at 8:21 PM, David Laakso [EMAIL PROTECTED] wrote: Nancy Johnson wrote: Thank you, the page in question isn't live so I cannot show it Nancy I am testing an updated doctype in some of my pages. I have a drop down menu that sits correctly in every browser except FireFox 2. Is there a way to correct in Firefox 2, and not affect Firefox 3, Safari or Chrome? Thanks in Advance Nancy Hmm. No tickee no shirtee? E-mail the files off-list as a zip attachment and I'll put on my server. We can then both wait for someone on the list to resolve your problem. Maybe. -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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/