Re: [css-d] Looks acts like IE8-maxwidth-floats-image issue but don't see how it can be...
Bingo. Right there plain as day. Thanks Philippe - I'll be able to sleep tonight. -Original Message- From: Philippe Wittenbergh [mailto:e...@l-c-n.com] Sent: Friday, September 07, 2012 7:16 PM To: CSS-D Cc: Venditelli, Daniel - Web Development Administrator Subject: Re: [css-d] Looks acts like IE8-maxwidth-floats-image issue but don't see how it can be... Le 8 sept. 2012 à 03:32, Venditelli, Daniel - Web Development Administrator daniel.vendite...@yumaaz.gov a écrit : What I cannot understand is WHY the page viewed on the public server needs the fix while the page viewed on the internal server works WITH OR WITHOUT it. According to the collective wisdom glanced from a quick $search-engine, IE 8 (and up ?) is always in compat mode for pages loaded from an intranet server. e.g. http://blogs.msdn.com/b/ie/archive/2008/08/27/introducing-compatibility-view.aspx What does the developer toolbar tells you ? Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Looks acts like IE8-maxwidth-floats-image issue but don't see how it can be...
If your response is going to be that I need to validate the html/CSS before you can consider my question, then please STOP NOW and do NOT reply; no hard feelings - I understand. While I am aware that the html and CSS will not validate (around 70 errors); I'm in a corner here. Our CMS does not produce valid code and a large portion of the code on the page in question is generated within the system's black box. While I agree with you in theory and I would certainly prefer otherwise, it cannot be changed at this time. - - - If you're still reading, perhaps you will find this as peculiar as I do. While I have a solution, it still doesn't give me a why (and it doesn't make sense) and that bothers me quite a bit. I have an issue with the following page; At the bottom is an upcoming events section that should display thumbnails to the right of the event descriptions. Layout is a mix of stubernella and FnE approaches (among other things). - http://yumaaz.gov/news_24293.htm Images DO show in Safari, the iOS browser, Firefox, Chrome and IE 7. They do NOT show in Internet Explorer 8 when viewed on the PUBLIC facing 2003 Windows Server R2 Standard server (the link above) but DO show when I view the same code, CSS files and graphics on our INTERNAL test server. (also 2003 R2 Standard) I am aware of the max-width issue with IE 8 (http://www.456bereastreet.com/archive/201202/using_max-width_on_images_ can_make_them_disappear_in_ie8/) In fact max-width:auto does appear to correct the problem for the public facing page. So does IE 8's compatibility mode. What I cannot understand is WHY the page viewed on the public server needs the fix while the page viewed on the internal server works WITH OR WITHOUT it. I've checked security settings on IE 8, reset them entirely and even set them as low as possible. I've looked at all of the individual files in question - they are on both servers (same versions). It's not just my machine and version of IE8 - I've had independent confirmation of graphics not displaying from several others. Has anyone seen something like this? Why does the CSS work when viewed on one web server but not the other. It's the same client machine, same login and permissions, same browser, same HTML, same CSS, same files, same graphics and even the same server version - just physically different locations and of course a firewall between me and the public server. Is it even possible for a firewall or server setting to change/corrupt but not entirely block how CSS is interpreted on a client machine? If you see something I'm missing, please share. Thank you, Daniel __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float drop... Can float:left drop left?
The columns are dropping the way they are as much because of the source order of your code as the float properties. I think the only way you'll be able to get the LEFT columns to drop instead of the RIGHT columns would be to reverse your source order AND use float fight. i.e. As I understand it you have: Example A - (psuedo) source code would look like... - Column 1 float left - Column 2 float left - Column 3 float left - Column 4 float left Assuming equal width columns, this means initially the viewer sees [1][2][3][4] and as the window narrows, 4 drops first, then 3, then 2 as below: [1][2][3] [4] then [1][2] [3][4] then [1] [2] [3] [4] To reverse that dropping order, the easiest solution would be to do the following: Example B - (psuedo) source code would look like... - Column 4 float right - Column 3 float right - Column 2 float right - Column 1 float right You'll be able to preserve your original presentation of [1][2][3][4]and as the window narrows, 1 should drop first, then 2, then 3. [1][2][3][4] then [2][3][4] ..[1] then [3][4] [1][2] etc. Where as, if you only use float:right you would get: [4][3][2][1] then .[3][2][1] ...[4] then ..[2][1] ..[3][4] etc... Are you avoiding float:right to preserve the initial order of the content OR to avoid having all of the content shift to the right side of the page? If you are merely trying to preserve that initial content order and the drop order, I think Example B will work for you (it's possible to address the content shift in other ways). Unfortunately, with example b the order of the source code will not match the display order for screen readers and the like which is something you should be aware of. I now it's not a necessarily a solution, but hopefully, it clarifies the question enough to spark a thought for you (or for others) Best of luck, Daniel -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Micky Hulse Sent: Friday, May 11, 2012 12:08 PM To: css-d Subject: [css-d] Float drop... Can float:left drop left? Hello, I have a container that adapts at certain break points as the browser window gets smaller. Within this container, I have 4 floated:left columns; at the container's widest width, all four columns line up side-by-side. As the container gets smaller, the far RIGHT columns drop below the preceding columns. Is there any way to make the far LEFT columns drop to the second line whilst retaining my float:left behavior? In other words, I want to keep float:left on the columns and force the left-most columns drop below the right-most columns. I don't want to use float:right. Hopefully that's clear. Let me know if I need to clarify further. I assume that's there's no pure CSS way to do this, but I figure it does not hurt to ask. :) Thanks! M __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] iPad Questions
Since I haven't seen another reply to this, while I certainly don't KNOW the answer, I have a very strong feeling this has to do with how retina displays scale background images differently due to the increased physical resolution of the screen. Perhaps the following discussion might help.. - http://stackoverflow.com/questions/10449614/retina-and-non-retina-ios-ap p -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Sohail Aboobaker Sent: Monday, May 07, 2012 7:45 AM To: css-d@lists.css-discuss.org Subject: [css-d] iPad Questions Hi, We are in process of converting a native iPad application to a web application. The target audience is internal and is only going to use iPad to use this web application. Everything is looking good except two main issues: a. We have a page where we have two boxes displayed. In native iPad, we use a background image (692 x 418). Within that box, we have two boxes (206 x 256) each. When we moved it to web application, we created a div tag for the large image with width 692 and for inside boxes, we created table and within each column, we provided a div tag of 206 width each with same background image. However, when it was rendered on web app, iPad Safari shows the images in smaller sizes. It automatically scales these back. What would be the reason for this? Is there something that we need define in css to avoid this? b. In iPad application, we had a many alert boxes and we could define titles for alert boxes. Now, in web app, we were not able to define alert box titles. So, we are using a jquery plugin ( http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/) to be able to define titles for alert boxes. This works perfectly but the users like the native iPad color and styling of iPad app alert box. Is it possible to define css rules to display the dialog box in similar appearance as iPad application? Thanks, Sohail. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Use of the i tag
em or i, the issue with IE 6 was about font-style italic and still occur(s/ed) even if you declare it purely through CSS and custom tags. My work around was to add an additional css rule that made anything presented with the italic font-style just less than 100% of it's normal width. Worked well enough. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Gmail Sent: Saturday, April 28, 2012 10:52 AM To: Tom Livingston Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Use of the i tag On Apr 28, 2012, at 1:17 PM, Tom Livingston tom...@gmail.com wrote: I believe the i tag is fine to use. Never heard of any issues. It's been around for ever... Sent from iOS 5 On Apr 28, 2012, at 12:44 PM, Brian M. Curran br...@draftingservices.com wrote: Hi! Does anyone avoid the i tag because of browser compatibility issues, or is it a non-issue? I think some of the old browsers have problems with it, correct? Thanks! Brian _ I prefer the em tag over the i, never have issues with either. Eric __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen Resolution Independend CSS
Maybe I'm missing something, but if you design for a larger screen resolution, than without the scroll bar the smaller screen view would not only have the information off-screen, they would never be able to see it. Seems like the scroll bar is helping you out there rather than hurting you. Beyond that, I agree with Chris, use percentages and ems not pixels. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Mrinmoy Ghosh Sent: Wednesday, February 08, 2012 4:42 AM To: css-d@lists.css-discuss.org Subject: [css-d] Screen Resolution Independend CSS Hi, I design a webpage with CSS in 1280*768 resolution using Absolute positioning. But when I change my screen resolution to 1024*768 then a horizontal scroll bar is come. Can you provide me some tips that how can I disable this horizontal scroll bar ? Regards Mrinmoy __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] TwoQuestions: min/max-width, change layout with width
I won't speak to appropriate min/max sizes for most as that debate seems to already be handling itself quite nicely without me. ;) However, if you want to look into responsive design, Ethan's books is short, to the point and filled with more than enough info to get your feet wet. It's well worth a look and the description about the book includes some valuable sample content: - http://www.abookapart.com/products/responsive-web-design Best of luck, Daniel -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Freelance Traveller Sent: Monday, January 23, 2012 4:50 PM To: css-d@lists.css-discuss.org Subject: [css-d] TwoQuestions: min/max-width, change layout with width Question the First: After seeing plenty of discussion, here and on other forums focussing on website development, I've decided that maybe it's a good idea to implement max-width (and possibly min-width) settings on my site. The sense I get from the discussion is that a max-width of 960px is probably the best choice. What's a good reasonable value for min-width, given that I have a fixed 120px vertical nav bar down the left side of the page? Sub-Question: Should max-width (and min-width, if deemed appropriate) be applied to the HTML tag, the BODY tag, or should I enclose everything in a DIV and apply it to that? Question the Second: Would it be better, instead of setting min-width, to allow the page to reformat itself so that instead of a left nav, it has a horizontal breadcrumb trail for nav across the top? If so, can someone point me to material that will explain how best to do so? -- Jeff Zeitlin, Editor Freelance Traveller The Electronic Fan-Supported Traveller(r) Fanzine and Resource edi...@freelancetraveller.com http://www.freelancetraveller.com http://come.to/freelancetraveller http://freelancetraveller.downport.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Dropdown Menu Hover Link Sticks
I'm not seeing sticking links either but I am also seeing the very precise target area on both Firefox 5 and Chrome 13. In fact Chrome and Firefox are identical for performance. Also, I only see drop-downs on Pet Adoption and Memorials. Do the others have drop-downs at all? -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Mary Villanueva Sent: Wednesday, September 14, 2011 4:34 PM To: Kevin A. Cameron Cc: CSS-Discuss Subject: Re: [css-d] Dropdown Menu Hover Link Sticks It's Firefox ver. 5.0. No, the dropdowns don't stick just the links require a very precise positioning. They are slow to respond. BTW, what version of IE did you check this in? Thanks again! Mary On Wed, Sep 14, 2011 at 6:26 PM, Kevin A. Cameron kevinacame...@gmail.comwrote: What ver of browsers? On FF 3.6 it's not sticking (and by sticking I assume you mean the drop down stays even after mouseout), though it does seem to be unresponsive - ie the drop down takes a little work to get it to show... Kevin On Wed, Sep 14, 2011 at 4:13 PM, Mary Villanueva mvilla5...@gmail.comwrote: Hello! Can anyone tell me why the hover link in a CSS drop-down menu sticks in Firefox and Safari? Can it be fixed? It's working fine in IE9 which is surprise. Here's the website - I'm still putting the template together: http://www.byronsbyte.com/SPCA_SanPat/ Go to the SPCA Services Navbar (the orange one) and you'll be able to see how all the links stick. Here's the stylesheet: http://www.byronsbyte.com/SPCA_SanPat/CSS/spca_global.css Thank you for your kind assistance. Best regards, Mary _ _ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Mary Villanueva IT Instructor and Consultant Byronsbyte Consulting http:/www.byronsbyte.com/ced/photoshop mvilla5...@gmail.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Organization
Her slides are available. (Though they don't exactly match the presentation.) Flipping through those in tandem with recording of presentation helped me some. http://www.css-discuss.org/mailman/listinfo/css-d -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim Dawson Sent: Wednesday, August 31, 2011 10:54 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] CSS Organization On 31/08/2011 17:34, Kevin A. Cameron wrote: My favourite part from that presentation was when she said (paraphrased) what's between the brackets is trivial, it's the selectors that are the tricky part. Kevin The talk was interesting, but the camera work poor. Too much presenter, it was difficult to see the slides. Did anyone catch what she talking about towards the end; it sounded like 'pre-' something. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Issue with clearing nested floats.
It's been one of those days... I've stumbled upon an issue with clearing floats that I feel like I've done before but for the life of me cannot figure out today. I'm either too close, too tired, too low on caffeine or getting a bit senile and misinterpreting the CSS box model and sibling relationships. In the linked example, I would like paragraph 2 to clear just the floating content in the white block as it does in IE 7, NOT the Green-ish Container as it is currently doing in both Chrome 12 and Firefox 4. - http://www.ci.yuma.az.us/share/TEST-float-quirks.htm As you can see, I've stripped this down as much as I can to make sure none of the hullaballoo* in my working project is causing the issue. * Adding position:absolute to the Green-ish Container div solves the problem for Chrome and Firefox but causes overlaps in IE. * Adding position:absolute to BOTH the Green-ish Container div AND the Blue-ish Container div solves the float issue in all three browsers but causes the surrounding box to collapse down to just wrapping the header, the only thing not positioned absolutely. Is it really proper for the child to clear not only it's own siblings but also any parent's sibling's child as well? Thank you, Daniel * of course I am referring to noise and chatter here NOT the British Invasion band from the 60's - I can't see why they would want anything to with my project in it's current state. --- All opinions and musical preferences expressed here are my own and not representative of my employer. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Issue with clearing nested floats.
Philippe, David, Thanks. Overflow - hidden solved THAT issue in the working page. We'll see if I can break anything else tonight. ;) Thanks again and have a great evening, Daniel -Original Message- From: Philippe Wittenbergh [mailto:e...@l-c-n.com] Sent: Thursday, July 07, 2011 6:12 PM To: Venditelli, Daniel - Web Development Administrator Cc: css-d Subject: Re: [css-d] Issue with clearing nested floats. On Jul 8, 2011, at 9:39 AM, Venditelli, Daniel - Web Development Administrator wrote: I've stumbled upon an issue with clearing floats that I feel like I've done before but for the life of me cannot figure out today. I'm either too close, too tired, too low on caffeine or getting a bit senile and misinterpreting the CSS box model and sibling relationships. You forgot to blame the weather :) In the linked example, I would like paragraph 2 to clear just the floating content in the white block as it does in IE 7, NOT the Green-ish Container as it is currently doing in both Chrome 12 and Firefox 4. - http://www.ci.yuma.az.us/share/TEST-float-quirks.htm ... Is it really proper for the child to clear not only it's own siblings but also any parent's sibling's child as well? Yes, in this case. See http://www.w3.org/TR/CSS21/visuren.html#flow-control [quote] The 'clear' property does not consider floats inside the element itself or in other block formatting contexts. [/quote] In your case, the 'Green-ish Container' is in the same block formatting context as the 'Blueish Container'. It 'works' as your would like (parag2 positioned just below the white floated box) in IE7 6 because that hellish thing called 'hasLayout' - you set a width on the parent cyan blue box, width triggers 'hasLayout'; 'hasLayout' establishes a (new) block formatting context [1]. To solution is to isolate the 'Blueish Container' from the 'Green-ish Container' by having 'Blueish Container' become a new block formatting context. 9.4.1 lists properties that establish a new block formatting context. http://www.w3.org/TR/CSS21/visuren.html#block-formatting [1] http://www.satzansatz.de/cssd/onhavinglayout.html Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Experiment: CSS post it note
From an accessibility and convenience* standpoint, I have an issue whenever we use pictures of text over actual text. (Alt tags aren't enough) The CSS rotation may not quite be ready for prime time, but if USED CAREFULLY, it can still be better than text out of Photoshop. *Can't even begin to count the number of sites that had some snippet of useful text just begging to be copied into my research notes only to discover the text is a graphic. grumble -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tomasz Kisielewski Sent: Thursday, April 07, 2011 1:55 PM To: Chris F.A. Johnson Cc: Gabriele Romanato; css-discuss Subject: Re: [css-d] Experiment: CSS post it note Hi Guys. I can't agree that visual effects are good in this example. When manipulate any image, or create composition always beware of shadows.In this example it doesn't make sense, still photoshop,or gimp do better job than box rotation ( browsers support as well). CSS3 is great, butsome things are pretty useless, especially if you think about production environment. Thats my opinion. Tom On Thu, Apr 7, 2011 at 9:37 PM, Chris F.A. Johnson ch...@cfajohnson.comwrote: On Thu, 7 Apr 2011, Gabriele Romanato wrote: Hi, I've often asked myself: 'ok, we can rotate boxes with CSS3, but what this is good for?. Answer: visual effects. Like this: http://onwebdev.blogspot.com/2011/04/css-post-it-note.html Beware of trying to fit text into a fixed-size container: http://t.cfaj.ca/postit.jpg For an example that works with any font size, see http://twd2.cfaj.ca/. (I have just started to redo my site, so there not much there besides the first page.) -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] property for aligning vertical text in a div
You can easily add a margin on the p tag within the footer to push the text down the page to where you need it to be. The height and width you added are NOT for your background image but rather for the DIV you are assigning it to. Otherwise that div will only grow as large as your content, the copyright notice. Regards, Daniel -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Lisa Frost Sent: Monday, September 20, 2010 5:09 PM To: css-d@lists.css-discuss.org Subject: [css-d] property for aligning vertical text in a div Hi, I have no idea what property i need to accomplish the following. If anyone can point me in the right direction i can then go and look it up. I have footer div which has a background image. Question 1: To get the background image to display i needed to add width and height values. Is that correct practice? I obviously presumed wrong that it would just display automatically! Question 2: I have my footer text, in a p. I want the text to be at the bottom of the div not at the top as it is now. Is there a property to accomplish this? The dev page is here: http://www.koolfish.com/devtest/ The css is here: http://www.koolfish.com/devtest/css/mainstyles.css Any pointers appreciated. Lisa __ 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] Vertical Align Theory
Shame they didn't refer to it as grid-cell, grid-row and grid-column. At least then it wouldn't be so confusing given that so many of us have been around long enough to remember when tables were the only method for complex layouts. Maybe they're just expecting that full and final adaptation won't completely occur until well after the rest of us old-timers have retired. ;) -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Bobby Jack Sent: Thursday, April 23, 2009 4:07 PM To: css-d Subject: Re: [css-d] Vertical Align Theory --- On Thu, 4/23/09, Jack Blankenships learningcssindet...@gmail.com wrote: The idea that using display: table-cell does not seem to be any more semantically correct than simply placing the element in a table cell ... By definition, CSS declarations are NOT semantic but simply describe the visual rendering of associated markup. There should probably be a less semantically-inclined value than table-cell available, to enforce the separation between style and content, but that doesn't mean that separation is not already present. __ 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] tabled thumbnail gallery to css?
Bill, What about treating this as a list object instead of a table? It might be a bit of work/thought to set up initially but would certainly be much easier to maintain especially when you have to reorder items. The code/layout would essentially by fixed and easily replicated for each new entry and you could then VERY easily move items around in list for alphabetical ordering and could easily bump items from one column to the next to address balancing the page layout. Obviously the pseudo code below is short on specific details, but I think it gets the idea across. Best of luck, Daniel - ul id=column 1 fixed width align or float left li div with fixed width, displayed as block in-lineLast, firstbr/email/div div with fixed width, displayed as block in-lineimage 1/div div with fixed widthimage 2/div /li li div with fixed width, displayed as block in-lineLast, firstbr/email/div div with fixed width, displayed as block in-lineimage 1/div div with fixed widthimage 2/div /li li div with fixed width, displayed as block in-lineLast, firstbr/email/div div with fixed width, displayed as block in-lineimage 1/div div with fixed widthimage 2/div /li /ul * ul id=column 2 fixed width align or float right * li div with fixed width, displayed as block in-lineLast, firstbr/email/div div with fixed width, displayed as block in-lineimage 1/div div with fixed widthimage 2/div /li li div with fixed width, displayed as block in-lineLast, firstbr/email/div div with fixed width, displayed as block in-lineimage 1/div div with fixed widthimage 2/div /li li div with fixed width, displayed as block in-lineLast, firstbr/email/div div with fixed width, displayed as block in-lineimage 1/div div with fixed widthimage 2/div /li /ul *If you are (very) concerned about semantic structure, instead of breaking this into two separate un-ordered lists, you could wrap the first and second half of the lists in divs that break them into columns. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of bill scheider Sent: Monday, March 23, 2009 1:37 PM To: css-d@lists.css-discuss.org Subject: [css-d] tabled thumbnail gallery to css? Hi all I volunteered for a non profit who recently lost their web person to do some updates on their website. The page in question can be found here: http://www.oregonwca.org/gallery.html The gallery is a 7-col table containing an artist's name, a thumbnail, a thumbnail, artist's name, thumbnail, thumbnail. They want to retain that general layout of two artists and their thumbnails per line. I'd like to re-code that page in css rather than a table. For one thing it'd be lots easier to retain the alphabetical order when adding or removing a new artist. The current code is certainly a mess and could certainly benefit from a cleansing:-) Can someone point me in the direction of coding idea or solution for this? I suppose, strictly speaking, the info can be presented as a table of data but there's still the alphabetical order issue when adding or removing artists. All pointers are appreciated. TIA Bill Scheider __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS color names values versus accessibility
Funny, even though I'm on this side of the pond, I've never been able to write that shade as gray - always looked wrong to me... guess that's why I always use the hex values. Though it certainly confuses family when I say, is my #555 and black jacket still at the cleaners? - daniel the colonies -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Barney Carroll Sent: Friday, March 30, 2007 4:20 AM PS: 'grey' is a colour, 'gray' is a color. There is no such thing as 'colour' on the internet. All web terminology I've seen uses American English spelling, as opposed to English English. There is no established standard for 'grey' and it is not part of the 256 keywords. __ 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] IE adding spaces between li nav tags
Why are you using the additional span tag around Corporations
LLCs? Not that I think it has anything to do with your problem, but it
just seems unnecessary to me and I'd like to know if I'm missing
something.
Also, I've had better luck explicitly defining the margins for top left
right and such...
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
Regards,
Daniel
---
Daniel E. Venditelli, jr
Web Development Administrator
City of Yuma
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Tanya Fader
snip
lia title=Corporations LLCs href=corporations-about.asp
tabindex=2 class=corpspanCorporations LLCs/span/a/li
Here's the CSS:
#nav li a.business {
width: 244px;
height:34px;
padding:0;
margin: 0;
border: none;
}
#nav li a.business {
background-image:url(../assets/nav_business.jpg);
}
Right now my problem is that IE a space shows up between the li images
and
I can't figure out how to get rid of it! You can see the spaces here:
http://www.laughlinusa.com/redesign/CSS/index.asp
/snip
__
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] Problems styling an hr in FF 1.5.0.4
Allison,
I really wish I knew. I'm from the tables as layout school of thought
and have only fairly recently started to deal with the voodoo that is
css extensively. So I really couldn't tell you if that article is out of
date.
However, I can share this approach that I found - haven't tested it
fully yet across browsers. http://www.sovavsiti.cz/css/hr.html I tweaked
their output because I didn't need/want to use a background image.
In the style sheet...
div.hr {
height: 1px;
background-color:#333;
}
div.hr hr {
display: none;
}
Where this displays the thin black rule...
div class=hrhr //div
Will that provide the level of accessibility you are looking for? Of
would the none property on the hr style confuse the reader?
Actually, looking at the result, I may elect to remove the border
approach I was using and go this route instead.
Regards,
Daniel
-Original Message-
From: Allison Bloodworth [mailto:[EMAIL PROTECTED]
Sent: Tuesday, June 13, 2006 5:38 PM
To: Venditelli, Daniel - Web Development Administrator;
css-d@lists.css-discuss.org
Subject: RE: [css-d] Problems styling an hr in FF 1.5.0.4
Thanks very much Daniel--I was actually using borders originally but
decided
I wanted to use an hr for its semantic value. We are a public
university
and I think this could be an accessibility issue for blind users as they
wouldn't see the borders (and the div contains nothing else to tell
them
it's a section break.
Is the article I referenced about how to accomplish this in
Mozilla-based
browsers out of date? I got the link from this thread from only a year
ago:
http://forum.stylegala.com/about1038.htmlhighlight=
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Venditelli,
Daniel
- Web Development Administrator
Sent: Tuesday, June 13, 2006 5:30 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Problems styling an hr in FF 1.5.0.4
Allison,
I had a similar issue earlier today and ended up using this instead:
#subsection {
position: static;
border-width: 1px;
border-top-style: solid;
border-color: #ccc;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
And then this where I wanted the rule:
div id=subsection/div
I'm controlling the width with a parent div but you should be able to
just add width to the above. Also I'm using the margin info for dealing
with text on the same page. You may or may not need that.
Best of luck,
Daniel
---
Daniel E. Venditelli, jr
Web Development Administrator
City of Yuma
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Allison
Bloodworth
Sent: Tuesday, June 13, 2006 5:23 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Problems styling an hr in FF 1.5.0.4
Hi,
I am trying to style an hr and am having trouble applying a color to
it in
Firefox 1.5.0.4/PC. It looks fine in IE 6.0/PC. I'm following these
instructions: http://www.sovavsiti.cz/css/hr.html
And the code is:
div class=AdminTablelessDivider id=input name=inputhr/div
.AdminTablelessDivider hr
{
color: #CC;
background-color: #CC;
height: 1px;
}
I can't show the page because it's a web app that requires log in. Any
idea
what could be wrong? I searched the archives and didn't find anything.
Thanks!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[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-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] Problems styling an hr in FF 1.5.0.4
Allison,
I had a similar issue earlier today and ended up using this instead:
#subsection {
position: static;
border-width: 1px;
border-top-style: solid;
border-color: #ccc;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
And then this where I wanted the rule:
div id=subsection/div
I'm controlling the width with a parent div but you should be able to
just add width to the above. Also I'm using the margin info for dealing
with text on the same page. You may or may not need that.
Best of luck,
Daniel
---
Daniel E. Venditelli, jr
Web Development Administrator
City of Yuma
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Allison
Bloodworth
Sent: Tuesday, June 13, 2006 5:23 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Problems styling an hr in FF 1.5.0.4
Hi,
I am trying to style an hr and am having trouble applying a color to
it in
Firefox 1.5.0.4/PC. It looks fine in IE 6.0/PC. I'm following these
instructions: http://www.sovavsiti.cz/css/hr.html
And the code is:
div class=AdminTablelessDivider id=input name=inputhr/div
.AdminTablelessDivider hr
{
color: #CC;
background-color: #CC;
height: 1px;
}
I can't show the page because it's a web app that requires log in. Any
idea
what could be wrong? I searched the archives and didn't find anything.
Thanks!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[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-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/
