Re: [css-d] Border: Double
On Mon, Nov 28, 2011 at 17:36, Paceaux pace...@madebypaceaux.com wrote:
There's another CSS3 trick you can try, but I don't think it has as wide
support as the box-shadow trick. You *do* add border and outline, and then
apply outline-offset:
border: 1px solid #444;
outline: 3px solid #444;
outline-offset: 3px;
Just a word of warning to anyone using outline and Opera: Opera renders the
outline on top of everything, even if it would normally be invisible. This
makes outline useless to anyone with a complex layout who cares about Opera
support.
Sample:
style
#a, #b {
height: 100px;
width: 100px;
position: absolute;
border: 1px solid green;
}
#b {
border: 1px inset red;
background-color: blue;
}
#aa {
margin: 30px auto;
height: 40px;
width: 40px;
background-color: pink;
outline: 1px solid pink;
}
/style
/head
body
div id=adiv id=aa/div/div
div id=b/div
/body
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Border: Double
On Tue, Nov 29, 2011 at 11:14, Paceaux pace...@madebypaceaux.com wrote: Is this a known defect/bug in Opera? I can't imagine a scenario where I'd intentionally apply an outline to an invisible element. But, I can see this as a good bit of information where we've gotten our selectors wrong, or some sort of JavaScript was applied incorrectly - and we see a box on our page for no good reason. I use outline for doing wireframes, so this is good to know. My guess is that this happens because outline is not supposed to be part of the layout - unlike border. I think I read in Meyer's book Smashing CSS that the outline is meant to be drawn around the element. So it looks like Opera maybe is following the letter of the law, while the other browsers are assuming you don't want to outline what's invisible. According to http://my.opera.com/community/forums/topic.dml?id=264982 This is by design, they assume that this is what the spec wanted, even though they seem to be completely alone in this regard, and as far as I'm concerned, this behaviour is useless. Mark __ 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] Left-aligned navigation buttons with gradient fade on right
Hello folks, The site I maintain currently has its navigation in a table (don't ask): div class=nav table tr tdMenu item 1/td tdMenu item 2/td tdMenu item 3/td /tr /table /div The styles currently put .nav at 100% width with a background-color, and apply some borders, etc, on the TDs. The currently selected item has a bg set as well. This results in a display that looks like this |[Menu item 1][Menu item 2][Menu item 2]-| where - represents the solid be for the .nav. We use a table because we need IE7 support and we want the table to take up one line, with evenly-distributed items (the text for each item, and the number of items, is variable for each page). What I'd like is to make it so that to the right of the table, the -- space is filled with a gradient. So if the table was wide enough to fill the parent, there'd be no gradient showing, but if it's not wide enough to fill the parent then from the edge of the table there is a gradient from the .nav bacground-colour to white (or transparent). I tried putting an empty table cell and forcing it to have a large width, but that causes the menu item text to wrap. But I can't just force it to no-wrap because if the table is wide enough then I need it to wrap. I'd like to avoid putting an image in (actually if that's the only way then it's not going to happen). Any suggestions? Mark __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Left-aligned navigation buttons with gradient fade on right
Hi,
I guess I wasn't clear in my original email. I plan to use CSS3 for the
gradient, and possibly IE filters to make this work in older IE. My problem
is with the layout. I want the gradient to start at the right edge of the
menu items and go until the right edge of the parent.
div class=nav
table
tr
tdMenu item 1/td
tdMenu item 2/td
tdMenu item 3/td
/tr
/table
/div
If I knew that the width of the menu items was, say, 37% of the .nav parent,
I could do
.nav {
background-image: -moz-linear-gradient(left, #FF 37%, @c2 100%);
}
But I don't know the width of the parent of the table.
If I had a dummy table cell
div class=nav
table
tr
tdMenu item 1/td
tdMenu item 2/td
tdMenu item 3/td
td class=dummynbsp;/td
/tr
/table
/div
I could do
.dummy {
background-image: -moz-linear-gradient(left, #FF 0%, @c2 100%);
}
But I want the text in the main table cells to be on a single line if
possible, and the cells to shrink-wrap to that text as much as possible. I
don't know how to size the dummy cell properly, because the number and size
of menu items is variable.
I am opposed to using any kind of image file at all, both img and normal
background-image.
Mark
On Thu, Sep 1, 2011 at 10:23, Barney Carroll barney.carr...@gmail.comwrote:
Mark,
You can use Microsoft's proprietary filters property to achieve
gradients using a similar syntax. As ever, CSS3please.com is the best
resource:
http://css3please.com#box_gradient
Regards,
Barney Carroll
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making A Link Disappear When Revisited By A Reader
On Fri, Jun 10, 2011 at 14:54, Brian Kardell bkard...@gmail.com wrote: Oh I see - I think I misread... Sorry :) But yes, I think the idea would still be to use visited somehow. I don't think that what is described here would necessarily work though - would it? I mean, if the one clicked were on the right, it wouldn't really have any visible impact (it would just grow out of the viewable area and be clipped). I think you would have to also position it and lay it on a higher layer to hide it. Based on my testing in Firefox 4, and this article[1], it seems that you are extremely limited in what can reliably be styled using the :visited pseudo-class. Just about any mechanism which would work for this use-case would be, or should be, blocked by browsers that are trying to plug the history leak. My recommendation is to use Javascript to make these changes. Or, just don't worry about it. [1]: http://www.webdesignfromscratch.com/html-css/getting-around-the-css-history-leak-limitations/ Mark __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Debugging IE
On Wed, Jan 5, 2011 at 10:47, Colin (Sandy) Pittendrigh sandy.pittendr...@gmail.com wrote: also, I (think) I have noticed IE6 on old low-resolution laptops sometimes looks substantially different than IE6 running on an XP box plugged in to a high-resolution monitor. So perhaps a person needs an N cubed testing routine: N-OS systems times N-resolutions times N-browsers. What is the professional debugging way proceed? I use vmware for IE 6 and 7 running in XP. Some differences I've seen between computers running IE: 1. Font smoothing: if they have font smoothing (anti-aliasing) turned off or set up wrong it can affect the display. Sometimes it can change how wide text is and result in words wrapping differently. 2. Different fonts installed. Some fonts from MS (like Arial Unicode) aren't always installed, but if they are, they can sometimes supersede the normal Arial. These fonts sometimes have slightly different metrics. 3. Different DPI settings: Different DPI settings mean font sizes measured in PX vs EMs vs percent will vary. 4. Slight differences in IE versions with different bugs (the AlphaImageLoader seems to have regressed in XP SP3 IE6, for example. I had major issues with it crashing my browser but my coworker with SP2 couldn't reproduce the problem). These factors also affect the cross-platform nature of development; that is, the font metrics on Windows will be different than Mac and thus the problems aren't strictly limited to Windows versions. The professional way to proceed is to determine (or estimate) the cost of testing yet another combination of hardware, software, settings, browsers, fonts, etc versus the benefits of getting the design exactly right for that user. Probably most of the time if you can make the site look good in Windows, Linux, and Mac then it'll be fine for most of the other settings. Do your best to make your designs flexible so that even extreme cases degrade gracefully. But remember that you first have to serve the majority of your users so spend most of your time doing that. (Side note: some people will compare supporting old or odd browsers to supporting disabled users. Technically the work involved is often similar, however on one hand people with odd systems are able to upgrade/change but disabled users usually can't become un-disabled. So you might find that you are spending a lot of time supporting blind users while spending zero time supporting IE6 users, even if those two populations have the same size and potential revenue) Mark __ 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] Footer on odd pages only
On Mon, Dec 20, 2010 at 18:40, Evan Panagiotopoulos epana...@gmail.comwrote: I create a string of html documents using php. Each document prints one sheet of paper. [snip] If I use: div id=print-footer Using id=... to call the css and I only get the footer properly placed on the first page only. The rest of the pages do not have a footer. If I use div class=print-footer Using class=... to call the css I get the footer text placed under the end of the content on each page. Somehow it does not appear as a footer. How is your HTML organized? If it's one html file per physical page, the use of ID vs CLASS for css shouldn't matter (make sure if you use class you're adjusting your selector). If you're using one html file for all the odd pages you might try position:fixed for the footer. A fixed box will appear on each printed page. If all the pages are in a single file, I'm not aware of any syntax that can suppress the footer only for even pages but then I've never practised printing HTML. As others have suggested you might want to try generating a pdf instead. Mark __ 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] Multiple select dropdown on a single line
Tod,
It seems that when you make the height of the select too small there isn't
room for the scrollbar. This simple hack might give you some ideas:
select { height: 1.5em; }
select:focus { height: 3em; }
You can also use Javascript to achieve a similar effect.
I tried playing around with this to achieve the closest thing I could to a
one-line, drop-down, multi-select box but there were lots of problems,
most importantly that it doesn't look like a select when the scrollbar is
not visible.
Mark
On Mon, Sep 20, 2010 at 15:16, Philip Taylor (Webmaster, Ret'd)
p.tay...@rhul.ac.uk wrote:
OK, but what you've drawn (posted) is not what you are trying
to achieve, but what you can already achieve but which does not
match your needs. What I (and perhaps others) need to see is
what you are trying to achieve visually; we know from your
prose description the intended effect, but not how you
envisage it looking to the intending user.
Philip Taylor
Tod wrote:
On 9/15/2010 3:44 PM, Philip Taylor (Webmaster, Ret'd) wrote:
Tod, could you draw a picture of what you are attempting to achieve ?
Philip Taylor
Attached are two files, single.gif and multi.gif.
The single dropdown takes up only one line until you click the selector
to make it drop down but allows you to select only a *single* item.
The multi dropdown offers the ability to select multiple items but at
the expense of taking up the amount of real estate specified by the
size=x attribute. A size of 1 disables the dropdown.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] styling non-english fonts
From: Angela French Subject: [css-d] styling non-english fonts I am creating some foreign language pages. Cambodian/Khmer renders vastly different font sizes between browsers. Other than making style sheets for each browser to style all my page elements, is there some other way? I've found that different browsers choose fonts differently, causing the appearance of the page to vary widely. For example, my personal site asked for Serif font-family and displayed Chinese text. IE6 used a blocky sans font, IE 7 and 8 used a serif font, Firefox 2 used a serif font, and Firefox 3 used a mix of blocky sans and serif. The solution for Firefox, in my case, was to apply a lang attribute to the elements in question, thus instructing Firefox to choose Chinese fonts for all the characters instead of trying to use Japanese fonts for some and Chinese fonts for others. Once I had the page looking ok in first-class browsers (IE6 still broke) I left it at that, but you will probably want to specify some fonts and font-sizes in addition to the lang attribute. Mark __ 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] Does M$ filter fail in IE 7?
-Original Message- From: David Hucklesby [mailto:huckle...@gmail.com] Sent: June 8, 2010 10:13 To: Mark Richards Cc: css-d Subject: Re: [css-d] Does M$ filter fail in IE 7? Thanks for taking a look, Mark. But from your screen-shot, it does not look like you applied any zoom to the page? I know it works without zoom, but my client *loves* IE 7 zoom--and that's the problem I am experiencing. My mistake. When I apply the zoom the layout gets broken and the transparencies disappear. Mark __ 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] Fraction bar
This is far to complex. In maths, a fraction 3 over 2 is also
the same
as 3 divided by 2. This markup and CSS does this.
sup3/sup/sub2/sub
--
Alan http://css-class.com/
I run your code and saw your demo, but I wanted a horizontal line.
I took Alan's sample and expanded on it to provide a horizontal line. I
haven't extensively tested it but it works well for me on FF3.5.
.fraction {
line-height:160%;
display: inline-block;
vertical-align: middle;
}
.fraction .divider {
color: transparent;
float: left;
clear: left;
border-top: 1px solid black;
width: 100%;
line-height: 0;
height: 0;
}
.fraction sup, .fraction sub {
font-size:75%;
float: left;
clear: left;
}
span class=fractionsup3/supspan
class=divider//spansub2/sub/span
Mark
__
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] why does Firefox add padding?
The wide column is divided into identical sections. Each
section has an
image floated left, and a title and description to the right.
The words
This is the title are supposed to be aligned with the top
of each image.
Mockup.css has
.content-item h3 {
padding: 20px 0px 3px 0px;
}
I used firebug to find that rule and disable it and the heading moves up
to the top.
Mark
__
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] replace submit button with image, entirely with css?
-Original Message-
I have a web application that I hope to style entirely with CSS, if
possible
I want to replace this button with an image, so I tried the following
CSS,
input
{
background-color: transparent;
background-image: url('index.png');
background-repeat: no-repeat;
border-style: none;
height: 33px;
width: 38px;
}
I added
color: transparent;
font-size: 0px;
And that worked for me in FF3, Opera 10 and IE8.
Mark
__
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] Implementing float: center;
No. I want fixed center, liquid secondary. Three versions (Georg Sortun) depending on the source order you seek: http://www.gunlaug.no/tos/moa_27a.html http://www.gunlaug.no/tos/moa_27b.html http://www.gunlaug.no/tos/moa_27c.html Now this *is* what I want. When I saw this topic come up I was hoping to see a solution where the float:center item has text flowing around both sides of the item, such as this: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut elit arcu, egestas et, bibendum fermentum, consequat a, sem. Curabitur felis diam, elementum eget, dictum ** quis, elementum quis, est. Sed porta vehicula ** lorem. Curabitur in dui vel eros fringilla *float:--* vulputate. Mauris mi lectus, mattis vitae, *-center-* tristique eget, laoreet ut, nunc. Pellentesque ** sodales, sapien sit amet malesuada congue, orci ** neque aliquam augue, quis tincidunt quam nisi nec turpis. Morbi non odio. Maecenas a nisi. Maecenas eget orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Anyone know of a way to do this? 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/
Re: [css-d] : CSS Code Readibility ::
Does it really matter if your visitors have to wait for a page to load? It's getting off-topic but on a popular site reducing the size of any resources, including CSS files, can save money if you pay for bandwidth. Even if the user-experience isn't materially affected it may affect the site owner's bottom line. I'd consider keeping white-space in for the source CSS file but compressing the file before serving it to the users. You ARE keeping your source files separate from your production files, in a source-code control system, right? :) 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/
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/
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
[css-d] Targeting IE8 (was: IE8 is better but still slightly broken)
I'm curious as to why you're targeting various IEs with hacks when conditional comments let you do the same thing? Especially if the hacks are used to import external sheets in the first place, it seems to me it's easier to just use CCs to load browser-specific fix-up sheets in the first place. Mark R -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Alan Gresley Sent: March 6, 2008 18:57 To: [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org; 'Bruno Fassino'; [EMAIL PROTECTED] Subject: Re: [css-d] IE8 is better but still slightly broken Thierry Koblentz wrote: I agree with Nick here. The band pass filter will be fixed in later beta. Currently I think you can use this approach (untested). imho, the fact that the band pass filter will be fixed or not is irrelevant, because in any case I won't have anything more to do. It is working *now* and it will be working tomorrow. Why should I leave that page broken when I know there is an easy, *safe* and quick fix? -- Regards, Thierry | http://www.TJKDesign.com You are correct in once sense and that why I suggested the import method to separate all versions of IE. Remember hacking IE8 to render correctly hides the bugs in the first place. I have many broken pages because IE8 is using my IE7 targeting hacks. Now I have to remove all these hacks from my main style sheet and now feed IE7 it's style via invalid import hacks. I don't know what hacks you have used Thierry but I do understand what I must do for my site but certain pages must remain broken to support any test cases that I do prepare. I not saying not to hack for IE8. I was just showing a way of using the band pass filter to feed IE8 the correct style with either broken or unbroken rendering. I myself will let IE8 render however it decides to render. 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-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-like layout for UL/LI
Hi,
I am trying to simplify the code for an existing site. We have a
button bar that is rendered using a table. I figured, why not switch to
UL/LI but the problem I ran into is that the browser will automatically
resize the table columns to spread them out evenly but won't do this for
the LI elements.
table { border-collapse: collapse; width: 800px; }
ul { width: 800px; display: block; overflow: auto;}
li { display: block; float: left; }
table
trtdone/tdtdtwo/td/tr
/table
ul
lione/li
litwo/li
ul
As you can imagine, these two renderings look totally different. I'd
heard of display: table and managed to recreate a nice table-esque
layout using the UL/LI inside a div, which would suite me perfectly,
except IE doesn't support display: table. Does anyone have a workaround
where I can re-create the auto-sizing layout of the table without using
the table? I have worked around the problem so far by simply keeping
the table layout but cleaning up the code, but I'd prefer that smug
feeling of getting rid of the table once and for all.
Apologies for not having a live sample as my workplace has no public
webservers that aren't production.
Mark
__
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] Safari 3 display:inline issue in standards mode
Thus, the double-styling...
element {display: inline; display: inline-block;}
...may work in your case.
Or
selector {display:-moz-inline-box; display:inline-block;}
The order is important here. The last property always wins (normal
css cascade), except if it is unsupported.
FX 2 will ignore inline-block, but the upcoming FX 3, which supports
inline-block very well, will use that one (instead of the proprietary
-moz-inline-box).
Thanks for the tips. Actually I was able to solve the problem by
changing the pages to quirks mode which worked for all browsers.
I'm pretty sure the display:inline should have worked in safari even in
standards mode. As for why I was testing Safari 3/WinXP it's because I
don't have a Mac.
Finally, I've included (inline) the offending code since there is no
public server I can host this on (sorry). The problem is worked-around
for me (with quirks mode) but if anyone is interested in the original
problem, it can be reproduced with this code. I'm also curious to find
out how it looks in a released Safari on Mac.
Thanks,
Mark
-
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html
head
meta http-equiv=Content-Type content=text/html;charset=utf-8
style type=text/css
form { margin: 0px; padding: 0px;}
#members {
margin:10px 0px 0px;
text-align:right;
height: 20px;
}
#members .text_mmb {
width:75px;
height:15px;
border:1px solid #7D97B0;
margin-left:2px;
}
.date_button {
display: inline;
}
#members .date_button {
vertical-align: bottom;
}
#members label{
vertical-align: center;
line-height: 20px;
margin-right: 2px;
}
#members input[type=text], #members input[type=password] {
margin: 0px;
}
.button_border_2 {
border: solid 1px #8F0100;
}
.button_2 {
border: solid 1px #FF;
background-color: #8F0100;
padding: 2px;
color: #ff;
}
/style
titleTitle/title
/head
body
div class=main_in
div id=top style=white-space: nowrap;
form name=LoginForm accept-charset=utf-8 method=post
action=#
div id=members
label for=usernameUsername or Email/labelinput
name=username id=username class=text_mmb size=12 type=text
label for=passwordPassword/labelinput name=password
id=password class=text_mmb size=12 type=password
table class=date_button border=0 cellpadding=0
cellspacing=0tbodytrtd style=border-width: 0pt;div
class=button_border_2input value=GO onclick= submitLoginForm();
class=button_2 style=padding-left: 5px; padding-right: 5px; cursor:
pointer; title=GO onmouseover=window.status='GO'; return true;
onmouseout=window.status=''; return true;
type=button/div/td/tr/tbody/table
input value=true name=auto_login
type=checkboxRemember Me | a href=#Forgot Password?/a
/div
/form
/div
/div
/body
/html
-
__
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] Safari 3 display:inline issue in standards mode
Hello, The website I work on uses a lot of pre-fab HTML widgets including a rather complicated button, which I can't change. The problem is the button is wrapped in a div wrapped in a table. Anyway, I want to put it on one line of text which I usually do by setting its display to inline. However I'm having problems with Safari 3 on Windows XP, where the display:inline doesn't work properly. If I remove the doctype from the page it works fine, however. Also, if I set display to inline-block it also works fine on Safari but then it breaks in Firefox. Any suggestions? A minimal test-case with inline CSS is attached. The expected result is that all the elements are in a row on the right side of the screen. Thanks, Mark __ 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/
