Re: [css-d] IE7 background-image reload
Rich: I have now tried all configurations for the cache, and the behavior is the same every time. It's the same for me whether I'm looking at the copy up on the website, or the one in localhost. People who also see the issue include: another person running IE7, on the same network; someone running IE8, on a completely different network in a different state. I'm curious to know whether or not you are running your browser with the cache disabled? I usually do, as I do a lot of web development and need to see changes immediately. Without the cache, the browser would need to reload the image from the server each time, and if the image is of a certain size it would take a certain time to load on the average internet connection. However, when I turned off my cache, I couldn't reproduce the flickering, I'm assuming because my computer loads the image locally at that point. Hope that helps, Rich In IE7.0 (at least), the background-image here: http://datagnostics.com/test/Tindex.html reloads every time I refresh the page, producing a very-irritating flicker. Things that I have tried that don't fix it: 1. Giving layout to the div in question (via zoom:1;) and to its parent, BODY. 2. putting all the CSS in the header instead of loading it as a link or @include. 3. putting javascript above or below the CSS. 4. cussing. Any suggestions? Mary Ellen http://datagnostics.com Mary Ellen Doctor Science, MA http://doctorscience.blogspot.com http://goodbookoftheday.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] IE7 background-image reload
In IE7.0 (at least), the background-image here: http://datagnostics.com/test/Tindex.html reloads every time I refresh the page, producing a very-irritating flicker. Things that I have tried that don't fix it: 1. Giving layout to the div in question (via zoom:1;) and to its parent, BODY. 2. putting all the CSS in the header instead of loading it as a link or @include. 3. putting javascript above or below the CSS. 4. cussing. Any suggestions? Mary Ellen http://datagnostics.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] Vertical-Align, IE, line-height, and span don't mix
Here's my current nightmare: http://datagnostics.com/test/vertical.html I've got superscript text that needs to be all over the page -- it's part of the company name. I set a line-height in BODY. I'm doing the superscript via a span class, with attribute vertical-align: super. In IE, the superscript mucks up the borders and margins -- it's as though the element block goes up and never comes back down when I close the superscript. If I set the element to line-height: normal, this stops. HOWEVER, if the element is inside an li (not a ul), line-height: normal doesn't fix it. Help me, Obi-CSS-d. Mary Ellen Doctor Science, MA http://doctorscience.blogspot.com http://goodbookoftheday.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/
Re: [css-d] [+] Vertical-Align, IE, line-height, and span don't mix
Thierry told me:
You need to help IE by giving the parent a layout.
Try h3 {zoom:1;}
And it worked!
http://datagnostics.com/test/vertical.html
My hero.
I'm sure having layout seemed like a good idea at the time, really ...
to someone
Mary Ellen
Doctor Science, MA
http://doctorscience.blogspot.com
http://goodbookoftheday.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] Any progress on HR styling in IE?
I like to use an image for HR elements, especially on very graphic-intensive sites. The trouble is that pesky border IE keeps putting around them. As of several years ago, hackery seemed to be the only way to make IE's hr images border-free: 1. Wrapping HR in a div: http://www.sovavsiti.cz/css/hr.html 2. or giving IE different code: http://saila.com/webdesign/tips/hr/ Has anyone come up with anything better in recent years? Mary Ellen Doctor Science, MA http://goodbookoftheday.com http://doctorscience.blogspot.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/
Re: [css-d] browser difference with pt measurements in print stylesheet
This is a follow-up -- and answer! -- to a question from last year that was never really answered. http://archivist.incutio.com/viewlist/css-discuss/100389 Loek Hilgersom on 15 July 2008 13:01 wrote: In a print stylesheet I followed the book and use font-sizes in pt's. However, printing from different browsers I find considerable size differences: in IE7 and Safari/Win the characters are only about 60% the size of what they are in the Firefox output. I found Loek's post when I encountered a similar problem this week, and couldn't figure out what the heck was going on. I eventually found a solution, so I'm posting here for the edification of future generations. The problem arises when 2 (or possibly three) factors interact: 1. you've specified a print stylesheet with font-size in pts. 2. you have *anywhere on the page that is going to be printed* an element with a specified width wider than the printed page will be 3. especially if your screen size and resolution combination makes the viewport/page not very many pixels wide. Illustration -- all the PDFs were produced on my machine, which has a resolution of 1024px wide. My coworker with the 1800px (or more) screen had no problems printing from any browser. a. http://datagnostics.com/test/fontsize.html On this page the font is 12pt and all containers are no more than 504pt (7 inches) wide. Here is how it prints out for me in IE7-8, FF3, and IE6: http://datagnostics.com/test/Fontsize%20page%20Printed%20in%20FF.pdf No problem. b. http://datagnostics.com/test/fontsize2.html This page displays almost the same on screen -- the only difference is extra white space on the right. That's because the container that includes the block of text and picture has a width of 1100px specified. When I print it in IE8 or FireFox, I get this: http://datagnostics.com/test/Fontsize2%20page%20Printed%20in%20FF.pdf What is labelled 14pt is now smaller than true 12pt. Notice that the font size reduction acts across the board, whether the text in question is inside the wide div or not. Apparently both IE7+ and FF will reduce a point-specified font to serve you better if that's the only way to keep the text from slopping over to the right during printing. I haven't run enough experiments to find the exact parameters of the reduction -- the font isn't extra-super-reduced when the wide div is 2000px instead of 1100, for instance. http://datagnostics.com/test/fontsize3.html Overall, though, it looks as though our print stylesheets need to carefully reduce the width of *all* divs for consistent, legible printing. Probably they have to be no more than 504pt, unless we're instructing the users to use landscape printing. Mary Ellen Doctor Science, MA __ 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] Background:transparent in IE7
Ooooh noo, not hasLayout! I've tried adding an explicit width, width and height, and zoom:1 to the li elements. So far, no dice: http://datagnostics.com/test/transparent.html Only float:left has worked so far. Should I be trying to force the a elements to have layout? Or something else? Mary Ellen Doctor Science, MA __ 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] Background:transparent in IE7
I've found some curious behavior with background:transparent in IE7. I was working on a CSS image replacement, and was seeing the old IE flicker. In the course of trouble-shooting I made a version using only differently-colored backgrounds, not images. You can see my test page here: http://datagnostics.com/test/transparent.html The underlying div has a red background, the link on top has a blue background. a:hover is background:transparent, so that the link-block turns from blue to red on hover. It works fine in Mozilla, but in IE7 the link block flickers as you mouse over it, and the cursor flickers between hand and arrow. If a:hover is made any solid color, there's no problem -- it's only background: transparent that's the issue. To double-check, I gave a:hover the background of a random image that was at hand, which happened to be a transparent .gif. Not only did the flicker stop in IE7, the underlying red background can be seen through the .gif. It turns out that this also works when the image is a clear spacer .gif. Furthermore, when I remove anything on the hover state and make the background of the link block transparent, the cursor keeps flickering between hand/arrow as I move the mouse. It looks to me as though there's something unstable about the way IE7 interprets background:transparent for links. Is this problem also present for IE6? (I can't check because my IE6 machine is down for repairs.) Is spacer.gif the way around it, or should we try something else? Mary Ellen Doctor Science, MA __ 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] Background:transparent in IE7
Alan Gresley wrote:
I don't know why it happens but floating the list fixes the bug in IE7
and doesn't seem to effect other browsers.
.menu ul, .menu li {
list-style:none;margin: 0;padding: 0;
float:left; /* ADD */
}
Thanks, Alan. I've updated the test page:
http://datagnostics.com/test/transparent.html
to include this new example. It looks as though it's the combination of
position:absolute with background:transparent that is giving IE7 the
vapors. Have you (or anyone else) been able to test in IE6? Can you-all
think of any other tests I could run?
Mary Ellen
__
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] Why do they do the things they do?
This is more a general question about how you use CSS than about a specific technique. I make a habit of from time to time looking at the code in popular and/or cool-looking and/or horrible sites, to see what other people are doing or not doing and what seems to work. I also do this because I frequently am brought in to work on a project that someone else left, and I need to be able to figure out what they might have been thinking so I can unscramble it. Recently I was looking under the hoods of a bunch of high-traffic sites http://datagnostics.com/design/topsites.html and I'm trying to figure out what's going on with them, and why they're not doing what I'd expect. What I would expect if I were building a site logically is: a. a doctype b. styles in .css sheets c. linked in the header directly or by @import d. no styling or formatting codes elsewhere Only two of these big sites don't even have a doctype: Google and Amazon. In Google's case I'm guessing it's because they place the highest priority on fast-loading pages, and they don't want *anything* in there they don't have to. In Amazon's case I'm inclined to think it's because the code is an incredible kluge job, put together over a long period by many hands not all working in the same direction, and the thought of a doctype just makes the coding dept. laugh hollowly. What surprises me is how many sites have style codes directly in the head, either instead of style sheets or in addition to one. Is there a good reason for this? Do you-all think the head styles are coming in via server side includes, and are SSIs faster than links or @import? Or are they using some sort of templating, so that the head styles are in before they even get to the server? All of these sites are, by definition, under much higher than normal server pressure. And then there's something like MySpace, with linked style sheets in the head, *and* some styling directly in the head, *and* styles on individual page elements. Is there any way in which this is a good thing? or should I stick with my original impression, which is that it's about what I expect from MySpace. I'm impressed that 3 of these sites pass the validator. I was expecting it of Wikipedia, but not of MSN or BBC -- it speaks, I think, to a high level of consistency and discipline in their coding depts. Mary Ellen Doctor Science, MA datagnostics.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] Table column width
I have a 2-cell table I am trying to style with css: http://datagnostics.com/test/tablecells.html What I want is: 1. table width is fixed 2. cell with image in it is just the width of the image, even if I don't know ahead of time how wide the image will be. 3. the other cell should adjust its width as necessary. How do I do this so it works in both IE6 IE7, as well as standards-compliant browsers? Mary Ellen, Doctor Science http://doctorscience.blogspot.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] Link hand disappears in IE
Ha! I found the page I was looking for, and answered my own question. As suggest by Steve Clay http://mrclay.org/wd/tests/ir/ cursor: hand is the solution! - Original Message - I've an image-replaced navigation: http://datagnostics.com/test/imagereplace2.html Everything seems to work fine, except the little hand that says there's a link here doesn't appear in IE. The link *works*, there's just no hand. I feel really embarrassed because I'm pretty sure I clicked past a discussion of this very issue sometime in the past couple days, but both my browser history and my google-fu are failing me. Mary Ellen Doctor Science, MA http://doctorscience.blogspot.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] Link hand disappears in IE
I've an image-replaced navigation: http://datagnostics.com/test/imagereplace2.html Everything seems to work fine, except the little hand that says there's a link here doesn't appear in IE. The link *works*, there's just no hand. I feel really embarrassed because I'm pretty sure I clicked past a discussion of this very issue sometime in the past couple days, but both my browser history and my google-fu are failing me. Mary Ellen Doctor Science, MA http://doctorscience.blogspot.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] Width of absolutely-positioned div
Here is a test page:
http://datagnostics.com/test/testbasic.html
Is there a way to make the pink absolutely-positioned box as wide as the
yellow regular box -- that is, just wide enough to fill up the width of
the screen, whatever that may be? They are both moved over to the right
to make way for the absolutely-positioned left-side navigation bar. Text
is centered within the boxes.
pink box: {position:absolute;top: 7em;left: 210px;text-align:center;}
yellow box: {margin: 0 0 0 210px; text-align: center;}
halp.
Mary Ellen
Doctor Science, MA
http://doctorscience.blogspot.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] CSS Zengarden Design #202
How well does CSS Zengarden Design #202, Retro Theater: http://www.csszengarden.com/?cssfile=/202/202.csspage=0 work in IE 6 lower? On my IE6.0 machine the frame doesn't wrap around the way it does in Firefox IE7. I would say it breaks gracefully, except page-down is painfully slow for me in IE6. I don't know if it's just that machine, or something about how putting position:relative on the body works (or doesn't) in IE6. Does it look OK in IE on the Mac? I'm asking because I'd like to use some of the tricks in this design for pseudo-framing, but I'm not going to get into it if it's going to be too painful in IE6. Mary Ellen Doctor Science, MA http://doctorscience.blogspot.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] CSS Zengarden Design #202
David Lasko asked: Is there a browser on the face of the earth it does work in? ha. Well, I'm looking at it with IE7 Firefox2.0 on Vista, and it seems to work OK -- in the sense that there's a big movie-theater marquee wrapped around the text, which scrolls down nicely when you scroll down. What are you using, and what kind of not working are you seeing? Mary Ellen Doctor Science, MA http://doctorscience.blogspot.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] CSS Zengarden Design #202
Georg wrote: How well does CSS Zengarden Design #202, Retro Theater: http://www.csszengarden.com/?cssfile=/202/202.csspage=0 work in IE 6 lower? IE6 and lower on windows don't support 'position: fixed'. ... IE6 needs workarounds, but that doesn't pose much of a problem, IMO. What do you see in this Zengarden design in IE6? Is it scrolling very slowly for you, too, or is that just my machine? This design doesn't seem to include any of your workarounds. Mary Ellen Doctor Science, MA http://doctorscience.blogspot.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] How do I do this combination of centering not with CSS?
These two text/logo combinations are done with tables: http://datagnostics.com/test/center.html but I want to do the same thing, hopefully easier, with CSS: 1) center the logo within the holder div, regardless of what size logo I'm given 2) put the text on one side of the logo or the other, vertically centered with respect to the logo. Basically, I don't want to have to specify the width of the logo to center it, or at least not more than once. Mary Ellen Doctor Science doctorscience.blogspot.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Alternating row colors: adding a row
I know how to use styles to alternate table row colors, by defining odd and even row styles: http://datagnostics.com/test/tablerows.html Is there any way to add a row in the middle without having to re-class all the rows? If so, does it have to be done with Javascript? Mary Ellen Doctor Science, MA __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Suckerfish IE7 non-stick problem
Ingo wrote:
You could add haslayout to the li and something to work on for the
hover, e.g. li {zoom:1; background-color: white;}
If you cannot use the background-property, an alternative would be to
use a filter:
http://archivist.incutio.com/viewlist/css-discuss/81975
Thank you for your suggestion, it seems to be working:
http://datagnostics.com/test/IE7testzoom.html
I don't like using zoom to give layout, because I'd rather use something
that validates, but I decided it wasn't worth the extra hassle for this
particular client's case.
Meanwhile, I've been reading On Having Layout
http://www.satzansatz.de/cssd/onhavinglayout.html
trying to internalize your zen-like The Hand We've Been Dealt attitude.
You write:
Another common problem with lists in IE occurs when the content of any li
is
an anchor with display: block. . . . One of the methods to avoid this
extra
vertical space is to give layout to the block anchors. This also has the
benefit of making the whole rectangular area of the anchors clickable.
By anchors, do you mean named HTML anchors? e.g. 'a
href=#namename/a'? Why anchors only, and not links in general?
Mary Ellen
Doctor Science, MA
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Suckerfish IE7 non-stick problem
I have a suckerfish IE7 non-stick problem. One of my clients likes an inside suckerfish menu style, where the submenu is displayed within the parent menu. Here's how it looks in FF2: http://datagnostics.com/test/IE7test.html Of course, it needs JS to work in IE7. But it also needs to have an item of defined height after the list to display properly in IE; otherwise, the submenu collapses as soon as you mouse away from the parent item, and you can't actually click the links, as happens here: http://datagnostics.com/test/IE7testNo.html IE7 no longer needs the JS (yay), but I can't seem to keep the submenus from collapsing in IE7. Most of the discussion I've googled seems to be about IE7 displaying submenus for too long, but I have the opposite problem: I need the submenu to display long enough. What should I do, and how should I do it? Mary Ellen Doctor Science, MA __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
