Re: [css-d] PNG transparency in IE6 and below
IE6 won't work with tiling transparent png's. The solutions to using transparent png's with IE6 involve replacing the background image with a foreground image so alpha transparency filter can operate on it. So, I haven't been able to find anything that will work with IE6 and transparent png's as backgrounds. And since the workarounds to use transparent png's take the images out of the background, tiling doesn't work. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Geoffrey Hoffman Sent: Thursday, March 13, 2008 10:42 AM To: CSS Discussion Subject: [css-d] PNG transparency in IE6 and below Can someone point me to a solution for PNG transparency in IE 6 that works on tiling background images? (If such as solution exists...) I think that the pages I've scoured only work on img src=transparent.png/ and not on .myclass { background-image: url( transparent.png ) } http://www.scss.com.au/family/andrew/webdesign/pngbehavior/ http://homepage.ntlworld.com/bobosola/pngtestfixed.htm http://www.alistapart.com/articles/pngopacity/ TIA, Geoff __ 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] Oldest Browser Currently Testing for
As far as IE goes, I test for IE6 and IE7, nothing lower. My data shows no visitors ever coming to my sites with anything less than IE6. And if they do, well, it's just time for an upgrade. I'm not jumping through that many hoops to accommodate so few IE 5 users. And I make liberal use of conditional comments for IE. In the years to come, as standards and browser capabilities change, conditional stylesheets are much easier to change than hacks, which are no future-proof, either. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mark Story Sent: Wednesday, March 05, 2008 12:36 PM To: 'CSS' Subject: [css-d] Oldest Browser Currently Testing for It seems that my perception of in the wild browsers was a bit off. As I consider IE 5 for mac to be deceased, however it seems to be alive and kicking for some. So I just wanted to get an idea of what the oldest browser you are currently testing for is? And how are you targetting them? Hacks, conditional comments, other techniques? -Mark __ 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 those thoughts and links, Georg. I will check them out and run up on your philosophical perspectives. Rick -Original Message- From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] Sent: Saturday, February 23, 2008 10:28 AM To: Rick Faircloth Subject: Re: [css-d] Float list items Rick Faircloth wrote: On a practical note... ...which I prefer to respond to off list. I've been wanting to find a tutorial on constructing CSS based websites that demonstrates best-practice methodology. You'll only find loads of personal preferences - practices that works well for a person or a small group with more or less the same mindset. Best practice is still a mix of facts and fiction, where fiction is what some _think_ is best but haven't actually tested in depth. By that, I mean what is the best order to follow in constructing a site, start-to-finish? The best order is actually: any order, or disorder, that works for you, and results in something that works for as many as possible - preferably all but that's not always possible. I typically start with a design, then code the CSS and HTML to make the design happen. That seems to be how most designers do it. That's also usually how developers have to do it when presented with a visual design. However, I've been wondering lately, if I shouldn't code the HTML content, without any design applied, then start applying design. That's how many developers do it - more or less, when designing something from scratch. This would help focus my attention on the semantic aspects of the site, followed by the style of the site, which is also the order of importance... content first, then style second. Are there any tutorials that could walk me through such an approach? I prefer to learn-by-doing, rather than just read about the philosophy. Maybe http://www.htmldog.com/ will work. I've never really looked into it and it is a bit old, but some say it's a good place to start. I could do it on my own, but by working with a pre-coded and designed site, I can focus more on the methodology rather than the technical aspects. Pre-coded and designed sites becomes outdated in a short time, so using one as base means you'll be working with yesterday's methodology and solutions to design-problems. That's not always bad, as long as you're aware of the limited value some of the old stuff has. I can only offer philosophical views on the design-process... http://www.gunlaug.no/contents/wd_additions_11.html ...and a few tricks. I always design at html level, so my work will usually come through quite well at that level... http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.gunlaug.no%2Fcontents%2Fwd_addit ions_11.html I include all sides of web design and development in the term design, so visual design is just a small part of it all. HTML, CSS, Javascript etc. are tools - different painting-tools if you like, and I like to paint on all media that are available to me across the web... http://www.gunlaug.no/contents/wd_1_04.html http://www.gunlaug.no/contents/wd_1_04_01.html http://www.gunlaug.no/contents/wd_1_05.html This extended canvas is constantly changing, so it sometimes feels as if I am painting on water in the midst of a stream. The only constant I use is an old and well-tuned HTML Tidy... http://www.gunlaug.no/contents/wd_1_07.html ...but that option is of less value for web designers today since all recent versions of Tidy seem to have been made useless by default and almost impossible to make to work properly. Even the Tidy attached to the HTML validator is no good IMO, because it's infected with personal preferences. Sites like http://www.webaim.org/, http://accessites.org/site/ and http://www.accessifyforum.com/ can be very useful, but you'll have to develop a sense of what's useful and what isn't, as personal preferences, quick fixes and lack of will and testing will always have to be sorted - especially on the forum. Apart from that it's persistence and testing, testing and more testing, that is the key. If you aim at developing good strategies, then you will. It may just take a while until you reach a comfort level, and once that is reached you can't afford to slow down if you want to keep up. Web design/development is still in its infancy. 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
On a practical note... I've been wanting to find a tutorial on constructing CSS based websites that demonstrates best-practice methodology. By that, I mean what is the best order to follow in constructing a site, start-to-finish? I typically start with a design, then code the CSS and HTML to make the design happen. However, I've been wondering lately, if I shouldn't code the HTML content, without any design applied, then start applying design. This would help focus my attention on the semantic aspects of the site, followed by the style of the site, which is also the order of importance... content first, then style second. Are there any tutorials that could walk me through such an approach? I prefer to learn-by-doing, rather than just read about the philosophy. I could do it on my own, but by working with a pre-coded and designed site, I can focus more on the methodology rather than the technical aspects. Links, anyone? Thanks, Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Highpowered Sent: Friday, February 22, 2008 3:29 PM To: 'CSS Discussion' Subject: Re: [css-d] Float list items Thierry Koblentz wrote: It is about semantic markup, we should use HTML elements for the information they convey, not for how they display. Yes, it's all about semantic markup - the very base for conscious web development. However, a general problem here on css-d is that semantics is pretty much off-topic - unless (maybe if) the OP supply something that is so weak on markup level that it simply can't be (visually) solved with CSS. I see your point Georg, but imho semantics is on-topic when choices involve different type of hooks. For example nested elements (spans within list items) vs. siblings (dt/dd pairs) I'm inclined to agree that the subject of semantic HTML is on point in this forum. Semantic HTML is absolutely essential to taking full advantage of what CSS offers us as web developers. CSS by itself can do nothing, and the power of what it CAN do is directly proportional to the quality of the HTML code to which it is applied. Semantic use of HTML elements gives us the best method to build pages, indeed whole sites, that are flexible, accessible, easier to maintain, portable, modular, and lean, delivering pages that load fast, minimize server overhead, and are easier for search engines to index and classify properly. I'll grant that web standards are not a law, and designers are still free to base their layouts in tables if they so choose. Even in 2008, the arguments are still made in support of non-semantic table-based layout techniques (among other less-than-optimal coding practices), usually based on expediency in building pages or because CSS implementation proved difficult. It may surprise some newbies to know that most, if not all, advanced CSS practicioners have had occassion during their careers to use the same suboptimal techniques that we try to dissuade anyone from using today. We have also found CSS to be rather difficult at times. This forum, more than any place on the face of the Earth, is a testament to that fact. Yet, those who have kept the faith and worked to internalize and solidify their understanding of the Semantic HTML/CSS/DOM triumvirate have been able to forge great advances if not create a completely new model of web development - one that recognizes the critical value of the unseen structure of the front end, or as Theodore Roethke wrote: What shakes the eye but the invisible? Troubles in CSS can frequently be traced to suboptimal HTML structure. Semantics are a principle of creating optimal HTML structure. Thus, as its catalyst, semantic HTML goes hand-in-hand with CSS in any discussion thereof. __ 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
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] 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] 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/
[css-d] Request for Comments on this CSS Stylesheet Approach
Hi, all. I'd like to know your thoughts on including separate stylesheets for individual pages. I've realized at the start of a pretty large site, including Internet and Intranet sections, that my stylesheet could grow very large and even finding sections of styles for particular pages could be a cumbersome task. What I'm considering is having one main stylesheet, then having supplemental stylesheet for the various pages I will create. E.g., for a particular page, I would have main.css, plus index.css. For announcements, I would have main.css, plus announcements.css. I would be avoiding loading a lot of irrelevant styles for a particular page and make finding style references much easier, too. It seems like the best way to go, but I want to make sure I'm not creating a problem with the technique with which I'm unaware. I can easily specify which particular page's stylesheet is called by using coldfusion and the cgi.script_name variable. Thoughts? Thanks, Rick __ 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] Request for Comments on this CSS Stylesheet Approach
However, you might end up repeating yourself if you are not careful Very true! Thanks, Mark! Rick Rick, I think this is an allright solution. However, you might end up repeating yourself if you are not careful in delegating styles to the main sheet. As long as you can stay vigilant on pushing shared classes to the shared sheets, you'll be fine. Otherwise you can end up with spaghetti styles with the same class/id defined 3 different ways on 3 different sheets. Personally I divide my sheets by section. So for a CMS all the styles related to each type of content are on a single sheet. If anything ends up on more than one sheet it goes into the common sheet. -Mark __ 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] setting background colour
Hi, Kristina... I think making use of background color, or even better to me, setting background images, usually are a great way to enhance the look of a page and control the user experience. Concerning the nature of your post... I think best practice CSS discussions of a more general nature like your question about whether or not to make use of the background in design is important to this list. A discussion of *whether* something should be done should always proceed a technical discussion of *how* something should be done. To segregate the two types of discussion makes us simply technicians with no soul for design...and that would be at odds with the purpose of CSS in the first place. Just my .02 ... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kristina Floyd Sent: Thursday, February 14, 2008 7:18 AM To: css-d@lists.css-discuss.org Subject: [css-d] setting background colour Hi all I've always learnt that setting the background colour on a site is a very basic thing to do and shows that as a web developer you've taken care and pride in your work. I'm curious to know your thoughts on this matter, as it literally drives me bonkers. Thanks Kristina __ 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] list-style problem on IE 7
Now, I notice too, that since you've removed the images to the left of your list, that IE is displaying the menu off-center, to the right. Typically, I believe, the padding automatically allowed by IE for a bullet is 20px. There is another inheritance issue from somewhere that is causing your .rightcommunity ul and .rightcommunity li to have the list-style-type:disc; applied. So, add padding-left:-20px; to both the .rightcommunity ul and .rightcommunity li styles and your menu should move to the left 20px and be centered. FF doesn't have this issue. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Big Moxy Sent: Thursday, January 17, 2008 12:46 PM To: CSS Discussion Subject: [css-d] list-style problem on IE 7 Hi all! I hope someone can tell me how I can fix this. This page views perfectly on FF - http://www.woodstone-homes.com/communities/red-oak-farm-test/?id=5 however on IE 7 the right menu items have squares in front of them. list-style is set to none. Initially list-style was set only on .rightcommunity li but then after seeing the problem on IE I added it to the others. .rightcommunity ul { margin: 0; padding: 0; list-style-position: inside; text-align: center; height: 210px; list-style: none; } .rightcommunity li { list-style: none; list-style-position: inside; } .rightcommunity li a { color: #4A3510; list-style: none; text-decoration:none; } .rightcommunity li a:hover { color: #4A3510; list-style: none; text-decoration:underline; } .rightcommunity li a:visited { color: #4A3510; list-style: none; text-decoration:none; } 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/ __ 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] list-style problem on IE 7
@Big Moxy: Holly's suggestion is probably the correct approach to solve the problem. Give that a try and see if it centers the menu, if so, great. @Holly: Thanks for pointing out the real problem. However, since adding negative value did solve the problem, at least in my testing of IE7, obviously the padding property does take negative values. Now, that may not be the way it's supposed to be done, and it very well may be invalid CSS. However, I'm not very concerned that my CSS pass a validity test. I've never been concerned about being able to place a Valid CSS logo on any of my sites and probably never will. (They clash anyway and look terrible.) That said, I know that it's important to some that their CSS pass the validity test, however, that doesn't mean it's important to everyone. If the CSS doesn't display properly, then it's truly invalid. But, if the CSS works on the screen, that's the true test of validity. And don't get me wrong, I'm glad to know that list-style-position:inside was wrong for the situation and, thus, causing the problem. However, another solution isn't wrong simply because a test declares it so. Only a user's screen does that in the end. Rick -Original Message- From: Holly Bergevin [mailto:[EMAIL PROTECTED] Sent: Thursday, January 17, 2008 9:43 PM To: Big Moxy; 'CSS Discussion'; Rick Faircloth Subject: Re: [css-d] list-style problem on IE 7 From: Big Moxy http://www.woodstone-homes.com/communities/red-oak-farm-test/?id=5 From: Rick Faircloth [EMAIL PROTECTED] So, add padding-left:-20px; to both the .rightcommunity ul and .rightcommunity li styles and your menu should move to the left 20px and be centered. Please don't do this. The padding property does not take negative values, and thus is invalid CSS. The actual 'extra space' problem for IE is in the following selector - .rightcommunity li { list-style: none; list-style-position: outside; /*inside;*/ /* change this value to outside */ list-style-image:none; } ~holly __ 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] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can
Hi, Scott... I guess you got everything straightened out? Everything looks the same in IE6, IE7, and FF. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Scott Thigpen Sent: Wednesday, January 09, 2008 11:15 AM To: css-d Subject: [css-d] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can Okay, so after many attempts I decided to nix the fluid look because I could NOT get it to work right, so I decided with just a fixed with. All works well now, but when I try to insert a nav bar, I can't get it to push down just my logo. It works in Firefox (of course) but I can't get it to work in IE6 and 7. Any help you can throw my way would be MUCH appreciated as I am just stumped (and have a profound hatred to css) here is the site: http://www.sthig.com/photo/test.html here is my css: style type=text/css body,td,th { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 85%; color: #FF; text-align: center; background-color: #00; } #wrapper { width: 1024px; margin-left: auto; margin-right: auto; } #n1 { float: left; height: 50px; width: 280px; margin-top: 150px; } #navcontainer { float: left; display: inline; margin-top: 15px; margin-left: -15px; } #navlist ul { margin-left: 0; padding-left: 0; white-space: nowrap; } #navlist li { display: inline; list-style-type: none; } #navlist a { padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; } #navlist a:link, #navlist a:visited { color: #fff; text-decoration: none; } #navlist a:hover { color: #049CB2; text-decoration: none; } #n2 { float: left; height: 50px; width: 402px; margin-top: 150px; } #n3 { float: left; height: 50px; width: 341px; margin-top: 150px; background-image: url(images/navBG.jpg); background-repeat: no-repeat; background-position: right bottom; } #content { background-color: #049CB2; width: 1024px; float: left; } #c1 { float: left; height: 250px; width: 280px; } #logoImg { float: left; margin-left: 5px; } #c2 { float: left; height: 250px; width: 402px; } #hello { margin-top: 110px; margin-right: 75px; } #c3 { float: left; height: 250px; width: 341px; background-image: url(images/picBG.jpg); background-repeat: no-repeat; background-position: right top; } /style __ 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] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can
I hear you. Now, I'm a pragmatist, not an idealist, when it comes to designing for various browsers and since 98% of my site visitors use IE6, IE7, or FF that's all I check when I'm designing. That being said, I've taken what I consider to be the easiest route to cross-browsers issues. I just design for FF, then go straight to conditional stylesheets for IE6 and IE7. Why bother with hours of time spent trying to find a hack or code that will work the same in all three? Hacking isn't future proof, because the browsers change and become more css-compatible all the time. IE8 will be more css-compatible and will work with css in more ways that IE7, as IE7 has than IE6. So, if I have IE6 or IE7 hacks in my code and IE8 comes out and it doesn't work with the hacks, I've got to re-code everything that doesn't work. Going straight to conditional stylesheets, the hacks are isolated and won't cause conflicts in the future. Just a few thoughts as I wrestle with the inconsistencies of the browser world. Rick From: Scott Thigpen [mailto:[EMAIL PROTECTED] Sent: Wednesday, January 09, 2008 1:16 PM To: Rick Faircloth Subject: Re: [css-d] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can yeah I got it, but not until it had me stressed out beyond belief. the more I web design, the more I *hate* IE On Jan 9, 2008 1:03 PM, Rick Faircloth [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Hi, Scott... I guess you got everything straightened out? Everything looks the same in IE6, IE7, and FF. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Scott Thigpen Sent: Wednesday, January 09, 2008 11:15 AM To: css-d Subject: [css-d] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can Okay, so after many attempts I decided to nix the fluid look because I could NOT get it to work right, so I decided with just a fixed with. All works well now, but when I try to insert a nav bar, I can't get it to push down just my logo. It works in Firefox (of course) but I can't get it to work in IE6 and 7. Any help you can throw my way would be MUCH appreciated as I am just stumped (and have a profound hatred to css) here is the site: http://www.sthig.com/photo/test.html here is my css: style type=text/css body,td,th { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 85%; color: #FF; text-align: center; background-color: #00; } #wrapper { width: 1024px; margin-left: auto; margin-right: auto; } #n1 { float: left; height: 50px; width: 280px; margin-top: 150px; } #navcontainer { float: left; display: inline; margin-top: 15px; margin-left: -15px; } #navlist ul { margin-left: 0; padding-left: 0; white-space: nowrap; } #navlist li { display: inline; list-style-type: none; } #navlist a { padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; } #navlist a:link, #navlist a:visited { color: #fff; text-decoration: none; } #navlist a:hover { color: #049CB2; text-decoration: none; } #n2 { float: left; height: 50px; width: 402px; margin-top: 150px; } #n3 { float: left; height: 50px; width: 341px; margin-top: 150px; background-image: url(images/navBG.jpg); background-repeat: no-repeat; background-position: right bottom; } #content { background-color: #049CB2; width: 1024px; float: left; } #c1 { float: left; height: 250px; width: 280px; } #logoImg { float: left; margin-left: 5px; } #c2 { float: left; height: 250px; width: 402px; } #hello { margin-top: 110px; margin-right: 75px; } #c3 { float: left; height: 250px; width: 341px; background-image: url(images/picBG.jpg); background-repeat: no-repeat; background-position: right top; } /style __ 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/ -- S c o t t T h i g p e n Illustrative Designer art: http://www.sthig.com design: http://www.thigpendesigns.com Phone: 770.527.3958 __ 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
Re: [css-d] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can
My users run about 95% IE, 3% FF, and 2% Other. With that user base, I'd target IE7 first if it weren't for the fact that conditional stylesheet code only works for IE. So I'm forced to code for FF first, not because it adheres to standards, but because I can't code alternate stylesheet for it. But anyway, are you asking about an example of conditional stylesheet code? Maybe not. But if not, then just choose any IE6 or IE7 hack that's currently employed in a main stylesheet. Then along comes IE8 and the hack causes problems. Now all the hacks have to be re-hacked somehow for IE6 (hopefully it'll be gone), IE7, and IE8. But if all IE6 and IE7 CSS is in browser specific stylesheets, then it won't matter what IE8 works, because it'll never see the IE6 and IE7 stylesheets. No more having to accommodate IE6's lack of exactness with pixels and widths, etc. Just give IE6 exactly what it wants to make your site look good in its own stylesheet. I've actually found it saves time that way and my sites' looks aren't compromised trying to avoid alternative stylesheets. Rick From: Scott Thigpen [mailto:[EMAIL PROTECTED] Sent: Wednesday, January 09, 2008 2:03 PM To: Rick Faircloth Subject: Re: [css-d] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can I've never thought of that. Can you show me an example of what you are talking about? I usually design for FF too as that's most of my visitors, but I try to make it browser safe for that one or two peoples that refuse to use Firefox. Like, take my mom for instance, anytime I go home for the holidays, I try to get her to get on FF. But someone once told her that FF contains viruses, so she won't use it and won't believe me. scott On Jan 9, 2008 1:58 PM, Rick Faircloth [EMAIL PROTECTED] wrote: I hear you. Now, I'm a pragmatist, not an idealist, when it comes to designing for various browsers and since 98% of my site visitors use IE6, IE7, or FF that's all I check when I'm designing. That being said, I've taken what I consider to be the easiest route to cross-browsers issues. I just design for FF, then go straight to conditional stylesheets for IE6 and IE7. Why bother with hours of time spent trying to find a hack or code that will work the same in all three? Hacking isn't future proof, because the browsers change and become more css-compatible all the time. IE8 will be more css-compatible and will work with css in more ways that IE7, as IE7 has than IE6. So, if I have IE6 or IE7 hacks in my code and IE8 comes out and it doesn't work with the hacks, I've got to re-code everything that doesn't work. Going straight to conditional stylesheets, the hacks are isolated and won't cause conflicts in the future. Just a few thoughts as I wrestle with the inconsistencies of the browser world. Rick From: Scott Thigpen [mailto:[EMAIL PROTECTED] Sent: Wednesday, January 09, 2008 1:16 PM To: Rick Faircloth Subject: Re: [css-d] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can yeah I got it, but not until it had me stressed out beyond belief. the more I web design, the more I *hate* IE On Jan 9, 2008 1:03 PM, Rick Faircloth [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Hi, Scott... I guess you got everything straightened out? Everything looks the same in IE6, IE7, and FF. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Scott Thigpen Sent: Wednesday, January 09, 2008 11:15 AM To: css-d Subject: [css-d] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can Okay, so after many attempts I decided to nix the fluid look because I could NOT get it to work right, so I decided with just a fixed with. All works well now, but when I try to insert a nav bar, I can't get it to push down just my logo. It works in Firefox (of course) but I can't get it to work in IE6 and 7. Any help you can throw my way would be MUCH appreciated as I am just stumped (and have a profound hatred to css) here is the site: http://www.sthig.com/photo/test.html here is my css: style type=text/css body,td,th { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 85%; color: #FF; text-align: center; background-color: #00; } #wrapper { width: 1024px; margin-left: auto; margin-right: auto; } #n1 { float: left; height: 50px; width: 280px; margin-top: 150px; } #navcontainer { float: left; display: inline; margin-top: 15px; margin-left: -15px; } #navlist ul { margin-left: 0; padding-left: 0; white-space: nowrap; } #navlist li { display: inline; list-style-type: none; } #navlist a { padding-top: 0px; padding-right: 10px; padding
Re: [css-d] Site Review
Like the design, Scott... elegant, clean, interface easy to understand, good functionality. Good work! Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Scott Everett Sent: Friday, December 14, 2007 11:49 AM To: css-d@lists.css-discuss.org Subject: [css-d] Site Review This is a site we designed that just went live this week for a Herman Miller furniture dealership in Pasadena. The style sheets still contain some invisible debris, but the design should be tight across most browsers (down to IE 6). All comments and criticism are welcome (particularly if you see a browser issue!). www.m3office.com Thanks so much. Scott Everett The Ethos Factory www.ethosfactory.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] problems with CSS and floats
Thanks for the perspective, Gunlaug. Your comments are very much appreciated. And your help on this list is invaluable to so many! Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun Sent: Friday, December 07, 2007 10:14 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] problems with CSS and floats Rick Faircloth wrote: However, it's good to remember that for those of us that are just beginning to work with CSS layouts, that getting *anything* to work on any level is a big challenge. Once we become more knowledgeable and experienced we can begin to work with broader concerns, like font-scaling, more browser compatibility, etc. The CSS learning-curve _is_ steep, but it doesn't become less steep by leaving out factors like the mentioned issues till later. Leaving any of these basics out at an early stage just means one has to go through the same learning-process all over again, and there's always the risk that hard-learned knowledge has to be unlearned and/or corrected more than one would like, in order to go forward. For me, just being able to make CSS-based sites without tables has been a big task... especially having no formal training in it. Just getting them to look as good as my table-based sites has been a big challenge. I would think so, since the part of CSS that is best suited for replicating and/or improving look and feel based on table-based designs, is badly supported across browser-land and not at all in MSIE. It's called 'CSS-table', and _maybe_ IE8 will at least _start_ to support CSS-table now that Firefox (3) is showing signs of improving its support. Miracles have happened before... :-) The substitutes we use now, like floating and/or positioning major layout-parts, won't last forever. They are all temporary solutions, and both existing but badly supported, and entirely new, solutions will (have to) come into play. So the process of learning and unlearning methods and what to use them for, is the only constant we have in today's web design. It is not a good idea to make this process harder by skipping important parts early on - at least not knowingly. So don't expect too much of us newbies too soon... it'll only scare the faint-hearted away. Sometimes a pretty picture is a big goal! Indeed. However, it would be wrong not to point out that experience tells us that the prettier they come, the less they can take before they break. It doesn't have to be like that at all (that pretty means weak), but it _is_ , sadly, the norm. Doesn't seem to have much to do with newbie or advanced status either, and a web designer's status doesn't help much when it comes to holding a design together under what must be considered to be 'normal conditions' - visitors being able to use a site in regular browsers. Proper use of HTML/CSS/script etc., is however always of immense help towards such a goal. This is why some of us ignore status, and only look at the results. We comment for a reason: we want to see *better results* - in a broad sense. The rest -- process, experience, status -- doesn't really matter all that much, (IMO of course). Consequently: we don't expect much of anyone - status irrelevant, as we're all limited by the same incomplete tools - browsers and standards. We just try to help whoever to find solutions they are comfortable with, within the range of available alternatives. This does sometimes mean we have to tell people that something doesn't work well or at all, and which problems one has to solve and/or avoid if one wants a pretty picture or whatever to work. This is not critique of ones status, present attempts or forwarded examples. It is just information that anyone can do what they want with, and the only expectation I have to anyone is that I expect them to do just that - what they want. 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] problems with CSS and floats
-Original Message- From: David Laakso [mailto:[EMAIL PROTECTED] Sent: Saturday, December 08, 2007 8:47 AM To: Rick Faircloth Subject: Re: [css-d] problems with CSS and floats Now, if we can get you to just stop top-posting (it screws up the archives and makes it impossible to follow a logical thread), and into trimming the unessential (it just loads everyone's mailbox), maybe we can get back to what this list is all about : the practical application of CSS. Notice I have written below you, and what is not essential to communicate these thoughts, has been trimmed. Please know, as well, it is not necessary to lash-out at everyone on the list who is attempting to help you and others. We do the best we can. Accept what you can. Ignore the rest. Correct someone who has made an error if you feel so inclined; but, make sure, as best you can, that the error (or misconception) is theirs and not yours. I hope you have a pleasant and enjoyable weekend, and I look forward to your continued questions, answers, and support of CSS and Web standards... Best wishes, ~d Whoa, David! I don't remember lashing out at anyone... you included. I've just simply notice a sometimes subtle, sometimes not, virtual cane lashing of anyone who doesn't follow the religious CSS dogma adopted by some or many on this list. For example, personally, at this point, I don't care if anyone ever reads any of my sites on a text-only browser. If they want to go that route, no problem here, but they have *no* right to any expectation that anyone should ever code for that decision. Now, again, if there are those who want to accommodate them, fine, but there should be no expectation that they *should*... *BIG* difference. I just make it a point to defend anyone who is being chastised for not adhering to the CSS coding standards that someone else adopts. What standards everyone decides to adhere to and how far they want to employ CSS methods in building websites is *totally* a matter of personal choice. If there were a CSS god who dictated with absolute authority what standards and practices should be employed, then I'd submit. But I know of no one who has the authority over me to proscribe what my CSS coding behavior and standards will be in this world Some on this list just a little bit that Taliban mentality, and I don't like it, and say so... just to keep things in balance. Rick PS - Notice... I didn't top post... see, I'm flexible! __ 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] problems with CSS and floats
David Laakso wrote: PS Do you have a CSS question? I consider philosophical questions about CSS design that impact daily work just as legitimate as How do I make a font red?, if not more so... Rick __ 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] problems with CSS and floats
Possibly... maybe just a morphed thread... like any conversation, it can branch. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rayburn Taylor Is this what one would call a hijacked thread? Just asking. Rayburn Waco Web Designs http://wacowebdesigns.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] problems with CSS and floats
Hi, Rayburn... Let me tell you what finally enabled me to start making totally css-layout sites, using only tables for tabular data. I went to http://www.templateworld.com/free_templates.html and downloaded several free sites, including all images and other assets that you need for a complete site, and basically re-created from scratch, their css files and html files to see how each step affected what I was doing. It's important to start with a blank stylesheet and one html page and add one part of the page at a time and as little of the css to the stylesheet as possible that affects the html you're working with. Otherwise, you're not going to know what css code is affecting what html code. By breaking down these ready-made sites, and, at first, perhaps simply substituting your own content for theirs on the sites, while leaving the structure intact, you can begin to get a feel for how they have put their css-based sites together. After doing this for a couple of sites, the css design approach may become clearer to you. I'm not saying that template world's template are the best in the business, but they are complete and very cross-browser compatible. However, with some significant modifications to one of their templates, I've used one as a basis for a site that I sold to a client. They make available for download the HTML files, the css files, and all image files required. At least check them out and see if they help. Getting over the initial overview of how css is done may get you over the hump. Hope this helps, Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rayburn Taylor This is my first post and I hope I am requesting help in the correct way. __ 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] problems with CSS and floats
Sorry, David, meant to send my reply to the list... but this goofy setup always causes me problems with the Reply button... Here was my response that went directly to you: Just remember, not to forget, there is not one layout on the above referenced page, that is not broken with user discretion to scale the fonts to +2, and destroyed at +3. Thanks for pointing that out David. However, it's good to remember that for those of us that are just beginning to work with CSS layouts, that getting *anything* to work on any level is a big challenge. Once we become more knowledgeable and experienced we can begin to work with broader concerns, like font-scaling, more browser compatibility, etc. For me, just being able to make CSS-based sites without tables has been a big task... especially having no formal training in it. Just getting them to look as good as my table-based sites has been a big challenge. So don't expect too much of us newbies too soon... it'll only scare the faint-hearted away. Sometimes a pretty picture is a big goal! Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Laakso Sent: Friday, December 07, 2007 12:11 PM To: [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] problems with CSS and floats Rick Faircloth wrote: Hi, Rayburn... Let me tell you what finally enabled me to start making totally css-layout sites, using only tables for tabular data. I went to http://www.templateworld.com/free_templates.html and downloaded several free sites, including all images and other assets that you need for a complete site, and basically re-created from scratch, their css files and html files to see how each step affected what I was doing...Trimmed---} Rick Yes, indeed... Just remember, not to forget, there is not one layout on the above referenced page, that is not broken with user discretion to scale the fonts to +2, and destroyed at +3. Mostly it has to do with imposing height restrictions. Make a pretty picture with CSS if that is your want-- just make sure that pretty picture can withstand a little stress and strain, and that it can get pushed around and shoved around, without turning into an explosion in a liquor store... Best wishes for your success, Rayburn. ~dL PS Stick with it and with this list. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First post
At first, any new toy is fun, despite it flaws. But after 6 months of play, the fun diminishes and the flaws begin to grate... Rick PS - Don't get me wrong, it's a great list, but I'm on quite a few lists, and almost all function differently. You have to hit reply, or reply-to-all, you have to make sure you trim posts, some don't care, some are topic-strict, others are relaxed. We talk about so much about standards around here, maybe be need the *W3L* (list, list and more lists) to determine some standards that all lists should adhere to. Completely voluntary, of course, but you will receive 15 days in jail, 50 lashes, and possible be-heading if you violate the voluntary standards and are caught allowing your 2nd-graders to top post... -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Cyber Cog Sent: Tuesday, December 04, 2007 9:40 AM To: Big Moxy Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] First post If you read Erics reply, or maybe read it again. ;-) You may just think to yourself, I'm just glad someone set this list up so I can get the help and insight I need,.. cool!. Or not. Best thoughts. Really? Really, really. - Cy On 12/4/07, Big Moxy [EMAIL PROTECTED] wrote: Ditto here! Why do we need to receive duplicate emails? Tim -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rick Faircloth Sent: Monday, December 03, 2007 3:55 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] First post No problem here! I would greatly appreciate it if you could share with me how to set that up on Outlook 2007! I hate the way this list sends responses to the sender *and* to the list, or I either have to take the time to strip out the personal email address... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Adams Sent: Monday, December 03, 2007 1:53 PM To: css-d@lists.css-discuss.org Subject: [css-d] First post Just an introductory post folks. Does anyone mind if i have the reply-to: feild explicitly set? The rules for the list are not the same as most lists i am on, where Please reply to the list, not to me direct is the norm. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-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] How will firefox 3 affect web developers?
I think what we're seeing is a division between those who are driven to explore the boundaries of development and those whose top priority is simply making money with their work. And don't get me wrong, I used to be one of the cutting-edge explorers. Not in the world of web development, but in a previous field. Partly, this is just a sign of my growing older and having to take care of concerns such as the mortgage, kids in college, etc., as well as my realization that browsers are constantly changing and that the perfect cross-browser solution I develop today will be irrelevant tomorrow. Already there's a huge discussion about the impact on development of FF3. IE 7 has made a huge difference over IE 6. Personally, I can't wait for IE 6 to go away, if for nothing else so I can use transparent png's natively. So I've decided to just split all these concerns down the middle and be pragmatic. I'll develop for the users (not the browsers) that will be viewing my work. I'm not aware that anyone has ever even viewed one of my sites on Opera. My stats show about 98% of visitors to sites are IE users. I throw in concern for Firefox, because it is catching on with more people and shouldn't be ignored. But, it's just not worth it on a monetary level, to spend so much time trying to make everything work well for every user environment. The users have to make some compromises, too. And various browsers are becoming so cross-platform that it's much easier for users to use whatever browser they like for the OS platform. Again, my approach is simply a pragmatic one. I'll leave it up to you guys with the time, energy, and constant salary where you can afford to spend 4 days on a tiny issue with an obscure browser for the sheer pleasure of conquering the problem. That doesn't concern me... I just need to keep the work flowing and pleasing my clients. I'm self-employed, which, I think makes a big difference in perspective, too. We're all going to approach this a little (or a lot) differently depending on life circumstances and goals. Just some thoughts... no rocks, slings, or arrows. :o) Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ingo Chao Sent: Monday, December 03, 2007 3:04 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] How will firefox 3 affect web developers? Rick Faircloth wrote: ... Some developers are idealists who want to live in the world *they* develop as far as what browsers deserve attention and development time. The rest of us live in the real world. I challenge any developer to ... You can't expect them to explore IE only. It would be just too boring. If there weren't those who experimented with all browsers, those who came back with spin-off solutions for IE in their hands and cared to share their knowledge for your daily convenience in this IE self help group, then today you and your business would probably be left alone with an unobstrusive script that doubles the margin of floats in inferior browsers that aren't used very often. Ingo -- http://www.satzansatz.de/css.html __ 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] How will Firefox 3 affect web developers?
Hi, Jon... Thanks for your comments. I don't think I share quite the same passion for making my sites accessible to whatever browser they like as you do. I expect them to meet me partway. But, I think you're misunderstanding my comments in a couple of ways. One, as far as being cutting-edge, it's not that I don't keep up with what's happening and how to use most of it, but my clients tend to have fairly simple needs, and I learn to build what they require. And another aspect of that is how soon I adopt new technologies and methods. I used to purchase an upgrade to my OS's as soon as they hit the shelves, but I found out how disastrous that can be for production. Now I tend to wait until at least Server Pack 1 or about a year of common use has gone by before even thinking of adapting to the new OS. Same thing with web development (in some ways)... some people just enjoy being on that cutting edge and blazing new trails. And that's fine... nothing wrong there. I used to be more like that. Now I prefer to let others who enjoy wrestling with the new stuff work on the issues. It's just a personality thing... Now, as far as IE 6 goes, I think we're really miscommunicating there. I do target IE 6 as much as IE 7, since it's still so heavily in use. I target IE6, IE7, and FF2 for now. That's about all I can handle, being new to CSS and all its methods and quirks. And, again, I've never seen anyone of my users on my analytics reports that use anything but IE6, IE7, FF2, or Safari. If I had a sudden surge of Opera users at 50%, I'd target Opera for development first. It's all about what the users are using. Funny you should mention working on your house... when I build a new one next spring, you can be sure the contractor, etc. will be among the best in the business. However, I won't require someone who can build a skyscraper, too, just someone who know how to build the type of home I require. I don't expect a builder to specialize in every type of building in existence. Thanks for the comments. :o) Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jon Hughes Sent: Monday, December 03, 2007 11:53 AM To: Rick Faircloth; css-d@lists.css-discuss.org Subject: Re: [css-d] How will Firefox 3 affect web developers? Sorry for my absence in this discussion, list! My HD had a meltdown. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of Rick Faircloth Sent: Monday, December 03, 2007 5:55 AM I think what we're seeing is a division between those who are driven to explore the boundaries of development and those whose top priority is simply making money with their work. And don't get me wrong, I used to be one of the cutting-edge explorers. Not in the world of web development, but in a previous field. Maybe it's just my biased perspective, but how can you not be on the cutting-edge and still professionally do web development? The web is a moving entity, and will continue to grow for the foreseeable future. New technologies come out (CSS, XHTML) and become the (generally accepted) standard - IMHO, you need to migrate to survive. I suppose the realistic alternative is to sit back and wait for the explorers to come out with something, but I don't know - I prefer to be proactive, not reactive. Partly, this is just a sign of my growing older and having to take care of concerns such as the mortgage, kids in college, etc., as well as my realization that browsers are constantly changing and that the perfect cross-browser solution I develop today will be irrelevant tomorrow. But it is today, not tomorrow. With this mentality, where do you draw the line? IE6 is still very strong in the market, as much as it pains us all, but it is a reality. But, it's just not worth it on a monetary level, to spend so much time trying to make everything work well for every user environment. The users have to make some compromises, too. And various browsers are becoming so cross-platform that it's much easier for users to use whatever browser they like for the OS platform. Again, my approach is simply a pragmatic one. I'll leave it up to you guys with the time, energy, and constant salary where you can afford to spend 4 days on a tiny issue with an obscure browser for the sheer pleasure of conquering the problem. This topic has evolved so much, I don't know if most people know where it originated. You can read my post on speeding development for IE6 here: http://www.phazm.com/notes/productivity/stop-the-hate-ie6-isnt-so-bad/ I cannot imagine spending 4 on IE6 issues... maybe it was an exaggeration, but I can't remember a time when I spent more than 2 hours on an IE6 bug, 3 tops. That doesn't concern me... I just need to keep the work flowing and pleasing my clients. I'm self-employed, which, I think
Re: [css-d] First post
No problem here! I would greatly appreciate it if you could share with me how to set that up on Outlook 2007! I hate the way this list sends responses to the sender *and* to the list, or I either have to take the time to strip out the personal email address... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Adams Sent: Monday, December 03, 2007 1:53 PM To: css-d@lists.css-discuss.org Subject: [css-d] First post Just an introductory post folks. Does anyone mind if i have the reply-to: feild explicitly set? The rules for the list are not the same as most lists i am on, where Please reply to the list, not to me direct is the norm. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ 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] How will firefox 3 affect web developers?
With all due respect to Opera and Safari's users, based on the visitor stats of the sites I manage (and on stats from sites like thecounter.com), by testing in Firefox and IE, I _am_ testing for all _major_ browsers. Absolutely agree... FF and IE are the *only* major browsers. All the rest are just wanna-be's. So few people use the other browsers they don't deserve any of my time to accommodate their off-the-mainstream preference. And it's not about which one is the best browser... it's all about what most people use. Therefore, right now at least, IE truly is the only *major* browser. Even FF is simply a more serious contender. Notice a wrote *more* serious contender. Not even a serious contender, yet. It's simply enough in use that I decide to devote time to making content look good on it. What makes a browser *major* is simply how much usage it has. Not how much it does or does not comply with standards. If Opera had 80% of the market share of browser usage, Opera would be my main develop target. But... As far as standards go, the most important standards are decided by the using public, not by the W3C. Some developers are idealists who want to live in the world *they* develop as far as what browsers deserve attention and development time. The rest of us live in the real world. I challenge any developer to develop an app for general consumption that works perfectly in FF and looks terrible in IE and see how much money that make from it. Rick PS - @ Erik... sorry, I meant to post this to the list and not just you, personally. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Erik Harris Sent: Sunday, December 02, 2007 9:19 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] How will firefox 3 affect web developers? At 02:41 AM 12/2/2007, Gunlaug Sørtun wrote: I suppose I should install Opera and Safari, too, but I just haven't bothered (and at least Opera is good enough with standards compliance that I wouldn't expect anything I'd be doing would break it. You should have all major browsers available for testing even if they are pretty close on most CSS related stuff. Firefox 3.0b1 doesn't look too bad so far, but Fx 2 is/was a bit behind. With all due respect to Opera and Safari's users, based on the visitor stats of the sites I manage (and on stats from sites like thecounter.com), by testing in Firefox and IE, I _am_ testing for all _major_ browsers. I should probably add Safari, as its usage seems to be approaching 5%, but Opera is hardly even a blip on the radar, usually falling below unknown or other on the various lists. Yeah, I know Opera includes a built-in user agent switcher that could deflate its stats, but if it's own users won't even stand up and be counted, I'm not going to bother trying to guess how many of them there might be. :) Erik Harrishttp://www.eHarrisHome.com -AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172- Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.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] Simple layout positioning
@David... Hi, David... I took a quick glance at the css you recommended for Nouhad, and I have a question. I noticed that you specified a float:left for all three boxes (#box-1, #box-2, #box-3), then you gave #box-2 the attribute, position:absolute, and then #box-3, float:right. I've just been working with CSS more for a couple of months now, so I'm wondering why use float:left; position:absolute; left:276px; on #box-2? Are you trying to avoid using margins, and, consequently, the IE6 margin-doubled bug? My first instinct would have been to just give boxes one and two float:left and that would cause all three boxes to line up, however, I would have had to use margins to space the boxes. Just wondering about the reasoning behind your approach. Thanks, Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Laakso Sent: Wednesday, November 14, 2007 11:02 AM To: Nouhad A Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Simple layout positioning This is none way it might be done: http://www.chelseacreekstudio.com/ca/cssd/boxes.html HTH, ~dL __ 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] Simple layout positioning
Thanks for the info, David. :o) Rick -Original Message- From: David Laakso [mailto:[EMAIL PROTECTED] Sent: Wednesday, November 14, 2007 1:44 PM To: Rick Faircloth Cc: 'css-discuss' Subject: Re: [css-d] Simple layout positioning http://www.chelseacreekstudio.com/ca/cssd/boxes.html Floating the boxes and separating them with margins is an alternative way to do it. The sometimes difficulty with floats is in centering them horizontally within a parent block. 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] Background centering issue with IE
Can't see it here, David...IE7... Looks good...nice design. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Boddie Sent: Thursday, October 25, 2007 10:15 AM To: css-discuss Subject: [css-d] Background centering issue with IE Hello all, I believe I'm having a background centering issue with IE on my new design, and I was wondering if someone could give me some pointers. IE7 shows a 1 pixel shift to the right of my drop shadow background on my container div (#containerwrapper), which makes it look like a margin or padding issue, but I haven't been able to find anything that would cause that type of problem. HTML file: http://www.uark.edu/depts/gradinfo/mockup/threetemplate.html CSS file: http://www.uark.edu/depts/gradinfo/mockup/threetemplate.css Thanks for the help! Boddie --- David Boddie, Webmaster, Graduate School University of Arkansas | #6 Dickson Street Annex Fayetteville, Arkansas 72701 Phone: 479-575-6184 | email: [EMAIL PROTECTED] http://www.uark.edu/grad --- __ 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] Newbie
I'll tell you what gave me enough understanding to finally begin to build sites using CSS... free CSS templates from http://www.templateworld.com/free_templates.html. I simply selected a template I liked and took the HTML and CSS and copied and pasted the template back together one line at a time to see how they had made their designs and how the elements were coded to work together. I began to pick up their methods before I was finished with the home page of the first template. I completed the first template, simply rebuilding exactly what they had created. The second template, I began to experiment with changing the text and images to see how my changes might affect the design. Then I began to get bolder and changed some of the CSS to see what affect my changes had. This way of learning finally put me over the top in understanding what I needed to know to hand-code using CSS. I've been trying to tear myself away from tools that generate HTML, etc, for years. Now I hand code everything in my HTML and CSS. The templates I mentioned above come complete with all graphics, CSS, HTML, etc., that you need to rebuild the site, so you don't have to spend time at first worrying about creating graphics. Give those templates a try and see how it goes. Perhaps this will help you like it did me... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of ROGER BURTON Sent: Saturday, October 20, 2007 2:41 AM To: css-d@lists.css-discuss.org Subject: [css-d] Newbie Hi ... I am getting really confused now so maybe the knowledge here can give me some much needed guidance. __ 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] Why won't these two style of code work the same way?
That was it! Thanks, fantasia! Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of fantasai Sent: Monday, October 08, 2007 6:12 PM To: Rick Faircloth Cc: 'CSS-D' Subject: Re: [css-d] Why won't these two style of code work the same way? Rick Faircloth wrote: .was mostly the same for each class and tried to create a class plus id to shorten the CSS required. So, I created this class. .cal_heading { padding-top: 2px; padding-bottom: 3px; border-top: 1px solid black; border-left: 1px solid #aaa; background: black; color: white; font-size: 11px; font-weight: bold; text-align: center; } .and combined it with this id style. .cal_heading #day { width: 35px; border-left: 1px solid black; } If your code looks like this th class=cal_heading id=day then you want .cal_heading#day instead of .cal_heading #day (The space indicates that #day is a descendant of .cal_heading.) ~fantasai __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (IE7) Bullets shift downward on items that wrap when width is applied
Hi, Bob... Applying vertical-align: top; moved the bullet to the top of the text rows for each li...however, the bullet is a little too high for me and I didn't come up with a quick solution to moving the bullet down. ul li {list-style-type: disc; list-line-height: 130%; width: 250px; vertical-align: top; } Another alternative is to style the list with bullet background images... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bob Salsburg Sent: Friday, September 28, 2007 10:10 PM To: css-d@lists.css-discuss.org Subject: [css-d] (IE7) Bullets shift downward on items that wrap when width is applied http://www.christchurchgastonia.org/bullets.html I lifted these two lists out of my page to troubleshoot style elements, etc. I even embedded the relevant styles in the header. It appears that, in IE7 (gr), the bullets shift to the last line in a wrapped item. So, I present this simplified example for your perusal. Browsers that work are legion: All in fact - well, it wouldn't surprise me if IE6 was broken too. I don't have it. Bob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (IE7) Bullets shift downward on items that wrap when width is applied
I haven't actually used that fix, myself, so there may be issues with it. I think the idea of using a div to constrain the width of the ul is probably best...also using background images as bullets will work nicely and provide some enhanced graphic options for the bullets... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Philippe Wittenbergh Sent: Saturday, September 29, 2007 8:40 PM To: CSS-D Subject: Re: [css-d] (IE7) Bullets shift downward on items that wrap when width is applied On Sep 29, 2007, at 9:58 PM, Rick Faircloth wrote: Applying vertical-align: top; moved the bullet to the top of the text rows for each li...however, the bullet is a little too high for me and I didn't come up with a quick solution to moving the bullet down. ul li {list-style-type: disc; list-line-height: 130%; width: 250px; vertical-align: top; } I hesitated to mention that workaround, as I have once run into some issues with that one, but I don't remember what it was, and I can't find me test file anymore. I think it had something to do with the bullet in one-line list-items being displayed incorrectly. 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/ 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] PC laptop with IE7 and XP quirks - SITE CHECK PLEASE
Got a site link, Sandy? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Sandy Sent: Tuesday, September 25, 2007 2:26 PM To: CSS discuss Subject: Re: [css-d] PC laptop with IE7 and XP quirks - SITE CHECK PLEASE and here are the links to the style sheets http://www.claimanalytics.com/TEST3/css/ie7-hacks.css http://www.claimanalytics.com/TEST3/css/ie6-hacks.css http://www.claimanalytics.com/TEST3/css/claimanalytics.css thanks again, Sandy I have a *strange* situation I hope someone out there can help with! One of the users of this site is using a PC laptop with IE7 and XP, and he is seeing problems that 3 other users on different XP IE7 combos can't replicate. http://www.claimanalytics.com/TEST3/theproblem.gif Browsercam doesn't see it http://www.browsercam.com/public.aspx?proj_id=380104 and neither does the Browsercam zombie XP. He has tried clearing the cache, in case he was seeing some artifact of an old style sheet, and that didn't help. Any idea of what may be going on? THANK YOU! Sandy __ 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] PC laptop with IE7 and XP quirks - SITE CHECK PLEASE
Very good! I was just about to email you and tell you that I wasn't seeing any problem with my IE7/XP setup. Glad you got it worked out... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Sandy Sent: Tuesday, September 25, 2007 4:26 PM To: Rick Faircloth; 'CSS discuss' Subject: Re: [css-d] PC laptop with IE7 and XP quirks - SITE CHECK PLEASE I figured it out - the user had his text set to largest and it made things go a bit wonky. A few little changes and we are ok now! thanks for being out there Sandy here are some problem pages: http://www.claimanalytics.com/TEST3/services.shtml http://www.claimanalytics.com/TEST3/contact.shtml http://www.claimanalytics.com/TEST3/reserving.shtml and here are the links to the style sheets http://www.claimanalytics.com/TEST3/css/ie7-hacks.css http://www.claimanalytics.com/TEST3/css/ie6-hacks.css http://www.claimanalytics.com/TEST3/css/claimanalytics.css I have a *strange* situation I hope someone out there can help with! One of the users of this site is using a PC laptop with IE7 and XP, and he is seeing problems that 3 other users on different XP IE7 combos can't replicate. http://www.claimanalytics.com/TEST3/theproblem.gif Browsercam doesn't see it http://www.browsercam.com/public.aspx?proj_id=380104 and neither does the Browsercam zombie XP. He has tried clearing the cache, in case he was seeing some artifact of an old style sheet, and that didn't help. Is it possible that our user has his text size set to largest? Could that do it? Is there something else in his settings that could be causing this? thanks! Sandy __ 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] list markers not showing up in ie7
Sandy - for some reason padding-left didn't affect the bullets, however, margin-left did. Try margin-left... Rick -Original Message- From: Sandy [mailto:[EMAIL PROTECTED] Sent: Monday, September 24, 2007 9:56 AM To: Rick Faircloth; CSS discuss Subject: Re: [css-d] list markers not showing up in ie7 Rick - thanks so much for taking the time to look at this for me! I have changed the ie7 hacks styles to .content ul { padding-left : 13em } .content ol { padding-left : 13em } .content li { margin-left : 30px } http://www.claimanalytics.com/TEST2/css/ie7-hacks.css Now, when I check this in browsercam http://www.browsercam.com/public.aspx?proj_id=379734 it looks like it didn't work. Am I seeing a cached page? Is it working for the rest of the world? Should I change the css - take out the ul and ol styles? thanks! Sandy __ 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] list markers not showing up in ie7
Oh, nevermind... I see that you did put margin-left on the li's... When I put padding-left on the ol and ul, it didn't affect the bullets...it just adding padding to the left... Taking the padding off didn't have any effect on the bullets, either...position or visibility. I just realized, however, that I'm not taking into account your .content class... I see that your ol and ul have a float:right; on them...do you need that on the lists? -Original Message- From: Sandy [mailto:[EMAIL PROTECTED] Sent: Monday, September 24, 2007 9:56 AM To: Rick Faircloth; CSS discuss Subject: Re: [css-d] list markers not showing up in ie7 Rick - thanks so much for taking the time to look at this for me! I have changed the ie7 hacks styles to .content ul { padding-left : 13em } .content ol { padding-left : 13em } .content li { margin-left : 30px } http://www.claimanalytics.com/TEST2/css/ie7-hacks.css Now, when I check this in browsercam http://www.browsercam.com/public.aspx?proj_id=379734 it looks like it didn't work. Am I seeing a cached page? Is it working for the rest of the world? Should I change the css - take out the ul and ol styles? thanks! Sandy Tinkering around with css in IE7's Developer Toolbar, I was able to get the list elements (number and disc) to show up by adding margin-left: 30px; to the li's in each list. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Sandy Sent: Monday, September 24, 2007 9:01 AM To: CSS discuss Subject: [css-d] list markers not showing up in ie7 Help Please! I have a page http://www.claimanalytics.com/TEST2/x.shtml with styles here http://www.claimanalytics.com/TEST2/css/claimanalytics.css The page has 2 lists, a ul and an ol. The markers were not showing up in IE6 and IE7. I have got them appearing now in IE6 by adding some padding-left to a IE6 hacks style sheet http://www.claimanalytics.com/TEST2/css/ie6-hacks.css but the same padding added to and IE7 hacks style sheet does nothing. I have tried adding way more, and the lists move in, but the markers still don't show up. http://www.claimanalytics.com/TEST2/css/ie7-hacks.css Can anyone think of what might be happening? I am absolutely stumped. Thanks so much for your help Sandy __ 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] list markers not showing up in ie7
I see why you need the float:right on the lists now... -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rick Faircloth Sent: Monday, September 24, 2007 10:16 AM To: 'Sandy'; 'CSS discuss' Subject: Re: [css-d] list markers not showing up in ie7 Oh, nevermind... I see that you did put margin-left on the li's... When I put padding-left on the ol and ul, it didn't affect the bullets...it just adding padding to the left... Taking the padding off didn't have any effect on the bullets, either...position or visibility. I just realized, however, that I'm not taking into account your .content class... I see that your ol and ul have a float:right; on them...do you need that on the lists? -Original Message- From: Sandy [mailto:[EMAIL PROTECTED] Sent: Monday, September 24, 2007 9:56 AM To: Rick Faircloth; CSS discuss Subject: Re: [css-d] list markers not showing up in ie7 Rick - thanks so much for taking the time to look at this for me! I have changed the ie7 hacks styles to .content ul { padding-left : 13em } .content ol { padding-left : 13em } .content li { margin-left : 30px } http://www.claimanalytics.com/TEST2/css/ie7-hacks.css Now, when I check this in browsercam http://www.browsercam.com/public.aspx?proj_id=379734 it looks like it didn't work. Am I seeing a cached page? Is it working for the rest of the world? Should I change the css - take out the ul and ol styles? thanks! Sandy Tinkering around with css in IE7's Developer Toolbar, I was able to get the list elements (number and disc) to show up by adding margin-left: 30px; to the li's in each list. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Sandy Sent: Monday, September 24, 2007 9:01 AM To: CSS discuss Subject: [css-d] list markers not showing up in ie7 Help Please! I have a page http://www.claimanalytics.com/TEST2/x.shtml with styles here http://www.claimanalytics.com/TEST2/css/claimanalytics.css The page has 2 lists, a ul and an ol. The markers were not showing up in IE6 and IE7. I have got them appearing now in IE6 by adding some padding-left to a IE6 hacks style sheet http://www.claimanalytics.com/TEST2/css/ie6-hacks.css but the same padding added to and IE7 hacks style sheet does nothing. I have tried adding way more, and the lists move in, but the markers still don't show up. http://www.claimanalytics.com/TEST2/css/ie7-hacks.css Can anyone think of what might be happening? I am absolutely stumped. Thanks so much for your help Sandy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-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] list markers not showing up in ie7
After adding margin-left:30px to all li's, everything looks good. If I go back and add padding-left:13em to the ol, the ol list gets pushed down a line. Then adding padding-left:13em to the ul, nothing changes visually, but the padding just extends out to the left. Position and visibility of the bullets is the same as well as the li's of the ul. Do you need padding-left on the ol and ul? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rick Faircloth Sent: Monday, September 24, 2007 10:16 AM To: 'Sandy'; 'CSS discuss' Subject: Re: [css-d] list markers not showing up in ie7 Oh, nevermind... I see that you did put margin-left on the li's... When I put padding-left on the ol and ul, it didn't affect the bullets...it just adding padding to the left... Taking the padding off didn't have any effect on the bullets, either...position or visibility. I just realized, however, that I'm not taking into account your .content class... I see that your ol and ul have a float:right; on them...do you need that on the lists? -Original Message- From: Sandy [mailto:[EMAIL PROTECTED] Sent: Monday, September 24, 2007 9:56 AM To: Rick Faircloth; CSS discuss Subject: Re: [css-d] list markers not showing up in ie7 Rick - thanks so much for taking the time to look at this for me! I have changed the ie7 hacks styles to .content ul { padding-left : 13em } .content ol { padding-left : 13em } .content li { margin-left : 30px } http://www.claimanalytics.com/TEST2/css/ie7-hacks.css Now, when I check this in browsercam http://www.browsercam.com/public.aspx?proj_id=379734 it looks like it didn't work. Am I seeing a cached page? Is it working for the rest of the world? Should I change the css - take out the ul and ol styles? thanks! Sandy Tinkering around with css in IE7's Developer Toolbar, I was able to get the list elements (number and disc) to show up by adding margin-left: 30px; to the li's in each list. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Sandy Sent: Monday, September 24, 2007 9:01 AM To: CSS discuss Subject: [css-d] list markers not showing up in ie7 Help Please! I have a page http://www.claimanalytics.com/TEST2/x.shtml with styles here http://www.claimanalytics.com/TEST2/css/claimanalytics.css The page has 2 lists, a ul and an ol. The markers were not showing up in IE6 and IE7. I have got them appearing now in IE6 by adding some padding-left to a IE6 hacks style sheet http://www.claimanalytics.com/TEST2/css/ie6-hacks.css but the same padding added to and IE7 hacks style sheet does nothing. I have tried adding way more, and the lists move in, but the markers still don't show up. http://www.claimanalytics.com/TEST2/css/ie7-hacks.css Can anyone think of what might be happening? I am absolutely stumped. Thanks so much for your help Sandy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-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] list markers not showing up in ie7
Sandy... I put your html and css on a test site on my server and prepared to make changes...however, the lists worked perfectly to start with! Look here: http://code_tests.whitestonemedia.com/sandy/test2/x.shtml My first thought...path to IE7 css stylesheet correct? And check browsercam here: http://www.browsercam.com/view.aspx?proj_id=379846 Now I modified the IE 7 css stylesheet path for my folder structure in the html...so it may not be appropriate for you. Double-check that... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Sandy Sent: Monday, September 24, 2007 3:15 PM To: CSS discuss Subject: Re: [css-d] list markers not showing up in ie7 WHAT is going on?!! If I add the style to each individual li http://www.claimanalytics.com/TEST2/x30px.shtml the list markers show in ie7 http://www.browsercam.com/public.aspx?proj_id=379833 but if I add the style to a hacks style sheet http://www.claimanalytics.com/TEST2/x.shtml links to http://www.claimanalytics.com/TEST2/css/ie7-hacks.css the list markers don't show up!!! http://www.browsercam.com/public.aspx?proj_id=379830 Do I have to do this? Does each li need the same style added to it, over and over, to get past this ie7 bug? Is there some other, easier way? Thanks Rick, for finding what worked. Any idea of why this won't work with a remote style sheet, but only with the style applied one at a time, locally? Sandy After adding margin-left:30px to all li's, everything looks good. If I go back and add padding-left:13em to the ol, the ol list gets pushed down a line. Then adding padding-left:13em to the ul, nothing changes visually, but the padding just extends out to the left. Position and visibility of the bullets is the same as well as the li's of the ul. Do you need padding-left on the ol and ul? Rick, Thanks again for taking all this time to help me work this out. I have taken out the padding on both the ol and the ul. The only style on http://www.claimanalytics.com/TEST2/css/ie7-hacks.css is .content li { margin-left : 30px } but it doesn't seem to work. http://www.browsercam.com/public.aspx?proj_id=379830 Did you add margin-left:30px to all li's locally? Style each one? How did you get this to work? Could you possibly post the page somewhere? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] I give up! Can someone please tell me how to fix this?
Hi, all. If you'll take a look at http://www.rickfaircloth.com/cfm/calendar_add.cfm in FF, you'll see the form sticking out at the bottom. IE 6 7 are perfect. I've tried every trick I can think of and fine to fix this, but nothing's worked. - overflow: hidden; height: 1% - the clearfix method - combination the two above methods - etc., etc. Can someone provide a solution or tell me if I'm doing anything that's complicating the fix with my layout div's? Thanks a billion! Rick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I give up! Can someone please tell me how to fix this?
Thanks for the reply, Dan... Your changes did fix the problem in FF. Now, I've just got some alignment issues in IE 6 7. I'll work on those and see what I can do. What is the key to the correction? Or was it a combination of all the changes that made it work? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Dan Dorman Sent: Wednesday, August 29, 2007 4:50 PM To: Rick Faircloth Cc: CSS Discuss Subject: Re: [css-d] I give up! Can someone please tell me how to fix this? On 8/29/07, Rick Faircloth [EMAIL PROTECTED] wrote: Can someone provide a solution Here's what I did to get it looking decent in FF: #page_wrapper: ditched overflow:auto #body_wrapper: ditched height: 100% #menu_wrapper: ditched height: 100% #right_wrapper: ditched float: left and height: 100% #right_content: added margin-left: 240px (may need to be adjusted slightly) I'm not sure how this will affect the layout in IE, or what the ramifications for other pages on your site will be if they're using the same CSS, but maybe it will give you some ideas. :Dan Dorman __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I give up! Can someone please tell me how to fix this?
Thanks for the insight... Rick -Original Message- From: Dan Dorman [mailto:[EMAIL PROTECTED] Sent: Wednesday, August 29, 2007 8:10 PM To: Rick Faircloth Cc: CSS Discuss Subject: Re: [css-d] I give up! Can someone please tell me how to fix this? On 8/29/07, Rick Faircloth [EMAIL PROTECTED] wrote: What is the key to the correction? Or was it a combination of all the changes that made it work? The main thing seemed to be getting rid of the float on the right-hand content. The other changes were all made to supplement that; for example, declaring height: 100% on various elements became moot after that change was made. :Dan Dorman __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Now why we want to use strong instead of b?
I haven't quite figured out why codestrong/code came into use instead of codeb/code. The latter is so much short and easier to type? Why did that change occur? Rick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Nav container: Collapses in IE6
http://www.w3schools.com/browsers/browsers_stats.asp -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Red Rooster Sent: Friday, August 24, 2007 10:55 AM To: CSS Discuss Subject: Re: [css-d] Nav container: Collapses in IE6 Thank guys, I added the 1% height and it works great. I used to kind of blow off IE6, but a client was having too many of his customers have problems with his site. I'm glad I check for it now, even thought it's __! (you fill in the blank) There is a list somewhere of browser stats around the web, do you know if it (them) ? Thanks again, - RR On 8/24/07, Barney Carroll [EMAIL PROTECTED] wrote: Sorry RR, That's the result of my partial advice (it's debateable as to whether or not it's good practice but I always treat IE bugs as exceptions to be dealt with as and when they come up): IE needs the abstract MS-proprietary property of 'hasLayout' to apply conventional box model logic in some cases. There are two ways of dealing with this depending on how you feel about 'clean' coding: . You can give it the non-W3-spec MS CSS zoom:1, and all other browsers will simply not process the rule (the downside being invalid CSS). . You can give it height:1%, and still have entirely valid CSS but having given every browser a piece of what makes very little sense (but it won'y screw anything up in rendering terms). Either way, IE6 will then render like a sane creature. Regards, Barney __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I've got the IE blues...
I prefer top-posting as well... scrolling down constantly is a pain... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Monday, July 30, 2007 7:32 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] I've got the IE blues... John Lockerbie wrote: PS Fwiw, top-posting is making it impossible for anyone to follow this thread-- write below (rather than above) those you reply to on the list That fad is your personal preference. Many of us dislike scrolling down through long quotes to see whether the current posting has any content or is of interest. Many of us prefer so-called top-posting or interleaved posting. But I wouldn't presume to force either upon you. Bruce __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] white or #FFFFFF?
Jukka... I don't think you're in a position to tell Tedd that his question is wasting *his* time. If this list is for anything, it's about learning what work and what doesn't and *why*... If you think it's a waste of *your* time, then don't read or respond to the thread. But this is definitely on-topic and I don't think you have any right to dictate to Tedd whether or not a question he wants to ask is worthy...even without URL's or specific examples. He just asked if anyone had experienced the problem and knew of an explanation. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jukka K. Korpela Sent: Tuesday, July 10, 2007 10:31 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] white or #FF? On Tue, 10 Jul 2007, tedd wrote: White won't work, but #FF will, why? Please stop wasting time with the issue, unless you can provide URLs of sample pages that demonstrate the problem. If you think you have really _isolated_ the problem, then it should be easy to set up the demo pages. But I'm pretty sure it's just a misunderstanding. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [ADMIN] Re: white or #FFFFFF?
This entire list etiquette argument could have been avoided if Jukka hadn't broken what is the most fundamental rule of lists... be civil... He criticism was harsh and unwelcome and would do far more harm to the CSS cause than any somewhat confusing and perhaps inconclusive discussion concerning white vs #fff. He could have easily asked if Tedd had any examples posted, and, if not, he could have civilly asked if he would. Is there also an appropriate rebuff for Jukka for starting the fight in the first place? (It's always the one who throws the second punch that gets punished, isn't it...) Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Alex Robinson Sent: Tuesday, July 10, 2007 12:20 PM To: css-d@lists.css-discuss.org Subject: [css-d] [ADMIN] Re: white or #FF? Sigh. I went off to peel some mangoes and didn't get round to posting the message that follows this. And I return to find it all kicking off. All I have to add to my message is that people should not engage in arguments about list etiquette on the list. Since it's part of the list etiquette not to do so. http://www.css-discuss.org/policies.html Jukka's comment may have been somewhat harshly worded but what he said is correct. In fact I had just written to Tedd offlist saying much the same thing. I repeat my request to Tedd to post some sort of example because either: a) it really is a bug (and if so, we really should know about it) b) it's not a bug but rather an oversight on Tedd's part and without resolution future searchers of the list archives / internet will find these misleading suggestions that have been bandied about. Alex Let the Mango Robinson css-d moderator My original message (still scintiallating and worthy of repeated reading) follows: White won't work, but #FF will, why? Please stop wasting time with the issue, unless you can provide URLs of sample pages that demonstrate the problem. If you think you have really _isolated_ the problem, then it should be easy to set up the demo pages. But I'm pretty sure it's just a misunderstanding. Jukka is absolutely spot on. If you can't post the actual page(s), make a copy of what you're working on, remove the bits you need to, and post that (preferably to a server rather than as text in your post). It may even help you track down what's going on. You know, the whole reduce to the simplest possible code that triggers the problem thing ;) http://www.positioniseverything.net/articles/mys-bug.html (This goes for everyone, not just Tedd) If someone can provide an actual working example of #FF working but white not, can they please post it? And not spew uncorroborated and unreferenced info about mixing values on to the list... At 10:27 -0400 10/7/07, tedd wrote: That sounds reasonable and the second read makes me think what I've found is just one of a million other peculiarities re IE 6 that has probably been found in some form or another before. So have you fixed the problem or are you still experiencing it? I can't tell from your post. If you are, please do post a reduced test case for us to see. Alex #ffey on the moon Robinson css-d moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal Navigation
However... removing those 5 pixels would probably throw off the alignment in IE... Hmmm... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gpalz Sent: Sunday, July 08, 2007 4:55 PM To: css-d@lists.css-discuss.org Subject: [css-d] Horizontal Navigation Hello List Members, I'm in the process of designing my website with CSS for the first time. I have a CSS sub navigation using an icon graphic only (no text). In IE 7 everything aligns pretty good. However, in Firefox 2.0 (win XP) the icons seem to be shifted about 5-6 pixels downward. Only the top 2/3 of the icon is showing. It seems the li tag is being pushed downward. Any ideas? - George NOTES: I added the black border around the ul tag for visual purposes. In the list, I'm using a transparent spacer.gif to generate the hover state and showing the actual icon with the background element. Firefox vs IE: http://gpalzproductions.com/v3/subnav.jpg PAGE: http://gpalzproductions.com/v3/gallery.html CSS (see /* PORTFOLIO SUB NAVIGATION */ code block): http://gpalzproductions.com/v3/stylesheet/style3b.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal Navigation
Hi, George... Just a stab in the dark here, but I was looking at your subnav.gif image and was wondering if you took off 5 pixels of the bottom so that the bottom black area matched the border between the other colors, would the gray area then display properly? Taking off 5 pixels would make the total image height 66 and the 5 pixels you remove could account for 5 pixel shift downward... I can't test this idea since I can't substitute a cropped image... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gpalz Sent: Sunday, July 08, 2007 4:55 PM To: css-d@lists.css-discuss.org Subject: [css-d] Horizontal Navigation Hello List Members, I'm in the process of designing my website with CSS for the first time. I have a CSS sub navigation using an icon graphic only (no text). In IE 7 everything aligns pretty good. However, in Firefox 2.0 (win XP) the icons seem to be shifted about 5-6 pixels downward. Only the top 2/3 of the icon is showing. It seems the li tag is being pushed downward. Any ideas? - George NOTES: I added the black border around the ul tag for visual purposes. In the list, I'm using a transparent spacer.gif to generate the hover state and showing the actual icon with the background element. Firefox vs IE: http://gpalzproductions.com/v3/subnav.jpg PAGE: http://gpalzproductions.com/v3/gallery.html CSS (see /* PORTFOLIO SUB NAVIGATION */ code block): http://gpalzproductions.com/v3/stylesheet/style3b.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] transparent pngs don't show transparent in IE6
Hi, Chris... I'm using a script from TwinHelix.com, called IE PNG Fix v1.0 RC4... that's the current version. It uses a CSS behavior modification to allow png's to work in IE 5.5 IE 6. It's working perfectly... Go to www.TwinHelix.com and mouse-over CSS in the menu and you'll see the link. Check it out and let me know if you need some help implementing it. Once it's working you'll never know it's there and you'll never want to leave home without it! :o) Rick (PS - Works on img's and background img's, too. However, a limitation of IE 6 won't allow the IE PNG Fix solution to react to positional attributes when an image is used as a background image of a div... but you can work around that...) -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Christopher Blake Sent: Friday, July 06, 2007 7:01 AM To: css-d Subject: [css-d] transparent pngs don't show transparent in IE6 HI, Hopefully if you check this page in any browser it should work ok. http://www.3pointdesign.com/websites2.html However in IE6 the transparency of the pngs does not work. I can go back and add the right background colour to all the images but would rather know if there was a fix, or whether that is the only option. Thanks Christopher Blake [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] html background-color acting against body background-color -- P.S.
Hi, Michael... I'm not sure how to answer all your questions, but I think That IE6 responds to height and FF2, and perhaps IE7, respond to min-height... try that and see what happens... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Leibson Sent: Tuesday, July 03, 2007 9:30 AM To: css-d@lists.css-discuss.org Subject: [css-d] html background-color acting against body background-color -- P.S. P.S. I subsequently found that: style type=text/css html {background-color: green;} body {height: 100%; background-color: blue;} /style DID display the body background-color in IE6 -- for the entire viewport (minus a default body margin) -- but not in Firefox 2.0. Is the attribute height only valid in IE6 Quirks mode, or is there some other reason for this discrepancy? I also found that when I used this style: style type=text/css html {background-color: green;} body {background-color: blue;} /style /head body text/body /html -- that is, with no height: 100% given to the body -- that both browsers displayed the body background-color only as a narrow band behind the text. Thanks, again, for any tips/comments you'd care to share. - Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Does line-height override height in IE6 and lower?
Hi, Matt... I've been wrestling with a similar issue, although with different elements. I have some lines of text that vertically space well in FF2 and IE7, but IE6 was spacing them too far apart. What solved my problem and got IE6 to react to my line-height spec was to give the containing div and line-height attribute. If I used a div as a spacing element, such as div style=height:6px; width:6px;/div, FF2 and IE7 displayed good spacing. However, IE6 displayed a larger vertical gap. If I changed the code and added a line-height value, such as div style=height:6px; width:6px; line-height:12px;/div, then IE6 displayed the same vertical spacing as FF2 and IE7. It solved the problem for me. Hopefully, an application of this solution particular to your problem can help you, too... it was really driving me crazy for awhile. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson Sent: Saturday, June 30, 2007 2:13 PM To: css-d Subject: [css-d] Does line-height override height in IE6 and lower? Hi all - It may turn out that I need to describe the particulars of my problem, but first I thought I'd try paring the case down to just its bare essentials. I have an unordered list. Each list item is a single word long and has a height of 12px applied to it. However, in IE6, the base line-height I've applied earlier in the document (which is part of a collection of general browser reset rules I use for all my projects) is calculating to a value larger than 12px. In all browsers except IE6 and lower, changing the height does what I expect. That is, if I make the height of the list element 2px, all but 2px of the list element's content disappears. In IE6, because the line-height is calculating to a larger value, changing the height has no effect. Is this part of an already documented bug? I've been googling for a good hour trying to find another documented instance of this, and I can't find anything. Thanks for your help! Matt __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering elements via margin: auto
Hi, Michael... I'm new to designing layouts via CSS, too, but maybe I can help here. Let's break down margin: 0 auto;... That's really short hand for Margin-top: 0; Margin-bottom: 0; Margin-left: auto; Margin-right: auto; When used in that particular shorthand, the first place attribute, in this case 0 is for the top and bottom margins. The second place attribute, in this case, auto, is for the right and left margins. So what you're doing, in effect, is creating 0 margin or no margin for the top and bottom of the container and margins for the right and left of the container that are equal in size based on the size of the window showing your page. Concerning the body { text-align: center; } CSS, it's true, if my understanding is correct that all text in the body will be centered with that code, but that's why the others recommended putting text-align: left in the #container code. Since everything on the page will be placed inside the #container, all text on the page will then be left-justified. Does this make sense? I hope all my comments are correct and helpful. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Leibson Sent: Saturday, June 30, 2007 11:23 AM To: Josue Martinez Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] centering elements via margin: auto Thank-you, Josue, and also David, for your helpful replies. I've come across this code before, but not - yet - in Eric's book (it's a pretty dense study, for someone starting from scratch!). I gather that {margin 0 refers to positioning, and (maybe) means the margin should be at maximum left. But I don't understand how 0 and auto work together. I've also read that body {text-align: center;} requires explicit text-align statements in all children where one doesn't want text to be aligned to centre. I've experienced a few frustrations with Eric's book: for one, the Index is pretty sparse -- for example, I can't find any reference to 'centering a block element vertically'. As well, there are almost no references to how to solve particular problems (eg, vertically centering a block element) -- I had to find those in other texts (eg, Web Design In A Nutshell). That's why I greatly appreciate these replies! All the best, Michael Hey, Michael, create a container for your layout (a div that will house everything else). Use this code, assuming that div is called container body {text-align: center;} #container {margin 0 auto; text-align: left;} This is covered in the book. Maybe in the chapter on positioning. Hope this helps. Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Styling for Fieldsets and Legends
Hi, all... Is there any way to bring consistent styling to fieldsets and legends between IE and FF? For now I'm using separate stylesheets for IE6, IE7, and FF2. I'd like to have the look that default IE 7 applies, however, I'd like to change the border color. That causes square corners. How do I keep the rounded corners? Also, how to get the rounded corners in FF? Thanks for any insight, tutorials, etc. Rick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling for Fieldsets and Legends
Hi, Jason Jim... Don't have a URL to point you to, yet... sorry. Thanks for the pointers concerning the images approach, Jim. I was trying to avoid getting involved with images... I did just notice that even sitepoint.com, which first intrigued me with their use of fieldset and legend for other than form presentation has square corners. So there probably is no easy way to do it. (I just wonder how IE7 does it by default without images? What method does IE 7 use to curve the corners? Anyone know? Rick PS - Boy I just hate the css-discuss makes me have to remember to click Reply to all instead of just Reply when I want to send to the list. I'm not sure why anyone would typically want or need to reply off-list... -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jason Crosse Sent: Monday, June 25, 2007 11:33 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Styling for Fieldsets and Legends Rick Faircloth wrote: Hi, all... Is there any way to bring consistent styling to fieldsets and legends between IE and FF? For now I'm using separate stylesheets for IE6, IE7, and FF2. I'd like to have the look that default IE 7 applies, however, I'd like to change the border color. That causes square corners. How do I keep the rounded corners? Also, how to get the rounded corners in FF? Thanks for any insight, tutorials, etc. Rick Hi Rick, Do you have a URL we could look at? -- http://antanova.blogspot.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tricky layout: centred site with bg images stretching to the left
Can we view the problem site? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Simone Hutchinson Sent: Wednesday, June 20, 2007 5:35 AM To: css-d@lists.css-discuss.org Subject: [css-d] Tricky layout: centred site with bg images stretching to the left Hello, I am working on a site build and cannot work out how to code a design feature _if_ the site has to be centred. I wonder if anyone knows how to do this: (I have the go ahead from my superior to make the site left-aligned, but this is a compromise. the site needs to be centred for it to be viewable at 800X600. I'm too curious to let this problem go!) The layout is a centred box. There are 3 content sections in rows. Each has a heading and each has a horiztonal rule after it. Both the heading and the horizontal rule have background shading that stretches out to the left edge of the screen. If the site is centred, how can I make sure that these background images will repeat to the leftmost edge of the viewport when the browser is resized? or if the site is viewed on a large resolution monitor (21 plus). and, if the browser is resized to 800X600 the site must be centred in order to fit, as it is 798px wide. Any tips are most welcome! I've tried using absolute positioning but I think I''m too confused now! Kind regards, Simone -- Simone Hutchinson * e: [EMAIL PROTECTED] m: +44 (0)7791 010919 w: http://www.wearevivo.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Ideas for handling text with CSS
Hi, Suzanne... I'm new to CSS, but managed to get a working solution with two columns of info using CSS only. The CSS that's inline can be put into your stylesheet, but when I'm first coding, I'll code inline a lot of times then put it in the stylesheet after I'm sure it works and I find a pattern. This was actually the first total CSS site I've done (and I'm not averse to using tables) and I'm still developing it. Now, why I couldn't put text-align:right; in the div style for the first group, I don't know...but it wouldn't work...the text of the first column would align left. (?) Hope this helps! Rick Anyway here's some example code from a site I'm working on: div style=line-height:12px; width:150px; padding-right:15px; float:left; p style=text-align:right;bLiberty County/b/p p style=text-align:right;bEffingham County/b/p p style=text-align:right;bMcIntosh County/b/p p style=text-align:right;bChatham County/b/p p style=text-align:right;bFax/b/p p style=text-align:right;bEmail/b/p p style=text-align:right;bOwner/b/p p style=text-align:right;bArea Representative/b/p /div div style=line-height:12px; width:311px; text-align:left; float:left; p912-876-/p p912-826-/p p912-437-/p p912-355-/p p912-876-/p pa href=mailto:[EMAIL PROTECTED][EMAIL PROTECTED]/a/p pTom Jackson/p pDonna Jackson/p /div -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Wednesday, June 20, 2007 11:00 AM To: css-d@lists.css-discuss.org Subject: [css-d] Ideas for handling text with CSS Hi everyone, I was wondering if anyone has a link or information as how to best handle text with CSS. By text I mean a line of text that may include 3 pieces of information, like name, phone, and email address. In the past, I always used tables for this, but want to handle this with the use of CSS if possible. I found a site that mentioned word-spacing, but that won't work because I don't want a large amount of spacing between the first and last name. Any suggestions or links are greatly appreciated. Thanks! ;-) Suzanne __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Best way for text when enlarged
What establishes the baseline size of 100% ? Do all browsers use the same baseline size? And do all browsers react to percentages the same? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Luc Sent: Wednesday, June 20, 2007 4:03 PM To: trevor on css-discuss Subject: Re: [css-d] Best way for text when enlarged Good afternoon trevor, It was foretold that on 20/6/2007 @ 12:09:17 GMT-0700 (PDT) (which was 16:09:17 where I live) trevor bayliss would write: snipped a bit On the body part of the css at the moment it is font 11px -what should I change it to some percent value? I use a minimum of 76%. -- Best regards, Luc _ Powered by The Bat! version 3.99.3 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. Every time history repeats itself the price goes up. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Best way for text when enlarged
Thanks for the info, Rob! Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Robert O'Rourke Sent: Wednesday, June 20, 2007 5:51 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Best way for text when enlarged There is a good argument for setting the font-size on the body tag to 100% every time, it sets a base level for the font-size that is readable to most everyone and won't affect people who have their minimum font-size set to anything other than the default. As for the rest of the text e.g. the text in paragraphs and headings and so on you can set their font-sizes relative to the body default using ems or %. There are some differences between browsers though not a lot, it's rarely an issue for me so I haven't really looked into it fully. Check out Eric Meyer's CSS reset reloaded: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ It's a great place to start as all your styling, especially in terms of typography as the majority of browsers will then have the same starting defaults and you can set your font-sizes to your hearts content on the elements that need it. You do need to explicitly specify every bit of styling you need so you can't rely on the old browser defaults if you do this but on the plus side you know exactly where you stand to begin with. Rule of thumb is to avoid fixed px sizes on fonts in general as they wont be resizable in = IE6. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site breaking in IE7
Looks good in IE7 here... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Joanne Sent: Friday, June 15, 2007 7:04 PM To: 'CSS-discuss' Subject: [css-d] Site breaking in IE7 I have built a site which looks fine on my computers in IE6, IE7, Firefox Safari, but someone has emailed me a screenshot saying it looks wrong in IE7 on their computers. www.marmongpointmarina.com.au What's happening is that on this other person's computer, there's a large white gap at the top of the content because it appears there isn't enough room for the left the right columns. Can anyone replicate this problem and does anyone know how to fix it? Joanne __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hasLayout issue in IE (6/7, at least)
Not seeing the white box on IE 7, Win XP... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Sasha Gerrand Sent: Friday, June 15, 2007 2:48 AM To: CSS-Discuss List Subject: [css-d] hasLayout issue in IE (6/7, at least) Hi, I'm having an issue with the way the CSS is being rendered on a page[1] I am designing. For some reason, it looks like the DIV that is the container for the text, nested within the #content DIV is extending and covering the side navigation with a white box. Can anyone suggest what a good fix may be for this? [1] http://abs.austbrokers.com.au:8080/home -- Cheers, Sasha __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Relationship between styles settings and stylesheets
Hi, all... That title is a little confusing, I know. What I would like to know is the relationship (perhaps hierarchy is better) between styles on a page or between a main stylesheet and a stylesheet, say, for just IE and one for the rest. What's the best way to set up say, a style for a fieldset? Would it be to have a css line for all browsers, fieldset { blah, blah, blah } followed by a conditional statement, if lte IE 7 ? I was doing some reading that suggested using various separate stylesheets for browsers. Is that considered best practice? Having an IE stylesheet and one for the other browsers or is it better just to use conditional statements? And while we're on the subject of conditional statements, how do you write an if / else statement and not just an if statement for css? I've seen plenty of if lte IE 7 statements, but not one that would use a style for IE if the browser is IE, *else* style for the other browsers. That would seem easiest to use... (pseudo code) if this browser is lte IE 7, then style this way, *else* style another way. Thoughts? Suggestions? Thanks, Rick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relationship between styles settings and stylesheets
Thanks, Mauricio! Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mauricio Samy Silva Sent: Thursday, June 14, 2007 7:02 PM To: Rick Faircloth; css-d@lists.css-discuss.org Subject: Re: [css-d] Relationship between styles settings and stylesheets From: Rick Faircloth [EMAIL PROTECTED] Subject: [css-d] Relationship between styles settings and stylesheets What I would like to know is the relationship (perhaps hierarchy is better) between styles on a page or between a main stylesheet and a stylesheet, say, for just IE and one for the rest. .. I was doing some reading that suggested using various separate stylesheets for browsers. Is that considered best practice? Having an IE stylesheet and one for the other browsers or is it better just to use conditional statements? - Hi Rick, The best practice is to avoid 'hacks', but if you cannot avoid, a good choice is to serve a completely separate Style Sheet for IE via conditional comments. Something like: link rel=stylesheet blah blah href=styles/main.css / !--[if lt IE 7] link rel=stylesheet blah blah href=styles/ie-hack.css / ![endif]--Regards, Maurício Samy Silva http://www.maujor.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Questions?
Hi, Jukka... If I'm not mistaken (being a fairly recent adopter of Firebug, myself), I believe that David wasn't using a technical term that you should look for when he mentioned Computed Style. He was simply referring to what Firebug would tell you is the resulting css after all the css rules that apply to an element are accounted for. Firebug is great at showing the css for a particular element, as well as settings an element has inherited from previous styles which affect the current element. Make sense? (And David, if I misunderstood you, don't hesitate to correct me!) Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jukka K. Korpela Sent: Tuesday, June 12, 2007 10:21 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Two Questions? On Tue, 12 Jun 2007, David Dorward wrote: (You can find out what the computed font size is using Firebug's dom inspector, switching to the Style tab, and picking Computed Style from the menu on the right hand side of Firebug). Could you please explain it slower? :-) I have recently installed Firebug, but its user interface is confusing. For example, if I enable Firebug, then right-click on something, select Inspect Element, then I get a view with tabs Console, HTML, CSS, Script, DOM, Net. But where do I really see the style sheet rules being applied? I select HTML, I get (on the right) the tabs Style, Layout, DOM, but the Style tab contains just the style sheet rule(s), e.g. font-size: 200%. I don't see anything resembling Computed Style. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Properly aligning div background for IE 6, IE 7, and FF
Hi, all... I'm wondering if anyone knows why and what to do about aligning a div background to the right top corner of a div. IE 7 and FF display it as expected...IE 6 just leaves it in the left upper corner. Here's the code: div class=section style=width:100%; height:200px; background:url(images/dove-section-bg.png) top right no-repeat; /div The class, section, just defines the class as margin:10px 0px 0px 16px; text-align:justify; If I can just get that blasted bird in the upper-right corner of my div, I'll be a happy coder! (For the moment...) Ideas, anyone? Work-arounds? Thanks, Rick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Quirks Comparison Chart?
Thanks, David! I'll check it out... Rick -Original Message- From: David Hucklesby [mailto:[EMAIL PROTECTED] Sent: Saturday, June 09, 2007 12:30 PM To: Rick Faircloth; css-discuss Subject: Re: [css-d] CSS Quirks Comparison Chart? On Thu, 7 Jun 2007 19:38:13 -0400, Rick Faircloth wrote: [...] Is there some nice chart somewhere that explains concisely what the coding differences are between those (and other) browsers that I have to consider? [...] Hopefully these will help: http://www.webdevout.net/browser-support http://www.westciv.com/style_master/academy/browser_support/index.html Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] FW: Mail delivery problems
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: Friday, June 09, 2006 11:43 AM To: [EMAIL PROTECTED] Subject: Mail delivery problems The recipient [EMAIL PROTECTED] had permanent fatal errors. While talking to 67.18.71.84: 550 Sender verify failed __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] A way to set a dynamic anchor in a div?
Hi, all... I'm working on an web-based office application, so I'm trying to put as much functionality on a single screen as possible. I've using scrolling div's for areas to add, update, and delete content. Everythings going well except for trying to place an anchor inside a div for client contact entries. I think I'm coding everything correctly...I've done this before, but the anchor was on a full page of html, not in a particular div. Is there some way I can target the anchor to affect the content in a particular div? I think that's why the anchor's not working, because it's not an anchor for the whole HTML page, just the content in that particular div. It's a dynamic ColdFusion-generated anchor, but I've done that before, too. The div just seems to ignore the anchor...do I need to give the div and id and target the id somehow? Ideas? Rick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] total centering
Hi, Phil... What's the purpose of this part of your container attributes? background: transparent url(/images/interface/column_background.gif) 24px 0 repeat-y; Thanks, Rick Hi Suzanne I normally put text-align: center; in the body tag. This takes care of IE5 browsers. body { margin: 0; padding: 30px 0 30px 0; font-family: Arial, Helvetica, sans-serif; text-align: center; } Then have a container wrapper around your webpage area with margin- left: auto, margin-right: auto. This centers properly in CSS. Note that you then re-set the text-align to left so that all subsequent text within the page is not centred. #container { width: 755px; margin: 0; margin-left: auto; margin-right: auto; padding: 0; background: transparent url(/images/interface/column_background.gif) 24px 0 repeat-y; text-align: left; } __ 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] total centering
Hi, Rahul...and thanks for the reply... Google for faux-columns. That's probably what Phil is trying to achieve. I would have thought the same thing, but he's got the background attribute set to transparent... wouldn't that mean it wouldn't be visible, and therefore not useful as a visual colum display? (Even though the gif is called column_background.gif...hmmm... background: transparent url(/images/interface/column_background.gif) 24px 0 repeat-y; Rick -Original Message- From: Rahul Gonsalves [mailto:[EMAIL PROTECTED] Sent: Friday, November 25, 2005 10:38 AM To: [EMAIL PROTECTED] Subject: Re: [css-d] total centering Rick Faircloth wrote: Hi, Phil... What's the purpose of this part of your container attributes? background: transparent url(/images/interface/column_background.gif) 24px 0 repeat-y; Thanks, Rick Hi Rick: Google for faux-columns. That's probably what Phil is trying to achieve. It's a simple gif, tiled vertically to simulate the appearance of two/three equal height columns, which expand to fit text dynamically. A List Apart has a good article on it. Also, search on this site - hicksdesign.co.uk, for the definitive way to vertically center a webpage. It's called (off top of head) Vertical Centering II - Now Even Better or somesuch. Google's your friend... Regards, Rahul. -- . . . . . . . . . . . . . . . . . . . . . . . . Rahul Gonsalves Make PNG, not War. . . . . . . . . . . . . . . . . . . . . . . . . __ 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] How to set background transparency?
Hi, all... Is there a way to control the transparency of the background color of a DIV? background:transparency 50% ??? Thanks, Rick __ 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] (Second Posting...anyone know?) How can I create a shadow around a div without the imageinside?
Any hints? See code below.. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Rick Faircloth Sent: Sunday, October 16, 2005 11:24 PM To: css-discuss Subject: [css-d] How can I create a shadow around a div without the imageinside? I'm trying to create a drop-shadow around a div. I want to put text in an inner div, but I can only get the shadow to show around the outside of the inner div if there's an image present. How can I change this code to create the shadow around the inner div without the image? Is it possible? Here's the code: DIV align=center DIV style=height:35; width:35; filter:shadow (color:gray, strength:5, direction:135); IMG src=white_square.gif border=1px solid black /DIV /DIV Thanks! Rick __ 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] (Second Posting...anyone know?) How can I create a shadow around a div without the imageinside?
I checked out another of the demos on the cssplay site and found this code, but I can't see what is creating the shadow...in the other code I tried, filter:shadow was used, but what in the code below creates the shadow? Rick .out { display:block; background:#bbb; border:1px solid #ddd; position:relative; margin:1em 0; } .in { text-align:center; background:#fff; border:1px solid #555; position:relative; padding:5px; font-weight:normal; } .ltin { left:-5px; } .tpin { top:-5px; } .narrow {width:8em;} /* change to suit */ h4 {font-weight:bold; color:#000;} -Original Message- From: David Laakso [mailto:[EMAIL PROTECTED] Sent: Monday, October 17, 2005 9:20 PM To: [EMAIL PROTECTED] Cc: css-discuss Subject: Re: [css-d] (Second Posting...anyone know?) How can I create a shadow around a div without the imageinside? __ 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] How can I create a shadow around a div without the image inside?
I'm trying to create a drop-shadow around a div. I want to put text in an inner div, but I can only get the shadow to show around the outside of the inner div if there's an image present. How can I change this code to create the shadow around the inner div without the image? Is it possible? Here's the code: DIV align=center DIV style=height:35; width:35; filter:shadow (color:gray, strength:5, direction:135); IMG src=white_square.gif border=1px solid black /DIV /DIV Thanks! Rick __ 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] How do I limit a div's height and force a scrollbar?
What would be the setting to limit a div's height and force it to use a scrollbar after it expands beyond 100px? max-height: 100px; ? Thanks, Rick __ 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] Anyway to get rid of the horizontal scrollbar at the bottom of a div?
? I want to keep the vertical scrollbar, but get ride of the horizontal scrollbar... Rick __ 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] New to CSS...Why isn't this horizontal?
Hi, all... I'm new to trying to do things with CSS...considering using CSS instead of tables and seeing what can be done. I'm trying to line up two DIV boxes horizontally. Instead, they are still vertical... What am I doing wrong? UL Style=display: inline-block; list-style-type: none LIDIV Style=top: 25px; left: 25px; height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI LIDIV Style=height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI /UL Thanks, Rick __ 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] New to CSS...Why isn't this horizontal?
Hi, Eric... That worked...I had to using float: left (IE 6)...display: inline-block didn't work...guess that works for other browsers? Thanks for the help! Rick -Original Message- From: Eric Shepherd [mailto:[EMAIL PROTECTED] Sent: Monday, September 12, 2005 1:10 PM To: [EMAIL PROTECTED] Cc: css-discuss Subject: Re: [css-d] New to CSS...Why isn't this horizontal? You have nothing set on the li elements to tell them to stack horizontally. You set display: inline-block on the ul, but the items inside the ul will stack as normal, which is vertically. Setting the display property on the ul will force it to sit horizontally with other block-level elements which are SIBLINGS (e.g. another ul after this one), but it won't cause the children (the lis) to display horizontally. Instead, take the display off of the ul and set it (or float:left) on the li elements. Then they will line up horizontally. On 9/12/05, Rick Faircloth [EMAIL PROTECTED] wrote: Hi, all... I'm new to trying to do things with CSS...considering using CSS instead of tables and seeing what can be done. I'm trying to line up two DIV boxes horizontally. Instead, they are still vertical... What am I doing wrong? UL Style=display: inline-block; list-style-type: none LIDIV Style=top: 25px; left: 25px; height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI LIDIV Style=height: 25px; width: 25px; margin: 5px; border: 1px solid black; /DIV/LI /UL Thanks, Rick __ 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/