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/
[css-d] Son of Suckerfish problems
URL: http://www.numcchildren.org/new/index.html CSS: http://numcchildren.org/new/children.css Browsers that display the site correctly: Firefox, Opera, IE8 Browsers that have problems: Safari, Chrome, IE8 in compatibility view I¹m trying to use the son of suckerfish method for the drop-down navigation. In IE8 compatibility view, the sub-menus appear to the right of their parents, rather than underneath them. In Safari and Chrome, the sub-menu items don¹t change color when hovered over, but they¹re supposed to. Test the site in the latest versions of FF, Opera, or IE8 to see the site functioning properly. Any insight on causes for the issues and/or solutions for them are much appreciated. Thanks in advance, Daniel Hammond Objective Designs dan...@objectivedesigns.com www.objectivedesigns.com __ 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] 'Reverse' adjacent sibling selector?
Hello, Is there a way in CSS to match a first element which is the PREVIOUS sibling to the second element? Example: I want to target the paragraph before every header. h2Header/h2 pFirst paragraph/p pLast paragraph/p !-- I want to style this paragraph -- h2Another header/h2 After quite a bit of Google-ing it doesn't seem possible but I don't understand why. Is this a scenario that I should solve in a more intelligent way than I have been able to think of so far? Cheers, Daniel __ 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] 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/
[css-d] 1px difference in IE7
URL: http://www.northsidecreativeservices.org/sportsandrec CSS: http://www.northsidecreativeservices.org/sportsandrec/sports.css In IE7, the horizontal navigation is shifted down one pixel, so the bottom of the buttons covers up the black horizontal line that is the bottom border for the horizontal navigation area. All other browsers (FF, Safari, Chrome, Opera [all on Mac and Win], and IE8) seem to display it correctly. Daniel __ 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] main content appearing in side column
URL: http://www.numcchildren.org/thezones/index.htm CSS: http://www.numcchildren.org/children.css Does anyone have any idea why Safari (Mac/Win) and Chrome are putting the main content in the side column on the right? View in FF, IE, Opera to see correct layout. Thanks, Daniel Hammond __ 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] main content appearing in side column
David Laakso wrote:
Daniel Hammond wrote:
URL: http://www.numcchildren.org/thezones/index.htm
CSS: http://www.numcchildren.org/children.css
Does anyone have any idea why Safari (Mac/Win) and Chrome are
putting the main content in the side column on the right? View in
FF, IE, Opera to see correct layout.
Thanks,
Daniel Hammond
#content {
float: left; - :: add, and safari/chrome will
cooperate ::
}
That did it. Endless thanks.
-Daniel
__
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] site test please
URL: http://www.northsidecreativeservices.org/design.htm CSS: http://www.northsidecreativeservices.org/cs.css Could someone please test the above URL in IE6 and IE7? I heard that someone was looking at the site, and the top nav (blog, design services, banners signs, production) was stacked vertically rather than in line horizontally. I tested it in IE8, Chrome, Opera, Safari, and FF (Mac and Win), and they all display it correctly (in line horizontally). browsershots.org wasn't working with this URL for some reason. Thanks, Daniel Hammond __ 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] site test please
David Laakso wrote: Daniel Hammond wrote: URL: http://www.northsidecreativeservices.org/design.htm CSS: http://www.northsidecreativeservices.org/cs.css Could someone please test the above URL in IE6 and IE7? I heard that someone was looking at the site, and the top nav (blog, design services, banners signs, production) was stacked vertically rather than in line horizontally. I tested it in IE8, Chrome, Opera, Safari, and FF (Mac and Win), and they all display it correctly (in line horizontally). browsershots.org wasn't working with this URL for some reason. Thanks, Daniel Hammond Try changing all instances in #nav from: display: inline-block; to: display: inline; That fixed the initial problem, but it also messed with the height of the nav. It appears that line-height no longer affects it. The nav also no longer touches the top of the white area as it's supposed to. Daniel __ 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] rounded image corners
Hi all... My client will upload images and I'd like to put rounded corners on it...is there a way to do so? Thanks in advance! -- Att. Daniel Gerep __ 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] Font size
Hi guys... I'm using a font-size:18px; and the font is bold(obvious) but is there a way to make it not bold? =) Thanks in advance... Sorry for any typos (Brazilian) ;) __ 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] drop one div over another?
Hi Peg,
If I got it right you want to have the Wrapper div over the bottom
one. To achieve that you need to change the z-index of the Wrapper (2
by default) to a value higher than the z-index of the bottom div
(which is 3 by default). And you need to fix the bottom margin too.
Try updating your styles with this:
#Wrapper {
background:#FCFAEF url(../_images/bg-wrapper.png) repeat scroll 0 0;
margin:-75px auto;
min-height:100%;
position:relative;
text-align:left;
width:915px;
z-index:4;
}
Here is an explanation of why this works :
https://developer.mozilla.org/en/Understanding_CSS_z-index/Stacking_without_z-index
On Tue, Jun 23, 2009 at 6:33 PM, Glowglowvirt...@gmail.com wrote:
I'm working on a site and want to have the Wrapper div overlay a
portion of the top and bottom divs (which are outside the
Wrapper). I've got it working for the top, but can't seem to get it
to drop over the bottom by roughly 75 pixels.
Here's the page: http://ambientglow.com/garage/glow/sample.html
Here's the css: http://ambientglow.com/garage/glow/_css/main.css
Anyone have any ideas?
Thanks,
Peg
glowvirtual
__
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] IE and Opera incorrectly displaying nav
Daniel Hammond wrote: Daniel Hammond wrote: URL: http://www.numccreativeservices.org/site/index.htm CSS: http://www.numccreativeservices.org/site/cs.css FF, Safari, and Google Chrome treat the navigation correctly. It's the active state (when you click on a button) that is the issue here. IE and Opera don't show the active state as it's supposed to be. Perhaps they don't support the :active pseudo class on list item elements? I know IE7 does not, and Opera 9.6, 10, and IE8 appear not to either. Cordially, David But if you test it in Opera/IE, you'll see that the small graphic on the left side of the buttons does respond to the active state. It's just the larger graphic that is the rest of the button that does not. Does that make sense? Precisely. The left side graphic is revealed by the active state on the 'A' element, while the right side graphic is triggered by an active state on the list item (LI). Cordially, David I see. Is this a futile endeavor then? Should I abandon that effect for the navigation? Or is there some way around it? Thanks, Daniel __ 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] IE and Opera incorrectly displaying nav
URL: http://www.numccreativeservices.org/site/index.htm CSS: http://www.numccreativeservices.org/site/cs.css FF, Safari, and Google Chrome treat the navigation correctly. It's the active state (when you click on a button) that is the issue here. IE and Opera don't show the active state as it's supposed to be. Any ideas on how to get them right? Thanks, Daniel __ 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] IE and Opera incorrectly displaying nav
Daniel Hammond wrote: URL: http://www.numccreativeservices.org/site/index.htm CSS: http://www.numccreativeservices.org/site/cs.css FF, Safari, and Google Chrome treat the navigation correctly. It's the active state (when you click on a button) that is the issue here. IE and Opera don't show the active state as it's supposed to be. Perhaps they don't support the :active pseudo class on list item elements? I know IE7 does not, and Opera 9.6, 10, and IE8 appear not to either. Cordially, David -- But if you test it in Opera/IE, you'll see that the small graphic on the left side of the buttons does respond to the active state. It's just the larger graphic that is the rest of the button that does not. Does that make sense? Thanks, Daniel __ 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] alignment of blank space in safari
I have a photo page using lightbox: http://sph.umd.edu/about/building_renovations/areas/test.cfm In the second row, I have a blank space and put in a blank placeholder to keep alignment and push the next items in the vertical row, downward by setting a height. It generally works but in Safari, the boxes are pushed a few pixels further down than in IE7 and FF3. I'd prefer Safari to align like the others. Validation has a few comments but nothing that seems to affect alignment. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ 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] nav displaying incorrectly in IE
Daniel Hammond wrote:
URL: http://www.studentremix.org
The top navigation (Middle School, High School, Parents) displays
correctly in FF, Safari, and Opera, but IE really messes it up.
Internet Explorer doesn't support display:inline-block.
Changing this rule should help:
#navmenu li {
display: inline-block;
display: inline !ie; zoom:1 !ie;/* inline-block for IE */
height: 63px;
line-height: 63px;
margin: 0 0 0 14px;
padding: 0px;
vertical-align: bottom; /* might also need this */
}
Hope it helps.
--Bill
That didn't quite do it. Thanks for the attempt though. I messed
around with it a little more, and if you look at it now, you'll see
that it looks a little better, but still not how it should be. Again,
look at it in FF to see how it is supposed to look. IE is having some
padding/margin issues or something.
Thanks,
Daniel
__
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] nav displaying incorrectly in IE
Daniel Hammond wrote: Daniel Hammond wrote: URL: http://www.studentremix.org The top navigation (Middle School, High School, Parents) displays correctly in FF, Safari, and Opera, but IE really messes it up. Again, look at it in FF to see how it is supposed to look. IE is having some padding/margin issues or something. Thanks, Daniel It may look as it is supposed to in FF but +1 font-scaling breaks the layout. Would it help to do just a very simple test case with just the nav in question (isolating it) on a clean sheet with the styles embedded in the head of the document? Might make it easier to de-bug. Are you trying to hit IE/6, too? IE6 would be nice, but if we get it working in IE7, and IE6 still requires a good bit of debugging, then I won't worry about it too much. I can work on isolating it on its own page. Let me know if you come across any solutions until then, though. Thanks much, Daniel __ 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] nav displaying incorrectly in IE
URL: http://www.studentremix.org CSS: http://www.studentremix.org/templates/js_jamba/css/nav.css http://www.studentremix.org/templates/js_jamba/css/style2.css The top navigation (Middle School, High School, Parents) displays correctly in FF, Safari, and Opera, but IE really messes it up. You can see what I mean by viewing it in those browsers. Any help toward making it look everywhere as it does in the better browsers would be much appreciated. Thanks, Daniel __ 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 a legend
add some padding-right for the legend, for example:
form fieldset legend {
padding-right: 30px;
background: #fee url(image.png) top right no-repeat;
}
2009/2/14 Rick Pasotto r...@niof.net
What styling can be done to legend/legend?
In certain cases I want to use a background image that should appear to
the right of the legend text. However when I specify 'top right no-repeat'
the text overlays the image. I can add some nbsp; to sort of get what I
need but that seems quite kludgy.
--
To respond is positive, to react is negative. -- Zig Zigler
Rick Pasottor...@niof.nethttp://www.niof.net
__
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] centering a jquery slideshow
On Feb 4, 2009, at 5:40 PM, Kathy Wheeler wrote:
Replacing the ul li with a p and the following css:
#slide_images p {
width: 100%;
text-align: center;
color: rgb(255,255,255);
}
In another test page, I had changed it out for p tags like you but
that hadn't helped it center. The major difference seemed to be
width:100%. For educational reasons, why did that work?
And thank you very much everyone for your assistance.
--
Daniel Kessler
University of Maryland College Park
School of Public Health
3302E SPH Building
College Park, MD 20742-2611
Phone: 301-405-2545
http://sph.umd.edu
__
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] IE not hiding overflow?
| Daniel Hammond wrote:
|
| URL: http://www.studentremix.org/ms/index.htm There is a little bit
| of blue extending down below the nav bar.
|
| Delete...
| #nav a, #nav strong {
| position: relative;
| }
|
| ...and also delete the...
|
| * html #nav {
| overflow: visible;
| }
|
| IE's bug is that elements with 'position: relative' declared on them
| will overflow containers with 'overflow: hidden' declared -
| visibly but
| without taking up space. This overflow bug is sometimes exploited as
| part of the cure for IE6' auto-expansion bug, but in your
| case it does
| no good.
|
| regards
| Georg
Perfect! Thanks so much.
Daniel
__
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] IE not hiding overflow?
| On Wed, Jan 14, 2009 at 7:04 PM, Daniel Hammond | dan...@objectivedesigns.com wrote: | I have three things for you guys to look at. IE6 and IE7 | are the only | browsers having this problem. | | Here's the first thing: | URL: http://www.studentremix.org/ms/index.htm | CSS: http://www.studentremix.org/ms/ms.css | Screenshot of the problem: http://www.studentremix.org/issues/ms.jpg | The red arrows show what's going wrong. There is a little | bit of blue | extending down below the nav bar. It's not supposed to do | that. View the | page in FF, Opera, Safari, or Chrome to see how it's | supposed to look. | | It's probably not a case of failing to hide overflow but of it making | the element larger than you expect. Slap on a red border as a test and | I bet it will be beneath your unwanted bit of blue. | Richard Ok, that may be so, but do you (or anyone else) know how I can fix the problem? Thanks, Daniel __ 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] IE not hiding overflow?
| Daniel Hammond wrote:
| Here's the first thing:
| URL: http://www.studentremix.org/ms/index.htm
| CSS: http://www.studentremix.org/ms/ms.css
| Screenshot of the problem: http://www.studentremix.org/issues/ms.jpg
| The red arrows show what's going wrong. There is a little
| bit of blue
| extending down below the nav bar. It's not supposed to do
| that. View the
| page in FF, Opera, Safari, or Chrome to see how it's
| supposed to look.
|
|
|
| The hasLayout trigger [1] for IE/7 (will not effect compliant
| browsers) is:
| #nav {
| /*height:29px; */
| min-height: 29px;
| }
| The hasLayout trigger [1] for IE/6 is:
| * html #nav {
| overflow: visible;
| }
| I did not look at the second or the third thing you wrote about...
| [1] http://www.satzansatz.de/cssd/onhavinglayout.html
| ~d
That didn't do it. When I added those to my CSS, it didn't affect IE7 and
made the unwanted extra blue span the entire width of the nav bar in IE6.
Any other ideas?
Thanks,
Daniel
__
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] IE not hiding overflow?
| Daniel Hammond wrote: | | | That didn't do it. When I added those to my CSS, it didn't | affect IE7 and | made the unwanted extra blue span the entire width of the | nav bar in IE6. | Daniel | | | Seems to work on this end in IE/6 and IE/7. | Please see: | http://chelseacreekstudio.com/ca/cssd/one.htm | Or have I misunderstood the issue? Yes, I think you have misunderstood. I do *not* want that extra bit of blue under the navbar. Look at the site in Firefox, and you'll see how it's supposed to look. Thanks, Daniel __ 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] Safari, Opera, Chrome pushing image to bottom of screen
| URL: http://www.studentremix.org
| CSS: http://www.studentremix.org/landing.css
|
| For a reference of what this page should look like, look at
| it in FF
| or IE.
| They display it correctly. Safari, Opera, and Google Chrome
| push the
| blue
| image to the bottom of the screen. I don't see anything in the CSS
| that
| would be causing this. Can anyone else see what the issue is?
|
| Actually, Gecko could be wrong here...
| #portalWrapper { /*landing.css (line 39)*/
| background:transparent none repeat scroll 0 0;
| display:table;
| margin:345px auto 0; /* --- */
|
| Gecko puts the margin inside the anonymous table box that wraps an
| element with display table, where as the other mentioned
| browsers put
| it outside. (see the illustration in [1])
|
| There has been some discussion on www-style on what the actual
| behaviour should be (without any firm conclusion yet, but all
| browsers
| appear slightly wrong).
|
| set that margin-top to 0 and use margin on the links inside
| it to the
| desired value. BTW
|
| BTW:
| a.portalLeftRight {
| /**/
| display:inline-block;
| float:left;
| }
| That 'display:inline-block' is no needed. Specifying'float:left/
| right' always makes an element display:block.
|
| [1] http://www.w3.org/TR/CSS21/tables.html#model
|
| Philippe
Thanks, that did the trick.
Daniel
__
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] IE not hiding overflow?
I have three things for you guys to look at. IE6 and IE7 are the only browsers having this problem. Here's the first thing: URL: http://www.studentremix.org/ms/index.htm CSS: http://www.studentremix.org/ms/ms.css Screenshot of the problem: http://www.studentremix.org/issues/ms.jpg The red arrows show what's going wrong. There is a little bit of blue extending down below the nav bar. It's not supposed to do that. View the page in FF, Opera, Safari, or Chrome to see how it's supposed to look. Second thing: URL: http://www.studentremix.org/hs/index.htm CSS: http://www.studentremix.org/hs/hs.css Screenshot of the problem: http://www.studentremix.org/issues/hs.jpg When this one is viewed in IE, it displays it correctly. Strange. Third thing: URL: http://www.studentremix.org/parents/index.htm CSS: http://www.studentremix.org/parents/parents.css Screenshot of the problem: http://www.studentremix.org/issues/parents.jpg The same problem that the Middle School section has also appears here, except it's confined to the right-side column, rather than spanning all of the nav links. Does anyone have any ideas as to why IE is making this happen? Much thanks, Daniel __ 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] Safari, Opera, Chrome pushing image to bottom of screen
URL: http://www.studentremix.org CSS: http://www.studentremix.org/landing.css For a reference of what this page should look like, look at it in FF or IE. They display it correctly. Safari, Opera, and Google Chrome push the blue image to the bottom of the screen. I don't see anything in the CSS that would be causing this. Can anyone else see what the issue is? Thanks, Daniel __ 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] Field not flowing in IE7/6
On Jan 6, 2009, at 8:20 PM, David Laakso wrote: Not validating the markup before posting to the list :-) . yknow, I thought of that once I arrived home. Sorry about that. I'll look into your example. thanks for reply'n. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ 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] Field not flowing in IE7/6
I have a form field in a p tag that's not flowing in IE7 the way that I expect. http://sph.umd.edu/home/test_css.cfm The dropdown start_day_segment (displays A.M.) should be next to the dropdown Start Time. It is on Safari and Firefox. How do I get it to do so on IE? What am I doing wrong? thanks for any help. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ 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] Content getting pushed out to the side
URL: www.metroatlantaproject.org CSS: www.metroatlantaproject.org/css/main.css FF3, Opera, IE7, and IE6 display the site correctly. When I open the site in Safari and Google Chrome, the body content is pushed out to the right of the containing structure. What's going on? (all browsers tested are on Windows) Thanks, Daniel Hammond Objective Designs 770-842-8817 [EMAIL PROTECTED] www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Embedded SWF isn't linking
| Daniel Hammond wrote: | URL: http://www.studentremix.org/hs/media.htm | CSS: http://www.studentremix.org/hs/hs.css | The flash animation (top object in the sidebar on the | right) is supposed to | link to http://gallery.me.com/northsideyouth#gallery; when | you click on | it, | but it's not doing anything when clicked on. It's not | acting like a link at | all. Any idea why? | | | Lourens Thalen wrote: | What you should do is place the transparent link on top of the flash | animation. (presuming you can't fix the link in the flash | file directly) | Use position absolute to place it on top of the flashfile, | give it the | correct height and width. | Do NOT forget to give a z-index to the object and embed | tag, you can just | use position: relative and z-index: 1;, this will do just fine. | Problem is, flash always wants to be on top, tha's what's | causing the | problem atm. :) | | | I'm sorry to seem like such a novice, but I haven't used absolute | positioning or z-indexing before, so would you mind giving | me the lines of | code that I need to add to my files? | Thanks, | Daniel | | position: absolute; is the line of code for absolute positioning | z-index: 1; line of code for z-index; | --- | Alexandru Dinulescu Yes, but I'm wondering where to put those in my CSS file and what to add (and where to add it) to my HTML file. Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Embedded SWF isn't linking
URL: http://www.studentremix.org/hs/media.htm CSS: http://www.studentremix.org/hs/hs.css The flash animation (top object in the sidebar on the right) is supposed to link to http://gallery.me.com/northsideyouth#gallery; when you click on it, but it's not doing anything when clicked on. It's not acting like a link at all. Any idea why? Thanks, Daniel Hammond Objective Designs 770-842-8817 [EMAIL PROTECTED] www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Embedded SWF isn't linking
Daniel Hammond wrote: URL: http://www.studentremix.org/hs/media.htm CSS: http://www.studentremix.org/hs/hs.css The flash animation (top object in the sidebar on the right) is supposed to link to http://gallery.me.com/northsideyouth#gallery; when you click on it, but it's not doing anything when clicked on. It's not acting like a link at all. Any idea why? Lourens Thalen wrote: What you should do is place the transparent link on top of the flash animation. (presuming you can't fix the link in the flash file directly) Use position absolute to place it on top of the flashfile, give it the correct height and width. Do NOT forget to give a z-index to the object and embed tag, you can just use position: relative and z-index: 1;, this will do just fine. Problem is, flash always wants to be on top, tha's what's causing the problem atm. :) I'm sorry to seem like such a novice, but I haven't used absolute positioning or z-indexing before, so would you mind giving me the lines of code that I need to add to my files? Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] shifted text cut-off on ie6
That might be because I made the changes that Holly suggested. I
have a page (http://sph.umd.edu/events/wellness2/
conditions_treated.html) that has a paragraph at the bottom, Please
call if . . . . I was trying to shove it to the left, but it was
being cut off when it wandered into the first column (in IE6 only).
Holly's correction worked to make it so that the text was no longer
cut off. However it introduced an allergy to my content on another
page where on IE6 only, a couple of white pixels appear on the right
size all the way down. http://sph.umd.edu/events/wellness2/
about_acupuncture.html
This goes away if I delete the top half of the content, but I
couldn't narrow it down to particular content.
daniel
On Oct 6, 2008, at 7:06 AM, David Laakso wrote:
You'll need to clarify, as I'm afraid I do not understand the
question. Other than IE/6 and IE/7, suffer from the em-font-scaling
bug you never corrected [1], the pages appear pretty identical in
an IE/6 side by side comparison to FF/3.0.2 on this end.
[1] Add yo style sheet:
html, body {font-size: 100%;}
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
--
Daniel Kessler
University of Maryland College Park
School of Public Health
3302E SPH Building
College Park, MD 20742-2611
Phone: 301-405-2545
http://sph.umd.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] shifted text cut-off on ie6
That might be because I made the changes that Holly suggested. I
have a page (http://sph.umd.edu/events/wellness2/
conditions_treated.html) that has a paragraph at the bottom, Please
call if . . . . I was trying to shove it to the left, but it was
being cut off when it wandered into the first column (in IE6 only).
Holly's correction worked to make it so that the text was no longer
cut off. However it introduced an allergy to my content on another
page where on IE6 only, a couple of white pixels appear on the right
size all the way down. http://sph.umd.edu/events/wellness2/
about_acupuncture.html
This goes away if I delete the top half of the content, but I
couldn't narrow it down to particular content.
daniel
On Oct 6, 2008, at 7:06 AM, David Laakso wrote:
You'll need to clarify, as I'm afraid I do not understand the
question. Other than IE/6 and IE/7, suffer from the em-font-scaling
bug you never corrected [1], the pages appear pretty identical in
an IE/6 side by side comparison to FF/3.0.2 on this end.
[1] Add yo style sheet:
html, body {font-size: 100%;}
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
--
Daniel Kessler
University of Maryland College Park
School of Public Health
3302E SPH Building
College Park, MD 20742-2611
Phone: 301-405-2545
http://sph.umd.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] shifted text cut-off on ie6
That worked for the one bit of text. However, oddly, it created a
couple of pixel gap across the right side of the page. It only shows
up on one of the URLs:
http://sph.umd.edu/events/wellness2/about_acupuncture.html
Additionally, if I delete the top half of the content, the gap goes
away. Very odd. I didn't see
The solution wasn't what I expected. I was thinking that if I wanted
a two column setup, I should float one left, sized, and the other
right. I hadn't thought of doing it this way. I guess the 180px
goes off of the right side since the left column is floated?
daniel
On Oct 5, 2008, at 12:34 AM, Holly Bergevin wrote:
-- Original Message --
From: Daniel Kessler [EMAIL PROTECTED]
I have a two column layout. In the right column, I have a paragraph
that I want to hop out and overlap the right column too. This works
other than in IE6:
http://sph.umd.edu/events/wellness2/condtions_treated.html (url
corrected)
See if the following changes work for you.
#content {
/* float : right; */ /* delete */
/* width : 500px; */ /* delete */
padding : 10px 15px 60px 0;
min-height:445px;
margin-left: 180px; /* add this property, adjust value to suit */
}
~holly
--
Daniel Kessler
University of Maryland College Park
School of Public Health
3302E SPH Building
College Park, MD 20742-2611
Phone: 301-405-2545
http://sph.umd.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] shifted text cut-off on ie6
Sorry, you are correct that my link didn't work. Left the 'e' off of .edu http://sph.umd.edu/events/wellness2/conditions_treated.html On Oct 4, 2008, at 7:14 PM, Alexandru Dinulescu wrote: I have a two column layout. In the right column, I have a paragraph that I want to hop out and overlap the right column too. This works other than in IE6: http://sph.umd.du/events/wellness2/condtions_treated.html -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] shifted text cut-off on ie6
I have a two column layout. In the right column, I have a paragraph that I want to hop out and overlap the right column too. This works other than in IE6: http://sph.umd.du/events/wellness2/condtions_treated.html help, please? -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Script disabling inline property in FF?
URL: http://www.studentremix.org/ms/blog.htm CSS: http://www.studentremix.org/ms/ms.css Here's a crazy situation: every tested browser (ie, safari, opera, chrome) EXCEPT firefox is displaying this page correctly. The column on the right is supposed to say Log in, but in FF3, the div for that column is moved down below the left column. This happened when I inserted the script code for the blog feed into the left column div. What's going on? Thanks, Daniel Hammond Objective Designs 770-842-8817 [EMAIL PROTECTED] www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Script disabling inline property in FF?
URL: http://www.studentremix.org/ms/blog.htm CSS: http://www.studentremix.org/ms/ms.css Here's a crazy situation: every tested browser (ie, safari, opera, chrome) EXCEPT firefox is displaying this page correctly. The column on the right is supposed to say Log in, but in FF3, the div for that column is moved down below the left column. This happened when I inserted the script code for the blog feed into the left column div. What's going on? -Daniel Not sure exactly what's going on, but if you get rid of position:relative, it seems to fix it. Since it's floated left, you also don't really need the inline-block declaration. -Ray I got rid of position:relative, and it didn't change anything. -Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Script disabling inline property in FF?
| Daniel Hammond wrote:
| URL: http://www.studentremix.org/ms/blog.htm
|
| The column on the right is supposed to say Log in, but in
| FF3, the
| div for that column is moved down below the left column.
|
| Can not tell you exactly what's bugging FF3, but it looks like another
| strange thing surrounding Gecko's handling of CSS table - not
| quite like
| the other browsers that support that property.
|
| Anyway, replacing...
| #content {display: table;}
| ...with...
| #content {overflow: hidden;}
| ...or some other expand to contain floats method, will fix it.
| regards
| Georg
That did the trick. Thank you so much!
Daniel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE margin issues
URL: http://www.studentremix.org/parents/media.htm CSS: http://www.studentremix.org/parents/parents.css When you hover over the photo thumbnails, there should be 15px of margin space below the highlighted blue background behind the photo captions. FF3, Opera, and Safari do this correctly. IE does not display any margin space there. The blue background color touches the top of the image below it. Any ideas as to why this is happening? Thanks, Daniel Hammond Objective Designs 770-842-8817 [EMAIL PROTECTED] www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie 6 differences
I have some differences when my page views in ie6 than it does in the other browsers I checked. I'm not well-versed in ie6 yet. The page is: http://sph.umd.edu/events/wellness2/template.html 1 - there was a gap between the top picture (on the right) and the gold bar below it. I fixed it by putting a margin-top:-20px. That seemed to not affect other browsers. I'm not sure it's a good way to fix it as it seems like it might be something that breaks in the future. Is this a good way or is there a more standard way I should use? I suppose I could use conditional comments. 2 - the nav is spaced out vertically. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie 6 differences
On Aug 29, 2008, at 12:39 PM, Arn Gregory wrote: clip 2 - the nav is spaced out vertically. Known problem with ie6. Try adding display: inline on the li elements. Arnold Gregory IT Web Services Embry-Riddle Aeronautical University 386-323-8696 The display:inline worked. thanks! -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal scrolling in iframe
| URL: http://www.studentremix.org/test/ms/media.htm | CSS: http://www.studentremix.org/test/ms/ms.css | | | Perhaps something like this: | http://www.cssplay.co.uk/menu/photo_strip | | Cheers, | Gary Thanks so much, that works perfectly in all browsers tested except for IE7. It scrolls vertically now. I don't see what the difference between their code and mine is that would be causing the problem. Any ideas? Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal scrolling in iframe
| Daniel Hammond wrote:
| | You can use overflow-x and overflow-y properties separately,
| | instead of just overflow: scroll
| |
| | http://www.w3.org/TR/css3-box/#overflow
| |
| | It's been supported since Mozilla 1.8 and IE5. I think all
| | browsers support it even though it wasn't part of CSS2.1
| | specs (it will likely be in CSS3).
| |
| | Sounds like a topic for a blog post ;-)
| |
| | -Estelle
|
|
| Very good. I used overflow-x: scroll and it fixed the
| problem. Thanks very
| much for your help. Now about what you mentioned regarding
| the potential
| situation where I may not know the required width... Do you know of
| something that would work if that were the case?
|
| Thanks again,
| Daniel
|
| Re: http://www.studentremix.org/test/ms/media.htm
| For CSS this can only be done with media queries [1] [2].
|
| @media all and (min-width:800px) {
|iframe {overflow-x:hidden;overflow-y:hidden;}
| }
|
| This will only work in Safari and Opera.
|
| 1. http://www.w3.org/TR/css3-mediaqueries/
| 2. http://css-class.com/test/css/selectors/media/min-width1.htm
|
| Alan http://css-class.com/
Are you sure? This site: http://www.cssplay.co.uk/menu/photo_strip shows
exactly what I'm trying to do, and it's working beautifully in all the
browsers I've tested it in. I'm just trying to figure out why theirs works
in IE7 and mine doesn't. I don't see them using any media queries. Am I
missing something?
Thanks,
Daniel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal scrolling in iframe
| Is there a way to get rid of the faded out vertical scroll bar | that is not being used? | | | I assume you're seeing that in iExploder, right ? | overflow-x:hidden or overflow-y:hidden will hide the scrollbar you | don't want. | | Philippe Actually, I was seeing it in all browsers tested (FF3, Safari, Opera, and IE 6 7). The problem is solved now, though. Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal scrolling in iframe
| You can use overflow-x and overflow-y properties separately, | instead of just overflow: scroll | | http://www.w3.org/TR/css3-box/#overflow | | It's been supported since Mozilla 1.8 and IE5. I think all | browsers support it even though it wasn't part of CSS2.1 | specs (it will likely be in CSS3). | | Sounds like a topic for a blog post ;-) | | -Estelle Very good. I used overflow-x: scroll and it fixed the problem. Thanks very much for your help. Now about what you mentioned regarding the potential situation where I may not know the required width... Do you know of something that would work if that were the case? Thanks again, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Horizontal scrolling in iframe
URL: http://www.studentremix.org/test/ms/media.htm CSS: http://www.studentremix.org/test/ms/ms.css In the iframe, I want the photo thumbnails to scroll horizontally, not vertically as they do now. I want them to be in one row, only one thumbnail tall, if that makes sense. I wrapped them in a div (which has the royal blue background color for the sake of easy visibility/identification) and gave it a specific pixel-based height, but it still automatically expands vertically to hold the content instead of horizontally. I achieved this desired effect in the past, but I believe I did it with a table. I'd rather stick to pure CSS this time. Any ideas? Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal scrolling in iframe
| | URL: http://www.studentremix.org/test/ms/media.htm
| | CSS: http://www.studentremix.org/test/ms/ms.css
| |
| | In the iframe, I want the photo thumbnails to scroll horizontally, not
| | vertically as they do now. I want them to be in one row, only one
thumbnail
| | tall, if that makes sense. I wrapped them in a div (which has the royal
blue
| | background color for the sake of easy visibility/identification) and
gave it
| | a specific pixel-based height, but it still automatically expands
vertically
| | to hold the content instead of horizontally. I achieved this desired
effect
| | in the past, but I believe I did it with a table. I'd rather stick to
pure
| | CSS this time. Any ideas?
| |
| | Thanks,
| | Daniel
| |
|
| #iframePhotos {
| margin: 0 0 15px 25px;
| text-align: center;
| display: inline:
| }
|
| Worked for me...
| Karl
Really? That didn't do anything for me. Especially since I would think
something needs to be done with the photoThumbMainWrapper selector, not
the iframePhotos one. If you have a URL that you could provide that shows
it working how it should, that would be helpful. Thanks for the effort.
Daniel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal scrolling in iframe
| If you give the parent container a width to contain the
| horizontal elements, the iFrame will get a horizontal scroll bar.
|
| .photoThumbMainWrapper {width: 1685px;}
|
| That works if you know the number of thumbnails. Are you
| going to know the width? If not, let me know, and i'll help
| you further.
|
| -Estelle
|
| URL: http://www.studentremix.org/test/ms/media.htm
| CSS: http://www.studentremix.org/test/ms/ms.css
|
Thanks, that does help. However, I've now decided to use a div with
overflow:scroll to give the appearance of an iframe without actually using
an iframe. Is there a way to get rid of the faded out vertical scroll bar
that is not being used? Also, I am interested in hearing your suggestion for
if I do not know the number of thumbnails or width that the div needs to be.
Thanks for your help,
Daniel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE not recognizing block level element in nav?
URL: http://www.studentremix.org/test/ms/index.htm CSS: http://www.studentremix.org/test/ms/ms.css Tested on WinXP Pro: FF3, Opera 9.52, and Safari 3.1.2 display the navigation correctly, but IE 6 and 7 do not show the hover state until the cursor is hovering over the nav link's text itself, rather than just being over the area of the block level element. This hasn't happened in other sites I've made, but in comparing the different stylesheets, I don't see what the difference is. Also, IE 6 and 7 seem to add an unnecessary pixel of margin between the bottom of the nav links and the nav div's bottom border. In other words, the white background of the current nav link should touch the green single-pixel bottom border of the nav area, but instead, IE 6 and 7 show a small amount of the lighter green background color of the nav div area below the white. Any help on either of these issues would be much appreciated. Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rollover discrepency
ah, I love explanations. I'm not great on memory unless I understand
something. Never would've been a good actor.
Okay, so the basic idea as I see it is to work with the anchors
instead of the li. I saw the li as the more base part and worked
from big to small, but here small was the essential part (the link).
Now that side li and side li:hover are gutted, do I still need
them? I noted that it worked fine without them.
thank you for your help Bill.
daniel
On Aug 22, 2008, at 11:12 AM, Bill Brown wrote:
This should help. Explanation follows code.
#side li {
color: #FFF; /* - REMOVE [1] */
padding: .25em; /* - REMOVE [2] */
}
#side li:hover {
background: #F3E0A8; /* - REMOVE [3] */
color: #000; /* - REMOVE [4] */
}
#side li a {
background-color: #CCA349; /* + ADD [5] */
color: #FFF;
display: block;
padding: 0.25em; /* + ADD [6] */
text-decoration: none;
}
#side li a:hover {
background: #F3E0A8; /* + ADD [7] */
color:#00;
}
[1] Redundant - Already in anchor style.
[2] Moved to 6.
[3] Moved to 7.
[4] Redundant - Already in anchor hover style.
[5] Just good practice when specifying color.
[6] From LI style.
[7] From LI:hover style.
Hope it helps.
--Bil
--
Daniel Kessler
University of Maryland College Park
School of Public Health
3302E SPH Building
College Park, MD 20742-2611
Phone: 301-405-2545
http://sph.umd.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Trying to replace an image with css
The css version is on the top and the image version on the bottom: http://www.sph.umd.edu/studentservices/CareerExpo/blocks/expo_sign.cfm It looks great in Safari. In Firefox Mac, it could use some spacing between the word and the line, but that looks good on firefox pc. I thought maybe I could fix that with line-height. Haven't tried it yet. The big problem is IE. In IE7, it looks terrible as the placement of the year is off and has a big white box. Not sure what to make of it. Any thoughts? On both PC browsers the font rendering looks grittier than on the Mac, but I suppose there's nothing I can do about that. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trying to replace an image with css
In looking at it a bit more, I realize that the problem I'm having is that the single pixel div, which is empty but uses back-color to make the single-pixel bar, doesn't use the height I give it or doesn't use it as 1px; How do you then make a single pixel bar in css on ie7, like I have in the image version of this. On Aug 15, 2008, at 12:16 PM, Alan Gresley wrote: Daniel Kessler wrote: The css version is on the top and the image version on the bottom: http://www.sph.umd.edu/studentservices/CareerExpo/blocks/ expo_sign.cfm Just a case of invalid markup and error recovery. div div style=height:1px; width:45px; background-color:#FF;*/div2008 /div The year 2008 belongs where the asterisks is. BTW, the background- color needs to be removed. -- Alan http://css-class.com/ Nearly all men can stand adversity, but if you want to test a man's character, give him power - Abraham Lincoln __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trying to replace an image with css
I'm not sure I understood that. I deleted the second div year and made it a span inside the first div. On Aug 15, 2008, at 11:51 AM, Leyrson Kroska wrote: use display:none; to div - that is wrong use there but .. and to align 2008 use another span tag .. position:absolute; ;) bye Leyrson Curitiba/Brasil 2008/8/15 Daniel Kessler [EMAIL PROTECTED] The css version is on the top and the image version on the bottom: http://www.sph.umd.edu/studentservices/CareerExpo/blocks/expo_sign.cfm It looks great in Safari. In Firefox Mac, it could use some spacing between the word and the line, but that looks good on firefox pc. I thought maybe I could fix that with line-height. Haven't tried it yet. The big problem is IE. In IE7, it looks terrible as the placement of the year is off and has a big white box. Not sure what to make of it. Any thoughts? On both PC browsers the font rendering looks grittier than on the Mac, but I suppose there's nothing I can do about that. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] bg img 1px too far to left or right in some browsers
URL: http://www.objectivedesigns.com/amittius/index.htm CSS: http://www.objectivedesigns.com/amittius/index.css (Tested only on WinXP Pro) Safari and Opera show the page's background image correctly regarding its position in relation to the rest of the site content (successfully centers everything nicely in the browser window), but FF3 has the background image one pixel too far to the left (or content too far to the right), and both IE's (6 and 7) have the background image one pixel too far to the right (or content too far to the left). Any idea why this is happening and how it can be fixed? (the problem can most easily be seen by looking at the left and right edges of the green navigation bar) Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE margin, padding, and .png issues
URL: http://www.objectivedesigns.com/amittius/white/index.htm CSS: http://www.objectivedesigns.com/amittius/white/index.css On Windows XP Pro... FF3, Opera 9.51, and Safari 3.1.2 display the site correctly. IE7 and IE6 don't. IE7 shows everything right except the padding on the links in the footer (it doesn't put padding on the bottom of the links, only the sides and the top). IE6 has this same problem, but it also doesn't correctly execute the margins of the light blue boxes that are within the body text. It pushes them too far away from the sides of the container. IE6 also seems to be unable to correctly display PNG images with semi-transparent pixels (the background images that appear around the header, container, and footer). Daniel Hammond 2227 Dunseath Avenue Atlanta, GA 30318 770-842-8817 www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE margin, padding, and .png issues
| URL: http://www.objectivedesigns.com/amittius/white/index.htm | CSS: http://www.objectivedesigns.com/amittius/white/index.css | | On Windows XP Pro... FF3, Opera 9.51, and Safari 3.1.2 | display the site correctly. IE7 and IE6 don't. IE7 shows | everything right except the padding on the links in the | footer (it doesn't put padding on the bottom of the links, | only the sides and the top). IE6 has this same problem, but | it also doesn't correctly execute the margins of the light | blue boxes that are within the body text. It pushes them too | far away from the sides of the container. IE6 also seems to | be unable to correctly display PNG images with | semi-transparent pixels (the background images that appear | around the header, container, and footer). | | Try validate your CSS? | | IE6 doesn't support PNG's 256-levels of transparency. Other | folk on the list know what to do about that ... | | David Jones Alright, my CSS is valid. http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=htt p%3A%2F%2Fwww.objectivedesigns.com%2Famittius%2Fwhite%2Findex.htm I understand that IE6 just isn't going to show the transparent PNG's correctly. I'll either live with it or deal with it later. But what about the bottom padding of the links in the footer? Neither IE6 nor IE7 show that correctly. Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE margin, padding, and .png issues
| URL: http://www.objectivedesigns.com/amittius/white/index.htm | CSS: http://www.objectivedesigns.com/amittius/white/index.css | | On Windows XP Pro... FF3, Opera 9.51, and Safari 3.1.2 | display the site correctly. IE7 and IE6 don't. IE7 shows | everything right except the padding on the links in the | footer (it doesn't put padding on the bottom of the links, | only the sides and the top). IE6 has this same problem, but | it also doesn't correctly execute the margins of the light | blue boxes that are within the body text. It pushes them too | far away from the sides of the container. IE6 also seems to | be unable to correctly display PNG images with | semi-transparent pixels (the background images that appear | around the header, container, and footer). | | Try validate your CSS? | | IE6 doesn't support PNG's 256-levels of transparency. Other | folk on the list know what to do about that ... | | David Jones Alright, my CSS is valid. http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=htt p%3A%2F%2Fwww.objectivedesigns.com%2Famittius%2Fwhite%2Findex.htm I understand that IE6 just isn't going to show the transparent PNG's correctly. I'll either live with it or deal with it later. But what about the bottom padding of the links in the footer? Neither IE6 nor IE7 show that correctly. Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal nav not placing correctly
| URL: www.objectivedesigns.com/amittius/index.htm
| CSS: www.objectivedesigns.com/amittius/index.css
|
| I've tested it in (all WinXP) FF3, IE7, IE6, Opera 9.5, and Safari
| 3. They
| all display the navigation correctly except Safari. I want the nav
| buttons
| to touch the bottom of the nav area, but they don't quite
| go to the
| bottom
| in Safari. I also haven't tested this on a Mac, so if anyone could
| do that
| for me, that would be great (thanks in advance). What's
| more pressing,
| though, is why does Safari display it incorrectly while all
| the others
| display it correctly?
|
| Adding
| #nav a, #nav strong {vertical-align:bottom}
| should level off the differences.
|
| Incidentally, Gecko1.8.1/Fx 2 has no support of display:inline-block;
|
| Philippe
Alright, I added {vertical-align:bottom}. Does this help any of you Mac
users see it better where it was messing up before?
Daniel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE margin problems
URL: www.objectivedesigns.com/amittius/index.htm CSS: www.objectivedesigns.com/amittius/index.css Alright, thanks for all your help with the nav on this site. Now if you'll go there again, you'll see that I have added some boxes within the body text. FF3, Opera, and Safari all display the boxes correctly. IE6 and IE7 do not. It looks as though they are having some trouble reading the margin properties correctly (both for the boxes themselves and for the unordered list in the box on the right side. Any help in making them look like they do in the better browsers would be much appreciated. Daniel Hammond 2227 Dunseath Avenue Atlanta, GA 30318 770-842-8817 www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal nav not placing correctly
| Daniel Hammond wrote:
| URL: www.objectivedesigns.com/amittius/index.htm
| CSS: www.objectivedesigns.com/amittius/index.css
|
| why does Safari display it incorrectly while all
| the others
| display it correctly?
|
| Hi Daniel--
|
| Try this:
| #nav {
| font-family: Trebuchet MS;
| margin: 0;
| padding: 0;
| width: 750px;
| /*height: 28px; REMOVE */
| background: #886;
| font-size: 13px;
| font-weight: bold;
| color: #fff;
| text-align: center;
| }
| #nav a, #nav strong {
| display:inline-block; /* ADD */
| padding: 2px 25px 3px 25px;
| border: 1px solid #eee;
| border-bottom: 0;
| color: #fff;
| text-decoration: none;
| position: relative;
| }
|
| That should work for all browsers with your current code.
| Safari wasn't
| the only one incidentally...Firefox 3/Ubuntu was showing it
| the same as
| Safari...with the extra spacing produced from the height
| setting on your
| #nav element.
|
| Hope it helps.
| --Bill
Thanks Bill. That did help. Now could anyone please test it on a mac, just
to make sure it's working well there, too? Thanks much.
Daniel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal nav not placing correctly
| URL: http://www.objectivedesigns.com/amittius/index.htm | CSS: www.objectivedesigns.com/amittius/index.css | | Daniel, | | I looked at your site in Firefox on a Mac. The nav buttons (Home, | Link 2, etc.) extend below the bottom of the nav area in my display. | This isn't obvious unless you put the cursor on one of the link | buttons. When the button background turns brown, you can see that the | bottom of the button extends below the nav area. | | I then looked at it in Safari, and the nav buttons extend just to the | bottom of the nav area, they do NOT extend below. | | Bill Does anyone know how I might fix this problem? Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] horizontal nav not placing correctly
URL: www.objectivedesigns.com/amittius/index.htm CSS: www.objectivedesigns.com/amittius/index.css I've tested it in (all WinXP) FF3, IE7, IE6, Opera 9.5, and Safari 3. They all display the navigation correctly except Safari. I want the nav buttons to touch the bottom of the nav area, but they don't quite go to the bottom in Safari. I also haven't tested this on a Mac, so if anyone could do that for me, that would be great (thanks in advance). What's more pressing, though, is why does Safari display it incorrectly while all the others display it correctly? Thanks, Daniel Hammond 2227 Dunseath Avenue Atlanta, GA 30318 770-842-8817 www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stick to bottom
RE: http://sph.umd.edu/events/wellness/ You seem to be tripping over the complexity of your stuff and the need to clear that stuff. Well, I guess I haven't had the epiphany yet. I thought I was on my CSS way. This is /one way/ to stick the bottom of the plant to the top of the footer, more or less, regardless of the amount of content in the right column: That worked great - thank you very much. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] stick to bottom
I have added a side image to my left column (2-column format). I cannot get it to stick to the footer black bar. Also, when I added it, a gap appeared between the content and the header. Any help on making it stick to the footer bar and the gap would be appreciated. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stick to bottom
Oh man. Thanks for pointing that out. http://sph.umd.edu/events/wellness/ On May 30, 2008, at 2:32 PM, David Laakso wrote: Daniel Kessler wrote: I have added a side image to my left column (2-column format)... URI? -- http://chelseacreekstudio.com/ -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering block elements in IE 6.0 fails
Hello, almost two years ago I had trouble horizontally centering an absolutely positioned element: On Tuesday 24 October 2006, Gunlaug Sørtun wrote: Daniel Kabs wrote: Please see the test page at http://www.mobotixserver.de/~daniel/css_center_horizontally.html The page works on Firefox and Konqueror but not on IE 6.0 (SP2). ... IE6 can *not* relate A:P elements to opposite sides of parent-container, so only one of these properties is used... left: 0; right: 0; ...not both. IE ends up positioning '.center' according to 'left: 0;' and ignores 'right: 0;'. Result: the auto-margins becomes useless in that browser. I found a workaround by setting the element to relative positioning and wrapping it with an absolutely positioned element instead. This now works on IE 6 and 7, too. I updated the test page and the css wiki page accordingly. Cheers Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox: image overflows table
Hello, usually tables stretch to fit their content. Not in this case: http://14mb.de/u/dkabs/ff_table_padding.html The page contains a table with two cells: Left cell has only text, right cell has an image. That cell is aligned to the right and has the style white-space set to nowrap. When rendered with Firefox (2.0.0.14 here), part of the image overflows the table cell and is displayed outside the table. To see this, shrink the window until the text wraps. If either alignment or the white-space style is removed, the table returns to standard behaviour, i.e. the image is completely inside the table. Does anybody know why this is? Cheers Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Nested div break in IE7
I'm not sure why you are using absolute positioning to layout the nesting, but a true nested structure: div id=outer_content_box div id=inner_content_box ... inner content box goes here /div /div combined with padding on the outer box, and dimensions set only on the inner box, will allow the outer's background to poke through as a border, in (I think) your desired effect. This also has the advantage that the two boxes will remain aligned when text is resized. I've put up a full version at: http://www.fiveminuteargument.com/nested-divs.html Hi Bobby, Thanks for the above, worked a treat. Now I'm sure it's something I've done and I've copied your code exactly but if I leave the style sheet embedded exactly as you have done it works fine: http://beta.bedazzled.name/ But if I use an external sheet it breaks: http://beta.bedazzled.name/external_style_sheet/ I can't for the life of me see any difference why it should do this? I'll keep the style sheets embedded but I'd prefer not to to avoid code bloat. Again thanks for your help and the solution to my problem. Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Nested div break in IE7
Hi Bobby, Worked it out, it was the base href that broke it when I used an external style sheet. I've had this before and it broke it that time only in IE6 with another page I was building. Please accept my apologies. Thanks Daniel Now I'm sure it's something I've done and I've copied your code exactly but if I leave the style sheet embedded exactly as you have done it works fine: http://beta.bedazzled.name/ But if I use an external sheet it breaks: http://beta.bedazzled.name/external_style_sheet/ I can't for the life of me see any difference why it should do this? I'll keep the style sheets embedded but I'd prefer not to to avoid code bloat. Again thanks for your help and the solution to my problem. Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Nested div break in IE7
Dear all, I have been a subscriber to the css-d list for a long while and always found it an interesting read. I'm not a web pro, my background for a while was a tester on a large travel website, so I have a fair-ish idea of things. I'm building a site at the moment as per below url: http://beta.bedazzled.name It looks fine in FF and Opera, a little broken in Konqueror and completely broken in IE7. I use Linux and I don't have IE7 at home (though I am looking at installing ies4linux), but I've had a look at work. It should look like the below mockup I built: http://beta.bedazzled.name/mockup/mockup.png The main background for the body is a tiled 1px image, as are backgrounds for both nested div's, if there is another way of doing it to avoid this any suggestions would be appreciated. Thanks Daniel -- We are not now that strength which in old days moved earth and heaven; that which we are, we are; One equal temper of heroic hearts, Made weak by time and fate, but strong in will To strive, to seek, to find, and not to yield. --- *Tennyson's Ulysses* cybertron.danielbotting.co.uk - my blog http://cybertron.danielbotting.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ul/li alignment fails when height is longer than one line
I'm trying to replicate a table and really am not very good at it yet. It has one column, Department, than can be quite long. I gave it a max width so that it would wrap to multiple lines. Then it is followed by another column, Status. Status isn't multi-lines, so what it does is continue the next line under the status. I tried putting a clear:both on Status thinking it would shift everything else to the next line, but no. This all works if any column doesn't go to two lines. You can see an example of it here (which will show the problem better than I explained it): http://sph.umd.edu/about/dean/expenditure_db/test.cfm -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ul/li alignment fails when height is longer than one line
alright. I dunno if it's actually tabular data and I have a difficult time determining if it is or isn't. It's a list of records from a database and that list is presented here to choose which record to edit. but I know how to use tables fine, so that's easy enough. thank you daniel On May 1, 2008, at 1:18 PM, Mauricio ((Maujor)) Samy Silva wrote: Hi Daniel, You are presenting data in you document. The content on the page isn't a list of items. The semantic HTML element to present data is the TABLE element. Tables are suppose for data presentation is the mantra. So, use a table. Regards, Mauricio Samy Silva http://www.maujor.com Author do livro: Construindo Sites com CSS e (X)HTML http://livrocss.com.br - Original Message - From: Daniel Kessler [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Thursday, May 01, 2008 12:34 PM Subject: [css-d] ul/li alignment fails when height is longer than one line I'm trying to replicate a table and really am not very good at it yet. It has one column, Department, than can be quite long. I gave it a max width so that it would wrap to multiple lines. Then it is followed by another column, Status. Status isn't multi-lines, so what it does is continue the next line under the status. I tried putting a clear:both on Status thinking it would shift everything else to the next line, but no. This all works if any column doesn't go to two lines. You can see an example of it here (which will show the problem better than I explained it): http://sph.umd.edu/about/dean/expenditure_db/test.cfm -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu .org/help_support_evolt/ -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hope this is the appropriate way to ask this question
I had these recommended to me recently: - Web Design in a Nutshell - CSS Mastery, Advanced Web Standards Solutions - The CSS Anthology, 101 essential Tips, Tricks and Hacks - Designing with Web Standard ed. 2 - Web Standards Creativity - Transcending CSS -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] checkbox margins
I'm trying to set it up so that all checkboxes on my site have a
margin or padding to the right. In my main css, I thought I could
address the element and tried:
checkbox {margin-right:40px; padding-right:40px;}
It didn't work. If I made it into a class, it then worked but I
would have to insert it into each checkbox rather than doing one
sitewide setup.
So how would I get that to work? And if not, do I actually have to
put a class on every single checkbox? I currently have it in a ul/li
but I removed it from there and still couldn't get it to work.
thank you.
--
Daniel Kessler
University of Maryland College Park
School of Public Health
3302E HHP Building
College Park, MD 20742-2611
Phone: 301-405-2545
http://sph.umd.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Resize an Image in relation to Screen Resolution
G'day Everyone I was wondering if someone could help me here. I want to resize an image so that it changes in relation to the screen resolution. I am pretty sure the size needs to be defined as a percentage but I just want to check. Cheers Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] float right, then on next line float right
I'm trying to make a new template for my site by starting over and replicating the way that the old site looked. On the top, I'm trying to have a few elements align right within a container, then another item aligned right below it, then an item aligned left. I'm just learning css and I'm having problems floating right, but still putting items on different lines. Here's what I have: http://sph.umd.edu/includes/header_top_lvl2_a_test.cfm I want the login button on a second line, still on the right but under the search features. Then on a third line, the logo on the left. I'm trying to get it to look like the top of: http://sph.umd.edu/home/blank.cfm I can get it to work by setting a pixel height to the class search_block, but that feels more like a hack. It seems to me that this is really a problem with the way that I set up the flow. Any assistance would be appreciated. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float right, then on next line float right
This worked. I also applied clear:both; to my login class and it
helped there too.
Reading up on Clear helped my understanding of float, so thanks for
that too.
Luckily work has approved for me to buy some css books and study up.
Thank you very much. Have a good weekend!
On Apr 4, 2008, at 12:13 PM, David Laakso wrote:
Daniel Kessler wrote:
http://sph.umd.edu/includes/header_top_lvl2_a_test.cfm
I want the login button on a second line, still on the right but
under the search features. Then on a third line, the logo on the
left. I'm trying to get it to look like the top of:
http://sph.umd.edu/home/blank.cfm
Try:
div.container {border: 1px solid red;overflow: hidden; /*add to
current selector*/}
img {float: left;clear:both;/*add ruleset to style sheet*/}
--
Daniel Kessler
University of Maryland College Park
School of Public Health
3302E HHP Building
College Park, MD 20742-2611
Phone: 301-405-2545
http://sph.umd.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout problem in IE6
URL: http://rsdesignandprint.com/5619lakeforrest/index.html CSS: http://rsdesignandprint.com/5619lakeforrest/index.css The site looks great in every browser except IE6. I figure it's just reading the padding or margins differently than the other browsers. I really don't want to change those attributes to please IE6; is there a fix for it that will make it read it better? Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] browser combatibility issues
| Microsoft told Mac users in January 2006 to stop using IE for | the Mac. | You can't even download it from Microsoft anymore. Now it breaks | sites. It crashes computers and causes kernel panics. No one | is using | (or should be using) IE for the Mac. | | What do your stats say about IE Mac users using that particular | browser to view your sites? I'm betting it's about 0%. Will your | client pay you to code for something that no one is using? | | Theresa Mesa Duly noted. Thanks. The only issue now is the site's footer as it is displayed in IE6. It doesn't stick to the bottom of the page as it should. There should be an easy enough fix for this, correct? URL: http://www.objectivedesigns.com/rsdp/nwc/ CSS: http://www.objectivedesigns.com/rsdp/nwc/index.css Thanks again for all of your continued help on this stuff. Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] removing tables from my template
My site was converted to a template of tables and divs last year. I am trying to make it tableless. I am having quite a bit of trouble doing so. I am working on the main content area first, even though there are tables above and below it. This is because I have assistance on moving over the content for the next few weeks only and the tables above and below the main content area are in includes which I can independently adjust later. The last table in the content area sets the size of the main content (in class lvl1 and then sets a background image (in td class lvl3). When I surround the table in a div and give it the same class as the table, but for a div, it doesn't fill the whole space or not as well as the table. Here is an example of surrounding the table in a div (in an eventual effort of losing the table): http://sph.umd.edu/home/blank2.cfm and here is an example of it looking correct with tables: http://sph.umd.edu/home/blank.cfm Eventually I want to remove the whole table, so I need to work on removing the class from the td too, which went horribly badly. Any advise on working this out is gratefully accepted. It doesn't validate, but I only have 2 errors and this is an effort to eliminate those too. thank you. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] browser combatibility issues
| I don't have IE 5 on the Mac and there is no IE 6 or 7, so no | worries | there. | Good luck. | Zack Frazier Can someone please take a look at the site in IE on a mac and offer some guidance as to why it's messing up the site's layout so badly? Just a reminder, the url is http://www.objectivedesigns.com/rsdp/nwc/, and the css is http://www.objectivedesigns.com/rsdp/nwc/index.css. That browser/platform is having some major page layout issues. If you click around to the different pages, you'll see what I'm talking about. Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] browser combatibility issues
URL: http://www.objectivedesigns.com/rsdp/nwc/photos.html CSS: http://www.objectivedesigns.com/rsdp/nwc/index.css FF (mac+pc) and Opera (pc [haven't tested on mac]) displays the semi-transparent properties of the photo thumbnails correctly, but Safari (mac+pc) shows the rollover state incorrectly, and IE7 (pc [haven't tested on mac]) doesn't show the semi-transparent property at all. Also (this isn't as big of a problem, but a problem nonetheless), IE7 doesn't show the border-bottom on the rsdesignandprint.com link in the footer of all the pages. Any help would be appreciated, and if anyone could test the site in Opera (mac), IE (mac), and IE6, that would be fantastic. Thanks much. And again, use FF as the standard for how it should behave. Daniel Hammond 2227 Dunseath Avenue Atlanta, GA 30318 770-842-8817 www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] browser combatibility issues
| 1) The height of your anchor is being computed to 12px even
| though the
| image is larger. This fixes the problem by forcing the anchor
| to wrap
| around the whole image ...
|
| photo_v a {
| display: block;
| }
Thanks, that fixed it in Safari. IE still ignores it altogether, but I guess
that's ok.
Daniel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
