Re: [css-d] Lines clipping in Explorer, and width issue
Dave M G wrote: http://aimashou.jp/home_page http://www.gunlaug.no/tos/alien/dmg/test_08_0310.html http://www.gunlaug.no/tos/alien/dmg/test_08_0310_files/style000.css -- 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A weird CSS problem in IE7
On Mon, Mar 10, 2008 at 2:40 AM, Philippe Wittenbergh [EMAIL PROTECTED] wrote: On Mar 10, 2008, at 12:44 AM, Usamah M. Ali wrote: About havingLayout, doesn't IE7 need it? I thought hasLayout becomes redundant in IE7, am I mistaken? Oh, it definitely needs it, in different ways than IE 6 sometimes, but 'hasLayout' is not dead in IE7. IE8 will be anther story (hopefully, promised by the IE dev team)), in standard standard mode. Philippe --- Well, .searchbox is already having layout (position: relative;). I triggered hasLayout on the .search_top div itself and so far it appears to solve it. Many thanks Phillipe. __ 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] Oldest Browser Currently Testing for
Kathy Wheeler wrote: On 09/03/2008, at 6:40 AM, Karl Hardisty wrote: A comparison of usage before and after is generally a good idea. If a site design changes, and suddenly a certain type of browser/platform combination drops off markedly, there's probably a good reason. However it may also pay to check overall traffic trends - if traffic does not drop off, then perhaps those recalcitrant old browser users may have finally decided to upgrade? On the other hand, if you pick up more traffic than you lose ... It's nice to say you support ie5.5, netscape 4 or whatever, but with the security vulnerabilities inherent in the older unsupported browsers is it really a good idea to encourage users not to upgrade? Are you really doing them a favor? And what browser would my dear old retired parents (still using a 128MB Windows98 PC) use? BTW, Windows98 has paradoxically become more secure - a lot of Windows worms and viruses can no longer run on it. ;-) -- 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Curious question inspired by the X-UA compatible thread
If you have an HTML document that happens to contain another HTML document in an iframe - and one of the two documents triggers quirks mode when rendered by itself - is each one rendered in the same mode or does the browser somehow do one in standards mode and one in quirks mode? -- 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Targeting IE8 (was: IE8 is better but still slightly broken)
-Original Message- Why are you suggesting in the first place to pollute your source with different conditional comments on every single page of a site. That seems like to much work and maintenance for me. Is that what you do? Well, the pages of the sites I work on are generated dynamically, using JSP templates, so for the hundreds of pages there are only about 5 different places where I need to specify what stylesheets are imported, and it's there that the conditional comments are used to include IE-specific sheets. In fact, at runtime the generated page looks on the filesystem and sees if a stylesheet is present and automatically includes the conditional comments or not. So I don't even need to maintain the code, just add and remove sheets. div class=ie6fix!-- this class is only needed for IE6/Win or earlier -- All I have to do is pull that line of code out of that include when IE6 disappears over the horizon (2020). This is the filtering hack I'm now using. And all I need to do is zap a stylesheet file from the disk and it disappears from every single page and from the generated code. Furthermore I don't pollute my source with meaningless class names like ie6fix, instead relying on IE's normal CSS selectors to find objects with class names that are meaningful in general. /*\*//*/ @import url(test-ie8.css); @import(test-ie.css); /**/ @import test-ie; /* For IE5~7/Win */ You seriously feel the above code is more readable, maintainable, and logical compared to this: link rel=stylesheet type=text/css href=/css/style.css !--[if IE 7] link rel=stylesheet type=text/css href=/css/style_ie7.css ![endif]-- !--[if IE] link rel=stylesheet type=text/css href=/css/style_ie.css ![endif]-- It's immediately obvious what the above does, even if you've never seen a conditional comment before. But unless you know 100% all the bugs and limitations of the css parser for every version of every browser, your code is, IMO, illegible. I suppose if you're the only person who ever looks at your own code this isn't an issue, but considering how many people on this list are in charge of maintaining both the CSS AND the HTML, I'd think that conditional comments would get more use, especially if you're already using an external IE-specific stylesheet. I not targeting browsers but filtering the good browsers out of disastrous mess and rescuing others from the abyss. Well, filtering the good browsers is the same as targeting the bad :) . Mark __ 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] Diff between display:none and visibility:hidden
I know that one difference between display:none and visibility:hidden is that the former does not leave space in the layout where the code exists on the page, while the latter does. Are there other differences? Using visibility:hidden I have hidden a whole string of links I need on the page to use Lightbox 2's slideshow feature. It works as it should. But there is white space in the layout where the long list of links appears in the code. If I use display:none instead, will Lightbox still see this string of links? I'd like to eliminate the white space in the layout. In other words, is the only difference between the display and visibility properties that one leaves space in layout and the other doesn't? Thanks, Jeff __ 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] Curious question inspired by the X-UA compatible thread
At 22:36 -1000 9/3/08, david wrote: If you have an HTML document that happens to contain another HTML document in an iframe - and one of the two documents triggers quirks mode when rendered by itself - is each one rendered in the same mode or does the browser somehow do one in standards mode and one in quirks mode? I've updated (and moved, but the previous address still works) http://www.fu2k.org/alex/css/cssjunk/ie8/xuas You can now change the X-UA target and the mode of the document that calls the iframed documents. I can see no difference at all in how the iframe content is rendered regardless of the containing document's X-UA or mode. So, in answer to your question, the latter. Iframed documents rendering is exactly the same as if they were being displayed outside of an iframe. NB. of course there may be some as yet undiscovered condition that does cause things to break down (and I make no claims about what the different versions of javascript are doing in each iframe). __ 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] Targeting IE8 (was: IE8 is better but still slightly broken)
Mark Richards [EMAIL PROTECTED] Why are you suggesting in the first place to pollute your source with different conditional comments on every single page of a site. That seems like to much work and maintenance for me. Is that what you do? Well, the pages of the sites I work on are generated dynamically, using JSP templates, so for the hundreds of pages there are only about 5 different places where I need to specify what stylesheets are imported, and it's there that the conditional comments are used to include IE-specific sheets. In fact, at runtime the generated page looks on the filesystem and sees if a stylesheet is present and automatically includes the conditional comments or not. So I don't even need to maintain the code, just add and remove sheets. Good answer. In your case my reply is off target. I did go through all that for everyones benefit. Pages can be put together in many different ways and various styles can be fed to particular browsers by various method. Conditional Comments can be problematic to maintained and some beginners will start adding them to every page. Sometimes if it's not a true CCS rendering issue at all but just incorrect understanding of CSS or invalid CSS and markup. div class=ie6fix!-- this class is only needed for IE6/Win or earlier -- All I have to do is pull that line of code out of that include when IE6 disappears over the horizon (2020). This is the filtering hack I'm now using. And all I need to do is zap a stylesheet file from the disk and it disappears from every single page and from the generated code. Furthermore I don't pollute my source with meaningless class names like ie6fix, instead relying on IE's normal CSS selectors to find objects with class names that are meaningful in general. I guess you need proof. I have now removed that meaningless class name from that div. Now let see..., point either IE5 or IE6 at this page (soon to be updated). http://css-class.com/test/bugs/ie/ie-bugs.htm Now observe how various page elements have now disappeared. The navigation and the blue~green strip in the header for instance. Now resize the viewpoint and observe my floated element (Honor roll) drop. Should I just stop supporting for IE6 now and remove all my other hack for it. When I have finished, there will be nothing left. Not quite true some elements will remain. :-) OK, you can zap a file form here or there and all is fixed but what list is this? Does everyone on this list use (I may be mistaken here) PHP? You are answering my question with a scripting solution. Will this help a beginner? My solutions is entirely based on CSS and markup. Please keep solutions on topic. /*\*//*/ @import url(test-ie8.css); @import(test-ie.css); /**/ @import test-ie; /* For IE5~7/Win */ You seriously feel the above code is more readable, maintainable, and logical compared to this: link rel=stylesheet type=text/css href=/css/style.css !--[if IE 7] link rel=stylesheet type=text/css href=/css/style_ie7.css ![endif]-- !--[if IE] link rel=stylesheet type=text/css href=/css/style_ie.css ![endif]-- Yes I do. I have changed my import slightly. /*\*//*/ @import url(test-ie8.css); @import(test-ie.css); /* IE/Mac */ @import test-ie; /* For IE5~7/Win */ The above code appears on one CSS file. I know exactly what it does. First we have the beginning of the IE/Mac pass band filter. Both IE/Mac and IE8 see /*/ as /**/ so they parse there respective imports. The filter is closed here /* IE/Mac */ and IE7 uses the next import. Only the first import is valid. Anyhow, I was surfing and I have stumbled on to a new IE8 hack. Some list member (Thierry!) has discovered that IE8 doesn't need the beginning /*\*/. I haven't tested but I could just have. /*/ @import url(test-ie8.css); /* IE8 */ @import test-ie; /* For IE5~7/Win */ I find all those linked style sheet redundant. You only need one. Even if you had an extra one for IE, why can't you use the star html (* html) or escapes within the style sheet to target or filter the difference versions of IE? Thierry, come on, share what you discovered. :-) It's immediately obvious what the above does, even if you've never seen a conditional comment before. But unless you know 100% all the bugs and limitations of the css parser for every version of every browser, your code is, IMO, illegible. I suppose if you're the only person who ever looks at your own code this isn't an issue, but considering how many people on this list are in charge of maintaining both the CSS AND the HTML, I'd think that conditional comments would get more use, especially if you're already using an external IE-specific stylesheet. And that's why you should comment both your CSS and markup. We know what IE7 and IE8 does with those comments. OK, your perspective is from several people authorizing the code so when answering keep this in mind that there are also those
Re: [css-d] Targeting IE8 (was: IE8 is better but still slightly broken)
-Original Message- From: Alan Gresley Conditional Comments can be problematic to maintained and some beginners will start adding them to every page. Sometimes if it's not a true CCS rendering issue at all but just incorrect understanding of CSS or invalid CSS and markup. I don't see how that problem is different from CSS hacks that import separate stylesheets, actually. Should I just stop supporting for IE6 now and remove all my other hack for it. When I have finished, there will be nothing left. Not quite true some elements will remain. :-) I'm not saying don't target. OK, you can zap a file form here or there and all is fixed but what list is this? Does everyone on this list use (I may be mistaken here) PHP? You are answering my question with a scripting solution. Will this help a beginner? My solutions is entirely based on CSS and markup. Please keep solutions on topic. Ok, I admit that server-side scripting is off-topic, but then so is code-maintenance in general. Personally I would be astonished to find that most people are NOT using some server-side scripting system; who has a totally static website in 2008? And anyway, even if your website IS static, that suggests that there are only a few pages. If you're maintaining a large site without some code generation and templates, I feel sorry for you :) As for helping beginners, I think conditional comments are still a better solution than hacks specifically because they are easier for beginners to understand. Anyone who can grasp a tiny bit of JavaScript, and surely someone who can use the more advanced CSS selectors should be able to understand the syntax of a conditional comment, and won't need to worry about what the hacks are or how they work. And when you first encounter a conditional comment on a page, even if you've never heard of it, you can at least intuit what it does. Not so with a hack. You seriously feel the above code is more readable, maintainable Yes I do. I have changed my import slightly. /*\*//*/ @import url(test-ie8.css); @import(test-ie.css); /* IE/Mac */ @import test-ie; /* For IE5~7/Win */ So in order to be able to use this you need to understand that all three constructs, which look (to me) like they should do the exact same thing, actually work or don't work based on the browser you are using. It's also possible that there are other browsers out there that will read these imports (correctly or incorrectly) depending on what bugs THAT browser has. The above code appears on one CSS file. I know exactly what it does. But no beginner does, and not necessarily every CSS dev either. I know about these hacks from this list, but I'd have to look up what the hacks are for. Hacks are based on doing something WRONG in CSS but having the browser do something RIGHT in response. If the CSS code isn't valid the browser should do NOTHING, but in the case of a hack it does something. Exploiting that error is confusing to people who usually write correct code, expecting that incorrect code will do nothing. I find all those linked style sheet redundant. You only need one. Even if you had an extra one for IE, why can't you use the star html (* html) or escapes within the style sheet to target or filter the difference versions of IE? Because different versions of IE have different features and different bugs, and require different fixes. Separating the fixes required makes it easier to drop support later on, or to fix a bug without possibly breaking the other browsers if they don't have that bug. Anyway it's the same thing as your example: an IE stylesheet for every version that needs it (remember: if I don't need any IE7 fixes I don't have an IE7 sheet and the script doesn't put that comment into the page). Most of my pages have just an IE6 sheet, actually. (Where I work we don't support IE/Mac). And that's why you should comment both your CSS and markup. We know what IE7 and IE8 does with those comments. OK, your perspective is from several people authorizing the code so when answering keep this in mind that there are also those single author. The full spectrum. In my experience even a single author can be confused by his own code later on. Comments help but they're not always there and not always right. Doing things in a clear way from the beginning means less reverse-engineering later. Yes I am targeting. Should I pull those imports out and make those pages look awful for IE/Mac, IE7 and IE8. Please tell me how else I can do this without conditional comment. I'm not saying don't target. We have to target. It's a sad necessity because the browsers all have different capabilities and bugs. I also agree with putting browser-specific fixes into browser-specific sheets. I think it's reasonable to design stuff so that fixes required are kept to a minimum, but sometimes you just have to fix some browser's broken implementation. Naturally you want
Re: [css-d] X-UA-Compatible - Discrepancies between targeted behaviour in IE8 resolved
I've seen a couple of other cases (not related to parsing/selectors problems but to rendering) where IE8 quirks is equal to IE7 quirks when this differs from IE6 quirks. Also, I just noticed (again, this may be old news by now) that fieldsets and input buttons (and presumably all form elements) are displayed in the manner of IE7 when X-UA is IE=5. So, to recap IE=5 - IE7's quirks mode (regardless of doctype) IE=7 - IE7's standards mode (Standards or Quirks mode with doctype and no url) IE7's standards-ish mode ignoring *+html (Quirks mode without doctype) IE=8 - IE8 native (Standards or Quirks mode with doctype and no url) IE8 native-ish mode ignoring *+html (Quirks mode without doctype) Pretty much then what Microsoft have said then, but perhaps this would have been easier to digest, if it was IE=quirks instead of IE=5 and that it had been explicitly spelt out that it was IE7's quirks mode that was meant. Now, as an aside and not being particularly expert on quirks mode rendering, are there any specific differences (other than the ones just discussed) that anyone is aware of between IE6 quirks mode and IE7 quirks mode? (I'm fully aware of their being many standards mode issues ;) __ 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] Site check
Hi David, I happen to be following this post closely, since Phoebe seems to have all the questions I had. I validated all my pages, with the validate site, both html css, fixed many mistakes I have and learned a lot! (the only thing that didn't pass the validation was the rss on this page: http://homepage.mac.com/cynvill_3/website/journalism.html (latest articles) but I couldn't figure out how to fix it, so I guess I can leave it for now...) Thanks so much!!! ps. I am really interested in raising the bar another notch ;) Cheers, Cynthia David Laakso [EMAIL PROTECTED] wrote: Phoebe Taylor wrote: Wow, learning a lot here. Now things validate. re: Awesome. Interested in raising the bar another notch? Best, ~dL PS Ain't no mister hereabout. Just another bozo on the back of the bus. -- http://chelseacreekstudio.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/ - Looking for last minute shopping deals? Find them fast with Yahoo! Search. __ 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] IE7 spacing blowout problem on Stu Nicholls' Snazzy Borders code
Hi,
I'm modifying code from Stu Nicholls' Snazzy Borders code, referenced here:
http://www.cssplay.co.uk/boxes/snazzy.html
As he stated, this works in modern browsers. However, I tried putting
only a form field in here, and it blows out the spacing above and
below the content area in IE7 only. Firefox 2.x doesn't do this. I
tried to use the IE Web Developer Toolbar to examine the content area,
but I cannot select the whitespace, so I don't know which element(s)
may be generating it. Any ideas or help would be appreciated.
Thanks for reading.
--Stephen
HTML:
div class=xsnazzy
b class=xtopb class=xb1/bb class=xb2/bb
class=xb3/bb class=xb4/b/b
div class=xboxcontent
form method=post action=# name=searchForm id=searchForm
fieldset
legendSearch Site/legend
label for=searchKeywordsEnter Keywords/label
input type=text id=searchKeywords name=searchKeywords
class=searchfield /
input type=submit name=Search value=Search class=searchbutton /
/fieldset
/form
/div
b class=xbottomb class=xb4/bb class=xb3/bb
class=xb2/bb class=xb1/b/b
/div
CSS:
style type=text/css
/* Stu Nicholl's code */
.xsnazzy h1,
.xsnazzy h2,
.xsnazzy p {margin:0 10px; letter-spacing:1px;}
.xsnazzy h1 {font-size:2.5em; color:#fff;}
.xsnazzy h2 {font-size:2em;color:#06a; border:0;}
.xsnazzy p {padding-bottom:0.5em;}
.xsnazzy h2 {padding-top:0.5em;}
.xsnazzy {background: transparent; margin:1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c;
border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#ccc; border:0 solid #08c;
border-width:0 1px;}
body {background-color: #013976;}
#searchForm legend {
display: none;
}
#searchForm label {
display: none;
}
#searchForm fieldset {
border: none;
}
/style
__
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] IE8 hack?
Yes, I know, in a perfect site there's no need for hacks. But this is a just slightly less-than perfectly coded site I did a year ago, and it breaks in IE8. I can fix most of it, but some widths in IE8 don't match up with widths in FireFox, and IE8 ignores !ie. So, does this mean conditional comments for IE8, or does anyone have an easy hack up your sleeve? Sorry if this has already been addressed; I haven't received my CSS-D Digest in a couple of days. Thanks in advance, Nancy Sosna __ 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] background image shifts next to heading??
Hi everyone, My site is near completion. The only problem is a background image which appears next to the headings (Styles and Effects headings etc..) seems to drop slightly in Firefox at work, though it seems fine in Firefox and safari on my Laptop and PC. I'm sure its to do with the headings at 110% how can I make sure the arrow icon always sits centred vertically next to the headings? here is the link: http://www.coloursense.net/testfolder/ could anyone help Rob Freeman [EMAIL PROTECTED] __ 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] IE7 spacing blowout problem on Stu Nicholls' Snazzy Borders code
On Mon, Mar 10, 2008 at 1:28 PM, Eriol Hiragizawa [EMAIL PROTECTED]
wrote:
Hi,
I'm modifying code from Stu Nicholls' Snazzy Borders code, referenced
here:
http://www.cssplay.co.uk/boxes/snazzy.html
As he stated, this works in modern browsers. However, I tried putting
only a form field in here, and it blows out the spacing above and
below the content area in IE7 only. Firefox 2.x doesn't do this. I
tried to use the IE Web Developer Toolbar to examine the content area,
but I cannot select the whitespace, so I don't know which element(s)
may be generating it. Any ideas or help would be appreciated.
Thanks for reading.
--Stephen
You need to remove padding/margin from the form itself:
form {
margin:0;
padding:0;
}
--
Susan R. Grossman
[EMAIL PROTECTED]
__
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] IE8 hack?
On Mon, Mar 10, 2008 at 9:29 PM, Nancy E. Sosna Bohm wrote:
Yes, I know, in a perfect site there's no need for hacks.
But this is a just slightly less-than perfectly coded site I did a year ago,
and it breaks in IE8.
I don't think it is a a good idea to hack now for IE8, which is just a beta.
Anyway, in addition to conditional comments (which will probably be
applied by the final version as well), you can now try this:
/*/ selector { ... } /**/
to feed rules only to IE8 beta 1 and (apparently) no other browsers.
This will very probably change in newer beta releases.
But I don't think is good idea to use that. More interesting would be
to try to understand why IE8 is 'breaking' the page.
Bruno
--
Bruno Fassino http://www.brunildo.org/test
__
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 and fixed width for select element
Hi, When we open a fixed width select control in a compliant browser it expands the width of the open window in order to show the option content larger than that fixed width. IE 6 (don't know about IE 7) doesn't expands and crops the option content larger than the width. Is there a CSS way (no javascript solutions) to make IE 6 behave like Firefox for instance? Thanks Mauricio Samy Silva http://www.maujor.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] background image shifts next to heading??
Rob freeman wrote:
I'm sure its to do with the headings at 110% how can I make sure the
arrow icon always sits centred vertically next to the headings?
http://www.coloursense.net/testfolder/
Don't know why you get variations between two setups of Firefox -
different screen-resolutions maybe.
However, position of background with pixel-values next to text, depends
on frozen font-size, line-height and other setup-alterable variables,
and none of these variables can be controlled or guaranteed across
browser-land and setups. The vertical line-up is for instance easily
disturbed by introducing even the slightest font-resizing.
Somewhat improved control can be achieved by playing along with the
unknown variables, and leave to the browsers to calculate line-ups. They
are usually quite good at it when fed balanced and tested styles.
One way to do it in your case, is to...
1: even out the top and bottom padding, and get back the
position/line-up by adding a margin-top:
#content h1 {
padding: 3px 0;
margin-top: 7px;
}
2: you now have two options.
2 a: make the background center vertically no matter what - even if the
headline-text breaks into 2 lines:
#content h1 {
background-position: 0 50%;
}
Note: the vertical centering is in the headline itself, so if the text
breaks into two lines the background will center vertically between
those lines. Background-image is positioned by its vertical center with
the given value.
2 b: make the background center vertically with the text-line - also if
the headline-text breaks into 2 lines:
#content h1 {
background-position: 0 .5em;
}
Note: exact em-value depends on case and size of background-image.
Since the background doesn't change size with font-resizing, some slight
misalignment will take place if the font-resizing is made large enough,
because the background-image is positioned by its top edge and not its
vertical center.
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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE8 hack?
To second what bruno said, its worth investigating if its an IE bug or
failure to meet the 2.1specs or something wrong with your css and if the
problem is on IE side make sure that it gets reported via some channel.
its far to early to make an effort to start fixing things
- Rajat
Bruno Fassino wrote:
On Mon, Mar 10, 2008 at 9:29 PM, Nancy E. Sosna Bohm wrote:
Yes, I know, in a perfect site there's no need for hacks.
But this is a just slightly less-than perfectly coded site I did a year ago,
and it breaks in IE8.
I don't think it is a a good idea to hack now for IE8, which is just a beta.
Anyway, in addition to conditional comments (which will probably be
applied by the final version as well), you can now try this:
/*/ selector { ... } /**/
to feed rules only to IE8 beta 1 and (apparently) no other browsers.
This will very probably change in newer beta releases.
But I don't think is good idea to use that. More interesting would be
to try to understand why IE8 is 'breaking' the page.
Bruno
__
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] IE8 hack?
Nancy E. Sosna Bohm wrote: Yes, I know, in a perfect site there's no need for hacks. But this is a just slightly less-than perfectly coded site I did a year ago, and it breaks in IE8. I can fix most of it, but some widths in IE8 don't match up with widths in FireFox, and IE8 ignores !ie. So, does this mean conditional comments for IE8, or does anyone have an easy hack up your sleeve? Sorry if this has already been addressed; I haven't received my CSS-D Digest in a couple of days. Thanks in advance, Nancy Sosna Hi Nancy, do you have a URL handy? Yes there are CSS selector hacks available for IE8 but hacking is not the best option yet when the issue is not understood. The display table properties bugs that IE8 has can not necessary be hacked around for a fix. There is different behavior for block elements around floats and what may be a margin bug maybe a mysterious space bug or could be some padding elsewhere. It could even be that IE8 is showing correct rendering. Seeing live code would help us analyze any bugs and through such analyzes these bugs can be reported to the IE development team. Adding CC for something that maybe resolved in a later beta is unwise. Alan http://css-class.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] New CSS/html tools?..
Howdy, I'm really ready to dump BBedit, and am wondering if anyone has a good html/css editor with autocomplete like many of the current tools, but also has the built-in ftp capabilities of BBedit? I am seeing a lot of tools with one or two good features, but nothing outstanding. Basically, wondering what people are using. (I'll take nay responses offline). thanks -- Kar __ Karl W. Jacobs Supervisor - Web Communications The Aerospace Corporation 310.336.7345 __ 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] IE6 z-index position element stacking problem
or so i think. http://accuray.com/ my flash menu is in an absolutely position div. in ie6 ONLY, when you roll over products or patients, the menu is cut off at the bottom of the drop down. I tried fooling around with the other positioned elements or removing them altogether but it doesn't seem to help. Also, this issue occurs SOMETIMES.. rolling over it or refreshing the page will eventually trigger the bug. __ 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 validation error
Hello all,
I'm at validating the css stylesheet and there are two strange error
messages which i can't get rid of.
1)the first one is:
/Parse Error - body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5,
h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0;
padding:0; }
/This line is in the very beginning of the document for normalization
purposes.
I rewrote the line and checked it in a new css stylesheet with the
validator and it validated fine. But when i copied it into the sites'
stylesheet it provoked an error again.
What am i doing wrong?
2)the second one is:
/div#site-info p a Lexical error at line 1121, column 0.
Encountered: EOF after : /
Here again i can't find the error. the code is written well, as i see it.
It's this line:
*div#site-info p a { text-decoration: none; } *
i moved the line into another section of the stylesheet and the error
at line 1121 changed with it (error at line 1562), so i guess it
wasn't an element before or after the line which caused the error
message.
What am i missing?
My sites' link is:
http://www.dcc-artivisme.net/wordpress_dcc/?langswitch_lang=en
the direct link to the css file is:
http://www.dcc-artivisme.net/wordpress_dcc/wp-content/themes/dcc/style.css
Thanks very much for the help
flo
__
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] IE8 bazaar rendering of display table properties
Hi Everyone. I have started developing some test cases concerning issues with IE8 support of display table properties. I am totally mystified by what I am seeing. I am adding extra cases to understand what is happening. Any input, suggestions or other examples would be very welcome. The test cases were simple in the beginning but they are involving by the hour. The initial test case (display:table) is the most recently updated. http://css-class.com/test/css/table/table-property1.htm Gecko and Safari shows the same. The grid blocks are there just there to clear each example since IE8 is creating phantom overlaps. There are two other linked test cases for display:table each with there own unusual rendering by IE8. I also have a series of test cases for display:table-cell which are very different to how display:table is rendering. http://css-class.com/test/css/table/table-cell-property1.htm The most amazing examples are some of the last ones on this page. http://css-class.com/test/css/table/table-cell-property3.htm Why does a percentage (50%) width on a table cell within a float cause the float itself to expand in size to 50% of the width of the viewpoint? Quite remarkable. Alan http://css-class.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] New CSS/html tools?..
WeBuilder from Bluementals http://www.blumentals.net/webuilder/ They have several different flavors with each supporting more flavors of code. WeBuilder is their top of the line and supports php coding. I've been using HomeSite forever and hoping someone would come along with a piece of software that was worth something. This is the first one I've seen that can hold a candle to HomeSite. Along with handling php and javascript files it also does a good job of handling CSS files. Top Style is still better for CSS but it's not too often I need the reference files in Top Style. Mike -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Karl Jacobs Howdy, I'm really ready to dump BBedit, and am wondering if anyone has a good html/css editor with autocomplete like many of the current tools, but also has the built-in ftp capabilities of BBedit? I am seeing a lot of tools with one or two good features, but nothing outstanding. Basically, wondering what people are using. (I'll take nay responses offline). thanks -- Kar __ 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] New CSS/html tools?..
On 11/03/2008, at 12:34 PM, Michael Stevens wrote: WeBuilder from Bluementals http://www.blumentals.net/webuilder/ WeBuilder is windows only. -Original Message- Karl Jacobs I'm really ready to dump BBedit, ... BBedit is Mac only. Unless Kar is dumping the Mac as well, WeBuilder will be of no use. Pity, otherwise it looks interesting and I'm always on the lookout for better OS X editors with current doctype, CSS, javascript, DHTML (and optionally PHP) support myself. Cheers, KathyW. __ 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] Diff between display:none and visibility:hidden
Jeff Gates wrote: I know that one difference between display:none and visibility:hidden is that the former does not leave space in the layout where the code exists on the page, while the latter does. Are there other differences? Using visibility:hidden I have hidden a whole string of links I need on the page to use Lightbox 2's slideshow feature. It works as it should. But there is white space in the layout where the long list of links appears in the code. If I use display:none instead, will Lightbox still see this string of links? I'd like to eliminate the white space in the layout. In other words, is the only difference between the display and visibility properties that one leaves space in layout and the other doesn't? Thanks, Jeff I remember having read somewhere that the W3C /recommended/ browser vendors /not to download the content styled with display:none/. Unfortunately, I haven't found any reference to this, so I could be just plain wrong. Now, assuming I did read it right and it was even in the W3C recommendation (which doesn't seem to be the case), real-world sites won't allow browser vendors to implement this behavior because many of us rely on display:none being invisible /and/ without any box in the layout, so just for the sake of practical use alone I don't think they'll ever do it ---but that again, that's assuming the first paragraph is right :) Conclusion: yes, since those elements do exist in the DOM Lightbox can access them, now whether it moves them, clone them, remove them, etc. depends solely on the Lightbox implementation (i.e. I have no clue). I hope this helps. Rafael. __ 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] New CSS/html tools?..
On 11/03/2008, at 3:38 PM, Kathy Wheeler wrote: On 11/03/2008, at 12:34 PM, Michael Stevens wrote: WeBuilder from Bluementals http://www.blumentals.net/webuilder/ WeBuilder is windows only. -Original Message- Karl Jacobs I'm really ready to dump BBedit, ... BBedit is Mac only. Unless Kar is dumping the Mac as well, WeBuilder will be of no use. Pity, otherwise it looks interesting and I'm always on the lookout for better OS X editors with current doctype, CSS, javascript, DHTML (and optionally PHP) support myself. Cheers, KathyW. __ As Karl suggested, I replied off list, and I recommended he take a look at Coda. I'm taking a look myself (again) and hope it has moved on from infancy to perhaps a petulant teen, with the maturity that comes with age. It is one of the few apps that does everything he requested. One aspect to keep in mind is BBEdit has been around a very long time, and has the features and completeness that goes with this age. Karl mothership - http://mothership.co.nz __ 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] background image shifts next to heading??
Gunlaug Sørtun wrote:
2 b: make the background center vertically with the text-line - also if
the headline-text breaks into 2 lines:
#content h1 {
background-position: 0 .5em;
}
Note: exact em-value depends on case and size of background-image.
Since the background doesn't change size with font-resizing, some slight
misalignment will take place if the font-resizing is made large enough,
because the background-image is positioned by its top edge and not its
vertical center.
I'd just like to point out that the use of line-height could affect
the positioning. It would be good to set line-height and position the
image at half that value. E.g.
line-height: 1em; /* Whatever value that's OK with you */
background-position: 0 0.5em; /* Half the value above */
Remember the order doesn't really matter, as long as they're in the same
rule set.
Rafael.
__
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 validation error
I'm at validating the css stylesheet and there are two strange error messages which i can't get rid of. What are you using to edit your CSS file? The file appears to have non-printing characters that do not appear to be standard CR, LF, or CR/LF line endings. What if you copy/paste your CSS into a new blank text document using NotePad or TextPad, and then post it? ...Rob __ 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] Diff between display:none and visibility:hidden
i hear display:none is bad for accessibility (screen readers, e.g.) but i have no idea if visibility is any better. anyone know? On 10/03/2008, Rafael [EMAIL PROTECTED] wrote: Jeff Gates wrote: I know that one difference between display:none and visibility:hidden is that the former does not leave space in the layout where the code exists on the page, while the latter does. Are there other differences? Using visibility:hidden I have hidden a whole string of links I need on the page to use Lightbox 2's slideshow feature. It works as it should. But there is white space in the layout where the long list of links appears in the code. If I use display:none instead, will Lightbox still see this string of links? I'd like to eliminate the white space in the layout. In other words, is the only difference between the display and visibility properties that one leaves space in layout and the other doesn't? Thanks, Jeff I remember having read somewhere that the W3C /recommended/ browser vendors /not to download the content styled with display:none/. Unfortunately, I haven't found any reference to this, so I could be just plain wrong. Now, assuming I did read it right and it was even in the W3C recommendation (which doesn't seem to be the case), real-world sites won't allow browser vendors to implement this behavior because many of us rely on display:none being invisible /and/ without any box in the layout, so just for the sake of practical use alone I don't think they'll ever do it ---but that again, that's assuming the first paragraph is right :) Conclusion: yes, since those elements do exist in the DOM Lightbox can access them, now whether it moves them, clone them, remove them, etc. depends solely on the Lightbox implementation (i.e. I have no clue). I hope this helps. Rafael. __ 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/ -- Vincent Pollard http://www.ithinkx.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/
Re: [css-d] css validation error
Sr. Flo Fluse wrote: I'm at validating the css stylesheet and there are two strange error messages which i can't get rid of. flo Wow! Uncompressing the file before posting to the list would be a nice touch on your part... I think if you delete the entire comment preceding the body declaration, and close the color comment (the last ruleset at the very bottom of the file), you'll be good to go. Providing this link is not totally mangled in transmission, you'll find your valid (uncommented) CSS here: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.chelseacreekstudio.com%2Fca%2Fcssd%2Funamed.csswarning=1profile=css21usermedium=all Best, ~dL -- http://chelseacreekstudio.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] Lines clipping in Explorer, and width issue [SOLVED]
Gunlaug, Thank you for responding. Removing the position: relative; declaration from my #article DIV made the bottom border lines appear as they should. Adding the .class to the last item in the list does solve the problem of the width of the main menu. Unfortunately, the menu is generated from within a CMS, and I can't quite get that solution to be compatible with the PHP code that drives the HTML. However, even though I have to find another way to skin that cat, I can at least now see where to focus my efforts. Thank you for your help and taking the time to show me what to do by adjusting my code. -- Dave M G Articlass - open source CMS http://articlass.org __ 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] Lines clipping in Explorer, and width issue [SOLVED]
Dave M G wrote:
Adding the .class to the last item in the list does solve the problem
of the width of the main menu. Unfortunately, the menu is generated
from within a CMS, and I can't quite get that solution to be
compatible with the PHP code that drives the HTML.
However, even though I have to find another way to skin that cat, I
can at least now see where to focus my efforts.
Try this modification:
#main-menu li {
width: 34%;
margin-left: -1%;
position: relative;
left: 1%;
}
It will solve the problem without an extra class, by moving each
list-item to the left so they don't fill up the space in #menu ul - and
therefore can't drop, and then offset them back again so they appear to
be in the correct places.
IE/win's percentages-to-pixels calculation flaws will make it look less
than perfect at certain window-widths - especially in IE6, but a
background-color on #menu ul will mask that most of the time.
--
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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New CSS/html tools?..
Aren't Mac people always bragging about how their machines can run Windows better than a PC can? Shouldn't be a problem then... :) Mike -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kathy Wheeler Sent: Monday, March 10, 2008 7:39 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] New CSS/html tools?.. On 11/03/2008, at 12:34 PM, Michael Stevens wrote: WeBuilder from Bluementals http://www.blumentals.net/webuilder/ WeBuilder is windows only. -Original Message- Karl Jacobs I'm really ready to dump BBedit, ... BBedit is Mac only. Unless Kar is dumping the Mac as well, WeBuilder will be of no use. Pity, otherwise it looks interesting and I'm always on the lookout for better OS X editors with current doctype, CSS, javascript, DHTML (and optionally PHP) support myself. Cheers, KathyW. __ 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/
