Re: [css-d] 120DPI system fonts wreak havoc in certain browsers
Felix Miata wrote: On 2008/02/18 13:15 (GMT-0500) Jeff Blaine apparently typed: Can anything be done from the CSS/XHTML end? CSS has no way to know DPI. It does, actually... http://www.w3.org/TR/css3-mediaqueries/#resolution ...and it already works in a few browsers. Constructions like this... @media screen and (min-device-width: 1650px) and (min-resolution: 100dpi) { html body #wrapper {font-size: 115%;} } ...will give better control over the final result - once support grows. Latest Opera(beta) and Safari are ready for testing now. What that control is used for is another matter, as control is relative and applying too much control is often counter-productive and tends to lead to failure. In-depth knowledge of the wide range of combinations of hardware/software/user-options before trying to control anything, is a must in web design. 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-d] Is this a CSS problem?
I have some time on my hands at the moment so I have decided to update some of my old site, replacing tables with CSS. One of these sites, http://www.compvoltalk.co.uk/ , is to be used by visually impaired people so I decided to add a switcher that enlarges the text. To do this I built on an ASP script that I already use on the site to change the contrast. The switcher works perfectly in FireFox and Safari, but not in any version of IE I have tried, and I have no idea why. The URL changes, but the text size does not, and what I can't figure out is if this is a CSS bug with IE or a problem with my ASP. Apologies if it is the latter, I realise this would not be appropriate for this list, but I posted this up on the Evolt list and didn't get a satisfactory answer. So, is this a CSS problem and, if so, any ideas how I can solve it? Thanks -- Kevin Stevens www.ratking.co.uk __ 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] Is this a CSS problem?
Kevin Stevens wrote: I have some time on my hands at the moment so I have decided to update some of my old site, replacing tables with CSS. In general, it's more fruitful to design new pages or redesign pages than to change existing code just to clean it up (which is what replacing tables with CSS tends to mean). One of these sites, http://www.compvoltalk.co.uk/ , is to be used by visually impaired people so I decided to add a switcher that enlarges the text. Even IE users can change the basic font size, and users of other browsers usually have even better controls. There's the drawback that on IE, you can only select between five sizes, but users to whom this is a problem have needed to find out to use various auxiliary tools, like user style sheets or zooming. So in effect, separate size controls on a per-site or per-page basis don't really help much. And, in fact, they may confuse and distract. If you do that, then it's probably best to use a presentation for the controls that resembles things your visitors may have seen elsewhere. The most common presentations I've seen are a) a row of icons (images) indicating different sizes b) icons with symbols like plus and minus, or other icons indicatíng increase or decrease c) dropdown menus. Any of these can easily be formatted in a fairly compact way, so that the size controls don't eat up half of the available space. The URL changes, but the text size does not, and what I can't figure out is if this is a CSS bug with IE or a problem with my ASP. It's even more difficult to us, since we cannot see the ASP code. The switching takes place there, and we cannot know how - CSS has no direct access to data passed in the URL. But wait I think this _is_ a CSS problem after all, since e.g. selecting the default size and the smallest of the sizes*) results in a page containing the element link rel=alternative stylesheet href=default_text.css media=all type=text/css The correct spelling is rel=alternate stylesheet, but you really want rel=stylesheet, since IE does not support alternate stylesheets at all, so far. Logically, it's alternat(iv)e, but technically, in the CSS sense, it should be declared just a style sheet for the page (technically, a persistent style sheet, which will always be used, not just selectable by the user via browser controls). *) Note: There are vision impairments that make a font size _smaller_ than the common default preferable. However, people with such an impairment, if it is serious, have probably already set their browser to use a suitable small size, and since you set the font size to 1em in the default style sheet (100% is better since it avoids some browser bugs), they will see your page in their preferred font size and won't any need font size controls there. Jukka K. Korpela (Yucca) http://www.cs.tut.fi/~jkorpela/ __ 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] Is this a CSS problem?
Kevin Stevens wrote: http://www.compvoltalk.co.uk/ So, is this a CSS problem and, if so, any ideas how I can solve it? Thanks I doubt it. You may want to start here, though... http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.compvoltalk.co.uk%2FDefault.asp%3FtextrCSS%3Ddefault_text%26%3DChange%2Btext%2Bsize aside: I have a sneaking suspicion that someone I know who uses a computer and has an 80% vision loss would have a real party for himself zeroing in on one of those buttons. Best, ~dL -- 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-d] Simulating IE's disabled look
Hi list, IE allows for the nonstandard usage of disabled in seemingly any html tag. I'm working on cleaning up of some html and trying to eliminate anything I find that deviates from standards. Is there a way that I can still get that same disabled look on an a tag, for instance? Right now I just have it using a light shade of gray for the font-color, but it'd be nice if I could get that look of disabled that IE gives. I'm not aware of any sort of text drop-shadow in CSS though! Thanks __ 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] dropdown menu issue with IE6
Sorry, I forgot to add the links to the site and CSS file. Here they are: HTML page: http://209.235.208.145/cgi-bin/WebSuite/tcsAssnWebSuite.pl?AssnID=OHSOYDBCode=410110Action=DisplayTemplatePage=AWS_OHSOY2_osc_index.html CSS file: http://209.235.214.238/css/2008styles.css On Tue, Feb 19, 2008 at 11:08 AM, Chris Kavinsky [EMAIL PROTECTED] wrote: I've run into a real poser with using drop down menus and IE6 (real surprise). Here's the scenario: -I have two horizontal navigation areas using Son of Suckerfish dropdowns -the 2nd area is also using background image replacement -one page has a Flash file where the 2nd level dropdowns were getting hidden even with a transparency setting on the Flash file (solved using {position:relative;z-index: 999;} in the CSS) -problem now is that the dropdown menu is pushed off to the far right in IE6 (fixed if I remove the above additional CSS, but then back to the original problem) Personally, I would love to say screw IE6 users but I'm not in a position to do that. Anyone have any suggestions on how to resolve the above problem? __ 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] Absolutely positioned div breaking out of parent in IE
It's in Standards mode. -Original Message- From: Richard Grevers [mailto:[EMAIL PROTECTED] Sent: Wednesday, February 20, 2008 7:26 PM To: Hayley Kinash Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Absolutely positioned div breaking out of parent in IE On 2/20/08, Hayley Kinash [EMAIL PROTECTED] wrote: I've got an absolutely positioned div inside a relatively positioned div, but in IE the child div is breaking out of the parent and uses the body as its parent. There's a width and a height on the parent div, and all divs above the parent have position:relative and a width. It behaves as expected in FF and Safari. I can't post the site URL right now, so I'll post code. Thanks for any help! div id=container div id=wrapper div id=menu (inside is Macromedia's mm_menu, which is what is jumping out of the parent div, but is absolutely positioned) /div /div /div #container { margin-left: auto; margin-right: auto; width: 761px; background-color:#ff; position:relative; } #wrapper { width:577px; float:right; text-align:left; position:relative; } #menu { position:relative; width:538px; height:30px; text-align:left; padding-left:10px; padding-right:29px; background-color:#318b4d; } Is your doctype one that will trigger quirks mode rendering in IE? From memory, getting the parent wrong for absolute positioned elements was an IE5 / 5.5 bug, and might have only been fixed for standards mode in IE6. -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ 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] Static background at bottom of browser window?
Hi all This is my first post though I've been reading the emails for a few weeks now - I've picked up a lot of tips! I'm still learning CSS and I wanted to create an effect but I'm not sure how to go about this: I want to have a picture of grass across the bottom of the website (which is always at the bottom of the browser window, no matter what the user does) - it then fades up into the sky, so that the whole website is on a solid blue background excepting the grass at the bottom. What I really would like to ask is how do I code the css so that the piece of grass is always at the bottom of the browser, no matter how big the browser is or how much content there is further down? The ideal would be for the grass to always be at the bottom of the window that the user can see, even if there is still more content that requeires the user to scroll down. So far I have: body{ background-color: #CCE7FA; background-image: url(images/grass.jpg); background-repeat: repeat-x; background-position: bottom; } which only gives me the basics. Plus, if the content doesn't fill up the browser window, the solid blue background continues underneath the grass! The catch is that it very definitely needs to work in IEx... Thanks in advance! Ines __ 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] dropdown menu issue with IE6
-I have two horizontal navigation areas using Son of Suckerfish dropdowns -the 2nd area is also using background image replacement -one page has a Flash file where the 2nd level dropdowns were getting hidden even with a transparency setting on the Flash file (solved using {position:relative;z-index: 999;} in the CSS) -problem now is that the dropdown menu is pushed off to the far right in IE6 (fixed if I remove the above additional CSS, but then back to the original problem) Personally, I would love to say screw IE6 users but I'm not in a position to do that. Anyone have any suggestions on how to resolve the above problem? FYI, the dropdown menus are hidden under the flash when I view it on Firefox 2 (Mac). And in my IE6, I'm not getting any dropdown menus. Jeff __ 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] Static background at bottom of browser window?
Inês Teles wrote: The ideal would be for the grass to always be at the bottom of the window that the user can see, even if there is still more content that requeires the user to scroll down. The catch is that it very definitely needs to work in IEx... Ines Welcome to the list! You might look at the 1st and 3rd implementation methods toward the bottom of this page [1] and assign the grass to the footer. Others on the list may have less advanced examples and suggestions to offer. Best, ~dL [1] http://www.satzansatz.de/cssd/companions.html -- 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-d] Auto scale images?
Hi Everyone, I'm working on a little bit of a test for me... Not a live site just trying to get ready for one. Here's the issue, I have in the past been able to scale the size of the images when you scale the text of the website (Nice effect!) but today I noticed that if I remove a height attribute on the containing div, the pictures don't scale.. Is that expected? Here's what I'm talking about: Doesn't work: .header { top: 0em; width: 100%; margin-bottom: -4em; font-size: 150%; } Does work: .header { height: 1em; top: 0em; width: 100%; margin-bottom: -4em; font-size: 150%; } .floatleft {float: left; margin: 5px;} HTML: div class=header Pimg class=floatleft src=UltimateEarth.jpg height=50% width=auto My Company, My Town! MIBR Phone:BR Fax:BR Email:BR/P /div!-- End of header div -- Also... for anyone that wants to see the ugly test page with the css included: HTTP://www.raoset.com/tests/global7/ Any help would be appreciated! -- Jason Pruim Raoset Inc. Technology Manager MQC Specialist 3251 132nd ave Holland, MI, 49424 www.raoset.com [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-d] divs not centering in Firefox
Hi list memebers, maybe someone can help me figure out why this won't work in Firefox but does in IE6. This is splash page that is called via Java in a booking process.. CSS: style type=text/css #splash { width:100%; margin:0 auto; margin-top:60px; text-align:center; } #splash .box { width:400px; height:auto; background:#112643; border:solid; color:#aab7ca; border-width:1px; text-align:center; } #splash .box p { padding:5px; } .splashlogo { padding:15px 0 0 0; } /style XHTML; div id=splash div class=box p class=font_phonePlease wait while we complete your request.../p p object classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354 codebase=//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=7,0,19,0 width=200 height=200 param name=movie value=../_masterfiles/wv/images/splash/earth_v2.swf / param name=quality value=high / embed src=../_masterfiles/wv/images/splash/earth_v2.swf quality=high pluginspage=//www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash width=200 height=200/embed /object /p pimg src=../_masterfiles/wv/images/splash/animation_1.gif alt= name=ImgAnim width=144 height=20 border=0 id=ImgAnim //p /div p class=splashlogoimg src=../_masterfiles/wv/images/splash/nwa_wv_white.gif alt= width=225 height=43/ /p /div I know I have a Flash issue with validation, but I am working on that as well. Thanks, Cory Shubert __ 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] Float list items
Hi, I have a list div ul liitem 1 price1/li liitem 2 price2/li liitem 3 price3/li /ul /div How can I contruct my css so that the 'item' is to the left of the div and the 'price' floats to the far right of the div -- -Bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't __ 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] Static background at bottom of browser window?
What I really would like to ask is how do I code the css so that the piece of grass is always at the bottom of the browser, no matter how big the browser is or how much content there is further down? The ideal would be for the grass to always be at the bottom of the window that the user can see, even if there is still more content that requeires the user to scroll down. So far I have: body{ background-color: #CCE7FA; background-image: url(images/grass.jpg); background-repeat: repeat-x; background-position: bottom; } which only gives me the basics. Plus, if the content doesn't fill up the browser window, the solid blue background continues underneath the grass! I have done something like this on my blog: http://life.outtacontext.com. My css is similar to yours: body { margin: 0px 0px 20px 0px; background-color: #33; background-image: url(images/oranges_bottom.jpg); background-position: left bottom; background-attachment: fixed; background-repeat: repeat-x; text-align: center; } The background image I use matches at the left/right seam so that when it repeats it's seems continuous. I also position it left bottom, rather than just bottom. But I also have a content area that essentially sits above my background. The background is static but when the viewer scrolls s/he is scrolling the content area. I also added some spacing to the bottom of the content area so that someone could scroll up enough to see the image. BTW, the margin and text-align is used to help center the content area however large the browser window is (the text-align is so that it will work in IE6). Jeff __ 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] Gap between divs in IE6
I've been trying to fix this till I can't remember my own name: I have a page that looks just as I want in FF but which misbehaves in IE6, showing a gap between divs. Link: http://www.pauljinks.co.uk/test/contentTemplate2.html I've stripped down everything to identify the offending code, which looks like this: div id=container div id=main-top/div div id=objective/div div id=objectiveBot/div /div The idea is that the content of #objective appears in a nice rectangle with rounded corners, the top and bottom of said rectangle being contained by #main-top and #objectiveBot. here's my css: body { margin: 0px; padding: 0px; } #container { width: 770px; margin: auto; } #main-top { height: 16px; width: 770px; background-image: url(..); background-repeat: no-repeat; } #container #objectiveBot { background-image: url(..); background-repeat: no-repeat; width: 770px; height: 23px; } #container #objective { background-image: url(...); background-repeat: repeat-y; width: 770px; } I know it's something pretty obvious, but I can't see the wood for the wotsits here. Please help. Paul __ 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] Absolutely positioned div breaking out of parent in IE
On Tue, 19 Feb 2008 09:31:53 -0600, Hayley Kinash wrote: I've got an absolutely positioned div inside a relatively positioned div, but in IE the child div is breaking out of the parent and uses the body as its parent. There's a width and a height on the parent div, and all divs above the parent have position:relative and a width. It behaves as expected in FF and Safari. [code snipped] See this article at PositionIsEverything.net for the lowdown on this bug: http://www.positioniseverything.net/abs_relbugs.html Hopefully this helps. Cordially, David -- __ 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] Gap between divs in IE6
Paul Jinks wrote: I have a page that looks just as I want in FF but which misbehaves in IE6, showing a gap between divs. http://www.pauljinks.co.uk/test/contentTemplate2.html The simplest and most reliable solution is to put an html comment in the empty divs, to prevent IE/win from seeing whitespace in there. div id=main-top!-- --/div div id=objective!-- --/div div id=objectiveBot!-- --/div IE6 will otherwise treat those divs as if they're one line-height tall, since that and older IE/win versions don't respect declared dimensions and will auto-expand the divs in height to make room for an imaginary space. 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/
Re: [css-d] divs not centering in Firefox
On Thu, Feb 21, 2008 at 8:17 PM, Cory Shubert [EMAIL PROTECTED] wrote: Hi list memebers, maybe someone can help me figure out why this won't work in Firefox but does in IE6. This is splash page that is called via Java in a booking process.. CSS: style type=text/css #splash { width:100%; margin:0 auto; margin-top:60px; text-align:center; } It could be that the latter margin-top declaration is overwriting the former one. You should have margin: 60px auto 0 auto; Firefox is more strict that IE6 in these issues. __ 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] Text Resizing Causes Small Movement in Images
Hi - not sure what's causing my image based mainNav tabs to move slightly when text is resized in this header: www.springfieldmo.gov/newSite/index4.html www.springfieldmo.gov/newSite/mainStyles_take4.css The page is based on Matthew James Taylor's perfect 3-col liquid layout, though the 3 columns aren't yet coming to bear on the above. Basically, when sizing text up or down more than just one level, the tabs start moving around, thus breaking the separating line between the white and maroon. I've tried various permutations of margins and padding on #crumbs and #mainNav to no avail. Thanks for any input and insight. Christopher Akins Web Coordinator City of Springfield, MO __ 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] divs not centering in Firefox
Yes, that is it. Thank you very much. C From: Tim Palac [mailto:[EMAIL PROTECTED] Sent: Thursday, February 21, 2008 11:34 AM To: Cory Shubert Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] divs not centering in Firefox Cory, In #splash .box, replace text-align:center; with margin: 0 auto;. This works for me in both Firefox and IE6/7. Tim AIM: TymArtist www.timpalac.com On Thu, Feb 21, 2008 at 11:17 AM, Cory Shubert [EMAIL PROTECTED] wrote: Hi list memebers, maybe someone can help me figure out why this won't work in Firefox but does in IE6. This is splash page that is called via Java in a booking process.. CSS: style type=text/css #splash { width:100%; margin:0 auto; margin-top:60px; text-align:center; } #splash .box { width:400px; height:auto; background:#112643; border:solid; color:#aab7ca; border-width:1px; text-align:center; } #splash .box p { padding:5px; } .splashlogo { padding:15px 0 0 0; } /style XHTML; div id=splash div class=box p class=font_phonePlease wait while we complete your request.../p p object classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354 codebase=//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=7,0,19,0 width=200 height=200 param name=movie value=../_masterfiles/wv/images/splash/earth_v2.swf / param name=quality value=high / embed src=../_masterfiles/wv/images/splash/earth_v2.swf quality=high pluginspage=//www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash width=200 height=200/embed /object /p pimg src=../_masterfiles/wv/images/splash/animation_1.gif alt= name=ImgAnim width=144 height=20 border=0 id=ImgAnim //p /div p class=splashlogoimg src=../_masterfiles/wv/images/splash/nwa_wv_white.gif alt= width=225 height=43/ /p /div I know I have a Flash issue with validation, but I am working on that as well. Thanks, Cory Shubert __ 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] Text Resizing Causes Small Movement in Images
Chris Akins wrote: Hi - not sure what's causing my image based mainNav tabs to move slightly when text is resized in this header: www.springfieldmo.gov/newSite/index4.html Images are inline-elements by default, which means there will be provided space for text-descenders and this space will change with font-resizing. The easiest solution is probably to float all relevant images, since floating turns all elements into block-elements and allow arranging in lines - like in the following example... http://www.gunlaug.no/tos/alien/ca/test_08_0221.html http://www.gunlaug.no/tos/alien/ca/test_08_0221_files/mainStyl.css 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/
Re: [css-d] Several problems with template
On Wed, 20 Feb 2008 15:30:32 +0100, Thijs Hakkenberg wrote: Dear List, For my site I use the following template, but there are serveral things that go awry in IEX (including 7): http://ebrius.nl/fileadmin/template/ebrius.nl/index.html 1. The footer and header are placed too much to the left 2. The footer overlays the content if the content exceeds 100% Did you fix this footer/header offset, Thijs? I am not seeing the problem here. I *do* see a problem in IE 7 -- when you apply page zoom the background does not enlarge, making for an odd-looking display. This is a known IE 7 bug. I suggest adding an extra (IE-only?) wrapper around the entire contents, and putting your background image on that. It's only backgrounds on BODY that IE 7 does not zoom. Cordially, David -- __ 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] Float list items
Usamah M. Ali wrote: My normal approach would be using a table. ;~) For tabular data - yes, but not if it was just a visual effect I were after. 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/
Re: [css-d] Float list items
My normal approach would be something like... ul lispanitem 1/span price1/li lispanitem 2/span price2/li lispanitem 3/span price3/li /ul li {text-align: right;} li span {float: left;} ...as CSS can only target elements, not the content within them ... at least not yet. My normal approach would be using a table. ;~) Usamah __ 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] Still Having Problem with Menu Line Break
On Tue, 19 Feb 2008 20:33:08 -0600 (CST), Jeff Gates wrote: Page in question: http://inourpath.com/intro.html I am still having problem with the bottom menu line breaking to a second line in IE 6 and IE7. The MAP is breaking to a second line. The menu is in the nav div which is centered within the bottom_menu div (the bottom_menu div is exactly the width of the content area (530px). To center the nav div I set the width and made the left and right margins auto. I feel the problem might be with the size of the text in IE. I've got the menu items set at a font size of x-small. If the problem is because IE is making the size of the text a bit bigger (and therefore moving the last menu item to a second line) how can I get the menu to have some breathing room and expand width if it needs to, but still stay centered? Jeff, Try changing the width on #nav to a suitable em value. In general, font sizes do not correspond to any particular number of pixels-- only in particular cases, such as in IE on an OS set to 96 DPI is that so. FWIW - The menu breaks to two lines in all my browsers this end; IE and Opera put both Commentary and Maps on the second line, probably due to my having large fonts installed. Although you have frozen the font-size to 12px in IE, note that other browsers allow you to boost this value at will, so be sure to test using browser text size controls. Cordially, David -- __ 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] Static background at bottom of browser window?
On Thu, 21 Feb 2008 14:33:10 +, Inês Teles wrote: Hi all This is my first post though I've been reading the emails for a few weeks now - I've picked up a lot of tips! I'm still learning CSS and I wanted to create an effect but I'm not sure how to go about this: I want to have a picture of grass across the bottom of the website (which is always at the bottom of the browser window, no matter what the user does) - it then fades up into the sky, so that the whole website is on a solid blue background excepting the grass at the bottom. What I really would like to ask is how do I code the css so that the piece of grass is always at the bottom of the browser, no matter how big the browser is or how much content there is further down? I suggest using an (extra?) wrapper DIV around the entire content of BODY and putting your background image on that. This has the added advantage of overcoming an IE 7 bug, which does not expand backgrounds on BODY when page zoom is used. Cordially, David -- __ 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] Simulating IE's disabled look
On Thu, 21 Feb 2008 07:43:12 -0500, Ray Costanzo wrote: Hi list, IE allows for the nonstandard usage of disabled in seemingly any html tag. I'm working on cleaning up of some html and trying to eliminate anything I find that deviates from standards. Is there a way that I can still get that same disabled look on an a tag, for instance? Right now I just have it using a light shade of gray for the font-color, but it'd be nice if I could get that look of disabled that IE gives. I'm not aware of any sort of text drop-shadow in CSS though! Don't know how to imitate Internet Explorer in other browsers, but one way I use to indicate disabled is to apply a suitable opacity value to the element. IE has its own version of opacity so you have a choice of using IE' s filter: alpha(opacity=75); (for 75%) for example, or using disabled. Not exactly what you are after, but an alternative suggestion. Cordially, David -- __ 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] Still Having Problem with Menu Line Break
Try changing the width on #nav to a suitable em value. In general, font sizes do not correspond to any particular number of pixels-- only in particular cases, such as in IE on an OS set to 96 DPI is that so. FWIW - The menu breaks to two lines in all my browsers this end; IE and Opera put both Commentary and Maps on the second line, probably due to my having large fonts installed. Although you have frozen the font-size to 12px in IE, note that other browsers allow you to boost this value at will, so be sure to test using browser text size controls. Thanks David. Ems! Why didn't I think of that! -g Let me try. The font size I stipulated wasn't 12px but x-small. I'd like to know more about how that works. Is it more like ems, which change depending on the user's prefs? How did you come up with 12px in IE? As to users being able to increase the size of fonts, is there anything we can really do about that, especially in a situation like this menu? Having the menu on one line is my goal. And if there are tips to make it happen in as many situations as possible, I want to know. But when does one say: I've done my best? (A rhetorical question, I'm sure we've all asked ourselves --any concrete solutions, let me know.) Jeff __ 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] Still Having Problem with Menu Line Break
On Feb 21, 2008, at 1:52 PM, Jeff Gates wrote: Try changing the width on #nav to a suitable em value. In general, font sizes do not correspond to any particular number of pixels-- only in particular cases, such as in IE on an OS set to 96 DPI is that so. FWIW - The menu breaks to two lines in all my browsers this end; IE and Opera put both Commentary and Maps on the second line, probably due to my having large fonts installed. Although you have frozen the font-size to 12px in IE, note that other browsers allow you to boost this value at will, so be sure to test using browser text size controls. Thanks David. Ems! Why didn't I think of that! -g Let me try. The font size I stipulated wasn't 12px but x-small. I'd like to know more about how that works. Is it more like ems, which change depending on the user's prefs? How did you come up with 12px in IE? As to users being able to increase the size of fonts, is there anything we can really do about that, especially in a situation like this menu? Having the menu on one line is my goal. And if there are tips to make it happen in as many situations as possible, I want to know. But when does one say: I've done my best? (A rhetorical question, I'm sure we've all asked ourselves --any concrete solutions, let me know.) If it's that important to put it on one line for you, you COULD set specific sizes on the menu which would freeze it for scaling I believe... I used that technique (I think) on a old website header I did... I didn't need the company name to get HUGE so I just specified the size in pixels and then that stuck at that size :) -- Jason Pruim Raoset Inc. Technology Manager MQC Specialist 3251 132nd ave Holland, MI, 49424 www.raoset.com [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/
Re: [css-d] problem with borders
On Wed, Feb 20, 2008 at 07:42:46PM +, vwf wrote: Hello, I try to make new layout for my website. The first hurdle is a horizontal navigation bar that does not behave like I want: I get unwanted borders, and the background does not shift on hover. Can someone help? Thank you for all the replies. They will definitely help to fix all errors. I am looking into the timeout error reported, but I do not know the cause. I suspect the hardware. __ 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] dropdown menu issue with IE6
The dropdowns are there, but they're showing up off the screen to the right. You should be able to see a portion of the About OSC dropdown. The rest are off somewhere. IE7 works fine, as well as Safari and FIrefox (Windows and Mac). With Firefox on the Mac, it sometimes hides behind the Flash until you hover over it. Not consistent, but annoying. Anyone know a fix for this as well, I'm all ears. On Thu, Feb 21, 2008 at 10:30 AM, Jeff Gates [EMAIL PROTECTED] wrote: -I have two horizontal navigation areas using Son of Suckerfish dropdowns -the 2nd area is also using background image replacement -one page has a Flash file where the 2nd level dropdowns were getting hidden even with a transparency setting on the Flash file (solved using {position:relative;z-index: 999;} in the CSS) -problem now is that the dropdown menu is pushed off to the far right in IE6 (fixed if I remove the above additional CSS, but then back to the original problem) Personally, I would love to say screw IE6 users but I'm not in a position to do that. Anyone have any suggestions on how to resolve the above problem? FYI, the dropdown menus are hidden under the flash when I view it on Firefox 2 (Mac). And in my IE6, I'm not getting any dropdown menus. Jeff __ 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] alignment problem on Firefox
url - http://www.zanalysts.net/ css - http://www.zanalysts.net/styles/zanalysts.css If you look at the display on IE 7 you will see what I want. Can someone please help me with the alignment of the list items on the right hand side of the page? I set padding-left: 42px to the list items and as you can see the graphic extends below the title and therefore the padding on the list item pushes the first couple to the left and out of alignment. If I set the height of the div around the image and title that solves my problem but does not give the appearance I want. I tried some other things but the whole page got messy. Can someone please advise my own how to accomplish my objective? Thank you, Tim __ 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] Absolutely positioned div breaking out of parent in IE
On Tue, 19 Feb 2008 09:31:53 -0600, Hayley Kinash wrote: I've got an absolutely positioned div inside a relatively positioned div, but in IE the child div is breaking out of the parent and uses the body as its parent. There's a width and a height on the parent div, and all divs above the parent have position:relative and a width. It behaves as expected in FF and Safari. [code snipped] See this article at PositionIsEverything.net for the lowdown on this bug: http://www.positioniseverything.net/abs_relbugs.html Hopefully this helps. Cordially, David -- The PIE article indicates that the fix for IE is to put a width and/or height on the parent - it has both, and position:relative. __ 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] alignment problem on Firefox
Can someone please help me with the alignment of the list items on the right hand side of the page? I set padding-left: 42px to the list items and as you can see the graphic extends below the title and therefore the padding on the list item pushes the first couple to the left and out of alignment. Your approach is complicating the matters for you. You should be using background images instead of putting presentational images right into the markup. Instead of having: divimg width=32 height=30 class=image title=Image alt=windows logo src=/images/windows-logo.gif/ a class=title href=/windows/ASP.NET 3.5 Hosting/a/div you could have: h4a class=title href=/windows/ASP.NET 3.5 Hosting/a/h4 and have the following in the CSS: h4 { background: transparent url(/images/windows-logo.gif) no-repeat center center; } This is the minimal code needed, but of course you could play on the CSS as much as you wish to get the needed effet with precise detail level. Usamah __ 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] alignment problem on Firefox
Your approach is complicating the matters for you. You should be using background images instead of putting presentational images right into the markup. Instead of having: divimg width=32 height=30 class=image title=Image alt=windows logo src=/images/windows-logo.gif/ a class=title href=/windows/ASP.NET 3.5 Hosting/a/div you could have: h4a class=title href=/windows/ASP.NET 3.5 Hosting/a/h4 and have the following in the CSS: h4 { background: transparent url(/images/windows-logo.gif) no-repeat center center; } This is the minimal code needed, but of course you could play on the CSS as much as you wish to get the needed effect with precise detail level. Usamah I'm sorry; I forgot to declare the left padding on the level 4 heading: h4 { background: transparent url(/images/windows-logo.gif) no-repeat center center; padding-left: 42px; } Just ditch the floating altogether. It's not needed. Usamah __ 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] Tab menu: using descendant selectors to create active tab
For my horizontal tab menu, I'm working on markup and css to produce an active tab effect. For various reasons, I need to use descendant selectors to trigger the active tab rather than add a special selector to the active tab (e.g., id=active). But, using descendant selectors doesn't work unless I change the selector on an element that is not involved in tab activation. And when I *do* change the selector on the unrelated element, the tabs start misbehaving in Firefox. The details follow. I have some test pages in which I've inserted a generic version of Eric Meyer's tabbed navbar. Here is the navbar markup (fyi, the tab_wrapper div is local and not part of Eric's tab markup): div id=tab_wrapper class=select_tab_1 div id=navcontainer ul id=navlist li id=tab_1 class=tab_1a href=# id=activeItem one/a/li li id=tab_2 class=tab_2a href=#Item two/a/li li id=tab_3 class=tab_3a href=#Item three/a/li li id=tab_4 class=tab_4a href=#Item four/a/li li id=tab_5 class=tab_5a href=#Item five/a/li /ul /div etc. etc. ==Test page #1: using the default navbar and the id=active approach. The active tab works: http://hul.harvard.edu/oisnew/support/docs-test-active.html The rule that controls active tab is: #navlist li a#active { background: white; border-bottom: 1px solid white; } This rule produces an active tab with a 1px white bottom border on the a, which obscures the default 1px black bottom border provided by the ul. ==Test page #2: using descendant selectors instead. Active tab does NOT work: http://hul.harvard.edu/oisnew/support/docs-test-descendant-id.html The rule that controls active tab is: div.select_tab_1 .tab_1 a, div.select_tab_2 .tab_2 a, div.select_tab_3 .tab_3 a, div.select_tab_4 .tab_4 a, div.select_tab_5 .tab_5 a, div.select_tab_6 .tab_6 a, div.select_tab_7 .tab_7 a, div.select_tab_8 .tab_8 a, div.select_tab_9 .tab_9 a, div.select_tab_10 .tab_10 a { background: white; border-bottom: 1px solid white; } ==Test page #3: uses same descendant selectors as #2. But I discovered thru tweaking that if the ul has a class selector instead of id, the active tab works. http://hul.harvard.edu/oisnew/support/docs-test-descendant-class.html However, in Firefox, this arrangement leads to a bug when screen text size increases. As size increases, the ul's height grows out of proportion with the li's and a's and as a result, the 1px black border on the ul is no longer hidden by the active tab's 1px white border. Can anyone help me understand why changing to a class selector on the ul allows the descendant selector to activate the tab? And why the Firefox behavior? FYI, the surrounding layout uses ems in many places to control size. I suspect the navbar ul is inheriting an ems setting from elsewhere in the css, but I haven't found the cause. I've used FF/Firebug and WebDeveloper, but haven't found the culprit. Thanks. --julie __ 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] Markup for image URL in CSS rule
h4 { background: transparent url(/images/windows-logo.gif) no-repeat center center; padding-left: 42px; } Question on markup code in CSS. I have seen markup as above, where the image tag inside parenthesis has quotation marks and sometimes without. Which is it, q.marks or not? Thanks, Cory __ 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] alignment problem on Firefox
On Thu, Feb 21, 2008 at 11:51 PM, Big Moxy [EMAIL PROTECTED] wrote: I'm sorry but that didn't work. The image is not displaying now. Try using the absolute path to the image and don't forget the left padding. h4 { background: transparent url(http://absolute/path/to/the/image) no-repeat center center; left-padding: 42px; } Usamah __ 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] Markup for image URL in CSS rule
Great catch Cory! I don't think background image is the right solution though. Look at it now. www.zanalysts.net Tim -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Cory Shubert Sent: Thursday, February 21, 2008 12:55 PM To: CSS Discussion Subject: [css-d] Markup for image URL in CSS rule h4 { background: transparent url(/images/windows-logo.gif) no-repeat center center; padding-left: 42px; } Question on markup code in CSS. I have seen markup as above, where the image tag inside parenthesis has quotation marks and sometimes without. Which is it, q.marks or not? Thanks, Cory __ 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] Markup for image URL in CSS rule
On Thu, Feb 21, 2008 at 11:54 PM, Cory Shubert [EMAIL PROTECTED] wrote: h4 { background: transparent url(/images/windows-logo.gif) no-repeat center center; padding-left: 42px; } Question on markup code in CSS. I have seen markup as above, where the image tag inside parenthesis has quotation marks and sometimes without. Which is it, q.marks or not? Thanks, Cory Firstly, I would like to note that CSS in NOT a markup language; it's a styling language. If you have some images for presentatioal purposes then they should be in the CSS. Images that are part of the content are the ones that should be marked up. An example, an image of Hillary Clinton on a newpaper website is content, and therefore should be marked up with HTML's element img: img src=hillary.jpg alt= title=Hillary Clinton / An image of say, Email this article link is presentational as it's not part of the content, and therefore should go in the CSS: a href=article.php?send_articleSend Article/a CSS could be: a { background: url(email.gif) no-repeat top left; padding-left: 12px; } Using double or single quotations or not using them at all doesn't make a difference but for IE5 for Mac which doesn't support single quotes. Usamah __ 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] Markup for image URL in CSS rule
Isn't my issue a presentational one? I would compare my objective to your Email this article example. Tim -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Usamah M. Ali Sent: Thursday, February 21, 2008 1:12 PM To: Cory Shubert Cc: CSS Discussion Subject: Re: [css-d] Markup for image URL in CSS rule On Thu, Feb 21, 2008 at 11:54 PM, Cory Shubert [EMAIL PROTECTED] wrote: h4 { background: transparent url(/images/windows-logo.gif) no-repeat center center; padding-left: 42px; } Question on markup code in CSS. I have seen markup as above, where the image tag inside parenthesis has quotation marks and sometimes without. Which is it, q.marks or not? Thanks, Cory Firstly, I would like to note that CSS in NOT a markup language; it's a styling language. If you have some images for presentatioal purposes then they should be in the CSS. Images that are part of the content are the ones that should be marked up. An example, an image of Hillary Clinton on a newpaper website is content, and therefore should be marked up with HTML's element img: img src=hillary.jpg alt= title=Hillary Clinton / An image of say, Email this article link is presentational as it's not part of the content, and therefore should go in the CSS: a href=article.php?send_articleSend Article/a CSS could be: a { background: url(email.gif) no-repeat top left; padding-left: 12px; } Using double or single quotations or not using them at all doesn't make a difference but for IE5 for Mac which doesn't support single quotes. Usamah __ 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] Markup for image URL in CSS rule
Thank you for the correction, Usamah! I also added height:37px to ensure the full image was being displayed. What do I do about the extra image behind the image title? It's not even full-size? Regards, Tim -Original Message- From: Usamah M. Ali [mailto:[EMAIL PROTECTED] Sent: Thursday, February 21, 2008 1:22 PM To: Big Moxy Cc: Cory Shubert; CSS Discussion Subject: Re: [css-d] Markup for image URL in CSS rule On Fri, Feb 22, 2008 at 12:06 AM, Big Moxy [EMAIL PROTECTED] wrote: Great catch Cory! I don't think background image is the right solution though. Look at it now. www.zanalysts.net Tim I'm very sorry, but the background positioning should be left center NOT center center. When you do this, the image is perfectly put on the left and the link next to it, but you would see duplicated image because you're setting the anchor to inherit the background properties of its parent, which is the div contacting the background image. I altered these in Firebugand it looks just perfect. Usamah __ 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] Markup for image URL in CSS rule
On Fri, Feb 22, 2008 at 12:34 AM, Big Moxy [EMAIL PROTECTED] wrote: Thank you for the correction, Usamah! I also added height:37px to ensure the full image was being displayed. What do I do about the extra image behind the image title? It's not even full-size? Regards, Tim You have this in the CSS: a { color: #3F2C57; background: inherit; text-decoration: none; } a:hover { color: #808080; background: inherit; } Remove the two background: inherit instances. Usamah __ 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] Float list items
What difference does it make? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun Sent: Thursday, February 21, 2008 1:35 PM To: Usamah M. Ali Cc: Brian Jones; CSS Discuss Subject: Re: [css-d] Float list items Usamah M. Ali wrote: My normal approach would be using a table. ;~) For tabular data - yes, but not if it was just a visual effect I were after. Georg -- __ 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] Markup for image URL in CSS rule
Once you grasped the basic concept of using background images, then it's a matter of trial error until you get the perfect look you're after. Try changing the background position to left top or left bottom or applying padding the a links in the CSS or a combination of all these and others. Good luck, Usamah On Fri, Feb 22, 2008 at 12:54 AM, Big Moxy [EMAIL PROTECTED] wrote: Great! Thank you! Is it possible to get the text positioned so that it aligns with the bottom of the image? __ 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] Float list items
Rick Faircloth wrote: What difference does it make? The difference is (already made) at the most basic level: what it is, and what it can be made to look as when we add a bit of styling. - An HTML table will always be a table and nothing but a table, no matter how it's styled. - Some text in a list will always be some text in a list and can not be anything but some text in a list, no matter how it's styled. For instance, this... http://www.gunlaug.no/tos/moa_11g.html ...is not a table, regardless of its appearance in CSS capable browsers and a few others. 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/
Re: [css-d] Float list items
Your example below is impressive, Georg, for sure. But just look at the CSS hoops you had to jump through just to get what looks like a simple table. Why go to so much trouble avoid using table ? Just because you can or is there a more compelling reason? I'm relatively new to the CSS scene, so these are sincere questions. Rick /* almost equal height in IE7/win - standard compliant mode */ htmlbody .row div {min-height: expression(parseFloat(this.parentNode.offsetHeight)-33);} /* almost equal height in IE6/win - mode independency */ * html .row div {height: expression(eval(document.compatMode document.compatMode=='CSS1Compat') ? (parseFloat(this.parentNode.offsetHeight)-33) :(parseFloat(this.parentNode.offsetHeight)-1));} /* almost equal width in IE/win - mode independency */ .row .three {width: expression(eval(document.compatMode document.compatMode=='CSS1Compat') ? 154 :158);} /* border-width compensation - mode independency */ .row .one {margin-left: expression(eval(document.compatMode document.compatMode=='CSS1Compat') ? -1 :0);} /* vertical centering in IE/win */ html body div.vam p { margin-top: expression(((this.parentElement.offsetHeight/2) -(parseInt(this.offsetHeight)/2) -2) 0 ? 0 : (this.parentElement.offsetHeight/2) -(parseInt(this.offsetHeight)/2) -2 +'px') ;} /* see: http://www.gunlaug.no/contents/wd_additions_20.html for more info on vertical centering */ } /* overriding IE-expressions used on screen, so they do not apply when document is printed */ @media print { html .row div {height: auto!important;} html .row div {min-height: 0!important;} .row .three {width: auto!important;} .row .one {margin-left: 0!important;} #three p {margin-top: 6px!important;} } -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun Sent: Thursday, February 21, 2008 5:53 PM To: 'CSS Discussion' Subject: Re: [css-d] Float list items Rick Faircloth wrote: What difference does it make? The difference is (already made) at the most basic level: what it is, and what it can be made to look as when we add a bit of styling. - An HTML table will always be a table and nothing but a table, no matter how it's styled. - Some text in a list will always be some text in a list and can not be anything but some text in a list, no matter how it's styled. For instance, this... http://www.gunlaug.no/tos/moa_11g.html ...is not a table, regardless of its appearance in CSS capable browsers and a few others. regards Georg -- __ 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] Auto scale images?
On Feb 22, 2008, at 12:55 AM, Jason Pruim wrote: Here's the issue, I have in the past been able to scale the size of the images when you scale the text of the website (Nice effect!) but today I noticed that if I remove a height attribute on the containing div, the pictures don't scale.. Is that expected? Here's what I'm talking about: Doesn't work: .header { top: 0em; width: 100%; margin-bottom: -4em; font-size: 150%; } Does work: .header { height: 1em; top: 0em; width: 100%; margin-bottom: -4em; font-size: 150%; } .floatleft {float: left; margin: 5px;} HTML: div class=header Pimg class=floatleft src=UltimateEarth.jpg height=50% width=auto My Company, My Town! MIBR Phone:BR Fax:BR Email:BR/P /div!-- End of header div -- Percentage heights compute to 'auto' when the height of the parent box is _not_ specified. http://www.w3.org/TR/CSS21/visudet.html#propdef-height also, I would be better to specify the height or width in your stylesheet instead of in in the html code. Philippe --- 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] Still Having Problem with Menu Line Break
Jeff Gates wrote: As to users being able to increase the size of fonts, is there anything we can really do about that, especially in a situation like this menu? Having the menu on one line is my goal. And if there are tips to make it happen in as many situations as possible, I want to know. But when does one say: I've done my best? (A rhetorical question, I'm sure we've all asked ourselves --any concrete solutions, let me know.) Jeff Concrete solution, sure. Make a screen capture of your entire page with the menu on one line. Save it as index.gif and upload it to your server in place of your index.html. Seriously, though, the real solution, as in most things in life, is far more difficult. It is a matter of attempting to comprehend and embrace the essence and nature of the Web. This, by comparison, makes understanding CSS look like child's play. Have a pleasant journey on your goal toward the real solution. Best, ~dL -- 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/
Re: [css-d] Float list items [medium]
Rick Faircloth wrote: Your example below is impressive, Georg, for sure. But just look at the CSS hoops you had to jump through just to get what looks like a simple table. Why go to so much trouble avoid using table ? Just because you can or is there a more compelling reason? I'm relatively new to the CSS scene, so these are sincere questions. Rick Hi, Rick. George's example is a quite complex one (from my point of view, anyway), so that, and the lack of standard support by IE (and some others?), is probably the reason why you see such code. Anyway, back to your question: Why not using a table? As George said before, that's simply because the data shown is not tabular data. For tabular data we will understand that which has no sense if not seen in such a way (tabulated), e.g. a calendar. Now, aside from this, tables are actually complex elements, and as such, they have been problematic or expensive to deal with by browsers and other softwares (like screen-readers). There are cases, though, where the desired layout calls for the help of a table, and although basically everyone here would ask you not to use it (or simply to use another layout) it could be your best or even only choice. If I recall correctly, George had to make use of JavaScript to make IE's behave as desired. But I went beyond the topic, the point here (and what semantic markup is about) is to use the actual HTML elements that are supposed to enclose your data, like using address for addresses (of course), kbd for keyboard sample, code for code (duh!), samp for sample output, def for definitions, abbr for abbreviations, p for paragraphs, dl+dt+dl for definition lists (such as glossaries), etc. And not using blockquote just because you want to indent the code, or using pbr/p to add some spacing. I hope this helped, and sorry if I bored you along the way. Rafael. __ 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] Float list items
Rick Faircloth wrote: Your example below is impressive, Georg, for sure. But just look at the CSS hoops you had to jump through just to get what looks like a simple table. Why go to so much trouble avoid using table ? Just because you can or is there a more compelling reason? I'm relatively new to the CSS scene, so these are sincere questions. In addition to the reasons I've given in the relevant article... http://www.gunlaug.no/contents/wd_additions_22.html ...it's because... 1: that type of content doesn't fit the description tabular data, I just wanted it to appear in a certain way. Its appearance can be changed and restyled (for different media for instance) without touching the actual document, which is impossible if a table had been used. 2: one day a version of that MS-excuse for a browser may support the relevant CSS, and not be in need of proprietary MS-garbage like IE-expressions for simulating standard CSS. Maybe IE8 (with an opt-in)... 3: by always pushing and testing what can and can not be done with CSS today to the limits across browser-land in test-cases like that, I learn what choices I have and how to make things work whenever I need to for real-world cases. Such knowledge sure comes handy at times :-) 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/
Re: [css-d] Float list items [medium]
Not boring at all! Thanks for the explanation, Rafael! :o) Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rafael Sent: Thursday, February 21, 2008 10:32 PM To: Rick Faircloth Cc: 'CSS Discussion' Subject: Re: [css-d] Float list items [medium] Rick Faircloth wrote: Your example below is impressive, Georg, for sure. But just look at the CSS hoops you had to jump through just to get what looks like a simple table. Why go to so much trouble avoid using table ? Just because you can or is there a more compelling reason? I'm relatively new to the CSS scene, so these are sincere questions. Rick Hi, Rick. George's example is a quite complex one (from my point of view, anyway), so that, and the lack of standard support by IE (and some others?), is probably the reason why you see such code. Anyway, back to your question: Why not using a table? As George said before, that's simply because the data shown is not tabular data. For tabular data we will understand that which has no sense if not seen in such a way (tabulated), e.g. a calendar. Now, aside from this, tables are actually complex elements, and as such, they have been problematic or expensive to deal with by browsers and other softwares (like screen-readers). There are cases, though, where the desired layout calls for the help of a table, and although basically everyone here would ask you not to use it (or simply to use another layout) it could be your best or even only choice. If I recall correctly, George had to make use of JavaScript to make IE's behave as desired. But I went beyond the topic, the point here (and what semantic markup is about) is to use the actual HTML elements that are supposed to enclose your data, like using address for addresses (of course), kbd for keyboard sample, code for code (duh!), samp for sample output, def for definitions, abbr for abbreviations, p for paragraphs, dl+dt+dl for definition lists (such as glossaries), etc. And not using blockquote just because you want to indent the code, or using pbr/p to add some spacing. I hope this helped, and sorry if I bored you along the way. Rafael. __ 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] Float list items
Thanks for the explanation, Georg! :o) Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun Sent: Thursday, February 21, 2008 10:34 PM To: 'CSS Discussion' Subject: Re: [css-d] Float list items Rick Faircloth wrote: Your example below is impressive, Georg, for sure. But just look at the CSS hoops you had to jump through just to get what looks like a simple table. Why go to so much trouble avoid using table ? Just because you can or is there a more compelling reason? I'm relatively new to the CSS scene, so these are sincere questions. In addition to the reasons I've given in the relevant article... http://www.gunlaug.no/contents/wd_additions_22.html ...it's because... 1: that type of content doesn't fit the description tabular data, I just wanted it to appear in a certain way. Its appearance can be changed and restyled (for different media for instance) without touching the actual document, which is impossible if a table had been used. 2: one day a version of that MS-excuse for a browser may support the relevant CSS, and not be in need of proprietary MS-garbage like IE-expressions for simulating standard CSS. Maybe IE8 (with an opt-in)... 3: by always pushing and testing what can and can not be done with CSS today to the limits across browser-land in test-cases like that, I learn what choices I have and how to make things work whenever I need to for real-world cases. Such knowledge sure comes handy at times :-) 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] Float list items [medium]
Hi, Peter, and thanks for the reply! :o) Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Peter Hyde-Smith Sent: Thursday, February 21, 2008 10:55 PM To: 'CSS Discussion' Subject: Re: [css-d] Float list items [medium] - Original Message - From: Rafael [EMAIL PROTECTED] To: Rick Faircloth [EMAIL PROTECTED] Cc: 'CSS Discussion' css-d@lists.css-discuss.org Sent: Thursday, February 21, 2008 9:32 PM Subject: Re: [css-d] Float list items [medium] Rick Faircloth wrote: Your example below is impressive, Georg, for sure. But just look at the CSS hoops you had to jump through just to get what looks like a simple table. Why go to so much trouble avoid using table ? Just because you can or is there a more compelling reason? I'm relatively new to the CSS scene, so these are sincere questions. Rick Hi, Rick. George's example is a quite complex one (from my point of view, anyway), so that, and the lack of standard support by IE (and some others?), is probably the reason why you see such code. Anyway, back to your question: Why not using a table? As George said before, that's simply because the data shown is not tabular data. For tabular data we will understand that which has no sense if not seen in such a way (tabulated), e.g. a calendar. Now, aside from this, tables are actually complex elements, and as such, they have been problematic or expensive to deal with by browsers and other softwares (like screen-readers). There are cases, though, where the desired layout calls for the help of a table, and although basically everyone here would ask you not to use it (or simply to use another layout) it could be your best or even only choice. If I recall correctly, George had to make use of JavaScript to make IE's behave as desired. But I went beyond the topic, the point here (and what semantic markup is about) is to use the actual HTML elements that are supposed to enclose your data, like using address for addresses (of course), kbd for keyboard sample, code for code (duh!), samp for sample output, def for definitions, abbr for abbreviations, p for paragraphs, dl+dt+dl for definition lists (such as glossaries), etc. And not using blockquote just because you want to indent the code, or using pbr/p to add some spacing. I hope this helped, and sorry if I bored you along the way. Rafael. __ 02/21/2008 Hello Rick: As a follow on to Rafal, it is a case of using the right tool for the right job. HTML for structural markup, CSS for layout and style. The business end of the tools aren't broken, it's the handles (the browsers) that tend to have ergonomic problems. Peter www.fatpawdesign.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] Float list items [medium]
- Original Message - From: Rafael [EMAIL PROTECTED] To: Rick Faircloth [EMAIL PROTECTED] Cc: 'CSS Discussion' css-d@lists.css-discuss.org Sent: Thursday, February 21, 2008 9:32 PM Subject: Re: [css-d] Float list items [medium] Rick Faircloth wrote: Your example below is impressive, Georg, for sure. But just look at the CSS hoops you had to jump through just to get what looks like a simple table. Why go to so much trouble avoid using table ? Just because you can or is there a more compelling reason? I'm relatively new to the CSS scene, so these are sincere questions. Rick Hi, Rick. George's example is a quite complex one (from my point of view, anyway), so that, and the lack of standard support by IE (and some others?), is probably the reason why you see such code. Anyway, back to your question: Why not using a table? As George said before, that's simply because the data shown is not tabular data. For tabular data we will understand that which has no sense if not seen in such a way (tabulated), e.g. a calendar. Now, aside from this, tables are actually complex elements, and as such, they have been problematic or expensive to deal with by browsers and other softwares (like screen-readers). There are cases, though, where the desired layout calls for the help of a table, and although basically everyone here would ask you not to use it (or simply to use another layout) it could be your best or even only choice. If I recall correctly, George had to make use of JavaScript to make IE's behave as desired. But I went beyond the topic, the point here (and what semantic markup is about) is to use the actual HTML elements that are supposed to enclose your data, like using address for addresses (of course), kbd for keyboard sample, code for code (duh!), samp for sample output, def for definitions, abbr for abbreviations, p for paragraphs, dl+dt+dl for definition lists (such as glossaries), etc. And not using blockquote just because you want to indent the code, or using pbr/p to add some spacing. I hope this helped, and sorry if I bored you along the way. Rafael. __ 02/21/2008 Hello Rick: As a follow on to Rafal, it is a case of using the right tool for the right job. HTML for structural markup, CSS for layout and style. The business end of the tools aren't broken, it's the handles (the browsers) that tend to have ergonomic problems. Peter www.fatpawdesign.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] Float list items
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of Rick Faircloth Sent: Thursday, February 21, 2008 5:47 PM To: 'CSS Discussion' Subject: Re: [css-d] Float list items Your example below is impressive, Georg, for sure. But just look at the CSS hoops you had to jump through just to get what looks like a simple table. Why go to so much trouble avoid using table ? Just because you can or is there a more compelling reason? I'm relatively new to the CSS scene, so these are sincere questions. It is about semantic markup, we should use HTML elements for the information they convey, not for how they display. Another option here could be to use a DL (Definition List), as it is a list of item/price pairs. -- Regards, Thierry | http://www.TJKDesign.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/