[css-d] Alignment problem in IE
One final IE quirk to tweak.I have the content for this and other pages specified so that the title, arrows, and art all center align. But its not matching up in IE. Would this be another case of adding padding: 0 somewhere to correct IE? http://www.drk-writing.com/northwesternesse/FanArt/ab_samgift.htm Stylesheet: body { background-attachment: fixed; background-color: #fff; background-position: center; text-align: center; scrollbar-face-color: #030; scrollbar-shadow-color: #66846A; scrollbar-highlight-color: #66846A; scrollbar-3dlight-color: #030; scrollbar-darkshadow-color: #003300; scrollbar-track-color: #fff; scrollbar-arrow-color: #fff; } p { font-family: 'Comic Sans MS', sans-serif; font-size: 14px; color: #000; text-align: center; } h1 { font-family: 'Comic Sans MS', sans-serif; font-size: 16px; text-align: center; color: #030; font-weight: normal; } .text { text-align: left; } #box { width: 740px; margin: 10px auto 10px auto; line-height: 115%; text-align: left; border: solid 1px #030; color: #000; } #banner { background-color: #030; border-bottom: 1px solid #030; width: 100%; margin-bottom: 0; } /*top menu*/ #menu { margin: 0 auto 0 auto; padding: .25em 0 .25em 0; border-bottom: solid 1px #030; text-align: center; width: 100%; } /*content for poems and art*/ #content { padding: 1.5em 1.5em 2.5em 1.5em; width: 30em; margin: 0 auto 0 auto; } /*bottom links and copyright statement*/ #footer { clear: both; padding: .5em; border-top: 1px solid #030; text-align: center; } .navcopyright { display: inline; font-family: 'Comic Sans MS', sans-serif; font-size: 10px; line-height: 14px; text-align: center; color: #030; } /*left-align text for poems*/ .text { text-align: left; } /*art nav arrows*/ img.arrow { padding-left: .5em; padding-right: .5em; } Is there a place that lists what fixes can be made in IE for different types of problems? This will just about do it for all the sites I'm working on...thanks again to everyone for their abundance of help...I have been quite amazed at all the help I've gotten...I've been wanting to clear some of these issues up for a while now. Thanks and Happy Holidays! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Three Column Site - float problem
Hi All I am currently developing a three column site for Wordpress. However, I am having some problems with floating the columns. The site is at: http://www.swmug.co.uk/ The css is at: http://www.swmug.co.uk/wp-content/themes/TimWordpress/style.css Any ideas please what I need to do to get the columns to float side by side? Many thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Myspace
Myspace and Tom are not interested in their markup as 80% of their response to to requests is not xhtml/css. It's .jpg, .mov, .etc. Get over the fact that http doesn't always mean the information you want to serve. - Original Message - From: D Ross [EMAIL PROTECTED] To: Brian Cummiskey [EMAIL PROTECTED] Cc: CSS css-d@lists.css-discuss.org Sent: Wednesday, December 21, 2005 11:45 PM Subject: Re: [css-d] Myspace This guy used to have an amazing myspace page but it appears they deleted it for some reason...I saw it before they did and was in awe that he could make all that table junk look like what he had it to. I checked out his code and he had used display: none and replaced table cells with divs and just replaced the content into the divs. Here's his site and about halfway down is a screenshot of what it looked like. http://www.timbenzinger.com/ I spent like 20 min on my page one night when i was bored, before i got frustrated with it. You can't do anything good with it because 90% of the tag-soup contains font tags and so forth that end up just over-riding your css. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] [ADMIN] Re: Myspace
Loads of stuff about myspace If anyone wants to discuss the practicalities of actually styling myspace pages then go ahead, but other than that, we've had more than enough about myspace, kay? Alex css-d moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Two Column/Three Column Help
Hi All I recently asked for help for this site: http://www.swmug.co.uk/ I was advised that my maths skills were somewhat out! Anyway, I have been thinking and realised that I could have made the site two column and place the image that is in the left column within the content and set a padding. Please could I ask what would be the merits of creating: 1. Two column with background image and padding 2. Three column with a column dedicated to an image. Many thanks -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Flash objects in MacIE5.2
Hi all. Could anyone please help with an IE5 Mac problem? I'm putting a site together at: http://townandcountry.philtreble.net/template.php (CSS within document). I've used two Flash objects... one for header banner and one for the LED display. On Mac IE5 the LED display gets put over the main navigation. I've tried inserting various 'clear: both;'s and 'display: block;'s but none have worked. oh and Merry Christmas! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] firefox error?
Hi guys, Another colleague problem here (seems I'm the officially elected rep for css-d): These three floats are level in Internet Explorer but not in Firefox for some reason. Most baffling. Due to privacy issues I'm unfortunately not able to share the site with you, but I can show you a screenshot (off-list). The columns look like this: |--| ANNOYING GAP HERE | | |--| |--| | | | | | | | | | | | | Here is the code: div class=gallery div class=gcol1 ul class=col1ul liimg src=image.jpg class=pic width=250 height=188 alt=image of a balloon title=snowman //li liimg src=image.jpg class=pic width=250 height=188 alt=picture of a cathedral and balloons title=cathedral //li liimg src=image.jpg class=pic width=250 height=188 alt=picture of an arch of balloons title=balloon arch //li liimg src=image.jpg class=pic width=250 height=188 alt=picture of an army band and balloons title=army //li liimg src=image.jpg class=pic width=250 height=188 alt=picture of balloons being released title=release //li /ul /div div class=gcol2 ul class=col1ul liimg src=image.jpg class=pic width=250 height=188 alt=image of a balloon at a function table title= //li liimg src=image.jpg class=pic width=250 height=188 alt=image of balloons promoting a store title=store //li liimg src=image.jpg class=pic width=250 height=188 alt=picture of multi-coloured balloons title=multi //li liimg src=image.jpg class=pic width=250 height=188 alt=picture of an arch of balloons over a honda car title=honda //li liimg src=image.jpg class=pic width=250 height=188 alt=picture of a council building decorated with balloons title=council //li /ul /div div class=gcol3 ul class=col3ul liimg src=image.jpg class=pic width=250 height=188 alt=picture of an arch of balloons title=arch //li liimg src=image.jpg class=pic width=250 height=188 alt=picture of a car made of balloons title=balloon car //li liimg src=image.jpg class=pic width=250 height=188 alt=picture of two flowers made from balloons title=flowers //li liimg src=image.jpg class=pic width=250 height=188 alt=photo of an anchor made of balloons title=anchor //li liimg src=image.jpg class=pic width=250 height=188 alt=image of an arch of balloons title=arch //li /ul /div div class=gallerytext pContent/p /div div id=rest br / /div /div .gcol1 { float: left; text-align: center; width: 260px; margin: 0; padding: 0; } .gcol2 { float: left; text-align: center; width: 260px; margin: 0; padding: 0; } .gcol3 { float: right; text-align: center; width: 260px; margin: 0; padding: 0; } .col1ul { list-style-type: none; padding: 0; margin: 0; } .col2ul { list-style-type: none; padding: 0; margin: 0; } .col3ul { list-style-type: none; margin: 0; padding: 0; } .gallery { width: 780px; } .gallerytext { width: 65%; float: left; text-align: justify; background: #eee; margin-left: 6px; margin-top: 0; } #rest { clear: both; } Sorry not to be able to offer more. Thanks for any help. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE 6 WIN - styled li bleeding into p
Greetings, The first list entry in this page: http://mbreiding.us/fl_rt/all.html looks fine in FF 1.7 WIN div id=odd h3Baldwin to Jacksonville/h3 liRTCnbsp;nbsp; FPBT/li pRegion: Northernbr Location: Baldwin to Jacksonvillebr Activities: Walking, Horseback Riding, Bikingbr Length: 14 miles /p /div In IE 6 WIN the styling from the li tag style is inherited ( if that is the right word ) by thep following the li tag. Solutions? Thanks, -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] firefox error?
Spike, On Dec 22, 2005, at 7:56 AM, Spike Spencer wrote: Due to privacy issues I'm unfortunately not able to share the site with you, but I can show you a screenshot (off-list). The columns look like this: |--| ANNOYING GAP HERE | | |--| |--| | | | | | | | | | | | | This may need a real page to diagnose. Is there any way you can make a test case, or take a copy of the page and strip out the sensitive info? This could be content sticking out of col1, or it could be something in the content above cols 2 and 3 whose margin is touching. Roger, Roger Roelofs [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 WIN - styled li bleeding into p
At 08:22 AM 12/22/2005 , Thomas Peklak wrote: Hi! Mayby it helps, when you write the valid html-code for the list-element: div id=odd h3Baldwin to Jacksonville/h3 ul liRTCnbsp;nbsp; FPBT/li /ul pRegion: Northernbr Location: Baldwin to Jacksonvillebr Activities: Walking, Horseback Riding, Bikingbr Length: 14 miles /p /div Hope this helps. Best regards, Thomas Yes! New CSS: #wrapper ul, li {display: inline; margin-left: 30px; background-color:white; list-style-type:none; font-size:13px; font-family:Verdana, Helvetica, Arial, Helv, sans-serif; line-height: 25px; font-weight:bold; padding: 0 6px 0 6px} Correct (?) HTML div id=odd h3Baldwin to Jacksonville Rail-Trail/h3 ulli14 miles/liliRTCnbsp;nbsp; FPBT/li/ul pRegion: Northernbr Location: Baldwin to Jacksonvillebr Activities: Walking, Horseback Riding, Bikingbr /p /div Thanks to all, -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] clearing a float without using a float
Roger Roelofs wrote: As Zoe said, you need a new 'block formatting context' All of the following will do that float: left; position: absolute; display: table; But, all of these cause the container to 'shrink-wrap' Floating .inside seems the most typical approach, but other approaches may be better in your circumstances. There are always trade-offs... Aditionally: * display:inline-block (not Gecko) * the overflow property (other than visible, the default). * display:table-cell (weak in Safari) Each have strengths and weaknesses. for IE win, you can also use 'hasLayout' winIE property (setting a width/height on the container). Thanks, that's exactly the information I needed. I didn't know what constituted a new block formatting context, which makes it hard to do that. I wish there was an option block-format: new; or something. O:-) Roger - I agree, it seems my inside div is my best bet from what you both say. I need that outside content div just right for the other divs I show/hide, and getting *that* layout working in different browsers was fun... Yeah, fun... [PS: thanks Georg!] Philippe - the browser check for the properties you gave will come in handy and hopefully I'll be able to find one that displays well in them all. Fortunately I must have already triggered haslayout for IE, since it's displaying just fine. Whew. Many thanks again, cj __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Challenging layout - can this be done?
- Original Message From: Gunlaug Sørtun [EMAIL PROTECTED] Tom Dell'Aringa wrote: http://www.pixelmech.com/rev/tile.html Not sure if I got it right, but... http://www.gunlaug.no/tos/alien/test_9310.html ...was the only thing I could think of. Maybe you can change it into something useful. IE/win needs a bit of help on the basics (hover all), but the other browsers should be fine. Son of a Gun George, you always nail it :) I don't know why the z-index thing would not work for me, but this works fine in Mozzy. (I can deal with using only one browser at least for now). I can definitely work with this. Thanks! Tom __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Column/Three Column Help
Richard Brown wrote: I recently asked for help for this site: http://www.swmug.co.uk/ I was advised that my maths skills were somewhat out! Anyway, I have been thinking and realised that I could have made the site two column and place the image that is in the left column within the content and set a padding. Please could I ask what would be the merits of creating: 1. Two column with background image and padding 2. Three column with a column dedicated to an image. I do not know, Rich. Despite 1 css error and 38 markup errors, whatever it is you've got now(I did not look at the code or markup, other than the body declaration) is working fairly well in XP and cross-browser.http://www.browsercam.com/public.aspx?proj_id=215760.The page is only centered in IE. Adding margin: 0 auto; to the outermost container may do it for good browsers. You need a background-color on the body. Your page is fuchsia w/images disabled on my version of Opera(add html to the body declaration w/ a background color). You've got a 40px scroll bar at 800. The site functions with it, but you'll need to trim widths if you want to get rid of it. Best, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Myspace
D Ross wrote: This guy used to have an amazing myspace page but it appears they deleted it for some reason... They deleted it because he removed the ads from display. That's the big thing in myspace terms of service. You can do anything you want to your design, but you cannot cover up the ads. I saw it before they did and was in awe that he could make all that table junk look like what he had it to. I checked out his code and he had used display: none and replaced table cells with divs and just replaced the content into the divs. yup, thats the easy way to do it... Here's his site and about halfway down is a screenshot of what it looked like. http://www.timbenzinger.com/ That's very nice, but again, it breaks the TOS, so it was rightfully deleted. Perhaps they should have simply warned him to put the ads back in instead of just deleting it? I don't know... But, this is starting to get seriously off-topic. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Myspace
But, this is starting to get seriously off-topic. OK, just to reiterate, when I wrote earlier today we've had more than enough about myspace, kay? what I meant was for people not to continue this thread. This thread is over. Is that clear enough? Alex css-d moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 support for min-height.
does anyone know the current position regarding min-height support in IE7? or more specifically, what will happen to CSS rules written thus: div.headline{ height: 40px; min-height: 40px; padding: 1px 0 0 0; } htmlbody div.headline{ height: auto; } where height set to 40px in the first declaration is reset to auto using a child selector, so that *good* browsers allow the div to grow with larger fonts or more content... (height acting as min-height in IE which can't see the child selector) AIUI IE7 will support child selectors which will mean without min-height support my headline will collapse to the size of it's content... (I have a lot of style sheets using this) TIA Tony -- Join me: http://wiki.workalone.co.uk/ Thank me: http://www.amazon.co.uk/gp/registry/1VK42TQL7VD2F Engage me: http://www.boldfish.co.uk/portfolio/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Interesting IE bug with overflow inside an anchor
I don't know if anyone's seen this before, but I ran into it recently working on a photo gallery site for a friend: http://gallery.marshallweb.ca/ In FF, the images in the little square boxes are clickable, in IE5/6, they aren't. A span inside the anchor is being set to overflow:hidden, and then that's being used to crop a rectangular thumbnail into the square shape (with negative margins to center on the middle of the thumb). The simplest solution, I think, is to just move the anchor INSIDE the cropping element, instead of wrapped around it, but it's kind of a baffling problem. (particularly creepy that draping a second---absolutely positioned---anchor in front of the whole business appeared to have no effect.) Anyone seen this documented anywhere? (the miniboxes are also present on single-view pages: eg, http://gallery.marshallweb.ca/georgian-bay-august-2004/dsc_0092 ) Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Challenging layout - can this be done?
Tom Dell'Aringa wrote: http://www.gunlaug.no/tos/alien/test_9310.html or http://www.gunlaug.no/tos/alien/test_9311.html IE/win needs a bit of help on the basics (hover all), but the other browsers should be fine. Son of a Gun George, you always nail it :) I don't know why the z-index thing would not work for me, but this works fine in Mozzy. (I can deal with using only one browser at least for now). I can definitely work with this. Thanks! You created overlaps in your original page. I took out half of the elements in each row and avoided overlaps. I also avoided using 'position: absolute' since that tends to force layering and overlaps. I am more comfortable with 'floats' and 'negative margins'. I didn't give it a test, but I think you can improve things by adding a Whatever:hover http://www.xs4all.nl/~peterned/htc/csshover2.htc to let IE6 in on the game. Other variants around... My latest version (test_9311.html) does work in some older Opera-versions (and I regard all versions older than Opera9prev1 as old :-) ) Older Opera can't layer floats, while Opera9prev1 can. A tip: no need to use large z-index values to lift layers on hover. They only have to be larger than the ones surrounding them. 1 - 2 - 3 will do just fine in most cases, or else the cases should be reviewed. And, yes, IE/win do have some peculiar reactions to z-index when compared to other browsers. Not /too/ bad on simple layouts though. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Peekaboo bug?
I am reposting this only because I don't know what the protocol is for placing Site Check in your subject line is, i.e. I didn't know if that was to get comments or to show a problem. Anyway, we are on deadline and wanted to get help with this possible bug: http://www.haroldstevens.com/redesign/contact.html We are having a problem with one of our sites wherein the left nav shifts either on load or refresh (i.e. if you cannot get it immediately then refresh and you will see the probelm). This is only in IE and looks like it might be an instance of the Peekaboo bug. But we already have code in place to handle that. Can you check it for us? Thanks in advance. -- Jonathan Berry, M.A. IT Consultant 619.306.1712(m) [EMAIL PROTECTED] www.mindarc.com --- This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. --- -- Jonathan Berry, M.A. IT Consultant 619.306.1712(m) [EMAIL PROTECTED] www.mindarc.com --- This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. --- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 support for min-height.
At 7:20 PM + 12/22/05, Tony Crockford wrote: does anyone know the current position regarding min-height support in IE7? Nobody outside Microsoft does. In the various IE team postings about what will be added or fixed in IE7, 'min-height' (along with its cousins) has not been mentioned. I have taken this to mean that their addition is unlikely, but not absolutely ruled out. We'll just have to wait to see what happens. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peekaboo bug? - harolds
Jonathan Berry wrote: http://www.haroldstevens.com/redesign/contact.html http://mrmazda.no-ip.com/SS/jonab1.jpg I wouldn't worry so much about peekaboo as your visitors' first reaction hitting the back button. Who can or wants to read text 3/8 the size of their default (.text-box {font-size: 62%;})? http://members.ij.net/mrmazda/auth/area60.html Browser makers provide users with a preference adjustment precisely so that they can optimize to the size that best suits them. So, defer to what your users prefer, leaving your content's P text unsized, or reinforcing it with an explicit font-size: medium. Too small text is the #1 complaint from web users: http://www.useit.com/alertbox/designmistakes.html See also: http://members.ij.net/mrmazda/auth/defaultsize.html http://members.ij.net/mrmazda/auth/Font/font-size-quotes.html http://members.ij.net/mrmazda/auth/accessibility.html -- Jesus Christ is the reason for the season. Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://members.ij.net/mrmazda/auth/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peekaboo bug? - harolds
Browser makers provide users with a preference adjustment precisely so that they can optimize to the size that best suits them. So, defer to what your users prefer, leaving your content's P text unsized, or reinforcing it with an explicit font-size: medium. Too small text is the #1 complaint from web users: http://www.useit.com/alertbox/designmistakes.html Felix Miata The phrase Too small text is the #1 complaint from web users, while it may or may not be true, is a gross extrapolation from the link provided as support. It would be more accurate to say that the #1 complaint of subscribers to Jakob Nielson's Newsletter who responded to a survey directed at them is... Regards, Ron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peekaboo bug?
Jonathan Berry wrote: http://www.haroldstevens.com/redesign/contact.html Trying to access your page with text zoom maximized freezes IE here. With zoom set to middle the page loads and shows the problem you described. Changing the zoom by one step, reloading the page and changin again freezes it here too. If it freezes at your side too with this manipulations, you should try to minimize your page, drop all that js stuff, remove all html comments. Then remove the elements step by step to encircle the problem. Such a freeze/loop is often caused in IE by tight float settings which tend to cause duplicated chars. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] External CSS caching
Hi Troy, You wrote: Normally, the fact that the browser caches the external style sheet benefits the user. But while working on a large, commercial site, the problem of browsers recalling old external CSS from their cache has come up. If the external style sheet has changed, and the browser uses a cached version, the user will likely see some display problems. Assuming you are talking about a testing environment, there are several solutions. Most simple is to use a browser's options. In IE, from the menu at the top, choose Tools Internet options General, then use the Delete files button. Firefox? Easiest way - get the Web Developer's Tool Bar, open the Miscellaneous item, and select Clear Cache from the list (#1). Opera - Preferences Advanced History. For the Disk Cache item, either use the Empty Now button, or check the Empty on exit checkbox and close / open Opera every time you suspect a cacheing problem. (Opera opens fast, and you can even reopen it at the original set of pages.) The other alternative is to configure Apache (if that's what you are using) to set HTTP headers to expire CSS files. You may be able to do this with htaccess files[1] - but we are heading WAY off topic. I am sending this to the list only because cache control can mess up CSS testing, as you say. [1] http://www.web-caching.com/mnot_tutorial/notes.html Cordially, David -- David Hucklesby, on 12/22/2005 http://www.hucklesby.com/ -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two Column/Three Column Help
On 12/22/05, Richard Brown [EMAIL PROTECTED] wrote: Hi All I recently asked for help for this site: http://www.swmug.co.uk/ I was advised that my maths skills were somewhat out! Anyway, I have been thinking and realised that I could have made the site two column and place the image that is in the left column within the content and set a padding. Please could I ask what would be the merits of creating: 1. Two column with background image and padding 2. Three column with a column dedicated to an image. You do not want a column dedicated to an image. That's not semantic at all. Just have the background image on the left column or the wrapper for both columns, and yes, have padding. Beware of box model problems with old browsers like IE 5: to avoid this, you can have a fixed width wrapper with the background image, and an inner div with a left margin equal to the background image and an auto width. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] firefox error?
On 12/22/05, Spike Spencer [EMAIL PROTECTED] wrote: Hi guys, Another colleague problem here (seems I'm the officially elected rep for css-d): These three floats are level in Internet Explorer but not in Firefox for some reason. Most baffling. Due to privacy issues I'm unfortunately not able to share the site with you, but I can show you a screenshot (off-list). The columns look like this: |--| ANNOYING GAP HERE | | |--| |--| | | | | | | | | | | | | The only fix I can suggest is to float all the columns in the same direction, such as left. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peekaboo bug? - harolds - Jakob's - OT
(My original reply was an accidental CC here, sorry.) Pringle, Ron wrote: It would be more accurate to say that the #1 complaint of subscribers to Jakob Nielson's Newsletter who responded to a survey directed at them is... Precisely the kind of people who care about web accessibility and usability, hardly a bad sample, and certainly a better sample than one taken entirely from among the population of web designers. It certainly agrees with my experience discussing the issue with people whose puters I'm fixing. -- Jesus Christ is the reason for the season. Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://members.ij.net/mrmazda/auth/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peekaboo bug?
Jonathan Berry wrote: http://www.haroldstevens.com/redesign/contact.html Trying to access your page with text zoom maximized freezes IE here. With zoom set to middle the page loads and shows the problem you described. Changing the zoom by one step, reloading the page and changin again freezes it here too. If it freezes at your side too with this manipulations, you should try to minimize your page, drop all that js stuff, remove all html comments. Then remove the elements step by step to encircle the problem. Such a freeze/loop is often caused in IE by tight float settings which tend to cause duplicated chars. Ingo +1 on Ingo's observations. I get the same freezing effect when changing the zoom levels in IE. As the page draws the header in, I'd look at the comments right before, and then the code pertaining to the main table you're using for layout (and the div enclosing it), followed by the code for that lefthand nav. I encountered a similar bug on my site which Ingo was thankfully able to isolate after much teeth gnashing. In my case it turned out to be the duplicate characters bug trying to apply itself to an empty div, causing some sort of infinite loop. That may not apply in your case, but I'd pay attention to those comments I mentioned above as a possible first step. Regards, Ron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peekaboo bug? - harolds - Jakob's - OT
Felix and Ron wrote stuff about fonts and usability which essentially has nothing to do with CSS STOP! You have entered holy war territory. Proceed directly to the wiki pages and channel your energy into expanding the pages there on using fonts. Feel free to add as much opinion as you like but please refrain from continuing this thread. Remember: every time a moderator is compelled to send an essentially pointless Don't post a message that you know you shouldn't warning to every single member of the list (that's 6808 right here, right now), a kitten dies. Seriously, please stick to the practical application of css and actually answer the specific questions that people ask. Alex css-d moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peekaboo bug?
Jonathan Berry wrote: We are having a problem with one of our sites wherein the left nav shifts either on load or refresh (i.e. if you cannot get it immediately then refresh and you will see the probelm). This is only in IE and looks like it might be an instance of the Peekaboo bug. But we already have code in place to handle that. Can you check it for us? Thanks in advance. Well, it does look like the Peekaboo bug, but as you say, there seem to be several things in place that should fix it such as fixed width and height and position: relative in likely places, not to mention the Holly hack popping up here and there. Since your html doesn't validate, can't validate your CSS either. Perhaps this would be somewhere to start, since obvious causes elude detection? Best I can humbly offer is to consider what other elements could be triggering it, and put position: relative on everything with angle brackets... (like seriously - spray a copy of the page with it, and see if the problem goes away. Then you can prune it all back and see if the offending element becomes obvious. Not so scientific, but could be worth a go if time is short?) Also perhaps worth investigating - what happens if you remove the backgrounds from the elements concerned? Can these be applied anywhere else? hth Cheers Ian PS - What's with the float: none; on the .Nav-Box element? -- _ zStudio - Web development and accessibility http://zStudio.co.uk Snippetz.net BETA - Online code library File, manage and re-use your code snippets online http://snippetz.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problems with nested uls used for tabbed navigation in IE 6.0
Hi, I recently adapted Adam Kalsey's CSS tabs with nested submenus made up of uls (http://www.kalsey.com/tools/csstabs/) to create three levels of navigation for a calendar. For some reason, my page (http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports -ucb-nested.htm) looks great in Firefox 1.5 but horrible in IE 6.0 and I can't figure out why. The page is no longer centered and the second and third level navigation is rendering vertically instead of horizontally. I've used uls to create this navigation and I've made sure all the uls and lis in the submenus are marked display:inline. Anyone have any suggestions for me? Thanks very much! Allison Bloodworth Principal Administrative Analyst e-Berkeley Program Office University of California, Berkeley (415) 377-8243 [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problems with nested uls used for tabbed navigation in IE 6.0
On 12/22/2005 5:39 PM Allison Bloodworth wrote: I recently adapted Adam Kalsey's CSS tabs with nested submenus made up of uls (http://www.kalsey.com/tools/csstabs/) to create three levels of navigation for a calendar. For some reason, my page (http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports -ucb-nested.htm) looks great in Firefox 1.5 but horrible in IE 6.0 and I can't figure out why. The page is no longer centered and the second and third level navigation is rendering vertically instead of horizontally. I've used uls to create this navigation and I've made sure all the uls and lis in the submenus are marked display:inline. Anyone have any suggestions for me? Your DOCTYPE puts IE into quirks mode. Try this (with the URI): !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd; It seemed to take care of most of the issues you mentioned, though I'll admit I didn't look at everything. -- Steve Clason Web Design and Development Boulder, Colorado, USA www.topdogstrategy.com (303)818-8590 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peekaboo bug? - harolds
Jonathan Berry wrote: http://www.haroldstevens.com/redesign/contact.html When I kick the font size up one step in Firefox 1.5, the Click here to view a printable version starts to hide under the Visit our showroom area. Another step makes the printable version link disappear completely and a vertical scroll bar appear beside the images. At my default font size, the Diamond Technology link cuts off at the g (it doesn't wrap). -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peekaboo bug?
Thank you to all who commented. This site is one of our templated sites from our Infosites group. They use the same code/CSS for all their sites, but something was disturbed with this new one. The issues about font size/zooming are something that I will have to investigate with our other sites in this category and talk to their design team about. (The designer of this particular site is on vacation so I was left with trying to help them with this.) I will try the fixes tomorrow and post back my results. Thank you again for all the help. On 12/22/05, Ian Anderson [EMAIL PROTECTED] wrote: Jonathan Berry wrote: We are having a problem with one of our sites wherein the left nav shifts either on load or refresh (i.e. if you cannot get it immediately then refresh and you will see the probelm). This is only in IE and looks like it might be an instance of the Peekaboo bug. But we already have code in place to handle that. Can you check it for us? Thanks in advance. Well, it does look like the Peekaboo bug, but as you say, there seem to be several things in place that should fix it such as fixed width and height and position: relative in likely places, not to mention the Holly hack popping up here and there. Since your html doesn't validate, can't validate your CSS either. Perhaps this would be somewhere to start, since obvious causes elude detection? Best I can humbly offer is to consider what other elements could be triggering it, and put position: relative on everything with angle brackets... (like seriously - spray a copy of the page with it, and see if the problem goes away. Then you can prune it all back and see if the offending element becomes obvious. Not so scientific, but could be worth a go if time is short?) Also perhaps worth investigating - what happens if you remove the backgrounds from the elements concerned? Can these be applied anywhere else? hth Cheers Ian PS - What's with the float: none; on the .Nav-Box element? -- _ zStudio - Web development and accessibility http://zStudio.co.uk Snippetz.net BETA - Online code library File, manage and re-use your code snippets online http://snippetz.net -- Jonathan Berry, M.A. IT Consultant 619.306.1712(m) [EMAIL PROTECTED] www.mindarc.com --- This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. --- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peekaboo bug?
Hi Jonathan, What I get here when I reload the page in IE6 is a crash. Once the initial load crashed the browser. The second time, the page loaded ok (probably from the cache) but when re-loaded the browser hung up after loading the header. In Firefox, I get a flicker when the page loads. In the past when I've had this problem, it was due to not having image heights and widths specified. Once I fixed that, no more flicker. HTH, Bill -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jonathan Berry Sent: Thursday, December 22, 2005 12:21 PM To: css-d@lists.css-discuss.org Subject: [css-d] Peekaboo bug? I am reposting this only because I don't know what the protocol is for placing Site Check in your subject line is, i.e. I didn't know if that was to get comments or to show a problem. Anyway, we are on deadline and wanted to get help with this possible bug: http://www.haroldstevens.com/redesign/contact.html We are having a problem with one of our sites wherein the left nav shifts either on load or refresh (i.e. if you cannot get it immediately then refresh and you will see the probelm). This is only in IE and looks like it might be an instance of the Peekaboo bug. But we already have code in place to handle that. Can you check it for us? Thanks in advance. -- Jonathan Berry, M.A. IT Consultant 619.306.1712(m) [EMAIL PROTECTED] www.mindarc.com --- This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. --- -- Jonathan Berry, M.A. IT Consultant 619.306.1712(m) [EMAIL PROTECTED] www.mindarc.com --- This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. --- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/