Re: [css-d] first line of code
Hi Bhomis. First, you sould understand about the Web Standards from W3C. This line just says to the browser which version of the HTML the page is using. The line that you put here, is from XHTML 1.0 Transitional. If your page gets strange with this line, it's because you are out of the XHTML specification. You need to be within the specification, XHTML 1.0, HTML 4, HTML 5, whatever you want to use. On Thu, Jun 17, 2010 at 14:26, bho...@aol.com wrote: Hi. Dreamweaver automatically places the following line at the top of the page: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; Is it necessary? It throws off the appearance of my pages. When I remove it, things look as they should. Thanks, bhomis __ 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/ -- Rafael Henrique da Silva Faria Grupo de Sistemas e Redes Serviço Técnico de Informática Faculdade de Ciências e Letras do Campus de Araraquara - UNESP __ 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] em-based typographic grid
Aleksandar Vacic' wrote: Last few weeks I was picking up on the various articles I read about grids and web typography and went on to create basis for all future web sites I do. It came up to this - a grid measured in ems + basics of typography (headers, blockquotes, lists etc). http://aplus.co.yu/css/em-based-typographic-grid/ It's a work in progress and I would like to hear constructive comments on it. There has been some similar articles around for a while, for instance in A List Apart[1]. The problem with this is that, although it's possible, it has a lot of inconveniences or weaknesses that must be carefully avoided. First example: you can't successfully combine two or more font families. font-size-adjust has been wiped out of CSS 2.1because it never got implemented (aside from Fx) and it was pretty much the only way we could have relieved this. So you either set the size in pixels, or use the same font (which you must ensure it exists in all client systems), or you better use images and avoid a huge hassle. Good luck. Rafael. [1]http://www.alistapart.com/articles/settingtypeontheweb/ __ 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] hr / styling
Alan K Baker wrote: [···] If one of these methods is the de-facto standard, then hr must be classed as a special case, where some rules of block styling do not apply, or at least one of the browsers is breaking the rules. As far as I'm concerned (which doesn't mean anything), HR are a replaced elements[1] and, therefore, unable to be styled[*?*] beyond their box model[2], just as Form elements should be too. Browser vendors do provide a way to style them up to some point (e.g. I use transparent, border-less HR with a fitting background image in all but the IE family), but I think that's beyond what the standards allow. Nevertheless, I wasn't able to find a reference to the second point (...unable to be styled...). Rafael. [1]http://www.w3.org/TR/CSS21/conform.html#replaced-element [*?*]/Needs reference/ [2]http://www.w3.org/TR/CSS21/visudet.html __ 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] Opera 9, input type=file and text-indent
Boštjan Kern wrote: Hi all! I'll make this short and sweet: - browser: Opera 9+ - problem: text-indent doesn't work on input type=submit /, so I can't use a background-image to style it I'm out of ideas, but I'd rather not use input type=image. Any ideas guys (and gals)? You could try with button instead... 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] Anchor tags
Alan K Baker wrote: Hi all. I have a need for an entire index page to be contained within an anchor, so that anyone visiting the site would have to simply click anywhere within the page to bring up the next screen. As a tags can't contain divs , does anyone have a technique to achieve this? Yes: JavaScript. It has no meaning for all the content to be inside an A element, so you should do this by other means. 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] Vertical scroll bar problem in IE vs Mozilla Firefox
Binita Bharati (bbharati) wrote:
Hi all,
I am a new-bie to css. Please help me with this problem:
My table shows a vertical scroll bar with IE and no scroll bar on
firefox when the following entry is present on my jsp file:
tbody.myscrollContent {
overflow: auto;
}
How do i enable the vertical scroll bar on firefox?
That alone should do it. If it isn't appearing it may be because it
either isn't needed or you have another rule that overrides that one (or
maybe that one isn't applied at all).
Do you have any link to see it in action?
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] Safari issues
vincent pollard wrote: on this site http://www.cancercare.on.ca/ in Safari the dropdown menu is too low and the Quicklinks dropdown refuses to take style. any ideas why it's happening and how to fix it? The style I see in Fx (and that is missing in Safari) is because of the class quickLinks added to it, but in Safari it just isn't added at all. This might have something to do with your swfobject.js file that triggers a couple of errors in Safari (since it's actually an HTML file). Regards. 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] Safari issues
vincent pollard wrote: hey rafael, thanks for your reply. the error was actually happening before we added that js file. I guess that has nothing to do, then. Still, it would be good to correct that issue (an HTML file served as JS). the quicklinks dropdown is .net control. If you're using .Net 2+ you could consider using the CSS adapters[1]. i heard safari sometimes doesn't like these but i can't work out how to fix it. I can't blame it, you're serving ~100kB just in the ViewState field! ---the whole page is ~200kB. Anyway, the problem is that the resulting DOM element in Safari doesn't have the class applied to it, so there must be some issue with your JS ---it seems to be generated dynamically---, check that code (I really hope is easier to do so in your IDE). Good luck. does anyone have any experience with .net css adapters? maybe that would help? Oh, I see you already know about them. off-topic In big corps .Net 1.1 seems to be the standard (go figure), at least around here, so I haven't had the opportunity to work with them. Anyway, they seem to be just an easier way to change the rendering (actual HTML send to the browser) of a control. This was already possible in .Net 1.1 but you had to override the Render method (hence effectively creating new controls), but then again, I haven't actually player with them. /off-topic Rafael. [1] http://www.asp.net/cssadapters/ On 21/03/2008, *Rafael* [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: vincent pollard wrote: on this site http://www.cancercare.on.ca/ in Safari the dropdown menu is too low and the Quicklinks dropdown refuses to take style. any ideas why it's happening and how to fix it? The style I see in Fx (and that is missing in Safari) is because of the class quickLinks added to it, but in Safari it just isn't added at all. This might have something to do with your swfobject.js file that triggers a couple of errors in Safari (since it's actually an HTML file). Regards. 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] Flowing text from one column to another
Dave M G wrote: [···] Perhaps I'm just not using the right search terms. I have a feeling this is either totally obvious beginner's stuff, or entirely impossible. I have a bunch of text that I have contained inside a div. What I want to do is have the text break into two different columns. Ideally, the height of the columns, and the containing div would end up as 50% of the combined height of the two columns. So, for example, if my text were simply the numbers 1 through 10, each in it's own p tag, it would end up looking something like this in the final layout: ---div begins--- 16 27 38 49 510 ---div ends--- Is that even possible? The good news: yes, it is possible. The bad news: you need either to make sure all your client browsers support CSS3[1] or build a (JS) script to do the dirty work. Rafael. [1]http://www.w3.org/TR/css3-multicol/ __ 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] 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] a picture with in a picture
David Hucklesby wrote: On Sat, 08 Mar 2008 17:38:59 -0600, Rafael wrote: T wrote: [···] Use .png for the frame, cos it has excellent transparency support. Yet another reason not to use it: PNG images don't work in IE6 (and, although we all regret this, IE6 is still the dominant browser in the real world). PNG-8 works just fine: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ Cordially, David Yes, I was referring to IE's lack of support for PNG images, but I forgot about that article. I guess that's because I don't own Fireworks :) Thanks for the reminder. 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] :: layout check :: ~dL
David Laakso wrote: Luc wrote: David , just a quick remark: wouldn't it be better to use another alternative for the e-mail? Just to try to limit a bit of spam attack... off-list reply *** I am not sure what a spam attack has to do with the nature and purpose of the CSS-D list. My understanding is this list deals with the practical application of CSS. Well, let's try to bring it back in topic. What I've done is to add some del elements with no-spam legends, hiding them later on with CSS (and using JS to make it an actual link). This may not be the best approach, but it's, like everything else, just another try to avoid/minimize spam. 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] :: layout check :: ~dL
David Laakso wrote: Rafael wrote: Well, let's try to bring it back in topic. What I've done is to add some del elements with no-spam legends, hiding them later on with CSS (and using JS to make it an actual link). This may not be the best approach, but it's, like everything else, just another try to avoid/minimize spam. Rafael. Interesting. Got a live example. Well, my domain is down at the moment, but you'll find a raw example at http://void.99k.org/email.html There you'll see 4 different versions depending how you view it: with JS and CSS enabled, only JS or CSS enabled, and both disabled. ~dL PS I neither attempt to avoid or minimize span. It is a given that approximately 85 percent of my mail is spam: my e-mail client (TB), with minimal training, eats it -- no coding or scripting required. I guess you're already at the acceptance phase, I'm still fighting back. By the way, I recommend you not to tell that to any potential client you may have ---I, for one, may decide to look somewhere else. 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] a picture with in a picture
T wrote: If you want an ornate frame, for example, where parts of it overlap the image, set the picture as the background image, then place the frame image over the top. For example, each page loads a different image. This is called image.jpg in the block below (just replace with your image name). div class=bg_image style=background-image: url(images/image.jpg); img src=images/frame.png ... / /div This isn't, IMO, the best approach. The reason is simple: your content is in the CSS, not in the page. What you're showing in your content is the frame, for every image, the style you add gives the actual image. This simply doesn't sound right. Make sure the inside of the frame is transparent, so your background image will show through. [···] Use .png for the frame, cos it has excellent transparency support. Yet another reason not to use it: PNG images don't work in IE6 (and, although we all regret this, IE6 is still the dominant browser in the real world). 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] a picture with in a picture
Scott Sauyet wrote: Jim Davis wrote: On Thu, Mar 6, 2008 at 6:57 PM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Is it possible to have an image showing a picture frame and have that as part of the css style sheet. Here is a way to have the frame in as a background in the css and adding the image in the body of the html: http://www.jimdavis.org/test/frame_demo.html Or a similar technique with no additional markup: http://scott.sauyet.com/CSS/Demo/Frame/ Either method works only with fixed-size images. Techniques that use some sort of textured image to make a pseudo-frame are possible, but they will require additional containers in the markup, either included in the source or added by Javascript. -- Scott Interesting... I've played with background's color, padding and border's color/width to give images soft thin (usually 1-4px) shadows but I never thought of using images too (duh!). I guess I'm definitely not a graphic guy. Thanks for the insight :) 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] position:absolute bottom:0 not at the bottom
Ingo Chao wrote: PS: did they say the new meta lets IE6 behave like IE8? No, they said that the lack of it will make IE8 behave like IE7, that is assuming you're talking about browser-version targeting (which hasn't been accepted yet, AFAIK). 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] Float list items [medium]
Rick Faircloth wrote: Your example below is impressive, Georg, for sure. But just look at the CSS hoops you had to jump through just to get what looks like a simple table. Why go to so much trouble avoid using table ? Just because you can or is there a more compelling reason? I'm relatively new to the CSS scene, so these are sincere questions. Rick Hi, Rick. George's example is a quite complex one (from my point of view, anyway), so that, and the lack of standard support by IE (and some others?), is probably the reason why you see such code. Anyway, back to your question: Why not using a table? As George said before, that's simply because the data shown is not tabular data. For tabular data we will understand that which has no sense if not seen in such a way (tabulated), e.g. a calendar. Now, aside from this, tables are actually complex elements, and as such, they have been problematic or expensive to deal with by browsers and other softwares (like screen-readers). There are cases, though, where the desired layout calls for the help of a table, and although basically everyone here would ask you not to use it (or simply to use another layout) it could be your best or even only choice. If I recall correctly, George had to make use of JavaScript to make IE's behave as desired. But I went beyond the topic, the point here (and what semantic markup is about) is to use the actual HTML elements that are supposed to enclose your data, like using address for addresses (of course), kbd for keyboard sample, code for code (duh!), samp for sample output, def for definitions, abbr for abbreviations, p for paragraphs, dl+dt+dl for definition lists (such as glossaries), etc. And not using blockquote just because you want to indent the code, or using pbr/p to add some spacing. I hope this helped, and sorry if I bored you along the way. 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] Request for Comments on this CSS Stylesheet Approach
Rafael wrote: Chris Broadfoot wrote: Rafael wrote: Having separate style sheets usually helps to keep everything organized (depending on how you build them), but it also gives you more connections to the server. So what you can do is to make use of that server-side language you have, just make sure to send the appropriate HTTP headers. I.e: In the (x)HTML page: link rel=stylesheet type=text/css href=css.dynamic.xxx/common/web / In css.dynamic.xxx, something like - split path-info by '/' - check by matching against the available files - send headers and embed all the files into one I personally don't like this idea. You have no benefit from caching and might as well include all those styles in an inline style tag. I don't understand you, You have no benefit from caching? As far as I know, caching is better than having the browser download the same content over and over again. If you meant that such benefit is not present here, you're wrong, it is, that's what the Last-Modified header is for ---It still opens a connection though, since it has to check what's the last modification date. and might as well include all those styles in an inline style tag. Well, yes. Having a server-side script to build the CSS file will allow you to use that content in any way you want, including putting it in a style tag (I'll assume inline is a typo). Now, why would you want that...? If we're talking about a potentially large file, I doubt you'll ever want to add that to every file you send to your users, would you?. I think styles for each page is inherently bad, your styles across the site should be consistent, therefore you shouldn't /need/ a large amount of specific styles for pages. We don't know what are the specifics of this case, so we can't decide that (IMO). Also, having a consistent style across the site doesn't necessarily mean having a small file. I hope you can see my point: I can't see yours. Regards, Chris 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] Request for Comments on this CSS Stylesheet Approach
Jason Crosse wrote:
On 18/02/2008 16:09, Rick Faircloth wrote:
I've realized at the start of a pretty large site, including
Internet and Intranet sections, that my stylesheet could grow
very large and even finding sections of styles for particular
pages could be a cumbersome task.
What I'm considering is having one main stylesheet, then
having supplemental stylesheet for the various pages I will create.
E.g., for a particular page, I would have main.css, plus index.css.
For announcements, I would have main.css, plus announcements.css.
I would be avoiding loading a lot of irrelevant styles for a particular
page and make finding style references much easier, too.
You could take the modular approach. Instead of creating stylesheets
for individual pages, you could, for example have
* common.css
* web.css
* intranet.css
Having individual style files for individual pages seems worse than
embedding styles in the head of a document. It seems to me you've
got all the disadvantages plus extra calls to the server.
This may be a slightly off-topic thread, but in the meanwhile...
If you are concerned about performance you should combine
everything, even more if you have a server-side language at your
disposition. So what I mean is a little bit more of a complex solution...
Having separate style sheets usually helps to keep everything
organized (depending on how you build them), but it also gives you more
connections to the server. So what you can do is to make use of that
server-side language you have, just make sure to send the appropriate
HTTP headers. I.e:
In the (x)HTML page:
link rel=stylesheet type=text/css
href=css.dynamic.xxx/common/web /
In css.dynamic.xxx, something like
- split path-info by '/'
- check by matching against the available files
- send headers and embed all the files into one
off-topic
I haven't used Cold Fusion, but in PHP (css.dynamic.php) it would be
something like this...
[[ /illustrative code only/ ]]
ob_start('ob_gzhandler');
ob_implicit_flush(FALSE);
header('Content-Type: text/css');
$available_css = array( 'common', 'web', 'intranet' );
$css_files = explode('/', @$_SERVER['ORIG_PATH_INFO']);
$css_files = array_intersect($css_files, $available_css);
$num_css_files = count($css_files);
$last = time();
for ( $i = 0; $i $num_css_files; $i ++ ) {
$file = some/path/{$css_files[$i]}.css;
$stamp = filemtime($file);
if ( 0 == $i || $stamp $last ) {
$last = $stamp;
}
echo \n\n/* , ucfirst($css_files[$i]), */\n\n;
readfile($file);
}
header('Last-Modified: '. gmdate('D, d M Y H:i:s \G\M\T', $last));
ob_end_flush();
/off-topic
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] Div and Tables
Big Moxy wrote: ?php session_start(); ? Showing your server-side source isn't really the best thing to do even if you see no risk at all. div class=row span class=labelFirst Namenbsp;span class=required*/span/span span class=formwinput name=firstname type=text id=firstname tabindex=1/span /div This does have a structure similar to a table, so why bothering? Use a table instead. The point is not using tables for presentation, but for tabular data. If you have a structure similar to this, then you do believe that your data (labels and fields) is meaningless if it isn't tabulated. A possible variation is the use of data lists (DL), which also make sense (that's the point of not using tables for design). Now, in this particular case you aren't giving any extra value, on the contrary, you're just creating a mess. There are tags such as LABEL that are supposed to be used with forms, but they are ignored in favor of SPAN. Therefore, the reason to build this, as far as I see, is nothing more than a exercise (and not the best). Christopher, David already gave you a couple of examples that could be helpful, but if you need any more help it would be really nice to have an idea of what you want (e.g. link to an image) and, if applicable, what you have done so far (e.g. link to your work). Regards. 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] IE7 a display:block issue
Try triggering /hasLayout/[1] on your *a*'s. One of the easiest ways
to do so is by setting the MS-only property 'zoom' (i.e. zoom:1) --if
you care about your code being valid, then don't use this property.
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
vincent pollard wrote:
hi!
so, i have:
.headerTwoRight a {
text-decoration: none;
display: block;
height: 42px
}
asp:HyperLink ID=hlQuickLinksToggle runat=server NavigateUrl=#
onclick=return ToggleQL()
asp:Image ID=Image1 runat=server ImageUrl
=~/images/3_2_Header/quick_h2.gif alt=quicklinks /
pQuicklinks/p
/asp:HyperLink
and it displays fine in IE6 and FF but in IE7 the whole area isn't
clickable, just the Img P within it (as if it's ignoring display:block).
however, if i add a background-color to the A it works! but i don't want a
background-color. anything else i can use other than background-color to
trigger display:block in IE7?
Vince
__
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] Doctypes rendering comparision table (my 5c)
example. Are you suggesting that it is the browser which defines the standards? They, as far as I know, participate in creating the Standards. Now, what good is for a Standard to exist if browser vendors refuse to adhere to them? At the end, the power is in the browser vendors, we can only pressure them by changing to a browser that does follow the Standards. Are you suggesting that it is the browser which decides to assign the gap for the image not the strict dtd? if yes I believe that is a wrong statement. If not, then that is what I mean. Yes, it is... Why? Because it's a behavior they came up before the creation of the CSS Standard, when the presentation was defined by the structure alone. They cannot simply take it away now, and that is called /backward compatibility/. 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] Tables, borders, cellspacing, cellpadding and CSS
Aaron Gray wrote:
Hi,
I am having problems with tables, basically I want to do all formatting in
CSS but am having problems knowing how to do cellspacing and cellpadding
table attributes in CSS.
At the moment I have :-
table {
border: 1px solid black;
}
td {
border: 1px solid black;
}
th {
border: 1px solid black;
}
and
table cellspacing=0 cellpadding=2
...
/table
How do I do this all in CSS ?
Try this...
table,
th,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 2px;
}
In IE, though, cellspacing has priority over border-collapse /
border-spacing (so don't use it).
Rafael
Ref.: http://www.w3.org/TR/REC-CSS2/tables.html#borders
__
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 bug changing border color?
Michael Leibson wrote: Hi, I just had my first look at what IE7 does to my website, via a BrowserCam.com screencapture. The first thing I noticed is that the border to my homepage 'container' div is rendered as black, rather than as 30% black (#AAA9A9). Is this the result of an IE7 bug, and -- if so -- any recommendations on how to work around it? You can find the page at: http://members.distributel.net/~leibson/ but, of course, it will only appear black in IE7. I don't know about the rest, but I see no difference between Fx and IE7 rendering. What about sending a link to picture describing what you mean? __ 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 bug changing border color? [off-topic]
This was meant to be a private message, but I though it could be of some use to someone else... I would like to ask you a small favor: when replying, please avoid including people's email addresses. The messages in this kind of lists are usually archived (and indexed) by one or more sites being globally available... this means that writing down email addresses here is almost as good as putting them in some random forum (spam-wise). Rafael. P.S. Yes, I think the image you sent me is the only one where you see that darker border. Michael Leibson wrote: - Original Message From: Rafael [EMAIL PROTECTED] To: Michael Leibson [EMAIL PROTECTED] Cc: [EMAIL PROTECTED] Sent: Sunday, December 23, 2007 3:22:06 PM Subject: Re: [css-d] IE7 bug changing border color? Michael Leibson wrote: Hi, I just had my first look at what IE7 does to my website, via a BrowserCam.com screencapture. The first thing I noticed is that the border to my homepage 'container' div is rendered as black, rather than as 30% black (#AAA9A9). Is this the result of an IE7 bug, and -- if so -- any recommendations on how to work around it? You can find the page at: http://members.distributel.net/~leibson/ http://members.distributel.net/%7Eleibson/ but, of course, it will only appear black in IE7. I don't know about the rest, but I see no difference between Fx and IE7 rendering. What about sending a link to picture describing what you mean? Sorry, Rafael, I should have thought of that. Here it is: http://members.distributel.net/~leibson/tests/screencapture_of_IE7.htm http://members.distributel.net/%7Eleibson/tests/screencapture_of_IE7.htm If you saw no difference between FF and IE7 rendering, I wonder if all is in fact okay, with the problem simply being somewhere in the transfer from screen to screen capture via Browsercam.com? Thanks for your help, Rafael. - Michael __ 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] list-item markers vertical-align: top ???
Michael D Schleif wrote: http://www.mdsfreedom.com/sellers.aspx background-position: left; means the same as background-position: left center; if you want it to be at a specific position you must tell it so; i.e. background-position: 0 0.6ex; I didn't find any explicit line-height so '0.6ex' is more or less centered at the first line in my configuration; you should define an explicit line-height for better results. * Gunlaug Sørtun [EMAIL PROTECTED] [2007:12:09:05:17:10+0100] scribed: Michael D Schleif wrote: I am having problems with list-item markers in unordered lists that span more than one (1) line being _centered_ vertically. I want the marker centered on the first line of list-item text. Too many ways to create a list with list-item markers, and too many problems that can ruin it. That in addition to that there are more than one way to fix each combination of lists / problems, and it all depends on which browser / browser-version that needs a fix. Have you got a live link to your attempt, so we can see what to fix in your particular case? No mail-attachments will make it to css-d alive. regards Georg PS: break it yourself, ASAP, so you can learn how to fix it before someone else break it for you :-) -- 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] How will firefox 3 affect web developers? [medium]
Gunlaug Sørtun wrote: Curiosity killed the cat... -- Molly 'the cat' :-) Don't worry, they have lives to spare :) [···] Content being the same doesn't mean users get to or want to see it in the same way across the board, and that is often the reason why users learn about browser-options and/or switch browsers in order to get it right - for them. Thus, what the designer sees when comparing across browser-land and browser-options, and what an end-user sees, will only be the same by chance. Maybe we're talking about different things here. What I understand here would be basically the same as saying that the standards shouldn't exist and, though interpreting the same content / instructions, each browser should render it its own way. Now users wanting to see it differently (or 'right for them') would usually do, in my opinion, one of two things: - change the browser's skin - change the content's theme (css style), whereas allowed by the site itself or externally with a custom css or tools such as stylish (and themes built the community). As an example, ESPN's Game Cast doesn't seem to work on anything but IE, and that's plainly wrong. We should have past already the time when we told users to use the browser /we/ wanted instead of their own choice. Now, that's how I interpreted your comments, that's why I'm guessing we're talking about different things here. What were you referring to? [···] Browsers don't use the same engines and same calculations, and their set of options vary quite a bit. Sites designed with built-in stability limitations, doesn't help much on anything. Sites (meaning design here) should not be stable, they should adapt to the environment the very best they can - without disturbing the end-user. Well, yes, that's our current situation: different engines with different limitations, behavior and bugs. But CSS is supposed to help us achieve the layout we want without the need of changing the structure. That's what we were promised, and what the future should bring, but for that we need for all engines to follow the specs (and that these are actually complete), but the should you used isn't referring only to present, but also future posibilities, and that's I don't agree. Also, if we only use the little set that looks like working right in all browsers then we wouldn't be able to be creative and come up with good, different and non-stiffed designs... so we would all be working for lynx and that's the designs we would see all around the web. Continuing with your paragraph... if by stable you mean 'pixel-perfect' I agree on what you say, but stability for me has little (if any) relation with pixel-perfect, fixed, liquid or any other style. For me it just means that it's as bullet-proof as the current engines allow us to (which can be a darn pretty hard work by itself). There is in reality no lowest common denominator to design for - maybe apart from the one called ignorance, only some common standards with plenty of play-room, common sense and varying degree of support. Add in the growing number of hardware variables and see the world evolve. Not much stability in there, and neither should there be if we want some progress. In my opinion, there should be a lowest denominator, and that's simply because if doesn't, we won't be able to move forward. There *is* a need for getting rid of older and plainly defective browsers, but we can't, just because they're the users' belongings and we cannot control that, so we then have the only choice of ignoring some features or think on special cases. As a note: nothing of this should care to lynx in any way, we're talking about CSS, something lynx just ignores (as it should, I believe). The content is there, we're talking about the presentation here. Some earlier thoughts related to the subject, for those who care to read articles on a, by definition, pretty unstable site... http://www.gunlaug.no/contents/wd_additions_21.html regards Georg I still get the feeling that this is just a misunderstanding of your words, though maybe we do have different ways of thinking regarding our present and (possible) future in Web dev. 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] How will firefox 3 affect web developers?
Gunlaug Sørtun wrote: Erik Harris wrote: I think Davoud's response shows us why the answer to the question posed in the subject is virtually nothing. There are too many people using other browsers, and unless we're going to be creating websites to work specifically in Firefox, we're still going to have to work with the lowest common denominator in the name of site, which has NEVER been Firefox, in the name of site stability. I think someone is defining site stability on the wrong premises. No site will ever work and render the same in all browsers, no matter what lowest common denominator one uses. Neither should they. Interesting... now I'm curious. While I don't have any major problem with (a little) different versions in different browsers (or mayor when so was desired), I see no reason why they *shouldn't* render the same, given that the content is the same. Was this some kind of typo or there's a reason behind it? 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] Positioning an element - the limits
Maybe this... http://www.themaninblue.com/writing/perspective/2005/08/29/ Rafael. Robert James wrote: Can anyone guide me with this? If the question isn't clear, please let me know what needs to be added. If this is simply impossible, could someone please let me know? On 11/18/07, Robert James [EMAIL PROTECTED] wrote: I'd like to position an element at the bottom of the screen. This is easy, using position: fixed and bottom: ...px. However, on screens higher than 600px, I'd like to fix it at 600px from the top. That is, if the screen is shorter than 600px, push it to the bottom of the screebn otherwise, push it down to 600px. Is there anyway to do this? Thank you. __ 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/
Re: [css-d] Opera - no css
It seems to me that you're asking us to debug your code. If you're
using PHP I assume you're a programmer , therefore you understand where
the problems more certainly lies (if you're not, then ask the guy who
did the script, you shouldn't mess with it) ---not everyone of us is
meant to be a programmer or a designer.
So... your issue is not CSS-related, so please make sure to send
your inquiries to the right people. As a hint: check what do you see on
each browser when you visit http://www.cpmac.com/indexcss.php (this is
the CSS code that that browser is seeing).
Rafael.
Colin Mcgarry wrote:
I've just set up Opera to see how it deals with my web pages. I was
surprised to see my home page has no css with Opera.
the page is http://www.cpmac.comand the css is a php file that begins
?php
header(Content-type: text/css);
$d = detect();
$b = $d['browser'];
$v = $d['version'];
$o = $d['os'];
function detect()
{
$browser = array (IE,OPERA,MOZILLA,NETSCAPE,FIREFOX,SAFARI);
$os = array (WIN,MAC);
$info['browser'] = OTHER;
$info['os'] = OTHER;
foreach ($browser as $parent)
{
$s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $parent);
$f = $s + strlen($parent);
$version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
$version = preg_replace('/[^0-9,.]/','',$version);
if ($s)
{
$info['browser'] = $parent;
$info['version'] = $version;
}
}
foreach ($os as $val)
{
if (eregi($val,strtoupper($_SERVER['HTTP_USER_AGENT'])))
$info['os'] = $val;
}
return $info;
}
?
?php if ($b != OTHER $o != OTHER $d = 5) { ?
/* BEGIN CSS RENDERING */
?php
echo ($b ==OPERA) ? null : .opera { display: none; }\n;
echo ($b ==IE) ? null : .ie { display: none; }\n;
echo ($b ==FIREFOX) ? null : .firefox { display: none; }\n;
echo ($b ==MOZILLA) ? null : .mozilla { display: none; }\n;
echo ($b ==NETSCAPE) ? null : .netscape { display: none; }\n;
echo ($b ==SAFARI) ? null : .safari { display: none; }\n;
?
followed by css styles
Firefox and even IE7 treat it identically but Opera sees nothing.
If I change the style sheet to a css file it works OK.
__
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] Fwd: problem with Zeitgeist Joomla template
Mona seems to be having some issues with the mails sent to the list so now I'm trying my luck. I apologize if you end up getting 3 emails that were meant to be just one :) -- Forwarded message -- You can find a link to the problem in this link you will find the menu bar without titles although it's there if you viewed the source here is the link: http://monalisa_smile.my-place.us/index.php -- Regards; Mona Adel Web Developer Develpoment Department CairoIT Solutions Team Egypt-Mansoura Branch E-mail:[EMAIL PROTECTED] mailto:E-mail:[EMAIL PROTECTED] Website: www.cairoit.com http://www.cairoit.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] Missing vignettes/bullets on floating items
Hi, I've come with a problem I saw once before, but didn't matter until now. The issue is that IE (surprising, I know) gets rid of the vignettes of floating list-items. I'd come across this behavior before but it hadn't matter because I usually get rid of them anyway, but not this time, I actually need a list, I just happened to put the items floating for better readability (i.e. in columns). Playing with margin/padding doesn't seem to change anything. Anyone has any suggestions / pointers? You can find a demo of the problem here: http://dev.rsalazar.name/css.d/float-ul.html Thanks in advance. __ 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] Adding a faux column on my blog
Ian Bethune wrote:
So far I did what you said and have only gotten 1 column to work. I have
tried many different things but nothing has worked. I did figure out why it
wasn't calling the gif in the first place as I had made an error in the
code. Once I fixed it, it started to work. But I can get the right side to
go if I put that in again or have it repeat-y both. Here is the section of
the code that I've been working in.
#content_box {background:#fff url('images/faux.gif') repeat-y left; width:
970px; text-align: left; float: left; clear: both; }
#content { width: 510px; padding: 0 0 0 10px; float: left;
}
#sidebar { background:#f2f2f2; width: 210px; padding: 0 0 0
10px; float: right; }
#l_sidebar { background:#f2f2f2; width: 210px; padding: 0 0
0 10px; float: left; }
#footer { background:#5f; width: 970px; padding: 1.2em 0 0 0;
border-top: 2px solid #ccc; float: center; clear: both; }
Thanks for your quick reply yesterday.
Ian
Hi, Ian.
The problem is that your background image should have both columns.
Since it only has one (and you set the background at the left) only the
left column works. You're using a fixed layout, so using an image with
the widths you want should give you no problem.
Also, if you're using the faux-column technique, you don't need to
set the background color for the columns anymore, doing so could even
give you a small problem if the image's column width is a little smaller
than your actual columns.
Regards,
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] Wrapper is not wrapping...footer is at the top
Jeralyn Merideth wrote: Thanks to everyone who answered. I took the absolute positioning correction advice and worked it out. I kept working on it and so anyone who answered this later may not have seen the correct code :-) Anyway, all is lined out and looking good in FF and IE7...I don't have 6. could someone do a site check for me? http://www.5pts-interactive.com/sarantopoulos/index.asp Everything looks OK... except for the PNG you're using (since IE 6 doesn't support PNG's), which appear with a white background. It's a little weak against font-resizing, though. 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] Adding a faux column on my blog
Ian Bethune wrote: I have added a background color to my sidebar on my blog Sox Dawgs, http://soxanddawgs.com I would like the sidebar color to extend to the bottom of each page and not lengthen it any more than the longest sidebar unless the content is that long. I have read the how to create a faux column with css but have not had any success. So I turn here for help. Any help anyone can give me would be greatly appreciated. Thank you very much for your time. I haven't seen the CSS (was too long), but the effect you want can be achieved by adding the image with the faux columns to #content_box, that way whatever content is the longest it will affect the three columns. Hope this helps. __ 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] Need help with height on menu
Jeralyn Merideth wrote:
I'm sorry! I sent this a couple days ago without a link. My bad. You guys
helped me on another problem with this same menu and I got that under
control, but now I can't seem to make it look right in FF. IE7 looks like
it's supposed to but in FF it's too high and not sitting on the masthead
properly.
http://www.5pts-interactive.com/sarantopoulos/index.asp
This should help you sort out your problem.
body {
background-color: #fff; /* don't assume everyone has white as
default color */
padding: 0;/* don't forget to reset body's padding and
margin */
margin: 0;
color:#444;
}
#topmast {
top: auto; /* I don't think you ever needed this, did
you? */
}
Your design is a little atypical. You are combining em's with px's
(meaning you won't get the expected results), and you're also taking the
wrong approach with some basic issues. I would really recommend you to
rethink your approach and redo what's needed.
Hint: try resizing the font, just a little is enough.
Good luck.
__
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] Need help with height on menu
Jeralyn Merideth wrote:
Rafael,
Thank you for your advice. However, I'm a little confused. Here is the
code for my body:
body#navon_home #navbar li#home a {
background: #fff url(../img/navon.jpg) repeat-x;
color: #fff;
}
body {
text-align: center;
background: url(../img/banner.jpg) repeat-x;
}
[...]
You can see that I *do* have #fff as a background color.
Actually, at this point you overrode the background color with your
second rule, you should add #fff to that background, i.e.
background: #fff url(../img/banner.jpg) repeat-x;
Here 's the code for my topmast:
#topmast {
position: relative;
top: -15px;
height: 62px;
background: transparent;
}
As you can see, I do not have a value of auto on the top property.
Is it possible you are looking at an old file? Not that I think I ever
had it set to auto. I wouldn't put a value of auto on that property.
You are right, that was my rule, so I explained that totally wrong.
I meant you didn't need the top property, since you are now (assuming
you did take my code into consideration) overriding the body's padding
and margin, so now setting top to a negative value will mean having it
out of the viewport.
I'm also confused as to why you feel mixing em's with pixels is an
atypical design approach. Have you ever viewed Cameron Moll's work?
He mixes em's with pixels all the time and I wouldn't call his work
atypical.
You are right, yet something else I didn't explain as I should.
Sorry for not using the right words. I only meant you won't get what
you're probably waiting for, since you're setting the height in px but
the padding is set in em's.
also, could you clarify, for me, what you mean by basic issues? I'm
not sure how I can fix something unless I know what is wrong.
That was regarding the negative top position to correct the body's
padding / margin. You know, I think I was somehow mad at this point,
sorry for this, it had nothing to do with you.
Hint: I changed the font size to something else and that didn't work
either.
:) I hope you meant you did that with your browser's font size
feature (or whatever is called), and not in the CSS code itself (though
it should work too, I believe).
Hope this helps... this time... somehow.
Regards.
__
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] Need help with height on menu
Jeralyn Merideth wrote:
Yes, it did! Thanks. I *did* change the font-size in the code and not
in the browser lol. And, I added the zeroed margin and padding to the
body, took out the top property on the topmast, but now both IE and
Firefox is shoving down the menu into the masthead. Adding the top
back in and setting it to -7px, it views fine in both browsers. Hmm.
I will look more closely at the paddings and heights and see if I can
get these to be more consistent.
Incidentally, you have
#navbar {
[...]
top: 7px;
[...]
}
So I guess everything should be OK once you remove this rule (it
looked OK in my Fx, though). By the way, don't forget to set the
background-color --I looked into the site again, but it seems it hasn't
been updated yet.
I uploaded the version I was playing with, in case it's of some use
to you:
http://dev.rsalazar.name/css.d/5pts-menu.html
Thanks again...and don't be mad. It's too beautiful a day for that!
(at least where I live ;-))
Jeralyn
Thanks Jeralyn, it's a little bit cold and cloudy today but still a
nice day here too --I like clouds :)
__
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] :: target a selector ::
David Laakso wrote: Stuck. In the top right column of this page [1] there is a slideshow. In a javascript /disabled/ browser, the slides breaks right. What to do? [1] http://www.chelseacreekstudio.com/ca/cssd/un/ What about a different approach? In the case of this kind of JS functionality I can think of two ways to do it: a) add nothing and let JS load the entire gallery (structure and images), or b) add the structure and images as you want people to see them and use JS to rearrange the structure and create the slide show. If the images are part of the actual content I would suggest to use b). __ 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] IE6 - preserving image-ratio and simulation max-width for images
Gunlaug Sørtun wrote: [...] I haven't found a way to extract an image's real dimensions and use that as part of the expression to smoothen things out. You can get the size once the image has loaded. I'll make a couple of tries and let you know if I could get anything useful. __ 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 for a:link image replacement
Leah Maclean wrote: I'm in the situation of wanting to stay true CSS and accessibility standards by separating content and structure but am in a situation where I have an anchor (a:link) but want to replace the standard text based link with an image for those browsers/ that will see the image. [...] If you want to achieve accessibility, don't replace the text. The short reason is that by doing so you will affect (at least) one group of users, the more vulnerable being those that have images disabled (for whatever reason). Now, if you can afford to bother them a little (like everyone else does, hence not being so little), then use the text-indent method; since display:none and even visibility:hidden cause troubles for screen-readers. Look for Joe Clark's opinion on FIR in 'a list apart'. __ 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] footer disapears in ie 6
No luck. I couldn't get the behavior you mention. If the footer actually disappears it may be the peekaboo bug, search the archive google a little (position is everything) to find what triggers it and its workarounds. Ross Hulford wrote: Hi, My footer disapears in IE6. It seems to happen when my #container is reduced to 800px. Any ideas why? Thanks, R. http://vps.aztechost.co.uk/~suruch1/test/ http://vps.aztechost.co.uk/~suruch1/test/css/ __ 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/
Re: [css-d] Advice sought
Hans Lodder wrote: Our specific questions: - we do not have IE6; how does it look (can you install IE6 separate from IE7?) Yes, check this page http://tredosoft.com/Multiple_IE __ 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] opinions: horizontal vs vertical menus
Roger Keays wrote: Hi all, Here are some thoughts from my blog @ http://www.sunburnt.com.au/publications/design/horizontal-vs-vertical-menus [...] * Being evenly distributed across the page, they create balance which makes you feel good :) * They make better use of space as there is no vacuum below the menu which is common with vertical menus. * It's easier to read horizontally than vertically. * It's easier to move mouse side to side than vertically. * Submenus are easier to access as they have a larger area for the mouse to enter. * As people are generally lazy, the shorter menu items more common in horizontal menus are easier to read. What do you think? Well... what about adding the same menu in both the vertical and horizontal version so we can compare and see your points clearly? I think I understand what you mean, it somehow feels unnatural the movement you must do to chose an option, but I think this issue remains whether is a vertical or an horizontal menu, since we use the same pattern, we just change how do we start (vertical - [horizontal - vertical] / [horizontal - vertical] - horizontal). By the way, how come your comments _require_ JS to work? When disabled, you don't provide the text-boxes neither a message to your users. __ 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] How to think about designing for resizing?
Gernot Hassenpflug wrote: Hello, This is my first post, a short intro: b. in South Africa, 37, background engineering, working as atmospheric science researcher in Tokyo, interests in LaTeX, web design, and document archiving and long-term compatibility. Using Debian and Ubuntu GNU/linux for work and at home. I've been trying to improve my own webpage design (header, 3 columns, footer) to cater for gecko, khtml and IE6/7 rendering engines. Mostly done, and problems of margins/padding and use of extra DIVs understood. I've done some Googling and searches of some months of d-css archives but came up short on the following topic (not sure what to search for, tried resize, block, font, CSS): What I am worried about is the following: how can one design CSS styles that resize the block elements when the user decided to increase the font (of the inline text)? At some point, all the fine examples I've found (e.g., http://www.ground.cz/luci/css/my3cols.html) break down and text extrudes from a block or starts to enter an adjacent block. This even occurs with the css-d website. What I'd like, I think, is an expanded viewport (virtual, i.e., larger than the actual screen) with---scroll bars activated---as the block elements all expand to cater for the extra needed space as the font size is increased. So I'm curious if there is some tactic that is accepted, or whether CSS2/3 cannot provide any guarantees once certain constraints are not kept. As far as I understand, this cannot be achieved (being 100% safe) because browsers have problems dealing with this resizing, so the proportions are lost and you get what you already saw --but it seems all major browsers will have native zooming once Fx 3 comes out, since Opera and now IE 7 already have it. Now, what you're looking for is a solid layout using relative units (em, ex, %, etc.) instead of absolute units (px, pt, etc.). Both 'em' and 'ex' are relative to the font size, so the bigger the font the bigger (in pixels) they are. Another thing, I guess the sites you mentioned that get broken have a safe margin for font resizing where the layout stays well-formed, am I right? This is usually the case, if not, the site could have a couple of issues. A downside of this method is that you can't have pixel-perfect layouts, and you must use images intelligently. Some people set the images size in relative units too to get a better scaling effect, just like zooming. __ 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] Pure CSS drop-down menus aren't *good*
Alan Gresley wrote: I have been following this thread with particular interest but staying in the background while it bounded in and out of holy war territory. Keyboard Accessibility with CSS is possible by using the :focus pseudo selector but at this time, only Firefox and Mozilla (maybe any Netscape compliant) fully support the :focus property. Opera has a slight problem with focus and grabbing the submenus. What I do find frequently on this list is request for help with CSS menus that have far to many links in them, micro text or little boxes to hover in. You cannot simply grab some CSS from here, and from there, then add this bit of JS etc and make it all work. Is this indeed why CSS menus are described as *bad* Having developed a CSS menu that does all of what Christian has stated accessibility wise. Now all we can do is wait for other browser vendors to catch up and if not, add whatever JS is needed to help the other browsers out with focus. In my demo, I find the vertical version much easier to use. http://css-class.com/articles/ursidae/bears5popupv-kbaccess.htm 1. Use the tab key to access all list items, observing how the submenus open when a parent anchor is in focus. Quoting Thierry Koblentz (a famous name :) But what about keyboard users? One example I've seen in this thread is not accessible to keyboard users and the other forces these users to go through every single item in the menu :-( If you're talking about menus with many items, this doesn't look like the best option, at least not without the JS behavior found in the menu Thierry himself (and many others, Georg included) points out http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/ I was going to use the same approach you just used, but after seeing that menu I changed my mind. It does become a problem when JS is disabled, but I guess we can combine both techniques and come out with something better. That's what I will be trying (some day for sure). 2. Notice the added use of the :after selector to add additional guidance. 3. Select any link (pressing enter) and go to a test page and then use the Alt+left arrow key together to return to the previous page with the same menu item still in focus. The normal hover functioning of the menu works in most browsers. Any test with the Khtml or Webkit browser engines would be appreciated. Regarding full accessibility at this point in time, I say that this menu is currently one of the best when javascript is enabled. http://www.tjkdesign.com/articles/new_drop_down/default.asp Interesting, looks just like the one found at http://www.alistapart.com/d/hybrid/hybrid-4.html from the article at http://www.alistapart.com/articles/hybrid/ but with accessibility improvements. What has been overlook in this thread is that maybe some users who can only access a page with a keyboard are using Firefox or similar browsers already. We as web designers can help with this public awareness of such browsers. Kind Regards, Alan __ 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] Layout problem
Well, the good news is that a margin seems to work just fine, so if
you add 'id=contact' to that image, and the next CSS it should be
positioned more or less where you want it...
#contact {
margin-right: 10px;
margin-top: -10px;
}
Now the bad news... yes, IE. There is a problem with the stacking
order, so the contact image is cropped in IE. I recall a similar issue
not much time ago, so you can dig in the archive and see if that helps.
Search for 'stacking order', 'z-index' or something like that --or ask
Georg Sørtun directly ;)
P.S. It seems you're using the same images I used on the test. I
suggest you to clean the flower image, it's stands out too much when
loading the page the first time (since there are bright pixels in the
top of it, and dark ones in its bottom --no pun intended).
Kathryn Crutcher wrote:
Still working out a few problems with a new site. I've posted a couple of
questions to the list with great results. Now, the client is insisting that
a Contact button be placed so that it straddles a couple of borders. If the
layout was left aligned, I could position it absolutely but the design is
centre aligned.
This version shows the Contact button inside the borders:
http://www.grandconnections.com/buttercup/index.htm
http://www.grandconnections.com/buttercup/index.htm
This version shows the Contact button where the client has specified:
http://www.grandconnections.com/buttercup/index_button.htm
If anyone has a solution that will make the client happy, it would be
greatly appreciated.
__
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] How to think about designing for resizing?
Gernot Hassenpflug wrote: [...] exchanging video clips of sites as we worked, and showing off the IE7 zoom. Very impressive indeed. I haven't updated Opera but will do so. Not sure if this is what you mean, but... unless you have a really old version of Opera, it already has the zooming feature, they were the first ones to bring it out. Just use the mouse wheel keeping Ctrl pressed or change to the author view (not sure about the name) and using the zoom drop-down. [···] [...] Some people set the images size in relative units too to get a better scaling effect, just like zooming. Right, I didn't think about this possibility. Thanks a lot once again. Gernot Me neither, so I was a little disappointed of myself when I learned about it in this very list :) Regards. __ 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] layout issue with background image
I forgot to mention: the text is a copy / paste from your sample, meaning that Buttercuup isn't something I made up, but a typo on your version :) Regards Kathryn Crutcher wrote: I recently asked about how to resolve having both a gradient background and a background image. It is now close to what I want but not there yet. http://www.grandconnections.com/buttercup/index.htm and http://www.grandconnections.com/buttercup/ApplicationStyle.css There is a center-aligned main area with a flower behind the top right corner. I would like to have the main area always in the centre and the same amount of flower displayed at the top right but I don't want the horizontal scroll bar. The bigger the screen, the more the flower would be revealed. Any suggestions? Also, ideally the outside border would be semi-transparent. When I added transparency to that div (#inner), the whole content area inherited the transparency. Is it possible to limit the transparency to the outer border only? Thank, Kathryn __ 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/
Re: [css-d] CSS specifictity conundrum
What you're looking for is
http://www.w3.org/TR/CSS21/cascade.html#specificity
You can see that in 2.1 they included the 'style' attribute and give it
a specificity of 1000 (highest)
Alex Dunae wrote:
Hello all - I'm writing a CSS parser and have come up against a bit of
confusion regarding CSS specificity.
In my style sheet I have
#head a { color: white; }
In my HTML document I have
div id=heada href=# style=color: red;.../a/div
Firefox and IE both render the link as red but the CSS spec seems to say
that it should be white.
Per http://www.w3.org/TR/REC-CSS2/cascade.html#cascading-order
the rule in my stylesheet should have a specificity of 101 while the
inline attribute should have a lower specificity, 100.
Am I reading this incorrectly or is this just browsers ignoring part of
the spec.
Thanks in advance,
Alex
__
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/
Re: [css-d] CSS thumbnails placement
I recall something like this was mentioned not long ago, check the archives... http://archivist.incutio.com/viewlist/css-discuss/?search=image+caption first (actually, last) entry: http://archivist.incutio.com/viewlist/css-discuss/84117?highlight=image+caption ScriptInstallation.in wrote: Hi, I need to show thumbnail images and description of image below it. I made a page at http://www.webcash.in/fp/image_problem.html It works fine if image description is all same size. If one of the image description is lengthy, the image placement will not work. Just mouse over the link Change Image Caption, it will change description of the 3rd image with a lengthy text and the image placement will go wrong. Is there any solution for this problem ? I need to use CSS for displaying the images, still it work like tables (if i put the image in table, lengthy description of image will not make the image placement like this). Thanks, Yujin __ 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/
Re: [css-d] Pure CSS drop-down menus aren't *good* [medium]
. As the section you mention is actually where I stopped above, let me see if there's something worth mentioning (from my part)... « You cannot test properly with CSS there is no conditional syntax, instead you need to rely on browsers and visitors being able to understand and use your solution or get an unusable page. » That's something I don't quite understand, do you mean by using object detection in JavaScript you don't need to test in any other browser but IE 6 (or whatever browser you use)? Do you think people documenting themselves on CSS support and browser testing isn't testing properly? Yes, the user may have some CSS rules himself, if he does, he usually knows why and how could affect this to the pages he's visiting. So is someone who has Grease Monkey installed and is altering the site's JS behavior. I really see no big difference here. « You are at the mercy of the browser when it comes to keyboard support. » Hell, this is *so* true, and how do I hate it. But then again, keyboard support isn't usually the easier task in JavaScript (depending on the keys you're using), they're too far apart from each other in this area, and even the same browser in a different platform has compatibility issues. Although this may be a little off-topic. « [...] browsers only allow keyboard access to links and buttons. You also only allow for keyboard support for web pages, not for applications (more on that later). » Common sense and some guidelines ask you to use links, even if the item has no sense by itself and serves only for grouping it's recommended to use a link o a page listing those sub-items, just in case --that is accessibility too. « With links being inline elements you can only nest other inline elements in them, and you may make it a real pain for users relying on assistive technology to use your site. » The same issue again, disinformation, outdated, or not enough info. You choose. « There is no way to allow the user to make a mistake or move the mouse slightly without losing the extra information or in worse cases collapse a whole menu » There _is_ a way (or more?) to achieve this, it's just that people are not used to do it. We don't usually think on accessibility (don't know why), and/or would require some extra tags. OK, I will stop here this time. These are rather tough accusations you make here, however they lack the proof. Well... what can I say? Let's see an application of common sense and find a CSS only menu that works with a keyboard and stays on-screen even if there is not enough space for it to show more to the left or the bottom. I guess you missed the point when I said I don't think he's wrong, if you did is the first paragraph on this e-mail --he being you, by the way. Anyway, it's good to have it as a reference, but I do believe people should investigate a little more. I think people should stop trying to prove a point in one direction or another but use what works reliably. Point is that with CSS you make assumptions, with CSS and JS you can test before you apply (is there enough space? Would a delay in showing or hiding a menu make it more usable?) Now I see what you meant by testing properly! It seems I didn't get you, sorry. It would be good to have this clarified in the article too. Maybe the question is what should a drop down menu achieve and what are the circumstances it could be used and then we decide the technology to apply. Right now all of the discussions on this matter start with I want to use technology XYZ as I know it and it IS the best for this!. All other technologies are black magic and insecure and probably steal your firstborn when you don't watch them closely. Now, now... you're making assumptions. I do know JavaScript, in fact I've been working with it since the dark times (I never, ever, enjoyed working with NS 4.x!). I'm not an expert, not even self-declared, but I usually know what I'm saying, and if not, I'm (usually) glad to hear that I'm not and, if possible, why. Well, finally it's over. I said that I would only answer what was worth it of, but I ended up answering almost everything, so don't expect that private message I promised you before. Regards, 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] Pure CSS drop-down menus aren't *good*
Christian Heilmann wrote: I've heard the request for pure CSS drop-down menus quite a lot, and rarely see people getting told what they should about how *bad* they are. Cause people don't search archives? http://archivist.incutio.com/viewlist/css-discuss/78948 LOL. I agree, we should search the archives a lot more. On the other hand, if the same topics pop up again every now and then, and they came to same conclusions, then we're reaffirming this knowledge, right? ;) __ 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] Pure CSS drop-down menus aren't *good*
I changed my mind. I just read this article and I don't find it useful. I think it lacks in-depth knowledge or he simply didn't took the best approach for this topic. I don't think he's wrong (solely in the point that hybrid menus are better), but anyone with some knowledge could think of this article as poorly-done or not being objective --he seems to be some sort of JS expert. The way he uses to expose his point of view looks more like saying CSS is plain wrong, it also shows a lack of understanding of it and seems to believe there's no common sense (which could easily be applied to both CSS and JS). Anyway, it's good to have it as a reference, but I do believe people should investigate a little more. Christian Heilmann wrote: I've heard the request for pure CSS drop-down menus quite a lot, and rarely see people getting told what they should about how *bad* they are. Cause people don't search archives? http://archivist.incutio.com/viewlist/css-discuss/78948 __ 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] layout issue with background image
Kathryn Crutcher wrote: I recently asked about how to resolve having both a gradient background and a background image. It is now close to what I want but not there yet. http://www.grandconnections.com/buttercup/index.htm and http://www.grandconnections.com/buttercup/ApplicationStyle.css There is a center-aligned main area with a flower behind the top right corner. I would like to have the main area always in the centre and the same amount of flower displayed at the top right but I don't want the horizontal scroll bar. The bigger the screen, the more the flower would be revealed. Any suggestions? I would suggest to let the images do the trick. I didn't fully test it nor did I put much attention to the details (it was so you could grasp the idea), but you can check this... http://dev.rsalazar.name/css.d/buttercup.html Also, ideally the outside border would be semi-transparent. When I added transparency to that div (#inner), the whole content area inherited the transparency. Is it possible to limit the transparency to the outer border only? Not that I'm aware of. The element and its children will have, at most, that opacity, being able to make it more transparent but unable to revert it. Again, as far as I know. Hope it helps. __ 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] pure CSS drop-down menu - Sperling
It's because of the child's (or sub-item's parent) box. They probably thought on give it some margin to make it safer and easier to select, meaning you can go a little out of the item's box and the menu won't disappear, so the issue you describe is caused by their top margin. Hope that helps. Jay Rabe wrote: This is certainly a nice-looking solution, however I'm curious about one thing. If I put my cursor tip in a top-level box, it drops down the sub-menu just fine, but the highlighting in the top-level box is only on if the tip of the cursor is somewhere above (ie vertically) the midline of the box. Clearly not a functional issue, but just curious. J This works: http://sperling.com/examples/menuh/ Cheers, tedd __ 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] Pure CSS drop-down menus aren't *good*
I think this is yet another religious topic. Accessibility on most JS menus (actually all I've seen so far) is inexistent, some of them are so poorly done than they even throw an error on this or that browser and the whole menu stops working. If you ask Joe Clark about his opinion... maybe he would trash both of them :) Personally, I think CSS menus are better (or less bad) than JS menus. In both cases you must know what you're doing and have accessibility on mind (and hoy many of us do really do this?). If you ask me, a combination of both is the best solution, which means a lot more work than current / typical implementations --and the client's can't see a reason to spend on that, and the guy doing the front-end has a lot of things to think on before spending some extra time on the minor details. I myself should be redoing part of a menu I'm planning on using, but is for a personal site so the time I have spent on it is... a message I sent to this list (and that Georg kindly replied), that's all. Oh, well... real life again. In case you're curious, the link I sent was http://dev.rsalazar.name/css.d/menu.html By the way, the best solution for the accessibility issue I asked help for seems to be a re-implementation of the CSS behavioral part combined with a little JS to make things look better (ironic? yes, it is). Here are some opinions, if you mind... Kit Grose wrote: G'day Jay, I've heard the request for pure CSS drop-down menus quite a lot, and rarely see people getting told what they should about how *bad* they are. Can you say better things on JS menus? Aren't basically the same things? CSS is designed as a method for styling visible items and laying them out relative to one-another. Drop-down menus are behavioural, and thus should be taken care of with Javascript (not Java; there's a huge difference, worth noting). Of course, accessibility means keeping in place a series of fall-backs which allow non-JS enabled users to view the list. So would CSS fall-backs to do exactly the same. It's hard (for me, at least) to agree on using JS solely on the fact that their behavioral and, therefore, should be done with JS. It's kind of the same as saying that changing the colors is a behavior, not a style (which would be correct), or saying that pseudo-elements and pseudo-classes have no reason to exist, since they're referring to a behavior or somehow altering the DOM. There are some massive accessibility gains that Javascript drop-downs provide: • You can animate opening and closing lists (not just eye-candy; it makes it very clear to the user when there is a change on the screen) Just like Flash... wouldn't really want to go more in-depth on this (another religious topic). • You can provide a suitable pause before the list collapses (your users are not necessarily skilled with a mouse or keyboard. They may have difficulty operating a mouse and I can tell you from experience that they have real difficulty changing movement from horizontal (along your list headings) to vertical (down your first level list items) to horizontal (across the list item to the sublist) to vertical again (down the sublist items) without accidentally moving the mouse out of the bounds of the list item. Javascript menus introduce a delay before actions are cancelled so that a slight movement of the cursor outside the bounds of a list item is not penalised against) Granted. I agree on this, the menu I mentioned before is actually a vertical-vertical variant instead of the common horizontal-vertical versions. • You can get identical behaviour in all the major browsers (all the CSS-only drop-down menus rely on CSS hackery to work properly in IE. Every sensible browser can handle the ulli selector; the basis of a simple, standards-based CSS solution, but IE doesn't. CSS hackery is no better for you as someone who doesn't understand JS but does understand CSS than JS hackery; CSS hacks commonly *don't make sense*. They're backward thinking and complex to write). Mhh... I can't see JS being more standard than CSS right now (I guess it depends on the versions). JS has been out there more than CSS, but it seems they're standardization isn't that far from each other. ECMA script and DOM implementations aren't quite well supported yet, not to mention the combination of CSS and dynamic elements. By the way, CSS hacks make sens to those who know and understand CSS, just like JS hacks (don't tell they don't exist, please) makes sens to those who know and understand JS. Yet again, a religious topic. Please, for your users' sake: use a Javascript drop down menu (but make sure it's one that is fully accessible, and that reverts to a pure-CSS menu when JS is not available). I use TwinHelix Designs' excellent FreeStyle Menus
[css-d] CSS menu - accessibility + Opera/Safari tab not working
Hi everyone, with the past menu topics I remembered about a couple of issues I was dealing with not too much ago. I have this menu[1], and although it works as expected in most browsers (IE 6 wasn't fully considered), I have two issues with which I'd like to ask you for help: a) I was trying to add keyboard support (without JS) but I can't find a way to keep the sub-menus open so the user can 'tab' through their options (I can show them, but they're not selectable by 'tab'). b) why, just why doesn't tab seem to work on either Opera or Safari? (just Fx IE). c) an extra: does anyone have any suggestion? I hope I'm not getting off-topic with this, thanks in advance. [1] http://dev.rsalazar.name/css.d/menu.html __ 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 menu - accessibility + Opera/Safari tab not working
Gunlaug Sørtun wrote: Rafael wrote: I have this menu[1], and although it works as expected in most browsers (IE 6 wasn't fully considered), I have two issues with which I'd like to ask you for help: a) I was trying to add keyboard support (without JS) but I can't find a way to keep the sub-menus open so the user can 'tab' through their options (I can show them, but they're not selectable by 'tab'). Once the parent-element loses focus, its children are out of reach and the chain is disrupted. You must hold the focus - or rather hold the children within visible range so they can be reached. Methods described here... http://www.tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp ...work with keyboard. Interesting, it seems I have a reading pending. I'm not sure it's what I'm looking for, but at least it will help. b) why, just why doesn't tab seem to work on either Opera or Safari? (just Fx IE). Opera use the letters A and Q for tabbing forward and backwards through links. LOL... Now I see why, I guess Safari is on a similar situation. Oh, well, this time it's not my fault :) [1] http://dev.rsalazar.name/css.d/menu.html regards Georg Thanks for your answer, Georg. __ 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] Reliable Opera-only filter?
You could check at this page http://www.webdevout.net/css-hacks#in_css-selectors Micky Hulse wrote: I would prefer to use a filter for the latest version of Opera that will be a good long-term fix. Basically, Opera gives a few extra pixels of top-padding, on a form input, that I would like to compensate for... I can live with how it is now, but thought I would ask ya'll before I scratch it off of my to-do list. :) Thanks! Cheers, Micky __ 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 to eliminate dotted borders on hyperlink clicks
I guess you're talking about outline. Bruce Gilbert wrote: I remember reading somewhere about CSS you can add, so that links won't get the dotted border around them when you click on the links , but I cannot remember what it is. Can anyone refresh my memory? This may be just a Firefox thing. __ 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] three numbers
I don't quite get why this thread degenerated on this. This is just syntax, there are alternatives, and it's already a standard (i.e. it won't change), so what's the point? If you ask me, I don't know the reasoning behind this order, they could as well use the common (x, y) way, but this may just be the same case as with UTC (ever looked what it stands for? [1]). Maybe we should stop this thread, it goes nowhere ---and sorry for contributing myself. [1] http://en.wikipedia.org/wiki/Utc [EMAIL PROTECTED] wrote: According to the specifications, giving three values for margin: is perfectly legal and valid. The sequence of messages here illustrate pretty well, that it's a poor idea! How so? It is a recognised and neat way writing margin and padding rules. If it is recommended by the standards folks (link earlier on) who are we to argue? Ian Neat? OK - if you think so. It saves about 5 characters and confuses everyone in town, often including those who typed it originally. It's not recommended - it is merely recognised or accepted. It is not necessary to make use of each and every poor idea. Bruce __ 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/
Re: [css-d] Hosted, Site-Specific User Stylesheet
It's an interesting idea... it's like userstyles.org but without the requirement of the Stylish extension (AFAIK only Fx). But there's something I don't quite understand, how would you apply those styles? If you want that to be browser-independent the only way I see is for the site to apply itself, meaning you would need both parts, the site owners and the users, to sign in in your site (which, although not impossible, would limit your site a lot). I mean, the site owners would be giving your site basically total control over their layout, and this seem to be quite risky for them ---there would be no need to crack any of those sites if they can break yours. On the other hand, this could be well received for small, personal and some adventurers out there :) Jason Karns wrote: I've had this idea brewing in my head for a while now concerning user style sheets and I thought I'd run it by the list and get some feedback on the idea. The issue I'm trying to address, is that people who use user style sheets usually have site-specific style sheets but they can only be applied via the browser (natively or with extensions). This means that if one had multiple machines, the user style sheet would have to be saved on each machine, which may not even be possible (public access computers, for instance). This led to the idea of having hosted user style sheets, where the web application stored the style sheet along with the rest of the user's profile information. Therefore, whenever, wherever and however the user signed on, the user styles would take hold. Obviously, this introduces serious potential security risks. Without any intensive research, my initial idea is to simply run any user styles through a CSS validator and to reject anything that isn't fully valid. This should keep users from being able to inject javascript, etc. Although before this is ever implemented, serious security testing would be done. Any thoughts or comments on this idea? ~ Jason __ 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/
Re: [css-d] Hosted, Site-Specific User Stylesheet
Barney Carroll wrote: CSS can’t ‘break’ sites: It's completely presentational and functionally harmless. Things with a far greater degree of power already exist [http://www.cssfly.net]. [...] So sell your idea to a serious back-ender. The notion that modifying CSS might cause security worries doesn't bode well for how far you've envisioned the technology! Yes, that's how it should be, but you must take IE into consideration, and then everything changes. Remember expression? Do you know what it does? Haven't you heard / read of any vulnerability regarding this feature? BTW, I like the Stylish idea better than CSS Fly, but that's just a matter of taste :) --and what browser you use. Regards, 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] coloring ordered list item numbers
As far as I've seen, this isn't possible (with CSS alone). The most common way to achieve something similar is by using different background colors, which I believe is done like this... http://dev.rsalazar.name/css.d/ol-enum.html Now, I found a minor issue with the typical approach where IE (6 7) fails the padding/negative-margin match by 1px. Also, I added a try I was playing with, that it's way too much (or simply jargon) for the IE's and it, once again, bring me with the issue Fx has when dealing with the ::before ::after pseudo-elements. If anyone has time, please check it and let me know your thoughts on this --Oh, and sorry for the low contrast :p By the way, this isn't really a new fad, this effect and others (like the one above) are really useful for reading code and even some medium/large numbered texts, and had been around for some time now. tedd wrote: At 7:47 AM -0700 9/29/07, Joel D Canfield wrote: Maybe it's just me, but I've never thought of this before, yet I've seen it asked here twice in the past week. New fad? joel Same here -- must be a new fad. However, it doesn't seem to me to be that useful: http://www.webbytedd.com/bb/first-item-rollover/ Cheers, tedd __ 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] 2 questions about the effects of changing text size
Philippe Wittenbergh wrote: ps - don't ask me to read the text of your navigation, it is sooo small. Yep, it's tiny AND it gets red over blue (I really suggest you to change colors, maybe yellowish over blue) --assuming you're using a bigger text, otherwise, it wouldn't matter much anyway. __ 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] Menu functionality and IE6 bug
You're CSS works correctly even in IE 7. What I would recommend you
is to temporary use the JS version on all browsers (i.e. commenting out
the li:hover in the CSS and the conditional comments in the HTML).
Your problems seem to be mainly two:
a) You have an extra margin on your IE 6 version
b) IE 6 ignores the mouse-over once you move out of the link (as if the
LI didn't count at all). I've had this problem before, but I can't
recall how did I sort it out, I'll let you know if I recall how.
WEZ! wrote:
Heya,
This last bug is killing me. I've been bashing away at it over the
weekend to no avail.
The Main menu drop down functionality is flawed in IE6(win) and
possibly other IE's as well. The visual appearance is solved via
giving the ancestors blocks a position and z-index as I explained in
a previous post. However the functionality of the drop down menu's
stops functioning when the cursor is above the content block whilst
still remaining in the menu. This still appears to be a Z-index issue
despite the menu visually functioning correctly. The menu items only
appear to create style changes upon the text only and not the entire
block.
From the Microsoft website: Input from controlling devides does not
penetrate overlapping elements even if the elements are no visible.
Which is the issue here. There are no elements overlapping the menu
but something in IE rendering stream is or thinks it is.
The website can be found here:
http://www.newearthpermaculture.com.au/bm/BusMentorMenu27blank.htm
I've added all the work I've done on this problem below any any help
is GREATLY appreciated.
Regards
Wesley Lamont
There is two elements to this problem both related. The first is the
main menu sitting ontop of the top bar. The bar is absolutely
positioned z-indexed at -600. The menu ancestry is relative
positioned at z-index 500 code-ordered after the bar in both html and
css code. The li of the main menu only function on the text of the
'a' element within the block not on the entire 'li' as standards
suggest.
This I have proven by removing the bar and functionality is fine for
top level of the menu. Here are the tests I've tried so far:
- Drop the bar below the menu in html code and apply top:0
- set bar at absolute - z-index
- set barmid (central section of bar) @ absolute -, top:0
- Move bar to top again, change absolute to relative, add top to menu
section to overlap once again
- Make menu absolute
- make menu absolute and position above bar again.
- removed positioning on bar completely
Even with the menu and bar with absolute positioning both or relative
position and extreme opposite z-indexes I still can't achieve
functionality correctly.
The second problem is the failure of the dropdown to sustain sfhover
class change when the cursor moves above the content area. Movement
above this area drop the menu completely rendering all lower menu
items unreachable. Despite visually appearing above everything the
functionality still claims the menu to be behind something. attempts
so far (well ones I can remember)
- dropped parent z-index in case both were inheriting the same value.
- Added menu * {pos:relative, z-index: 500]
- added borders to see if any of the menu blocks was rendering
visually under the content
http://www.newearthpermaculture.com.au/bm/BusMentorMenu28blank.htm
After even more tests while writing this:
It seems the text of the drop down menus still appears functional
above everything similar to the main menu. elsewhere on the block
fails to keep the sfhover class change. Interestingly the entire
block still triggers the sub menus to appear even if it then fails
above the content block.
The border test in 28 also show how the borders appear to function
above the content block as well.
__
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/
Re: [css-d] Menu functionality and IE6 bug
You're CSS works correctly even in IE 7. What I would recommend you
is to temporary use the JS version on all browsers (i.e. commenting out
the li:hover in the CSS and the conditional comments in the HTML).
Your problems seem to be mainly two:
a) You have an extra margin on your IE 6 version
b) IE 6 ignores the mouse-over once you move out of the link (as if the
LI didn't count at all). I've had this problem before, but I can't
recall how did I sort it out, I'll let you know if I recall how.
WEZ! wrote:
Heya,
This last bug is killing me. I've been bashing away at it over the
weekend to no avail.
The Main menu drop down functionality is flawed in IE6(win) and
possibly other IE's as well. The visual appearance is solved via
giving the ancestors blocks a position and z-index as I explained in
a previous post. However the functionality of the drop down menu's
stops functioning when the cursor is above the content block whilst
still remaining in the menu. This still appears to be a Z-index issue
despite the menu visually functioning correctly. The menu items only
appear to create style changes upon the text only and not the entire
block.
From the Microsoft website: Input from controlling devides does not
penetrate overlapping elements even if the elements are no visible.
Which is the issue here. There are no elements overlapping the menu
but something in IE rendering stream is or thinks it is.
The website can be found here:
http://www.newearthpermaculture.com.au/bm/BusMentorMenu27blank.htm
I've added all the work I've done on this problem below any any help
is GREATLY appreciated.
Regards
Wesley Lamont
There is two elements to this problem both related. The first is the
main menu sitting ontop of the top bar. The bar is absolutely
positioned z-indexed at -600. The menu ancestry is relative
positioned at z-index 500 code-ordered after the bar in both html and
css code. The li of the main menu only function on the text of the
'a' element within the block not on the entire 'li' as standards
suggest.
This I have proven by removing the bar and functionality is fine for
top level of the menu. Here are the tests I've tried so far:
- Drop the bar below the menu in html code and apply top:0
- set bar at absolute - z-index
- set barmid (central section of bar) @ absolute -, top:0
- Move bar to top again, change absolute to relative, add top to menu
section to overlap once again
- Make menu absolute
- make menu absolute and position above bar again.
- removed positioning on bar completely
Even with the menu and bar with absolute positioning both or relative
position and extreme opposite z-indexes I still can't achieve
functionality correctly.
The second problem is the failure of the dropdown to sustain sfhover
class change when the cursor moves above the content area. Movement
above this area drop the menu completely rendering all lower menu
items unreachable. Despite visually appearing above everything the
functionality still claims the menu to be behind something. attempts
so far (well ones I can remember)
- dropped parent z-index in case both were inheriting the same value.
- Added menu * {pos:relative, z-index: 500]
- added borders to see if any of the menu blocks was rendering
visually under the content
http://www.newearthpermaculture.com.au/bm/BusMentorMenu28blank.htm
After even more tests while writing this:
It seems the text of the drop down menus still appears functional
above everything similar to the main menu. elsewhere on the block
fails to keep the sfhover class change. Interestingly the entire
block still triggers the sub menus to appear even if it then fails
above the content block.
The border test in 28 also show how the borders appear to function
above the content block as well.
__
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/
Re: [css-d] IE Font Size issue
There's a problem with your IE(s). I can resize the font both in IE 6 7 (Win XP Pro 64). Jehangir Larry wrote: I have a test page at: http://www.jehangirlarry.com/test.php I am unable to reduce the font size in any version of IE. FF/Opera are OK. Many thanks. -- Jehangir Larry __ 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/
Re: [css-d] IE Font Size issue
There's a problem with your IE(s). I can resize the font both in IE 6 7 (Win XP Pro 64). Jehangir Larry wrote: I have a test page at: http://www.jehangirlarry.com/test.php I am unable to reduce the font size in any version of IE. FF/Opera are OK. Many thanks. -- Jehangir Larry __ 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/
Re: [css-d] IE Font Size issue
Looking the same here (didn't bother to count the pixels, though)... M/O/S + IE 6 7, Win XP Pro 64 Jehangir Larry wrote: David Laakso wrote: Jehangir Larry wrote: I have a test page at: http://www.jehangirlarry.com/test.php I am unable to reduce the font size in any version of IE. FF/Opera are OK. Many thanks. -- Jehangir Larry I see relatively little difference in a side by side comparison with the above browsers and any version of IE at text-size medium. ~dL My fault, not explaining the issue at length. I have now posted another full page at http://www.jehangirlarry.com/makhija/test.php When seen in FF/Opera/Safari (PC) the #header-sub (~Engineers Contractors~) appears as intended. In IE (all) - PC, it appears huge. Atleast here. Thanks for all replies on/off line. JL __ 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/
Re: [css-d] Making legends behave like normal boxes
A link is really useful in these cases. If you can, strip down your HTML CSS to simply things. Barney Carroll wrote: Hi all! I'm building a site strongly based on established style guides, in which all header elements have dotted bottom-borders that stretch (as you would expect) accross the available vertical space. And I want legends to act like headers. But after applying a very solid reset (Eric's – trying this out for the first time) and applying display:block, legends still can't completely escape their very weird and specific niched-into-that-small-space-in-the-top-right. A huge right padding and overflow:hidden on the forms is almost good enough, but this eats into the right padding of the form (which is ugly) and causes Safari to create returns wherever possible in the legend's white-space in order to respect as much of the padding as possible. I thought I'd have a look at what mysterious in-house css Mozilla was applying to legends to differentiate them from other block elements, but to my surprise, there's nothing there. According to the DOM inspector's CSS concatenator it's just a normal element. Any wisdom out there? Regards, Barney __ 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/
Re: [css-d] width question
sandy wrote: here is my site: http://www.westboundandweary.com/pca/support_pca/ my question is about the image and caption i sent an email about earlier. my goal is to make that caption fit the width of whatever size image happens to be displayed. caption and image are both inside parent div floated right of unspecified width. i do not set specific width to the caption div so it will stretch according to the image size, it is on auto. the problem is when the caption div has only a little bit of text, it stretches to the correct width of the parent which is good (see the bottom image and caption example), but when it has a lot of text it is stretching it's div out past the image and stretching the parent (see the top image and caption example). how do i make the caption contents wrap to an unspecified width? is this possible? Good question. Maybe if you add a max-width: 100% to the parent... not sure about IE, maybe width: 100%; height: auto ?? 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] Site Check Please
There's usually a link somewhere to file a bug report. In this case, if you click on feedback you'll be able to check the FAQ and a list of reported problems (where I didn't find yours --looking for javax). Also, I didn't mean non-static (dynamic) as in javascript altered, but as in back-end (server-scripts) kind of dynamic site. If you're not using Java (which seems to be the case) then the problem is more likely on the validator itself ---again, JS shouldn't be the case for this problems. Rafael. Omitade Adediran wrote: Well, it looks like I will be removing the javascript menu for the page so maybe that will take care of it. But, if I didn't how do I go about filing a bug report? Rafael mailto:[EMAIL PROTECTED] wrote: Interesting, it may be something worth to file a bug report. I could validate it by writing the path directly to the css (not the html), but I still get the error you mention when writing the path to the page. The market.html page is a static page, right? If not, it could be some sort of problem in your back-end. Omitade Adediran wrote: Any comment on the css validator comment, Servlet has thrown exception:javax.servlet.ServletException: Timed out. ? What it means? So, thank you so very much, David. Now on to the other page which I fear is much worse. Omitade __ css-discuss [EMAIL PROTECTED] mailto:css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [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 pt2
Please, as a web surfer, I beg you... don't add animations / movies that start by themselves AND have sounds on it ---let the users choose, or at least provide an obvious way to disable / change the volume (and *remember* what the user chose). Thanks. Omitade Adediran wrote: Hi: Just when you thought you were finished with me (scary music, She's Back!!), I am submitting the second page for a check. This is the home page that goes with the other page I submitted. It has a slide show and some repetitive music and yes, I will work on an off button. It looks great (to me) in FF. There is a problem with the lining up of the titles under the thumbnails at the bottom in Opera and the font size goes larger than what I want in normal view. This is my attempt at columns and what happens in IE which, of course, does not run the slides is that the columns collapse on each other. www.orisadevotees.org As always, your help is greatly appreciated. Omitade __ 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/
Re: [css-d] Site Check Please
It seems I checked on the wrong page. There's already a couple of bug reports similar to yours http://www.w3.org/Bugs/Public/show_bug.cgi?id=4397 http://www.w3.org/Bugs/Public/show_bug.cgi?id=4469 http://www.w3.org/Bugs/Public/show_bug.cgi?id=4981 Since they go back to ~March '07, it seems it's not a critical bug (and basically new). You can vote for a fix, though :) Rafael wrote: There's usually a link somewhere to file a bug report. In this case, if you click on feedback you'll be able to check the FAQ and a list of reported problems (where I didn't find yours --looking for javax). Also, I didn't mean non-static (dynamic) as in javascript altered, but as in back-end (server-scripts) kind of dynamic site. If you're not using Java (which seems to be the case) then the problem is more likely on the validator itself ---again, JS shouldn't be the case for this problems. Rafael. Omitade Adediran wrote: Well, it looks like I will be removing the javascript menu for the page so maybe that will take care of it. But, if I didn't how do I go about filing a bug report? Rafael mailto:[EMAIL PROTECTED] wrote: Interesting, it may be something worth to file a bug report. I could validate it by writing the path directly to the css (not the html), but I still get the error you mention when writing the path to the page. The market.html page is a static page, right? If not, it could be some sort of problem in your back-end. Omitade Adediran wrote: Any comment on the css validator comment, Servlet has thrown exception:javax.servlet.ServletException: Timed out. ? What it means? So, thank you so very much, David. Now on to the other page which I fear is much worse. Omitade __ css-discuss [EMAIL PROTECTED] mailto:css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [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] What the X is going on? [medium]
Hi, Ta! I'm not sure what you're talking about when you mention the forked-code wars, but chances are you're worrying unnecessarily. As far as I see, he's only trying to get people actually understand what XHTML is, and the differences it has against HTML, though I have a somewhat different opinion regarding some of the Myths he describes, it seems it's a subjective matter, for instance... (IMO) # XHTML *does* promote more separation of content and presentation that HTML does, since it doesn't allow most of the presentational attributes anymore (e.g align) and some of the presentation tags (e.g. font). # XHTML pages are not parsed as such, mainly because of a really old but popular folk: IE 6 (not sure about IE 7, though). The rest, I believe, are able to manage XHTML documents. # XML parsers *don't have* to check for XHTML validity, XML is not XHTML (though XHTML is XML). # HTML is not deprecated, and its next version (5) looks like the way to go instead of XHTML 2. Why? Because the genius at the W3C didn't made XHTML 2 entirely backward compatible with XHTML 1.x --just great! # XHTML is not future compatible... ¿¿?? Sorry, I don't get it. Future compatible? What is? It's usually the other way around, backward compatible --since everything evolves (or it should). # XHTML does not have good browser support... I think he should have tested this much more than I have (which is just barely), so I'll only say that, as mentioned above, XHTML documents aren't sent like such to browsers, but as HTML. # Not parsing XHTML dramatically faster than HTML... I think that's true. It still is faster, though, and there's less a probability of an error because, simply because the parser don't need to guess how it should threat this or that (or where an element is supposed to end). # XHTML is not extensible. Interesting... XML (Extensible Markup Language) IS extensible because there isn't a set of tags or attributes to use, you can define them on your own (as well as the DTD's). XHTML has a fixed number of DTD's, so yes, it is not 'extensible'. On the other hand, IIRC, it is designed to allow more than one 'namespace' (just as XML do), so... it allows for extensibility (once it's fully supported). # XHTML source cleaner than HTML... not really, that depends on the guy (or app) writing it. But it is easier to read (provided there is a good indentation), not only because lower-cased text is easier to read than upper-cased text and because the quotes help you identify the attributes, but also because it *forces* you and everyone else to do so. # Using XHTML does not encourage better support by web browsers and it is not a vote for a better web if you are... etc. Well, the problem here may be the context. If you read from if you are still supporting IE and various... it has sense. He, once again, talks about XHTML 2 not being backward compatible, which is true, but that doesn't mean it's a dead end. XHTML 2 has some time on works, but I don't know of any browser supporting it yet and even less of people preparing their sites for it. Meaning, you can choose to stick with XHTML 1.x and send them a message: backward compatibility is important, what's the meaning of the current XHTML 1.x Transitional option then?. If they ignore us, HTML is just waiting for another opportunity (with v5). Anyway, it does this is a matter of perception. This is basically what I know and how I see this topic. I actually think is unnecessary, even more given the way he takes the topic, almost threatening the reader. One of his points is that XHTML is not well supported (i.e. IE 6), but he also says that M$ will support it in a future version. What's the problem then? It's always been like that, CSS included. Another one, XHTML 2 not been backward compatible. That's true, and that's threatening any possible fast and painless XHTML 2 adoption, even favoring HTML 5. It's still a draft, they still have the chance to change this, but XHTML should evolve, there's nothing wrong with that (as long as it has sense). Don't forget that what we actually need is for browser vendors to actually support those technologies, and that takes time. Where's CSS 3 right now? I've only seen a couple of browsers starting to support tiny bits of it yet, but they're working on that, and someday we will be able to relay on it (right, M$? right?). Just my 2¢, Rafael. P.S. Sorry for the long message. Tigdh Glesain wrote: Hallo Folks, I am just a little foncused. This may seem like an 'off-topic' subject, but I think I'm correct in saying it effects the way in which we code our CSS to a degree. If this topic has been covered before, then I apologise and would ask for a pointer towards the resource. This article, http://www.webdevout.net/articles/beware-of- xhtml#what_is_xhtml which was found while researching the the 3px IE bug has caused me to ponder
Re: [css-d] 3px IE6 gap
Hi, I have a limited knowledge on the different bugs out there, so I would like to know what problems would cause a more conservative structure for this problem, such as http://dev.rsalazar.name/css.d/report.html I just did it as an exercise (so I started from scratch), but it seems to work just fine on Fx 2, O 9, S 3 (XP), and IE 6 / 7. Thanks in advance. David Laakso wrote: Anne E. Shroeder wrote: Got an IE 6 problem -- it's putting a 3px gap between my two divs - left one is floated, right one is set at a left margin to equal the photo plus border. http://www.language-works.com/CSS_Stuff/specialreport.htm Have tried a variety of things to close the gap but nothing works. Any ideas on the hack I need here? Anne Use a different construction and you will need no hack(s). Quick tested IE 7,6,5.5, 5.01; and Mac/IE5.2, Opera, and Firefox. http://www.chelseacreekstudio.com/ca/cssd/news.html Best, ~dL __ 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] What the X is going on?
Gunlaug Sørtun wrote: Tigdh Glesain wrote Am I worrying unnecessarily? Do any of have any 'jeez' to go with my 'whine'? (O: You have good reasons to worry if your work either isn't up to _perfect_ XHTML standard from the very start, or someone else may lower its quality in the future. There is *no* [error recovery] for properly served XHTML. Browsers _are_ quite forgiving for minor - and also some major flaws - in HTML, and the same goes for XHTML served as 'html/text'. This makes many think their XHTML decorated pages are good enough, since browsers render them fine when they are served as 'html/text' and the validator says it looks ok. Not necessarily so, as one may learn the hard way if/when XHTML is served properly as 'application/xhtml+xml'. I wonder, do you have an example of validated XHTML markup that's not perfect? I.e. markup that, although validated, it's broken XHTML? Personally, it's all I do, validated as XHTML Strict (after all, that's why I'm writing). Rafael. __ 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] What the X is going on? [medium]
Geoffrey Sneddon wrote: On 7 Sep 2007, at 16:44, Rafael wrote: # XHTML *does* promote more separation of content and presentation that HTML does, since it doesn't allow most of the presentational attributes anymore (e.g align) and some of the presentation tags (e.g. font). HTML 4.01 Strict disallows these, like XHTML 1.0 Strict does. XHTML 1.0 Transitional allows them, like HTML 4.01 Transitional does. XHTML 1.0 is merely a XML serialisation of HTML 4.01. Interesting... I don't recall this, but I guess I was always working with the transitional version :) # XHTML source cleaner than HTML... not really, that depends on the guy (or app) writing it. But it is easier to read (provided there is a good indentation), not only because lower-cased text is easier to read than upper-cased text and because the quotes help you identify the attributes, but also because it *forces* you and everyone else to do so. You can use lower-cased text in HTML, you can quote attributes in HTML. You aren't forced to, but you can (this may be what you're meaning, but it sounds like the you think you can't). Yes, that's what I was implying (being forced to). The article already mentions than HTML is case-insensitive. My point was that being forced to makes life easier for all of us reading anyone's markup. is not a vote for a better web if you are... etc. Well, the problem here may be the context. If you read from if you are still supporting IE and various... it has sense. He, once again, talks about XHTML 2 not being backward compatible, which is true, but that doesn't mean it's a dead end. XHTML 2 has some time on works, but I don't know of any browser supporting it yet and even less of people preparing their sites for it. Meaning, you can choose to stick with XHTML 1.x and send them a message: backward compatibility is important, what's the meaning of the current XHTML 1.x Transitional option then?. If they ignore us, HTML is just waiting for another opportunity (with v5). # Using XHTML does not encourage better support by web browsers and it On the subject of XHTML 2 support, no browser is intending to support it whatsoever. Really? Do you have more info on this? I'd like to read a little about it. - Geoffrey Sneddon __ 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] [solved] Background shorthand: Quick question
Nick Fitzsimons wrote: Well, you can't combine keywords with anything that isn't, i.e. 'top 5%' or 'top 4px' are invalid (IIRC), and the keywords are correctly interpreted because they are mutually exclusive (except for center, but it doesn't matter in which order center center is interpreted, right?). It still sounds like an invitation to use the x y order :) Although top 5% is invalid, that's only because the horizontal position must come first if one of the values is not a keyword; so 5% top or left 23px are valid. However, for clarity, I tend to use either just keywords or just units, rather than mixing them together: 0 23px, for example. It seems it was invalid before, but not anymore(?). I found this link, you may want to check it a little http://www.elementary-group-standards.com/css/css-validatorinduced-errors.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/
Re: [css-d] Accessibility + font sizing
You don't say anything more and so I don't know how much do you know
of accessibility so far, but allow me to tell you that accessibility
goes far beyond the font size, there are problems most people don't even
imagine. By the way, I recommend you to use XHTML, as it will be easier
to parse for any software.
Also, note that it rules more over your structure ([X]HTML) than on
your CSS, because the important part is that the content is actually
there ---your CSS is, of course, important as well. I guess we could say
accessibility is all about the details, and just to start, check what
tables can and should convey[1]. I recommend you to read Joe Clark[2],
he is my (and I think others) reference on the field.
Anyway, I'm just a beginner on accessibility myself, so this is just
part of what I've come to grasp on the subject. Good luck.
[1] http://www.456bereastreet.com/archive/200410/bring_on_the_tables/
[2] http://joeclark.org/
Vicki Stebbins wrote:
Hi Everyone,
I'm looking to begin a site in a couple of weeks for a disability
organisation and am trying to get it as accessible as possible, so
I'm really thinking about my CSS.
Although I've done a few sites now with CSS (could never go back to
table design) the penny just hasn't dropped with font sizes no matter
what I read... obviously my brain just doesn't work with ems, %, px sizes.
So if anyone has a few mins to give me some thoughts on any
accessible CSS problems or things to think of and if someone can tell
me if this logic is correct:
In the CSS
body{
font-size: 12px;
}
would translate through the styles as:
div#container{
font-size: 1.5em;
}
font size 18px for the container?
Or do you have to put an em size in the body?
As soon as I get a page together I'll put it up and ask for a
hammering to iron out any quirks... I really want to do this well for
them and another one is in the wings to do the same.
Hope a few people have worked on these issues.
As always thanks tons in advance.
Vicki
PS
Something I should say - I never could get the i before e except
after c rule as for me there's before ie or before ei...
It is any wonder I don't get ems ;-)
__
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-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] Background shorthand: Quick question
The only problem I see on that is when you change into unit values,
since they are interpreted as (x, y), other than that it should work
('center center' has no problem with that). Still, I think you should
specify the position in their general order.
Just my 2c.
Micky Hulse wrote:
Hi all,
Just wanted to double-check my thinking here:
bottom right
or
right bottom
?
I always have done this (for example):
background: url(foo.jpg) no-repeat bottom right;
When using the the keywords, should I worry about which one comes first?
I know, silly question... just wanted to confirm my thinking. :)
Thanks all!
Cheers,
M
__
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-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] [solved] Background shorthand: Quick question
Micky Hulse wrote: I also had an excellent off-list reply: [[ If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. http://www.w3.org/TR/CSS21/colors.html#propdef-background-position In other words, if both values are keywords order doesn't matter. ]] Well, you can't combine keywords with anything that isn't, i.e. 'top 5%' or 'top 4px' are invalid (IIRC), and the keywords are correctly interpreted because they are mutually exclusive (except for center, but it doesn't matter in which order center center is interpreted, right?). It still sounds like an invitation to use the x y order :) Regards. __ 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] Accessibility + font sizing
Sorry for the previous mail, wrong keys combination :s Gunlaug Sørtun wrote: tedd wrote: Here's an example of what I mean by zoom cooperative: http://www.php1.net/b/speech/ Now only does this site zoom well (according to me), but it's part of my new deliver content via speech thing. I would be interested in what you, and others on this list, think. That's what I call em sized and some call elastic. It's working as a px sized page zoomed in Opera, and solves the problem you describe. It may require horizontal scrolling if font is resized too many steps on a narrow window/screen though. I prefer a variant I call Conditional Elastic, where window-width is the limit. It's kind of a compromise. Example: http://www.gunlaug.no/tos/moa_12a.html Horizontal scrolling is rarely necessary, but text and stuff may be confined to narrow spaces if the end user doesn't provide a reasonable amount of window-width for it to scale on when subjected to font resizing. Again, that's interesting, I also use em/ex sized layouts but I never though of limiting the max-width to the window size. You make a very good point here, thanks. Rafael. __ 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] Accessibility + font sizing
Gunlaug Sørtun wrote: Rafael wrote: By the way, I recommend you to use XHTML, as it will be easier to parse for any software. IE doesn't understand XHTML at all, and won't parse it unless we serve it as broken HTML - or convert it into proper HTML. Actually, it seems just the doctype is enough to make things better (for *valid* code), right now it seems that some software are able to choose the parser to use after reading the doctype (if any). I noticed that with a site I worked with that was easily serialized and shown on my cell phone, but it couldn't handle other non-XHTML (or non-XHTML-as-HTML) pages --but I should have checked if their HTML validated :) If one chooses to use XHTML then it better be perfect[1]. Otherwise some User Agents that _do_ understand it may choke on it - regardless of how it is served. Not to mention how much fun we can have when our CSS doesn't work as intended when we serve XHTML properly - or a User Agent interprets it that way. Interesting... I haven't met too many people that choses to keep their pages in Quirks mode, actually, you're the first (not sure you should be proud of that --jk). But I wonder, if you include a doctype (and your code is valid) how do you preserve the Quirks mode? All the pages I've seen in your site are in Standard mode. About your article... the info is useful, not sure about how do you present it to the readers, but that's just a matter of opinion :) regards Georg [1]http://www.gunlaug.no/contents/wd_1_06_03.xhtml __ 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] line-height: 2;
Check this, it may help you...
http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
trevor bayliss wrote:
What is line-height: 2; what value is interpreted by the browser? An em value
or px? Sorry about this newbie question, thanks for input
#footer p {
font-size : 75%;
line-height: 2;
margin-top : 0;
margin-bottom : 0;
}
-
Be a better Heartthrob. Get better relationship answers from someone who
knows.
Yahoo! Answers - Check it out.
__
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-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] Firefox Right column anomoly
Are you able to get this behavior in other machines and/or platforms? I'm using Fx 2.0.0.6 / WinXP 64 and didn't see the problem you describe, before and after the refresh it was always showed below and at the right of the image. Brian Walk wrote: Strange thing happening in Firefox. Load the following page: http://www.physics.niu.edu/physics/outreach/index.shtml Notice the Events box floating above the large image. Now hit Refresh, and it repositions down into it's proper place (visit the same link in IE 6.0, and it appears correctly the first time). Any thoughts that would be causing this to happen in Firefox? I am thinking it has something to do with the position:relative attribute on the id#divContent #divRightCol id, but if it corrects with refresh, what is Firefox (mis)interpreting on its first attempt to load? Many thanks in advance. Brian __ 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-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] css navigation
Maybe looking for css dropdown menu in Google (without the quotes would be more effective). When you're at it, check ALA's Suckerfish Dropdowns. JGardner wrote: Hello all, I am wanting to learn how to do a css horizontal menu which has a 2nd level nav bar. I have tried to do a Google search for this but have not found what I am looking for. This might due to the fact that I don't know what to call it. I am looking for one where the secondary nave bar is only present when you hover on a top level nav item which has secondary navigation option. I hope this makes sense. So, if you know of a tutorial or a book that might cover this please pass it my way. Thanks, Jennifer Building a website is a piece of cake. Yahoo! Small Business gives you all the tools to get online. http://smallbusiness.yahoo.com/webhosting __ 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-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] color consistency, accuracy
If I recall correctly, this is an old issue, and the reason why there were web-safe colors. Basically, it was said that different software may threat images differently because of inexact colors and/or different platforms --I don't recall the exact reason, though. Do you have the image and color at hand? Maybe this could be more clear if we compare them in our computers and software and tell you whether their the same or not (with platform software details). Listsmem wrote: Has anyone else noticed this problem before? Open a solid color jpeg in photoshop and use a digital color meter to read its hex value. Then drag and drop the same jpeg file into a web browser and then meter it again. The color values aren't the same. I've found that the browser tends to render it lighter, requiring adjustments to the jpeg before posting to the web. Is this because of the browser, operating system, monitor calibration (gamma) or some other factor? Clients are frequently asking me why the color of the site I build is slightly different than the color of the mockup they give me, even jpeg mockups. Thanks for any help with this matter, especially a technical discussion of why this occurs and any best practices to alleviate this issue. ~Ben __ 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-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] align image to bottom right corner
Ehm... do you have any reference to see what you're talking about (a link)? If all you want to do is put an image at that position, set it as the background, i.e. background: #fff url(path/to/image) right bottom no-repeat; · #fff is the background color, it can be omitted or set to 'transparent' (without the quotes) · 'url' is an actual keyword, and the path should not be between quotes · reference: http://www.w3.org/TR/CSS1#background Rafael. David Merchant wrote: I am trying to place the file cabinet image in the bottom right hand corner of a div. I've searched wiki, the web and poked around the archives and what solutions I've seen I can't get to work. Yes, I'm a bit green when it comes to CSS, green enough that maybe I am not searching correctly because of my ignorance. Can someone point me to a resource that will answer this question? Many thanks, David Merchant __ 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] more IE 6 problems
JGardner wrote:
On the home page, there is extra white on the right hand side of the
container, you can see it here - http://www.jgardnerdesigns.com/
That seems to be caused by your
#container #content-home #services-box{
margin-right:5px;
}
it seems you don't need it.
Then on the FAQ page the question mark image displays in the middle of the
page instead of to the left. You can see it here -
http://www.jgardnerdesigns.com/faq.htm
Oh, I remember this one. I actually never knew why was it there
(what triggers it), but it disappears if you use any border on the (top
side of the) container, and that's what I did, sorry I can't help you
more than this. Anyone else?
Rafael.
__
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] Min-Height
Interesting... I don't know why (I didn't find anything on the spec) but it
seems you need to specify the height property. It also seems that pretty
much any value works.
On 8/24/07, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
I'm trying to use min-height in FF, which is supposed to support the
style, but it's ignoring it. IE, ironically enough, is honoring it because
I'm using the IE7 javscript library.
Anyway, here's the relevent code.
fieldset {
border:1px solid #369;
border-left:3.4em solid #369;
display:block;
margin-top:1em;
padding:1em 1em 1em 2.5em;
padding-top:0;
position:relative;
}
#dealInfoLegend {
height:185px;
left:-4.7em;
margin-top:-90px;
position:absolute;
top:50%;
width:12px;
}
#dealStructure {
clear:right;
float:none;
min-height:185px;
}
fieldset id=dealStructure
img id=dealInfoLegend src=images/dealInfoLegend.gif alt=Deal
Information
Why is Firefox messing with me?
--
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
__
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-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] Inline Form align problem
Hi list.
I'm having a problem with IE6/IE7.
I have a login form, in inline mode.
In Firefox is working OK.
But in IE 7, and IE 6, it's not.
The fields need to be side by side, in one line.
But in IE, they get one field each line.
Firefox: http://papillon.cenadigital.com/site/firefox.jpg
IE: http://papillon.cenadigital.com/site/ie.jpg
In IE 7 I have an other problem in the same form, the background image
is not fixed.
If it put fixed in background CSS, the background do not work.
I have tried everything... position: relative, absolute, fixed,
display: inline, block, in a lot of css, but nothing. In IE I only got
the wrapped form.
Someone know how can I fix it? Or an other sollution? Maybe only tables.
HTML code:
div id=userbox
div class=login
form
fieldset
legendLogin VipDigital:/legend
label for=usernameUsuário:/label
input type=text name=username class=user /
label for=passwordSenha:/label
input type=password name=password class=pass /
input name=submit type=submit value=entrar
class=submit /
/fieldset
/form
/div
/div
CSS Code:
#userbox {
position: relative;
float: right;
width: 487px;
height: 28px;
background: url(userbox_bg.gif) repeat-x top left;
}
#userbox .login {
position: relative;
padding-left: 90px;
float: left;
width: 83px;
height: 28px;
background: url(vipdigital.jpg) no-repeat top left;
}
#userbox fieldset {
position: relative;
display: inline;
border: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#userbox legend {
display: none;
border: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#userbox label {
display: none;
border: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#userbox .user {
margin-top: 6px;
font-size: 70%;
width: 71px;
height: 12px;
border-style: none;
padding-left: 50px;
padding-top: 1px;
padding-down: 1px;
padding-right: 3px;
border: none;
background: transparent url(login_userbox.gif) no-repeat;
_background: transparent url(login_userbox.gif) no-repeat fixed;
}
#userbox .pass {
margin-top: 6px;
margin-left: 6px;
font-size: 70%;
width: 71px;
height: 12px;
border-style: none;
padding-left: 50px;
padding-top: 1px;
padding-down: 1px;
padding-right: 3px;
border: none;
background: transparent url(login_userbox.gif) no-repeat;
_background: transparent url(login_userbox.gif) no-repeat fixed;
}
--
Rafael Henrique da Silva Faria
# Grupo Cena Digital
# (16) 9229-8928
# www.cenadigital.com.br
__
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] IE Form background problem
Hi.
I'm new in CSS... always used table.
Now I'm having a big problem with a form field, and IE 6/7.
My form field (input) have a rounded background image with a text:
Something like: username: [__]
In firefox, I put the image in background, and a padding-left of 50
pixels... so the text of input it write in the correct space... and
when the text is bigger then the space, the text stey in the correct
space. But in IE the text get in front of username in image.
In IE 7, the fixed option don't work for the background... so the
image scroll with the text... So I needed to put a top right.. and
the background istay fixed.
But the text is in front of the image... it do not respect the padding pixels.
Is any correction for this? or is a problem with IE, and cannot be corrected?
#userbox .user {
margin-top: 6px;
font-size: 70%;
width: 71px;
height: 12px;
border-style: none;
padding-left: 50px;
padding-top: 1px;
padding-down: 1px;
padding-right: 3px;
border: none;
background: transparent url(img/login_userbox.gif) no-repeat;
*background: transparent url(img/login_userbox.gif) no-repeat top right;
_background: transparent url(img/login_userbox.gif) no-repeat fixed;
}
--
Rafael Henrique da Silva Faria
# Grupo Cena Digital
# (16) 9229-8928
# www.cenadigital.com.br
__
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] Absolutely positioning an element in a parent with display:table-cell
Hello, Today I discovered a discrepancy between Opera and Firefox regarding display:table-cell. I tried to find some further info on the matter but didn't get much further than something (which I can't find any more) which said that the spec says that it's up to browser vendors whether table cells can support position:absolute or not, and this css-d threadhttp://archivist.incutio.com/viewlist/css-discuss/48725where Adam Kuehn says it's a Gecko bug. It seems to be that if the spec is really that shabby with display:table-cell, there's a recipe for future headaches once more and more people start using display:table and friends. Opera will faithfully absolutely position something within a div with display:table-cell, Firefox won't and relegates the position to be relative to the next containing block parent (as in the link above). What do you think the standard behaviour should be and is the spec really this unspecific about this issue? Regards, Rafael __ 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] Position:fixed - why relative to viewport and not containing block?
Zoe wrote: What you are asking for *is* absolute positioning -- positioning one div relative to another -- so why not just use absolute positioning? That will allow your div to move along with the other div when the browser is scrolled. Switch your fixed div to absolute and it will do what you want. Barney wrote: I think what Rafael wants is for the object to be fixed compared to the viewport, but for its initial position to be determined in relation to its containing element, which could vary. I'm afraid you will need a combination of javascript and CSS for this, where javascript works out where the element should be positioned originally. PPK's blog achieves something similar with the navigation menus in the side colums, you might find your answers by looking at his code: http://www.quirksmode.org/blog/index.html Yes, Barney knows what I mean. I feared I'd have to resort to JS and PPK's blog is exactly what I had in mind. :) However, I still wonder whether anyone thinks position:fixed would be more useful in this sort of implementation (doesn't move when viewport is scrolled, but is positioned relative to any containing block, not just the viewport). Not that I'm trying to change anything, I just wonder if anyone has come across a situation where this would have been useful. Cheers, Rafael __ 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] Splitting a list into two columns
On 08/02/07, Seona Bellamy [EMAIL PROTECTED] wrote: Hi guys, Creating a sitemap for a client. However, they also want ti split over two columns so that it doesn't end up just scrolling forever. Fair enough. However, since this is to plug into their CMS, I need to allow for a variable number of sections and sub-pages. I've had a search around, but so far all the examples I'm finding require knowing how many items are in each column or the height of each column. I have no way of knowing either. Is there a way of doing this that will allow the columns to stay more or less equal regrdless of how many items there are? Hi, There is a very nice method purely with CSS, but as usual it doesn't work in IE (or Opera). It works in Mozilla and will do in the next release of Safari. This is how to make it into two columns with mozilla with a 2 em gap in between: -moz-column-count:2; -moz-column-gap:2em; For Safari it's without the mozilla specific prefix (without the -moz-). Other than that, I think it'll be very difficult to work out a way of doing it like you want unless you resort to some javascript. This ALA article is a good read and contains a link to a script you can use: http://alistapart.com/articles/css3multicolumn Rafael __ 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] Position:fixed - why relative to viewport and not containing block?
Zoe wrote: Users are used to things moving when you scroll, so I've never needed to change that. On 08/02/07, Barney Carroll [EMAIL PROTECTED] wrote: To be honest, I do see fixed elements as a bit of a flashy luxury - and something that is often used irresponsibly to create cumbersome designs. More than a few times I've considered finally pushing the boat out on this technique, only to realise a CSS2-only solution ended up more elegant. This is true, I don't like it when things stray away from what I expect or jump at me. However, now that IE7 supports it, I believe more and more people will start to use it and so users will become more accustomed to it. Whether it annoys them or not is another matter. If used properly, I do think it has its benefits. This is the URL: http://127.0.0.1/G/melbourne/1/ Please look at it in either Firefox or Opera 9 - it's buggy in everything else since it's just an experiment for now, my CSS playpen so to speak. You should be able to see something saying NEXT vertically at the bottom right. There is also a 'PREV' one on the left if you set the number of thumbs to something smaller (hover over 'settings'). Anyway, this tab has position:fixed and is positioned relative to the bottom right. If the viewport is big enough (such as when the thumbs are all on one line), it appears below the cream-coloured area and into the grey bit, which is unsightly. Ideally, I would position it from either the bottom of the cream area or from the top of the thumbs' container (ul#thumbarray). And it stays there upon scrolling. Just like in PPK's site. I'm interested in your opinions. Cheers, Rafael __ 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/
