Re: [css-d] wrapping a list around an image
On 15 Dec 2005, at 1:56 pm, Roger Roelofs wrote: Ah, I went only halfway there when I redefined the li element. I needed to zero out ul as well. But this still doesn't work in IE6/Win. Looks perfect in Firefox1.0x/Win. Doesn't work in Safari/ OSX. I can't test in ie/win (I'm on a mac). I can tell what is happening in safari 1.31, but I'm not sure how to fix it. If you add a light background color to the li you will see how gecko and khtml differ. In firefox/gecko the li element is affected by the float and thus moves over to accommodate it and the bullet is drawn relative to the li. In safari/khtml the li flows under the float just like the ul does and there is sort of an invisible container that is affected by the floated image and the bullet is drawn relative to this anonymous block. This works as expected in various browsers. style in the head. Essentially make the li become a new formatting context, then the whole thing moves. I use {display:table} for modern browsers, 'hasLayout' for old IE. IE Mac will need {display:inline-block}. Of course, if you want the list to wrap under the image, then another solution is required. http://dev.l-c-n.com/_temp/list-image.php Philippe --- Philippe Wittenbergh http://emps.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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] wrapping a list around an image
Hi Ari, I played around with the code, and was somewhat shocked to find this solution: ul { display: inline; } Aren't lists always displayed inline? No matter, it fixes your IE6/Win problems. I haven't tested on a Mac though, but I would image/hope it would have no effect. Cheers, Jesse Skinner www.thefutureoftheweb.com Ah, I went only halfway there when I redefined the li element. I needed to zero out ul as well. But this still doesn't work in IE6/Win. Looks perfect in Firefox1.0x/Win. Doesn't work in Safari/OSX. Something is still missing. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] maybe I should just use tables, line break before float problem...
I've been ripping my hair out over this for two days straight now, please help, I need to eat soon. Maybe I'm using floats incorrectly, I'm not sure. I'm laying out this site with a friend, it's my first collaborative project, and it's still in the early stages, I apologize for the messy css, my problem is here: http://www.mentallyregarded.com/discussion.php Be careful, there's some random (albeit harmless) profanity in there. The floats I'm floating the buttons to the right, but IE and Firefox want to throw in a line break before them each time, is this behavior correct? Opera displays it without the line break. I also tried floating the last post information (.subtitle) and had the same preblem, it doesn't seem right, I've tried a million different ways to coax firefox into displaying this correctly, to no avail. Am I wrong? Can I not use floats this way? Thanks for the help ec __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox slipping? Float issues? Margin?
I having trouble getting this site: http://www.writingworkbook.com - to behave in firefox (PC). The top part of the screen sorts of falls open. I'm using negative margins to move the nav up the screen - is that the problem? Fine in NS and IE. -- Tanya -- Tanya Renne, Director, ORCHID SUITES, Inc. Online tools to engage your constituency, build capacity, and fundraise. For progressive political organizations, candidates, labor and nonprofits. http://www.orchidsuites.net ~ [EMAIL PROTECTED] Washington, DC ~ (888) 545-9092 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weirdest IE bug I've ever seen
Hi folks, Is this a known bug? I've got a colleague who has a series of DIVs as follows: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; div class=main div class=aa aa /div!--aa close-- div class=bb bb /div!--bb close-- div class=ff ff /div!--ff close-- div class=wrap div class=cc cc /div!--cc close-- div class=dd dd /div!--dd close-- div class=ee pThis is an entire sentence, captain. Please have a safe flight./p /div!--ee close-- /div!--wrap end-- /div!--main container-- /body /html And this CSS: * { margin:0; padding: 0px; } body { margin: auto; } .aa { width: 700px; height: 80px; background-color: red; float: left; } .bb { width: 80px; height: 720px; background-color: blue; float: right; } .cc { width: 50%; height: 100%; background-color: green; float: right; } .dd { width: 50%; height: 50%; background-color: yellow; float: left; } .ee { width: 50%; height: 50%; background-color: purple; float: left; } .ff { width: 80px; height: 720px; background-color: orange; float: left; } .gg { width: 700px; height: 80px; background-color: grey; } .main { width: 780px; height: 800px; background-color: pink; text-align: center; margin: auto; } .wrap { width: 620px; height: 640px; float:right } Looking in IE6, it replicates the last two characters of the sentence in DIV class ee. Any ideas? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weirdest IE bug I've ever seen
Spike Spencer wrote: Is this a known bug? I've got a colleague who has a series of DIVs as follows: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; div class=main div class=aa aa /div!--aa close-- div class=bb bb /div!--bb close-- [...] /div!--wrap end-- /div!--main container-- /body /html And this CSS: [...] .aa { width: 700px; height: 80px; background-color: red; float: left; } .bb { width: 80px; height: 720px; background-color: blue; float: right; } [...] Looking in IE6, it replicates the last two characters of the sentence in DIV class ee. Any ideas? Yes. Remove the comments (or move them). This is what is causing the duplicate chars. -- Choan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weirdest IE bug I've ever seen
Hi folks, Is this a known bug? I've got a colleague who has a series of DIVs as follows: snip This is the IE duplicate characters bug, described in detail at: http://www.positioniseverything.net/explorer/dup-characters.html HTH, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Preloading Background Images
On Tue, Dec 13, 2005 at 09:38:05AM -0600, CJ Larson wrote: Is it possible to preload the images in anyway, via CSS or Javascript? I'm not that keen on combining the 6 images into 1 large one and changing the background position, as that would mean the homepage would take too long to appear. [cj] I think my brain is dead today, so forgive the newbie question: How would preloading 6 different images take less time than loading 1 combined image? It wouldn't, but it will affect the overall experience. I'll try and explain: 4 Smaller Images: 5 Seconds each = 20 seconds total 1 Large Combined Image: 20 Seconds Now, if I load the combined image it'll take 20 seconds before the image is properly visible. If I load one of the smaller images, it'll only take 5, so the whol page is loaded much more quickly. Once that's done, I want to cpntinue load the rest of the images in the background. I hope that explains it. If not, just let me know. :) - Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Preloading Background Images
On Tue, Dec 13, 2005 at 11:54:43AM -0500, Christian Montoya wrote: On 12/13/05, Kevin Cannon [EMAIL PROTECTED] wrote: I'm not that keen on combining the 6 images into 1 large one and changing the background position, as that would mean the homepage would take too long to appear. If you combined the 6 images into 1, that one image would load faster. Well, It won't load faster than loading showing 1 image first, and then loading the rest afterwards. (see my other reply for a more detailed explanation) You can preload images, just use your imagination, load them off screen with position:absolute; and give them a size of nothing. But I really discourage that. Yep, that's one option available. Why would you discourage that, yet promote merging images into one large one. The extra markup you'd have to add? Thanks, - Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] wrapping a list around an image
I played around with the code, and was somewhat shocked to find this solution: ul { display: inline; } Aren't lists always displayed inline? No matter, it fixes your IE6/Win problems. I haven't tested on a Mac though, but I would image/hope it would have no effect. No, lists (ol, ul and dl) are defined as block level elements. Check the HTML 4 DTD: http://www.w3.org/TR/html4/sgml/dtd.html This does solve the IE problem, but doesn't solve the Safari issues. It =is= true that we have an element in the left navbar that exceeds the width defined for it. I'm going to follow up the earlier suggestion to rethink the coding for those elements and see if that resolves the issue. In a worst case, we're changing the sidebar element in about two weeks and can pay attention to width issues this time around. ari __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Sticky Menus
Hi Everyone, This is my first post here, please forgive my ignorance :-) I am fresh trying to start creating clean standard sites and I always have trouble with sticky menus. I mean the down state that sticks on the next page clicked. What is the best practice? What is your preference? Any resource or code to share? Thanks a lot, Moca MocaLoca Digital Media Artist --- http://www.mocaloca.com www.mocaloca.com 305.926.7775 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] list alignment auto fit
I'm working on my new web using FireFox as a tool to design my CSS. Currently IE is broken (steps) and will be worked on later. For now, I need to figure out a way to automatically fit the menu list into the remaining width (on right side). The content in that list will change and would like for it to fit every time when content is changed. I tried % to no avail. When I set border-bottom to same width (.6em) for both #header p a and ul#menulist li a and when increased or decreased the text in firefox, they didn't match up. Any help would be appreciated. Here is the link with embedded CSS: http://www.geocities.com/theksskoder/css_question.htm Thanks, Scott -- Power to people, Linux is here. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] links not clickable in Safari
David Hucklesby wrote: Erik Visser wrote: it is fixed Would you like to share with us how you fixed it? this: http://archivist.incutio.com/viewlist/css-discuss/59082 brought me to this: http://www.456bereastreet.com/lab/float_negative_margins/ that did it in my case Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css speed
kenny heaton wrote: I've heard talk about how much faster css is at rendering pages than table layouts, but I've never seen the proof (actual statistics). I was wondering if anyone knew of a study on this. I don't think a general study is possible, since the rendering time depends largely on exactly what it is you are laying out and what browser you are using to do so. A table can, for example, render faster than a complex series of CSS floats. On the other hand, CSS which relies on relative positioning and only a few layers (absolute positioning or floats) is generally considerably faster than a table for the same job. CSS generally (but not always) ends up lighter weight in total than a table-based layout, and it has the advantage that the CSS portion can be cached. This can lead to significant savings under most real-world conditions. Try it yourself to see. However, look carefully at any test that makes a general claim that one is always faster than the other. It just isn't so. My second questions is related to that, dose anyone know of any resources on writing more optimised css. For example I was just reading on this list in the talk comparing class to id and there was mention there was performance difference between element.class {} and .class {} I'm the one who brought up this performance difference, and I was careful to qualify that I only knew the facts for one browser (in this case, Mozilla). A general attempt to optimize CSS may not even be possible. Each browser vendor is free to optimize page display in any way they can think of. Because of the specific way that Mozilla has optimized selector matching, a class or ID without the element is *slightly* faster to match than one that includes the element. That may or may not be true with some other browser (and it might be difficult to even discover in anything other than an open-source implementation, unless you are willing to do brute-force technical testing on thousands of combinations). I think it is likely that optimizing CSS is probably not worth your time. In addition to significant browser and platform differences, network latency, page weight, and other overhead will most likely completely overwhelm any effects from the CSS, which has been written explicitly with progressive rendering (i.e. speed) in mind. There are a few CSS3 properties that may have more significant effects, but for now, if browsers support it, it is probably fast enough not to make much difference. Mind you, this is anecdotal and somewhat speculative. I know of no formal testing on the subject that I would consider reliable. HTH, -Adam Kuehn __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Clickable image
I've redesigned this formerly-tabled page in all-css--something the tech guys at the company's forward-looking CMS tell me they refuse to support(!!) http://www.childrensaidsociety.org/newheights/ If you look at the new heights logo on the upper left of the layout,it's a background image, but I'd like to make it clickable. Problem is, I haven't found a way to put that image there without throwing off the rest of the layout. Any suggestions? If that is to be a link and crucial content - why is it a background image? I had issues in the past where we needed to use background images in CSS and a link above them. The solution was to use a real text link, and position it absolute above the image in the layout. As your logo is not somewhere in the content but at a fixed position, this is not much of a problem to do: a id=nh href=bla.htmlNew Heights Start Page/a #nh{ position:absolute; top:20px; left:20px; width:100px; height:70px; overflow:hidden; text-indent:-200px; } or any other image replacement technique. It is a hack, but makes both parties happy. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Clickable image
Jim Ryan schrieb: I've redesigned this formerly-tabled page in all-css--something the tech guys at the company's forward-looking CMS tell me they refuse to support(!!) http://www.childrensaidsociety.org/newheights/ If you look at the new heights logo on the upper left of the layout,it's a background image, but I'd like to make it clickable. Problem is, I haven't found a way to put that image there without throwing off the rest of the layout. Any suggestions? One possible solution might be to take the logo completely out of the sourrounding layout. Just position e.g. a div containing the logo (as a normal img-tag) absolute and place it on the position where it is supposed to go (in your case top:168px; and left:46px; don't forget a proper width height 191x87px), then put a a href=.. to the image. To ensure that it is not hidden by another element, add a z-index attribute. As your layout is not liquid, this solution will work. Summary is that an element which can be positioned by fixed values need not neccesarily be included in the layout like one might expect from a table-cell. Tobias __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] [REPOST] IE6 - top margin too large
Hello, I'm not sure if I didn't get any replies previously because the solution is really obvious to everyone else... but it's certainly not obvious to me, and I am being badgered to hand over this template! I've Googled and searched the Wiki and am no closer to understanding what the problem is. Can anyone help me? Page: http://www.beale-family.net/beta/monitoring-simple.htm CSS: http://www.beale-family.net/beta/css/layout-stripped.css In IE6, the top margin of #centrecontent appears to be measured from the bottom of the navigation div, which means there is a large white gap between the bottom of the navigation and the breadcrumbs. In Firefox/Opera/Safari, the margin is apparently being measured from the top of the #page div. I thought this might be the collapsing margins issue, but applying borders and padding to everything I could think of seemed to make no difference. What am I missing here?? (Am aware of the messy left nav in IE6 also, but haven't yet had a go at fixing that one myself so won't trouble the rest of you with it). Many thanks, Rachael __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Flash or No Flash switch?
25kB is a small smaple to test it responsibly. Some latency may distort the measurment. The image can also get cached. In the article, I suggest avoiding caching by appending a random URL parameter to the image (not so nice but it works). As for the size, it will have to depend on the situation. In Duke's case, he wants to decide whether to show a flash banner. Since the extra download is purely decoration, there would be no issue if some high-speed users didn't get the flash. It's still useful to have a rough estimate. A very large test image would defeat the purpose -- if users had to download such an image to test their speed, they might as well download the flash in the first place. Jesse Skinner www.thefutureoftheweb.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] http://css-discuss.incutio.com/?page=FrontPage Hacked
:-( FrontPage FrontPage | RecentChanges | Preferences WIKIISGAY WIKIISGAY WIKIISGAY WIKIISGAY WIKIISGAY WIKIISGAY WIKIISGAY WIKIISGAY -- Jesus Christ is the reason for the season. Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://members.ij.net/mrmazda/auth/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] http://css-discuss.incutio.com/?page=FrontPage Hacked
Thats a shame :( On 12/15/05, Felix Miata [EMAIL PROTECTED] wrote: :-( FrontPage FrontPage | RecentChanges | Preferences WIKIISGAY WIKIISGAY WIKIISGAY WIKIISGAY WIKIISGAY WIKIISGAY WIKIISGAY WIKIISGAY -- Jesus Christ is the reason for the season. Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://members.ij.net/mrmazda/auth/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ 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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] http://css-discuss.incutio.com/?page=FrontPage Hacked
* Felix Miata wrote: :-( FrontPage FrontPage | RecentChanges | Preferences WIKIISGAY Well, it's a Wiki, you can fix it... I've restored the FrontPage. -- Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Preloading Background Images
On 12/15/05, Kevin Cannon [EMAIL PROTECTED] wrote: On Tue, Dec 13, 2005 at 11:54:43AM -0500, Christian Montoya wrote: You can preload images, just use your imagination, load them off screen with position:absolute; and give them a size of nothing. But I really discourage that. Yep, that's one option available. Why would you discourage that, yet promote merging images into one large one. The extra markup you'd have to add? No, I just think users might get confused as to why the page is still loading when it's really just images offscreen. I guess I don't discourage it all that much, if you are really intent on having preloading images. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Flash or No Flash switch?
(not so nice but it works). Ah, haven't noticed, sorry. This is fine and it works, that's important. A very large test image would defeat the purpose Sure, that's the reason I wrote earlier that some valuable measuring wouldn't be nice for bandwith. -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] maybe I should just use tables, line break before float problem...
Eric, On Dec 15, 2005, at 4:35 AM, Eric Cash wrote: I've been ripping my hair out over this for two days straight now, please help, I need to eat soon. Maybe I'm using floats incorrectly, I'm not sure. I'm laying out this site with a friend, it's my first collaborative project, and it's still in the early stages, I apologize for the messy css, my problem is here: http://www.mentallyregarded.com/ discussion.php Be careful, there's some random (albeit harmless) profanity in there. The floats I'm floating the buttons to the right, but IE and Firefox want to throw in a line break before them each time, ... Source order matters for floats, and I think that's what is causing your problem. However, the reason you are pulling your hair out is because you are trying to cram two pages into one. Start simpler. In fact, if your user looks at the page with css turned off they will be _very_ confused. The kind of functionality you appear to be trying to build should be handled server-side or by multiple static pages, or even via javascript. It is much better to dynamically add/remove dom elements than to put them all in and try to style away the ones you don't want the user to see right now. You also might want to re-think the html from a semantic angle. Think about the kind of info you are displaying and what html element makes the most sense to display it. Is it a list? Is it tabular data? Is it an outline? In other words, pick the markup elements based on what they mean without worrying about how you want them to look. After you have clean markup, and the html validates, the css will make tons more sense. hth Roger, Roger Roelofs [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Flash or No Flash switch?
Hi, duke here Rather than a purely decorative image, couln't the standard gif to be used instead of the Flash, be used and downloaded? Then if the Flash is determined not to be used, the alternate would already be there? duke -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Jesse Skinner Sent: Thursday, December 15, 2005 8:28 AM To: css discuss Subject: Re: [css-d] Flash or No Flash switch? 25kB is a small smaple to test it responsibly. Some latency may distort the measurment. The image can also get cached. In the article, I suggest avoiding caching by appending a random URL parameter to the image (not so nice but it works). As for the size, it will have to depend on the situation. In Duke's case, he wants to decide whether to show a flash banner. Since the extra download is purely decoration, there would be no issue if some high-speed users didn't get the flash. It's still useful to have a rough estimate. A very large test image would defeat the purpose -- if users had to download such an image to test their speed, they might as well download the flash in the first place. Jesse Skinner www.thefutureoftheweb.com -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.371 / Virus Database: 267.13.13/200 - Release Date: 12/14/2005 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Clickable image
Thanks to everyone who replied. You were most helpful. The page is up and clickable and the image replacement technique is filed away for future reference. thanks again, Jim -Original Message- From: Christian Heilmann [mailto:[EMAIL PROTECTED] Sent: Thursday, December 15, 2005 10:46 AM To: Jim Ryan Cc: CSS Email List Subject: Re: [css-d] Clickable image I've redesigned this formerly-tabled page in all-css--something the tech guys at the company's forward-looking CMS tell me they refuse to support(!!) http://www.childrensaidsociety.org/newheights/ If you look at the new heights logo on the upper left of the layout,it's a background image, but I'd like to make it clickable. Problem is, I haven't found a way to put that image there without throwing off the rest of the layout. Any suggestions? If that is to be a link and crucial content - why is it a background image? I had issues in the past where we needed to use background images in CSS and a link above them. The solution was to use a real text link, and position it absolute above the image in the layout. As your logo is not somewhere in the content but at a fixed position, this is not much of a problem to do: a id=nh href=bla.htmlNew Heights Start Page/a #nh{ position:absolute; top:20px; left:20px; width:100px; height:70px; overflow:hidden; text-indent:-200px; } or any other image replacement technique. It is a hack, but makes both parties happy. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Clickable image
You can set the image to be the background of the a tag. With your code, that would look something like this: #nh{ display:block; position:absolute; top:150px; left:20px; width:191px; height:87px; overflow:hidden; text-indent:-200px; background: url(/media/image/nh_logo2005.gif); } Cheers, Jesse Skinner www.thefutureoftheweb.com If you look at the new heights logo on the upper left of the layout,it's a background image, but I'd like to make it clickable. Problem is, I haven't found a way to put that image there without throwing off the rest of the layout. Any suggestions? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] [ADMIN - OFFTOPIC] Re: Flash or No Flash switch?
OK, that's enough on this never on topic thread. Next person to mention flash is toast. Let's stick to CSS. A grumpy css-d moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page not stretching across in Firefox
Shawn Ferguson wrote: Could you help me figure out why this is happening? The page looks fine in IE (of course) but when I view it in Firefox, it doesn't stretch across the page. Take a look and if you can help, please do: http://www.jardsenterprises.com/isom Seems to be filling the width of the browser viewport here in FF 1.5 on Win. Did you fix it? If so, would you mind sharing with the list how you did so so that others many benefit? Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Faux Columns
Stephen Kortz wrote: I am building Faux Columns. In Fireworks I made a document that is 10 pixels tall and 2000 pixels wide to start the process. My question is: how do I transfer my Fireworks document to my CSS file that I am working with? This idea has me baffled. I'm sure that there is a simple answer that I am just overlooking. 1. Export your Fireworks file in whatever file type is appropriate (JPG, GIF, or PNG). 2. Assign this graphic as a background in your CSS: #container { background: #fff url(fauxcolumns.gif) repeat-y; Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] anchor doesn't receive focus in firefox 1.5
Hi list, This following can be demonstrated with (currently for _fx_only_) page http://free.pages.at/staudinger/Regest/Indices/Index.html The anchor E on the left side a id=Index_E href=Index_E.htmlE/a will receive focus in firefox 1.0.4+ when anchor E from the top line a href=#Index_EE/a is clicked - but not in firefox 1.5. Is the change intentional? Is there anything I can do about? Regards, Manfred __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [REPOST] IE6 - top margin too large
Rachael Beale wrote: Page: http://www.beale-family.net/beta/monitoring-simple.htm CSS: http://www.beale-family.net/beta/css/layout-stripped.css In IE6, the top margin of #centrecontent appears to be measured from the bottom of the navigation div, which means there is a large white gap between the bottom of the navigation and the breadcrumbs. In Firefox/Opera/Safari, the margin is apparently being measured from the top of the #page div. I thought this might be the collapsing margins issue, but applying borders and padding to everything I could think of seemed to make no difference. What am I missing here?? It seems like a margin collapsing issue to me too. Unfortunately, I'm about to run out the door, so I can't dig into right now. It seems like you should be able to remove the top margin on #centrecontent, give it 1px of top padding, then give .trail the appropriate amount of top margin to push it down from the navigation bar. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Right Img Header problem
After a long hiatus from web design here I am again depending on this great list of people, and swamped with too many things at once. I've tried for hours to diminishing returns for sleep, PLEase help! I would really appreciate any help I can get to get this design working in IE doze. It works in Opera, NS, IE, Safari on Mac, and NS doze, but not IE. The url is videointegrations.com/serenity Looking at it in the trouble free browsers should give a clue as to how it should look. Essentially the background HeaderImg div is pushing things right and down. -- Much Regards, Scott __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Flexible Width Layout -- Simple Page Problems
Hello all and thanks in advance. I'm looking at this page with Firefox browser (for Windows): http://www.gurdonbrewster.com/209index.html Already I have two problems: 1. The left side of the page has a white space gap down the left margin: How can I get the page to fill up the browser, just like the right side fills up the browser? 2. The page is slightly too large horizontally, and a horizontal scroll bar is needed to scroll right just a bit. How can I eliminate the need for this horizonal scroll bar? Thanks again! ... RW -- Best wishes, Robin Whitman, Student Intern Youthtopia.Org | Towards A Sustainable Lifestyle http://www.Youthtopia.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] table and min-width
On 16 Dec 2005, at 8:21 am, Justin Makeig wrote: I can't seem to get the min-width property to have any effect on an XHTML table element. width does what I would expect it to do, but min and max-width seem to do nothing in Firefox 1.5 and Safari 2.0.2. (Of course, they do nothing in IE Win, but that's another thread.) My problem is that I have some really wide tables with potentially dozens of columns. I've got a wrapper div that is specified with overflow: auto. If the table is wider than the wrapper div I'd like the div to scroll horizontally. This works by setting the table width to auto. However, if the table is skinnier than the div I'd like the table to fill up the div horizontally so any vertical scroll bars will be positioned right next to the table. I would think this would be a job for min-width. However, it doesn't seem to have an effect on the table. [] Am I off base? Any help would be much appreciated. The min-width property doesn't really apply to table elements http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width Ok, it is a bit more complicated, due to the complexities of the css table model. Have a look at the figure under 17.4: http://www.w3.org/TR/CSS21/tables.html#q5 you'll see a grey dotted line around the table. That is the anonymous box that holds the whole table (caption, table-rows, etc) together. Your min-width will apply to that anonymous box. But the table-rows (and the thead, tbody elements) will expand or shrink in width, depending on the content of the table-cell boxes. Unless ? Unless if you set the width of the table to be 100%. Because 'width' as applied to the table element is really a min-width. Picture this: you have a div that is 500px wide (width set), and you add a table in there with many columns. Give your table a background-colour and a width of 100%. If your table-cells contain each one character, chances are that the table will fit in the div. But add more content to the table-cells, and watch your table expand in width, overflowing the container. The same will happen if your table has a width set to 500px. Demo: http://dev.l-c-n.com/tables_4/table-width.php Philippe --- Philippe Wittenbergh http://emps.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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css speed
On 16 Dec 2005, at 12:06 am, Adam Kuehn wrote: My second questions is related to that, dose anyone know of any resources on writing more optimised css. For example I was just reading on this list in the talk comparing class to id and there was mention there was performance difference between element.class {} and .class {} I'm the one who brought up this performance difference, and I was careful to qualify that I only knew the facts for one browser (in this case, Mozilla). A general attempt to optimize CSS may not even be possible. Each browser vendor is free to optimize page display in any way they can think of. Because of the specific way that Mozilla has optimized selector matching, a class or ID without the element is *slightly* faster to match than one that includes the element. That may or may not be true with some other browser (and it might be difficult to even discover in anything other than an open-source implementation, unless you are willing to do brute-force technical testing on thousands of combinations). Some reading matter http://developer.mozilla.org/en/docs/Writing_Efficient_CSS http://weblogs.mozillazine.org/hyatt/archives/2005_05.html#007507 Both by David Hyatt, lead developer of Safari. Both argue that element.class and element#id are slightly slower than #id or .class. This of course does not take into account the various other environmental variables, as Adam points out. From a practical point of view, I'd argue for #id or .class rather than element#id or element.class, because the first notation is less specific, and hence more easy to override in case of necessity. Philippe --- Philippe Wittenbergh http://emps.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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [REPOST] IE6 - top margin too large
Rachael Beale wrote: I'm not sure if I didn't get any replies previously because the solution is really obvious to everyone else... but it's certainly not obvious to me, and I am being badgered to hand over this template! I've Googled and searched the Wiki and am no closer to understanding what the problem is. Can anyone help me? Page: http://www.beale-family.net/beta/monitoring-simple.htm It isn't obvious at all what's going on in there :-) Had to make several attempts before cracking it. It is a margin-collapse of sort. It can be seen clearly if borders are put on those elements, but as you have already found out; that doesn't solve it, and I didn't find any element to put the fix on either. Finally I added a clearing-element, and everything fell into place... /ul/div br style=clear: both; / div class=left_menu Then I added 'padding-top: 1px;' to #centrecontent, and it worked as expected because of the clearing-element. You can now adjust 'margin-top' on #centrecontent, and get the same result in all browsers. I'm still not sure if this is the best solution, but at least it's a stable one. 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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] can this behavior be beaten out of IE
Dear Listers: Is there any way to get IE6 to honor the css attribute 'min-width', or a way to script, hack or cheat some version of it? Context? I'm working on a layout that has three small content blocks that should sit next to each other. | block 1 single line | block 2 single line | block 3 single line | Each block is a single line. I don't want the contents of the blocks to wrap. And I don't want the blocks themselves to shift to stack one underneath the other when the browser window is narrow. In real browsers, I can set a minimum width on the outermost containing div that more or less solves all of the above. But what the heck do I do with IE? I can solve this problem with a table in minutes, but I haven't been able to solve it with floated divs in probably 6 hours of work. Thanks in advance for your assistance. Lori Brown __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can this behavior be beaten out of IE
hi Lori Is there any way to get IE6 to honor the css attribute 'min-width', or a way to script, hack or cheat some version of it? As it happens, I was reading* about a way of doing this yesterday. The trick was to use a javascript expression in the css, which IE apparently supports. e.g #container { min-width: 600px; width:expression(document.body.clientWidth 600? 600px: auto ); } I've not tried it in anger, so YMMV. Rob *http://www.webcredible.co.uk/user-friendly-resources/css/more-css-trick s.shtml, tip #3 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sticky Menus
MocaLoca wrote: This is my first post here, please forgive my ignorance :-) I am fresh trying to start creating clean standard sites and I always have trouble with sticky menus. I mean the down state that sticks on the next page clicked. What is the best practice? What is your preference? Any resource or code to share? Moca I am afraid that I do not know what you mean by 'sticky' menus, unless it has something to do with JavaScript. And I know even less about that than CSS. A great resource for CSS lists is http://css.maxdesign.com.au/. Be sure to check the accompanying browser support charts when you pick a menu. Regards, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sticky Menus
On 12/15/05, MocaLoca [EMAIL PROTECTED] wrote: I am fresh trying to start creating clean standard sites and I always have trouble with sticky menus. I mean the down state that sticks on the next page clicked. If you mean menus that have the link to the current page styled differently, that has to be done server side. You can style the appearance with CSS, but server side techniques to differentiate the current link from the others is not on topic for this list. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sticky Menus
Hi, Yes I realize is not the topic, I thought there was a css only way of doing with maybe some JavaScript that I was not aware of. I did get some great offline help about it. Thanks anyway :) MocaLoca Digital Media Artist --- www.mocaloca.com 305.926.7775 -Original Message- From: Christian Montoya [mailto:[EMAIL PROTECTED] Sent: Friday, December 16, 2005 2:31 PM To: MocaLoca Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Sticky Menus On 12/15/05, MocaLoca [EMAIL PROTECTED] wrote: I am fresh trying to start creating clean standard sites and I always have trouble with sticky menus. I mean the down state that sticks on the next page clicked. If you mean menus that have the link to the current page styled differently, that has to be done server side. You can style the appearance with CSS, but server side techniques to differentiate the current link from the others is not on topic for this list. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sticky Menus
On 16/12/05, Christian Montoya [EMAIL PROTECTED] wrote: On 12/15/05, MocaLoca [EMAIL PROTECTED] wrote: I am fresh trying to start creating clean standard sites and I always have trouble with sticky menus. I mean the down state that sticks on the next page clicked. If you mean menus that have the link to the current page styled differently, that has to be done server side. You can style the appearance with CSS, but server side techniques to differentiate the current link from the others is not on topic for this list. Hmm, I beg to differ. There is a nice way to handle this, using just CSS: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Compuserve 7.0
On 12/13/05, Ingo Chao [EMAIL PROTECTED] wrote: Josine Krant wrote: If Compuserve 7.0 is not IE6, what is it ? Google says it's a gecko engine. According to [1], the user agent string of Compuserve 7 is Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4.2) Gecko/20020502 CS 2000 7.0/7.0. That would explain it - there were some pre 1.0 builds of Gecko (including the one that Netscape 6.0 used) in which floated label elements caused form elements to vanish (actually, to position way offscreen). -- Richard Grevers, New Plymouth, New Zealand Hat 1: Development Engineer, Webfarm Ltd. Hat 2: 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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] content over flow
Hi there - more of a tinker type person with css, and had the following code: * { padding: 0px; margin: 0px; } html, body { height: 100%; width: 100%; } div#bg { border: medium solid #FF; height: 100%; width: 650px; } div#bgBody { height: 100%; width: 645px; border: medium solid #FF; } Now the HTML is nothing but: div id=bg div id=bgBody script language=javascript //simple for-loop to write out some text 20 times! for(i=0; i=20; i++) { document.write('pHere is some layer content!/p'); } /script /div I am just testing. At any-rate I am trying to get my layers to be 100% in height. Which they seem to be doing - however when my content extends that of the browser window, my content overflows past the borders I have defined for testing. I know this can be controlled with the overflow attribute - HOWEVER.. .I want my layers to expand with the content. What is the best way to accomplish this? Sorry for the noob question Dustin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] overflow bug
I've been Playing around with the overflow property trying to scroll my div content over a non-scrolling background image. Have it working in Netscape,Opera 8, Firefox 1.5, and safari, but in IE the content scrolls fine but image does as well. When I set background position to fixed it breaks it in Opera and Netscape. Any Ideas? Jamie Cantrell Creative Director Square 1 Creative ph: 703.738.9656 [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sticky Menus
Hmm, I beg to differ. There is a nice way to handle this, using just CSS: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ That's exactly the same as what I was saying. The identification of the current page is in the markup. It has to be scripted server-side or done by hand. Don't go stopping my heart with wild ideas like current-page-detection in CSS. You had me thinking my current world view was about to be turned upside down. Again - and please refer to the class vs. ID thread some days ago: http://archivist.incutio.com/viewlist/css-discuss/67500 http://archivist.incutio.com/viewlist/css-discuss/67513 This is a sexy idea and very much fun and all, but only using classes and CSS to highlight the current page is NOT accessible. Users without CSS need to know aswell what is the current page, which is why: - The current page should not be linked at all - I replace the current link with a strong - The parent page of the current page should have an extra HTML indicator that it is a parent page (adding a strong inside the link makes sense). Then you can also do the CSS highlighting, via li strong {} li a strong {} li li strong {} However, all of that has to happen server side. If you can use PHP and domxml, take a look at http://onlinetools.org/tools/easynav/ which does that for you. As to answering the question: No, neither CSS nor JavaScript can keep a state of a navigation without markup changes (in JavaScript you could use a cookie to store the state or send it via the URL but that is also not accessible as it does rely on either of them). CSS is great to stye structured content, and is neither a JavaScript nor a SSI replacement: http://www.wait-till-i.com/index.php?p=136 HTH chris -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/