Re: [css-d] Question about cross browser compatibility of max-width
A search on max-width ie scoped to within the last year returns numerous results, including this one: http://msdn.microsoft.com/en-us/library/ff405832(VS.85).aspxhttp://msdn.microsoft.com/en-us/library/ff405832%28VS.85%29.aspx If you wanted to be really thorough you could do the same for Safari and Opera, just to check. Skip Knox Boise State University On Wed, Apr 7, 2010 at 9:00 PM, David Laakso da...@chelseacreekstudio.comwrote: Claude Needham wrote: Some time, in the now distant past, I tried using max-width in a css project. The behavior was so quirky across browsers that I solved it another way. The numerous code samples suggested on this list lead me to believe that the situation has changed and that max-width is a very functional property. So I guess the question is: Are there any gotchas to look out for? Or, perhaps standard cross browser considerations when using it. I don't intend to go hog wild with it, but max-width could certainly have its place. Thanks for any input. Claude Most anything has its time and place. Support for same -- among some -- sometimes lags. You can join the avant-garde . Or, you can wait. It has always been your call, and it still is your call. Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Reset CSS
David, do you happen to have a list of those available CSS frameworks you went through? It might be of interest to several of us here. Skip Knox Boise State University But, yes. I think the general idea is you should roll your own. FWIW I went through all available CSS frameworks last year to come up with mine. It has saved me oodles of time and effort since... Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling forms with CSS
Same here. The form looks fine, although the Comments field protrudes a bit on the right. WRT the tabbing, I did eventually get to the radio buttons -- after tabbing past Submit, up to the navigation and by way of the email. Tab order! Skip Knox Boise State University On Mon, Mar 22, 2010 at 1:22 PM, David Hucklesby huckle...@gmail.comwrote: On 3/22/10 5:48 AM, Chad Chelius wrote: I've created a form page for a web site and have styled it using CSS. I've noticed that in Safari it looks as I would expect it to however when viewed in Firefox or IE it breaks, meaning that all of the fields I've formatted shift and even cover up some of the text in the form. I'd appreciate anyone's thoughts on this issue. The URL is at http://aj-procleaning.com/Contact/ Odd. In Safari 4 (Mac) this end, the last name field wraps to a second line. Is this what you expect? OTOH I am not seeing the behavior you describe, nor do I see any styling applied to the form fields in your CSS. Can you tell us on which browser(s) and OS you see this? BTW - I notice that tabbing through the form, I cannot reach the radio buttons... Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
Your question has more to do with HTML than CSS -- asking if using a paragraph tag is okay as long as it works -- but I'll respond anyway. There are two different kind of it works in our business. There's it works for me and there's it works across browsers. An important point about standards is to come up with a way that your code not only works across browsers but will continue to work even as browsers change. The notion is that if you write compliant code, and the community develops compliant browsers, everything will continue to work with little or no disruption. So the important question is not whether your approach works but whether your approach complies with the standards. I believe that was the purpose behind referring you to the tutorial. If your only benchmark is it works then the tutorial is indeed irrelevant. The developer is free to code as he pleases, and the visitor is free to retreat in frustration. :) Skip Knox Boise State University Why would I do that, if what I've done works. ...This basically harkens back to my original question. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
I was asking for a No, because... or Yes, because... response. Fair enough. No, because it's not a paragraph, it's an image. A reader (forget humans, just think reading mechanisms, which can include humans) when it sees a p expects to see a paragraph of content. Instead it sees an image. The proper markup for that is the img tag. If that needs a wrapper, that's what div is for (it's for any arbitrary block, as span is for any arbitrary string). So, wrenching this over in the direction of CSS, when you want to style an image and perhaps some associated text, the proper thing to style would be a div rather than a p. It'd be really sweet if HTML had a tag that would encompass not only the graphic itself but also associated content, but I've not seen any stirrings in that direction. Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] bemstrongi tags
I use i regularly to italicize foreign words and phrases. I guess to be technically correct I should embed the Latin language code as well as a span that is styled to use italics, but that's just too danged much work. I do consistently use em for emphasis and reserve i for foreign language words. And cite for book titles. But since this is a CSS list, all I'll say is that CSS offers little here unless you decide you prefer to boldface book titles or something like that. This really is about markup not appearance. Skip Knox Boise State University On Fri, Mar 5, 2010 at 1:20 PM, Atkinson, Sarah sarah.atkin...@cookmedical.com wrote: I know these tags are considered to be Presentational in type and there for avoided in semantic markup but I still like to use them in a semantic way. To me it seems practical is some content is important or different from content around it it should have different markup around it regardless of how it looks. There are tags for acronyms and abbreviations, but what if something is just more important or different? Granted they are not perfect for every situation. You can style them in the CSS however you want... In fact I use Myer's reset CSS which pretty much removes default styles from them. Usually I just flip back and forth between the em and b. I like the em because it makes since if something is more important then it has Emphasis. But I also like the b because I'm very lazy and like 1 letter tags. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] bemstrongi tags
So is presentation of a foreign language phrase strictly presentational? I don't think so. And if not, then I argue that i is the best markup choice available to us. But let's hold here, lest we rouse ListMom, who must surely have a standard library of Scold messages by now. Skip Knox Boise State University On Fri, Mar 5, 2010 at 1:49 PM, haveboard.com jonathan.finne...@gmail.comwrote: i and b are deprecated tags. em is for emphasis and strong is for strong emphasis typically an em is styled with css as italic and strong is styled as bold. Emphasis(em) and strong emphasis(strong) are not presentational markup. On Fri, Mar 5, 2010 at 3:26 PM, Skip Knox sk...@boisestate.edu wrote: I use i regularly to italicize foreign words and phrases. I guess to be technically correct I should embed the Latin language code as well as a span that is styled to use italics, but that's just too danged much work. I do consistently use em for emphasis and reserve i for foreign language words. And cite for book titles. But since this is a CSS list, all I'll say is that CSS offers little here unless you decide you prefer to boldface book titles or something like that. This really is about markup not appearance. Skip Knox Boise State University On Fri, Mar 5, 2010 at 1:20 PM, Atkinson, Sarah sarah.atkin...@cookmedical.com wrote: I know these tags are considered to be Presentational in type and there for avoided in semantic markup but I still like to use them in a semantic way. To me it seems practical is some content is important or different from content around it it should have different markup around it regardless of how it looks. There are tags for acronyms and abbreviations, but what if something is just more important or different? Granted they are not perfect for every situation. You can style them in the CSS however you want... In fact I use Myer's reset CSS which pretty much removes default styles from them. Usually I just flip back and forth between the em and b. I like the em because it makes since if something is more important then it has Emphasis. But I also like the b because I'm very lazy and like 1 letter tags. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- -Jonathan Finnegan http://haveboard.com/ http://twitter.com/haveboard/ http://jonathanfinnegan.com/ ***Disclaimer This message and any attachments may contain confidential information and are only for the use of the intended recipient of this message. If you are not the intended recipient, please notify the sender by return mail, and delete or destroy this and all copies of this message and all attachments. Any unauthorized disclosure, use, distribution, or reproduction of this message or any attachments is prohibited and may be unlawful. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Gap in IE7
I'm working on a theme I inherited that was the proverbial 80% done and I've an IE anomaly that I cannot pin down. Here's the test page: http://boisestate.edu/webresources/utheme/indexskip2.shtml In Chrome and FF the left menu abuts the dark blue heading above as intended. In IE7 there is a gap. I've got a string of exclamation points in the HTML to indicate where the problem lies -- it's in the div called subhead. But I can't for the life of me figure out what the issue is. This isn't the usual 2 or 3 px gap, this one's more like 10 or 15. While a suggested fix is welcome, I'd also like to know what the issue is. I would have researched this myself but was unable for form a search string that produced any useful results. Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap in IE7
I'm not sure where you saw that. The line reads 40px and there is a quote, and I've been on this list for enough years to know to validate my code before ever posting a question here! As for the doctype, I think the President is going to host a debate at Blair House real soon Skip Knox Boise State University On Fri, Feb 26, 2010 at 9:52 AM, Shawn Lawler lawl0...@umn.edu wrote: On 2/26/2010 9:51 AM, Skip Knox wrote: While a suggested fix is welcome, I'd also like to know what the issue is. I would have researched this myself but was unable for form a search string that produced any useful results. Do yourself a couple of favors, Switch to a more widely supported and stable Doctype (unless you've got a really compelling reason to be using your current HTML5 Doctype) http://www.w3.org/QA/2002/04/valid-dtd-list.html Then validate against it using the tool here: http://validator.w3.org/ So that you can catch stuff like the missing end-quote on the style attribute in this line: label for=university style=margin-right: 100px;All Boise State/label ---// SCL __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap in IE7
The ol' reply setting got me. Here's the message I sent to Troy but meant to send to all. Skip Knox Boise State University On Fri, Feb 26, 2010 at 9:29 AM, Skip Knox sk...@boisestate.edu wrote: Thanks for the reply. It's interesting; that was the problem all right, but the solution wasn't where a person might think. It problem lay in the encoding used by my editor, Notepad++. I saw the stray character and did everything I could think of to delete that miserable sob, but without success. Then something clicked, from threads on this very list. I figured using UTF-8 would be correct, since that's what I declare in the document. But there's another option: UTF-8 without BOM. I chose that, resaved the file and voila. FYI, the specific issue is encoding with da BOM on a Windows system but delivering the file on a Linux system -- which just happens to be how I'm working. So anyway, problem solved and thanks to all! BTW, to Sotiris: the doctype is correct. It's HTML5 and it validates. Just sayin'. Skip Knox Boise State University On Fri, Feb 26, 2010 at 9:10 AM, Troy Harshman tmha...@gmail.com wrote: Go to this line in your code and you will notice that here is a dot floating around like so... . !-- Begin site navigation sidebar -- That's how it appears in Chrome. In IE6 it's showing a character symbol instead of the dot, which must be what's throwing things off. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] List width mystery
This is a small thing but I do like to understand why styles behave the way they do. Here is a sample page in question: http://boisestate.edu/webcenter/bestpractice/accessibility.shtml Stylesheets are here: http://boisestate.edu/webcenter/styles/main.css http://boisestate.edu/webcenter/styles/bestpractice.css The mystery has to do with line length in the navigation box on the right (not the left). Specifically, I have a width specified for the list items in that menu. I shouldn't have to, but if I remove the width statement, the lines word wrap about halfway across the box. There's plenty of room for the words, but they wrap and I cannot figure out why. I messed about with a variety of settings and finally have strong-armed it by setting a width on the li tag, but that feels like a kludge. The way you see it now is with kludge. I tried to append an image of what it looks like without, but the list rejected it because the image was too big. Sorry! You can take my word for it, the words wrap at about 50% of the box width. You'll see the kludge, it's on line 90 of the secondary stylesheet, bestpractice.css 1. Can someone explain why, with no width on the li, the words wrap the way they do 2. Can someone offer a better solution to the problem than the one I'm employing? Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List width mystery
Color me *duh* If it's not too much trouble, could you say how you detected that? I looked for width statements, so I was obviously focused on the wrong thing. When led you to the right margin business? Was it a tool? Logic? Intuition? Just curious. (the question goes to both Seona and Philippe, with thanks for their quick help). Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fraction bar
Isn't this all more about markup than about style? Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can anybody help me figure out what is messing up this template?
You don't say which version of IE (that's significant), but my IE8 refuses to display the page at all. That is, it displays the page and it appears that it will be correct, but almost at once an error comes up, IE8 says it cannot display the page and it goes to an IE8 error page and your page disappears. Very weird. I'm not an IE8 user, though, so I can't help there. FWIW, it displays fine in Chrome as well. Skip Knox Boise State University On Fri, Jan 1, 2010 at 10:23 AM, Jordan Lee Wagner jor...@webjew.orgwrote: In Internet Explorer only, the contents of the right column are invisible, and the individual articles in the big central block are also invisible. The dimensions of these areas are correct, but they are empty. But it does not happen in Firefox. Here are the three problematic pages: http://CarpetvilleInc.com/index.php?option=com_contentview=articleid=141Itemid=116 http://CarpetvilleInc.com/index.php?option=com_contentview=articleid=115Itemid=115 http://CarpetvilleInc.com/index.php?option=com_contentview=articleid=113Itemid=117 Thanks for your attention. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help with IE8 and a caption for images
I have constructed a couple of divs to allow me to place a caption underneath an image. The method works fine in FF and Chrome but not in IE8. Here's an example: http://boisestate.edu/courses/crusades/7th/04.shtml This is the stylesheet for it http://boisestate.edu/courses/crusades/styles/main.css I have done some looking around for solutions but it's difficult to frame the question properly to a search engine. I've tried various things blindly, like setting width:auto and that sort of thing, but the problem is that I don't understand the underlying issue here. So in addition to a fix, I'm looking for an explanation as well (references to documentation will do fine). Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Thanks to Tim and David for the response. I'd already tried both those, but I gave it another shot. Still the same issue. The caption insists on filling the entire space. Here's what's even more fun. I have other sites and these don't exhibit the behavior. Here's an example: http://boisestate.edu/courses/latemiddleages/politics/france/ If you look at the stylesheet for the Crusades page and then for the France page, you'll see that they have no significant differences (well, except that I've added the clear and the width over at Crusades, to no effect). Crusades stylesheet http://boisestate.edu/courses/crusades/styles/main.css France stylesheet http://boisestate.edu/courses/latemiddleages/styles/main.css Skip Knox Boise State University On Wed, Dec 9, 2009 at 9:38 AM, Climis, Tim tcli...@indiana.edu wrote: I'm looking for an explanation as well Presuming that David's fix works (I think it should), here's what's happening: You didn't specify a width on #imagewrapper, which means that it will expand to fit the content. That allows the caption to float up next to the image. (or really, for the image to float next to the content, since the caption isn't floated) So clearing the caption will send it below the image where it belongs. Specifying a width on the image wrapper should also do the trick. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Oops, sorry guys. That working one is sent previously actually uses tables, which lets that out for comparison. Let's try this one: http://www.boisestate.edu/courses/westciv/babylon/ That has the same doctype, same html markup, and essentially the same css as this: http://boisestate.edu/courses/crusades/7th/04.shtml/ Yet the former looks fine in IE8 while the latter does not. And a further update. I tried pasting the image code from the site that works (WestCiv) into the one that doesn't (Crusades). Paste, save, and now that html code doesn't display correctly. I think that lets out the html as the variable, right? Lets out doctype, etc. Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
I also did the next obvious thing: paste the css over. I commented out the suspect code from the Crusades page and pasted in the working code from the WestCiv page. Guess what? Broken! Okay. It's not the html and it's not the css, and yet one works and the other doesn't. WTF? Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Did a quick firebug check. Nothing is being inherited down other than colors and fonts and the like. I use firebug only rarely, so I could be overlooking something. Skip Knox Boise State University On Wed, Dec 9, 2009 at 2:50 PM, Theresa Newman theresa.web...@gmail.com wrote: do you use firebug? it shows what other css (from parent elements) cascade down to the element On Wed, Dec 9, 2009 at 4:45 PM, Skip Knox sk...@boisestate.edu wrote: I also did the next obvious thing: paste the css over. I commented out the suspect code from the Crusades page and pasted in the working code from the WestCiv page. Guess what? Broken! Okay. It's not the html and it's not the css, and yet one works and the other doesn't. WTF? Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Well done, Theresa! You know, I looked at that and did the stupid thing: I said, naw, no way it's that! FYI, the clear didn't work. Only removing the float on the img tag worked. I *knew* it was inheritance, but of course I was only looking at what the div was inheriting and did not look more closely at what the classed img was inheriting. So, Theresa or anyone else: any idea why IE8 had a problem with this but FF and Chrome did not? Gotta be the rendering agent, but I'd be interested to know what the precise issue is. Skip Knox Boise State University On Wed, Dec 9, 2009 at 3:34 PM, Theresa Newman theresa.web...@gmail.comwrote: remove the float:right on the img tag of the one not working. or if you want to leave it, you have to clear it so the caption falls under. On Wed, Dec 9, 2009 at 5:13 PM, Skip Knox sk...@boisestate.edu wrote: Terribly sorry. Inconsistent coding across the site. Try this one. http://www.boisestate.edu/courses/westciv/class.shtml Works in IE8, uses divs. Compare to the Crusades one, which doesn't lay out properly. On Wed, Dec 9, 2009 at 3:03 PM, Theresa Newman theresa.web...@gmail.com wrote: well, right off the bat, one is in a table and one is in a div structure! 2 different animals. It is the one with div's that is not working right? add clear:both to caption div On Wed, Dec 9, 2009 at 4:55 PM, Skip Knox sk...@boisestate.edu wrote: In IE8, remember. Check in Chrome or FF if you want to see working in both pages. http://boisestate.edu/courses/crusades/7th/04.shtml is the one that is not working and http://boisestate.edu/courses/westciv/babylon/ is an example of one that is working __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE8 and a caption for images
Thanks, Yogesh, but I was looking for a solution in the css, not in the
html. This is because I have literally hundreds of pages with images on
them, all of different sizes. Editing all those by hand was more than I
wanted to contemplate. Anyway, as noted elsewhere, Theresa Newman spotted
the real culprit.
Thanks again, though, to all who responded.
Skip Knox
Boise State University
On Wed, Dec 9, 2009 at 3:43 PM, Yogesh Agashe yogesh.aga...@gmail.comwrote:
Hello,
As Tim and Mehmet have mentioned, setting width should do the trick.
Image wrapper's width is 231px and has 1px border. So total width is
233px. Set this width on imagewrapper. I tested it on IE8 and it works
fine.
DIV.imagewrapper {
.
width: 233px;
}
HTH.
Yogesh
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Descendant selector problem
Just when I think I understand this stuff . . .
I'm having a descendant selector that's not showing up. Behavior is
consistent across browsers, so that's not the issue (for a change!)
Here is the html
http://www.boisestate.edu/webcenter/workshops/basics1/presenternotes.shtml
and here the css
http://www.boisestate.edu/webcenter/styles/main.css
http://www.boisestate.edu/webcenter/styles/workshop.css
(in that order)
At the top of workshop.css you will see that I have set some specific styles
on specific headings. If you look at the web page you will see that the
lists and paragraphs beneath the lower headings are not indented far enough
-- I want the content under the heading to indent as far as the heading.
Yes, I could div my way out of this and may well do so anyway, for other
reasons, but my first approach seemed like it ought to work, namely:
h4 p { margin-left: 4em; }
or something very like that. That is: paragraphs that follow h4 should get
indented further.
But they don't. Nor do ordered or unordered lists.
If I set the margin on the tag
p { margin-left: 4em; }
that works, but of course it moves all paragraphs in the same distance,
which isn't what I want. But at least it confirmed that I was editing the
right file!
Anyway, my real question is: why isn't the descendant selector working? What
am I misunderstanding about how that is supposed to work? As I said, I may
well resort to divs to get each section to behave in a uniform way, but I
really do want to understand why such a seemingly straightforward use of
descendant selectors isn't working.
-= Skip =-
__
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] Padding effect: explanation please
I have constructed a caption div for images that seems to work well for me. You can see it here: http://www.boisestate.edu/webcenter/workshops/02/file09.html I wanted to add some padding inside p.imgcaption. This worked, but it also produced an unexpected effect, which you can see here: http://www.boisestate.edu/webcenter/workshops/02/file10.html It appears that the padding actually expanded the size of the div which, since I set it inline at a specific width, I certainly did not expect and don't know how to explain. And since I'm teaching a workshop on this, I figure I ought to be able to explain it! My students are going to ask the obvious follow-up, too; namely, since this doesn't seem to work, if I *did* want to add some left-right space, without expanding the box beyond the picture, how would I go about it? -- Skip Knox Boise State University [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/
Re: [css-d] Padding effect: explanation please
That's one possible approach, putting the image and the caption
inside a
div element and setting the width of the element containing the
caption to
match the width of the image. There are many other ways to attach
captions to images; for some of them, see
approaches, see http://www.cs.tut.fi/~jkorpela/www/captions.html
Yep. That's where I got the approach that I used.
You could set the padding in pixels and subtract it from the width
value
that you set for the content of p.imgcaption.
Too clumsy.
You could use markup like
div class=imgcaptiondivcaption text/div/div
and set
div.imgcaption { width: 200px; }
div.imgcaption div { padding: 0 0.75em; }
(instead of the style=width: 200px attribute).
The trouble with this is that pictures across multiple pages will have
unpredictable widths, so there's no way to set it in the stylesheet.
There are probably easier ways too. If you rely on browsers applying
shrink-to-fit width to floated elements by default (and you
probably
could), you could leave div.imgcaption width unspecified and just set
the
padding.
If I leave the width unspecified then there's no way to ensure that it
stays within the width of the image.
I've used the table approach before. In many ways it's simpler, but I
was trying to get it accomplished with styles. Someone else suggested
making a container div just for the image caption. I'm going to try that
next.
Jukka, your page on captions is very helpful. I don't seriously expect
you to rewrite it, but one thing that's of great help to us mere mortals
is having examples of When Things Go Wrong. Or trade-offs, so we can see
what happens if we use approach A versus approach B. Yeah, I know: why
don't I write it myself
--
Skip Knox
Boise State University
[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/
Re: [css-d] Padding effect: explanation please
Thanks for the responses, Alan.
You have given no padding for the image div.
I don't want padding because I have a border around the image and that
will create unwanted whitespace.
1) You have no width in the html for the image (and no title is
needed). The
code should be.
img src=innocents.jpg alt=Innocents Abroad book cover
width=200px
height=295px /
I didn't realize I had to specify a width and height. Seems to work
with or without the same way.
2) You have set the width for the paragraph in the html. This is
presentational.
Yes, but how else can I set width when the width varies from one
picture to the next, one page to the next?
3) The div.image img has a margin-left: 1em.
Yes it does. Why is that a problem? I don't get this one.
4) You have the image and paragraph caption floated instead of the
div.
Yes. If I float the div, the content in Firefox doesn't appear until
below the div. Can't have that.
div.image {
height: auto;
width: auto;
padding: 20px;
margin: 0 0 20px 20px;
float: right;
}
div.image img {
border: 1px solid #000;
width: 200px;
width: 295px;
}
You meant height on the 295. But I can't do this because not all my
images are the same size. I could create a separate class for each
image, but that would be horrific in a site with dozens, if not
hundreds, of images.
p.imgcaption {
border: 1px solid #000;
font-family: verdana, sans-serif;
font-size: .7em;
text-align: center;
margin: 0;
padding-left: 10px;
padding-right: 10px;
}
I think I see what you are doing. You are adding padding to the image,
which allows padding to be added on the imgcaption. But, as stated
earlier, I can't have padding on the image because that creates
whitespace between the border and the image.
I realize that captioning images is a problem. The W3 has recognized
this and I think it's part of the CSS3 proposal. So maybe I just work
within the limitations. No padding on the caption for Wednesday's
workshop, that's for sure!
--
Skip Knox
Boise State University
[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/
Re: [css-d] Padding effect: explanation please
However, setting the dimensions may speed up rendering of the page, Yes, that's how I always understood it. If you set the dimensions in HTML, they should be pure numbers, e.g. width=200 height=295 I wondered about that. I'd always understood it was no units of measurements in the HTML. Glad to have that confirmed. -- Skip Knox Boise State University [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/
Re: [css-d] Trouble with positioning - not understanding this
That works! And kind of makes sense to me. Would Robert Lane or someone else please explain why it makes sense? Specifically, why in order for the absolute positioning to work properly, the wrapper div has to have a relative position. This struggling Jedi is lost on Dagobah on this one. Skip Knox Boise State University [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-d] Content popping out in small window
I know I've seen this. I think I've even fixed on a site, but I cannot for the life of me find a reference, and I seem unable to formulate the right magic search phrase (I'm sure it's in the archives and/or wiki). I have inherited a design where the content div pops down below the leftnav div when the user shrinks the window sufficiently. This happens in IE but not in Firefox. If you promise to say absolutely nothing about the stylesheet (not my work!), here's a url: http://webtest.boisestate.edu/chartingthecourse/graphical.shtml http://webtest.boisestate.edu/chartingthecourse/styles/main.css I don't want you to fix the code because the stylesheet's a mess and needs a thorough re-work. But I can't take time to do that right now, for this is an extension to an existing site and they've not encountered the problem because they haven't slapped a 700px-wide graphic anywhere until now. Anyway, leave the fixing to me. All I need from the Assembled is a reference or the right catch phrase so I can search out both solutions and explanations on my own. Thanks! -- Skip Knox Boise State University [EMAIL PROTECTED] __ 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] Content popping out in small window
Just to let folks know, I found the answer for myself. If I absolutely position the left nav (I know!), then IE behaves itself. I have to do some compensating negative margins, and hack specifically for IE, plus I then have to use a container in order to get the footer to position correctly below the leftnav, and I doubt it works well in IE5.0, but it does the trick for this particular urgent need. I look forward to a general reconstruction of the site! On 7/25/2006 at 9:37 AM, in message [EMAIL PROTECTED], Michael Landis [EMAIL PROTECTED] wrote: On 7/25/06, Skip Knox [EMAIL PROTECTED] wrote: I have inherited a design where the content div pops down below the leftnav div when the user shrinks the window sufficiently. This happens in IE but not in Firefox. If you promise to say absolutely nothing about the stylesheet (not my work!), here's a url: http://webtest.boisestate.edu/chartingthecourse/graphical.shtml http://webtest.boisestate.edu/chartingthecourse/styles/main.css I don't want you to fix the code because the stylesheet's a mess and needs a thorough re-work. But I can't take time to do that right now, for this is an extension to an existing site and they've not encountered the problem because they haven't slapped a 700px-wide graphic anywhere until now. Hi, Skip, I'm not aware of any CSS-specific fix to this. IE 7 simply breaks the rules about floats, and this is the result. I have seen different float column models that treat this scenario differently, though. One True Layout[1] and other layouts using negative margins push the left column to the right, rather than dropping it below the main column, for example. I've used JS to fix this in the past, where on load and resize I check to see if the left column is moving to the right. If it does, I set the floats' wrapper to equal the sum of the columns' widths. If the window larger than the ssum of the columns' widths, I change the wrapper width to 100%. May not be the most elegant solution, but I hope it gives you some ideas. Michael [1] http://www.positioniseverything.net/articles/onetruelayou -- Skip Knox Boise State University [EMAIL PROTECTED] __ 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] Suppressing in print
I generally understand how to handle a print.css, but I'm encountering two challenges that puzzle me. One I can kludge, the other I can't. 1. I have a border-right set in my main stylesheet, but I don't want it to print. My print.css of course inherits everything from main.css, so I can't just remove the border-right statement. My kludge is to set border-right to white. 2. I also have a list-style-image (it's a button) that I don't want to print. I don't really want to create a null graphic, that's too kludgey even for me. A no-inherit property would be wonderful, but given that it doesn't yet exist, is there any solution other than my clumsy fixes? For context: http://webtest.boisestate.edu/templatedev/ http://webtest.boisestate.edu/templatedev/styles/main.css http://webtest.boisestate.edu/templatedev/styles/print.css Skip Knox Boise State University [EMAIL PROTECTED] __ 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] Suppressing in print
Perfect. I never even thought about list-style: none. Didn't know it was there; didn't think to look. The border:0 is painfully obvious. Shoulda spotted that one! Anyway, thanks to Brian for the quick response. Skip Knox Boise State University [EMAIL PROTECTED] __ 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] Border strip on leftnav
Thanks, Zoe, I'll give it a try. I've managed to fix most of what was wrong, but only by fiddling rather than restructuring. I sort of have to put this to bed, but once I've got the docs done, I'll take a run at restructuring. That's what I really want anyway -- no kludges, no hacks. Thanks for the feedback. Skip Knox Boise State University [EMAIL PROTECTED] Zoe M. Gillenwater [EMAIL PROTECTED] 07/07/06 11:05 AM Skip Knox wrote: http://webtest.boisestate.edu/templatedev/ I have a leftnav with dark blue background and a 9px lighter blue stripe on its right. The leftnav actually has three components: logo at the top, menu area below it, and a fade below that. I keep running into problems with white space appearing as I change font size in my browser. I suspect I'm going about designing it wrong. Here's how I'm doing it now. snip I actually don't see any white gaps appearing, but I do agree that it could be done a lot more cleanly. Here's how I would do it: Take a div, give it the id #nav (or some other name more meaningful than the current leftbox), and place the image of the logo (just the logo, no light blue strip) and the ul inside. Float #nav left. Slice an image that contains the full dark blue width and light blue strip and apply this as a background to #nav, set to repeat-y. Slice another image that contains the bottom fade image. Apply this as a background image to the ul inside #nav, no-repeat, positioned to the bottom. Give the ul enough bottom padding so that its content doesn't overlap the fade image. Done. No nested divs, simple CSS, degrades well in non-CSS and non-image browsers. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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-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] Border strip on leftnav
http://webtest.boisestate.edu/templatedev/ I have a leftnav with dark blue background and a 9px lighter blue stripe on its right. The leftnav actually has three components: logo at the top, menu area below it, and a fade below that. I keep running into problems with white space appearing as I change font size in my browser. I suspect I'm going about designing it wrong. Here's how I'm doing it now. The logo has the lightblue stripe as part of the image. This is optional, as I have a version of the logo without the stripe and I can use a 9px border instead. The menu uses a lightblue border-right of 9px. The fade has the lightblue stripe as part of the image, because the lightblue has to fade along with the darkblue. I've already got kludges in place to keep whitespace from appearing between the three sections in the darkblue, but I can't seem to code or kludge my way into keeping everything together. Just go to the site and start sizing fonts and you'll see what I mean. Ideally, someone tells me how to approach the whole problem differently so that I don't have to have any negative margin kludges, but I'll take whatever works at this point. The stylesheet is here http://webtest.boisestate.edu/templatedev/styles/main.css Skip Knox Boise State University [EMAIL PROTECTED] __ 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] Weird attribute
I can confirm that this is a font name. I actually saw it once. It was a
very small font of fixed size that a designer used in a footer. But that
was done in a graphic.
Technically it should indeed have quotes around it, but in this case
it's moot because hardly anyone's going to have that font anyway!
Skip Knox
Boise State University
[EMAIL PROTECTED]
Michael Landis [EMAIL PROTECTED] 07/05/06 12:57 PM
On 7/5/06, Brian Cummiskey [EMAIL PROTECTED] wrote:
I just stumbled upon this in some (mostly table-based) code i'm
updating, and I've never seen anything like it before.
table, td {
font:normal 11px Arial,sans-serif;
font:normal 8px standard 07_55,Tahoma,Arial,sans-serif;
color: #000;
}
What does 07_55 and standard do, and does it over-ride the 11px
statement above? Is this some hack?
It actually looks like a mistake. :-) The only properties permitted
after the font size is the line height, only if there is a slash
between the two, then font families. Probably this defines a font
family named standard 07_55, but they forgot to add the obligatory
quotation marks around it. Looks like a unix-style bitmap font name,
to me.
Michael
__
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-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] Help with Safari and topnav
This is why doing this stuff is so much fun! I did the five steps Michael suggested. The result is now that both the content area and the left nav appear *below* the header, as if there is some sort of clear:both in operation. On the good side, the page now breaks consistently in Safari and Firefox and IE. :-) This request is still open, folks. If you've got any tips on how to structure this header/leftnav/content, I'd sure appreciate it. I've done it multiple times over the past few years and every time I've done so much hacking I had to rent a machete. This time I'd like to get the job done a little more elegantly! (btw, the only browsers I'm really concerned about are the three listed above. If I can get it to work well, with no hacks and few kludges, I'm confident it will degrade gracefully and will be accessible) Skip Knox Boise State University [EMAIL PROTECTED] Michael Landis [EMAIL PROTECTED] 07/05/06 1:20 PM On 7/5/06, Skip Knox [EMAIL PROTECTED] wrote: I am experimenting with a template design and thought I had everything worked out. I wasn't especially happy with the kludge I had to do with the header, though, and then a user reported that the header didn't align properly in Safari. I have spent a while trying to find information on whether this is a bug in Safari and have come up empty. More importantly, though, I don't like that I've used absolute positioning for the header. Plus a *html hack for IE6. So, I'm really asking for advice on how to handle the header better than it is here: http://webtest.boisestate.edu/templatedev/styles/main.css The template home is here: http://webtest.boisestate.edu/templatedev/ You can see browsercam shots of the page in Safari, IE6 and Firefox here: http://www.browsercam.com/public.aspx?proj_id=266306 The layout is as desired on the latter two. Hi, Skip, I'd probably do the following: 1) replace the absolute positioning on #header with float: right; 2) remove float: right from #topnav 3) move the bottom border on #header to be a top border on #content 4) replace #content's margin-right with padding-right 5) adjust margins and paddings on the heading and #content to taste HTH, Michael __ 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] Help with Safari and topnav
Well I'll be swiggered. After futzing with the CSS for a good long time, something about the floats finally clicked. I changed the order of the includes. I load the leftnav first, *then* load the header, and now it works. It wasn't the CSS at all. Even so, I do thank Michael Landis for offering some simplification of my code. I still have some spacing tweaks to do, but this is fundamentally sound, right across the major browsers. Loading leftnav before header is a bit of a kludge, as it's contrary to common sense, but since this template is mainly for our own internal use, I'm willing to accept that. If anyone can work out a better solution, one that would put the includes in a more logical order, it'd be appreciated but not necessary. I will, as they say, leave that as an exercise for the student. Skip Knox Boise State University [EMAIL PROTECTED] __ 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] What difference a word makes
This appears to be an exotic HTML issue, but I strongly suspect it's related to CSS, so I'm posting the question here. This problem only appears in IE (tested in 6) and not in Firefox. It was sent to me by a client who can't figure out why the content area is popping out below the left menu. Oh, that's an easy one, right? Here's a copy of the page: http://tutoring.boisestate.edu/Workshops/Reading/skiptest.shtml Look at it in IE6 and you'll see the problem right away. This page is a clone of all the rest of the pages at the site, all of which work fine. No the page doesn't validate and stuff, but just let that slide. The problem resides in line 96. It's just a plain paragraph with an italicized phrase. Comment the paragraph out and the page works fine. But it's even weirder. The *specific* problem is in the phrase: Your Guide to College Success. Add any string between to and College and the page works! It has to be a letter; a non-breaking space doesn't do the trick. I can kludge it by doing a span in white and inserting a single letter, but I'd sure like to know what the heck is going on here! I hereby consult the Collective Wisdom. Skip Knox Boise State University [EMAIL PROTECTED] __ 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] What difference a word makes
Thanks to all who pointed this out. I thought I'd read everything at PiE! -= Skip =- Skip Knox Boise State University [EMAIL PROTECTED] Pringle, Ron [EMAIL PROTECTED] 03/27/06 7:56 AM Skip wrote: This appears to be an exotic HTML issue, but I strongly suspect it's related to CSS, so I'm posting the question here. This problem only appears in IE (tested in 6) and not in Firefox. It was sent to me by a client who can't figure out why the content area is popping out below the left menu. Oh, that's an easy one, right? Here's a copy of the page: http://tutoring.boisestate.edu/Workshops/Reading/skiptest.shtml The problem resides in line 96. It's just a plain paragraph with an italicized phrase. Comment the paragraph out and the page works fine. But it's even weirder. The *specific* problem is in the phrase: Your Guide to College Success. I hereby consult the Collective Wisdom. Skip- It appears to be the not so exotic IE Italic bug [0]. IE does weird stuff with italic text and its overflowing the width of the container, causing the container to drop. Ron [0] http://www.positioniseverything.net/explorer/italicbug-ie.html __ 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] List styles
I have read the W3C specs on list style type, but I have need for more and was wondering if anyone has figured a way to kludge this. Our university policy manual has a few sections that go ridiculously deep in numbering -- six or seven levels. The list style types cover the first four levels but then it breaks down. Specifically, is there a way to create a list style type of 1) 2) 3) and of (a) (b) (c) ??? Skip Knox Boise State University [EMAIL PROTECTED] __ 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] List styles
Adam Kuehn [EMAIL PROTECTED] 02/15/06 11:31 AM In theory you could do this with generated content (that's what it is there for, primarily), I did not see in the specs where one could control the punctuation, even on generated content. I would regard the numbering as essential information and just hardcode it into the HTML, setting the list-style-type to none. Trouble with that is that the text isn't indented properly. It's going to come out underneath the numeral or letter, as it does with list-style-position: inside -- which is not acceptable to the custodians of the policy manual. Thanks for thinking about it, though. Skip Knox Boise State University [EMAIL PROTECTED] __ 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] List styles
Trouble with that is that the text isn't indented properly. It's going to come out underneath the numeral or letter, as it does with list-style-position: inside -- which is not acceptable to the custodians of the policy manual. Not if you do a negative text indent, with an appropriate amount of left margin on the list items as well. Ah. Good one. I'll keep that in mind as a fallback. I think the original responder had a good point that in the case of a policy manual the paragraph numbering could/should be considered part of the content, and therefore isn't style. Skip Knox Boise State University [EMAIL PROTECTED] __ 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] List styles
ol {list-style-type: none;}
li:before {content: ( counter(section, lower-alpha) ) ;}
li { counter-increment: section;}
Cool. I can see that in the spec, I just didn't connect. The browser issue
remains, of course, but it's nice to know it *can* be done.
Skip Knox
Boise State University
[EMAIL PROTECTED]
__
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] Containers and floats
The issue is clearing floats. Searching on that will get you lots of advice, here are two good sources: http://www.positioniseverything.net/easyclearing.html http://www.quirksmode.org/css/clearing.html Steve Clason Exactly what I wanted. Thanks, as always, to the Presently Assembled. Skip Knox Boise State University [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centered with indent. Works on FF, not IE could use some help.
Awesome. Thank you so much. I have not posted a lot of questions here, but when I have the positioneverything.com http://positioneverything.com site is usually cited. I wish they had a site search or something. Anyway. Off I go. They don't need a site search. Just go to Google. Whatever your search string is, add positioniseverything to it and you'll scope it pretty well. Skip Knox Boise State University [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Containers and floats
I'm sure this is somewhere in the archives but I couldn't figure out how to construct the right search string. I have a site here: http://www.boisestate.edu/courses/latemiddleages/ The problem I have is that I very often have an image on the page (as in the above case) and if the image is too big (or the content insufficiently long) then the image is no longer contained inside the container box. You can see the effect by shrinking and expanding the text size. Changing the window size doesn't matter; only the change in the relationship between the image and the content matters. I realize that, because I have floated the image right, it (or rather the div it's in) is not in the normal document flow. I don't want to set a minimum height on the container because there's no telling how large or small either the text or the image might be. The stylesheet is here http://www.boisestate.edu/courses/latemiddleages/styles/main.css What's the solution and what's the explanation for the solution? Skip Knox Boise State University [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
