Re: [css-d] Examples of true pure semantic XHTML web sites using css?
At 9/6/2006 03:13 AM, David Dorward wrote: One of the major critisms of CSS Zen Garden is that it is laden down with vast numbers of divs and spans which are there solely to hook CSS onto. I find it hard to take seriously criticism that the Zen Garden page has too many tags! That would be like criticizing an actor for having too many colors of greasepaint in her kit. The Zen Garden page isn't a model for every web page -- it's marked up specifically to achieve its goal of multitudinous reskinnability. No ordinary web page faces that demand. No one claims that CSS is so magical that any HTML markup can be styled to look any old way. There's definitely a relationship between markup and presentation, like skeleton to skin. Perhaps, like Xeno's arrow, we'll never actually achieve complete separation of structure from presentation, but the closer we get the more flexible and manageable our projects become. The CSS Zen Garden is intended to be inspirational, not normative. Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] rtl and ltr text
Ideally, you should be using something like:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Strict//EN
http://www.w3.org/TR/html4/strict.dtd;
html lang=he
head
titleLanguage Test/title
meta http-equiv=content-type content=text/html;
charset=utf-8
/head
body
pראש חטיבת המחקר באגף המודיעין במטכל, תאל יוסיspan
lang=enEnglish words/spanלהישגים; אלוף גדי אייזנקוט,/p
/body
/html]
(don't ask me about that Hebrew--I cut it from a website I found :)
Also, in an ideal CSS world (since this is a CSS list), you would use
the following selectors:
body { direction: rtl; }
span[lang=en] { direction: ltr; }
But I have a feeling that browsers should deal with that direction stuff
automatically anyway.
Brad
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] rtl and ltr text
But I have a feeling that browsers should deal with that direction
stuff automatically anyway.
Nope, turns out that they don't handle that kind of thing automatically.
So use this final bit of mark up (as pure as I can get it):
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Strict//EN
http://www.w3.org/TR/html4/strict.dtd;
html lang=he
head
titleLanguage Test/title
meta http-equiv=content-type content=text/html;
charset=utf-8
style type=text/css
body { direction: rtl; }
[lang=en] { direction: ltr; }
/style
/head
body
pראש חטיבת המחקר באגף המודיעין במטכל, תאל יוסיspan
lang=enEnglish words/spanלהישגים; אלוף גדי אייזנקוט,/p
/body
/html
Add a 'class=en' on English elements if you want it to work in IE
(which I assume you do), then change the:
[lang=en] { direction: ltr; }
rule to:
.en { direction: ltr; }
Brad
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Print stylesheet not read by Firefox?
Thanks alot Brett! Removing the title attribute from the link tag solved it. kind regards, Albert At 11:41 PM 9/6/2006, you wrote: Hello Albert, The problem probably comes from the use of the TITLE attribute. This attribute does not have side effects in other elements, but in LINK tags for external stylesheets, the situation is different. Here is one reference that should help out: http://devedge-temp.mozilla.org/viewsource/2002/preferred-stylesheets/index_en.html Brett Merkey __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Good Conditional Comments Book
*CSS Hacks and Filters: Making Cascading Stylesheets Work* http://snipurl.com/w173 Don, I think you are going the wrong way about it. Although it makes sence to think about that way - I did it myself, got the book, but it isn't very good, despite the title. I've found it much better to learn why browsers behave the way they do, and adjust the css accordingly. I have just finished reading two books which has helped me greatly. Bulletproof Web Design: http://tinyurl.com/guuwf CSS Mastery: http://tinyurl.com/k8bpr Eystein __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] CSS 3 column layout: elastic/fluid
Concerning 3-column layout techniques there is a great overview here: http://css-discuss.incutio.com/?page=ThreeColumnLayouts here are some column layouts manuals, examples: http://www.dasdan.be/modules/mylinks/visit.php?cid=34lid=865 http://www.dasdan.be/modules/mylinks/singlelink.php?cid=34lid=864 http://www.dasdan.be/modules/mylinks/singlelink.php?cid=34lid=868 http://www.dasdan.be/modules/mylinks/singlelink.php?cid=34lid=1968 http://www.dasdan.be/modules/mylinks/singlelink.php?cid=34lid=1967 http://www.dasdan.be/modules/mylinks/singlelink.php?cid=34lid=1966 http://www.dasdan.be/modules/mylinks/singlelink.php?cid=34lid=1965 more CSS stuff http://www.dasdan.be/modules/mylinks/viewcat.php?cid=34 Kind Regards, Kevin Wood AKA Dasdan www.dasdan.be __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Body background image align to bottom: Firefox
Hi,
Just wondering if this is the /best fix/ to make an image align to the
bottom left of the BODY background for Firefox:
html {
min-height: 100%;
height: auto;
}
body {
url(/le/images/template/bkgrnd-grfk.jpg) no-repeat bottom left;
}
Hehe, it has been a while since I have had to put a background image in
the body aligned to the bottom... did not know this was the typical
behavior (i.e. having to specify a height for the HTML element.)
Just wondering if there is a better solution, particularly one that
works well in all browsers.
Many thanks in advance,
Cheers,
Micky
--
Wishlist: http://snipurl.com/vrs9
Switch: http://browsehappy.com/
My: http://del.icio.us/mhulse
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Sitecheck please
Meanwhile I fixed the errors - the problem with Opera 9 still exists. The horizontal rule still behaves strangely with IE - it should always be 66% wide, however IE shows it on all pages except the home page about half. And an additional problem: IE doesn't print the background image of div#header. The print style sheet is www.rosenheimer-forum.de/stylesheets/site-print.css Am Mittwoch, 6. September 2006 16:52 schrieb Tim Offenstein: Hi Florian, Running your page through the W3C validator (http://validator.w3.org) shows a number of minor errors that can easily be fixed. Fixing these will help standardize your pages. Don't know if it'll make them work better with the problematic browsers but it will be a step in the right direction. -Tim At 4:13 PM +0200 9/6/06, Florian Hamberger wrote: I redesigned the following site. I tested it with IE 6, FF, Konqueror, and Opera. With Opera 9 the navigation isn't displayed correctly, with Opera 8.x no errors occur. Some hints - perhaps also for better results with IE? The address of the site is: www.rosenheimer-forum.de The stylesheets are www.rosenheimer-forum.de/stylesheets/site.css and www.rosenheimer-forum.de/stylesheets/menu.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/ -- Florian Hamberger Florian Hamberger Computerberatung Pfannstiel 7 83112 Frasdorf Fon: +49 8052 2196 Fax: +49 8052 909111 email: [EMAIL PROTECTED] Internet: www.fhcb.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Gaps IE6 not FF or IE7
Dears I have two problems in IE6 inly not in FF or IE7. 1. 1px shift in border 2. Content will not expand all the way. Looking at the site using IE6 will clear the issue. http://codg.bjaili.com/13/ -- OOzy Kubuntu-Dapper __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Explorer hack / not only IE...
Yves Vindevogel wrote: My previous thing can easiliy be reproduced with this ... * html body style=background: green; background: blue !Internet Explorer; pTest/p /body /html Hi Yves, Yes, here's a test page http://home.tiscali.nl/developerscorner/css-discuss/test-ie-important3.htm. ;-) Jorge Rumoroso wrote: There is a syntactic error that prevents the reading of the rule. IE ignores the error and it interprets it. Yes, seems IE doesn't follow properly the rules for error handling. See: css2.1 rules for parsing errors http://www.w3.org/TR/CSS21/syndata.html#parsing-errors. But as George remarked here not so long ago (forgotten the thread): error handling by different browsers (and versions) is very tricky stuff... For instance: I noticed also Netscape6.2.1 is playing a blue background. And as it is working for IE6 on Win, maybe not for other versions or operating systems (didn't test). For safety, I should stick to the conditional comment method. :-) Gretings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Sitecheck please
Florian Hamberger wrote: Meanwhile I fixed the errors - the problem with Opera 9 still exists. The horizontal rule still behaves strangely with IE - it should always be 66% wide, however IE shows it on all pages except the home page about half. Hi Florian, The html-validator reports on the Actuell page some errors http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.rosenheimer-forum.de%2Faktuell.html. Maybe correcting helps. And an additional problem: IE doesn't print the background image of div#header. Here it is fine in my Print example. Did you allow printing background images in the IE settings of your viewing system? (IE menu Extra Internet Options Advanced Print Checkbox Print Background Colors and Inages). Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] 2 column fixed width
Hello I was trying to do simple 2 column layout fixed width (not liquid layout) using float for the left column which contains menu. The problem I found is that when the menu is longer than the the right column, it tends to run outside the page area and continues into the background below the page. Is there any way to fix this? Sometimes the left column will be longer, sometimes the right one. I need the page to expand according to either one. I would be grateful for any tips or links... Thank you! Jana Forsyth __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 problems can't be solved
I have a web page that displays perfectly in Firefox but has errors when displayed in IE 6. I tried to solve the issues but I can not do it. Can somebody help? The webpage is: http://www.alanevansmotors.co.uk/browse.php __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Problem with IE for Mac
Dear css-discuss I have a problem with the IE browser for Mac. The page can be seen at: http://www.sheldrake.org/homepage.html which will eventually be the new index page for this website. The page works ok on IE 6.0 for Windows, Firefox 1.0.1 and Safari 1.2 for Mac. On IE for Mac the page structure breaks down, the fern image appears right of the Nav bar instead of below, and the navigation links don't work. The problem seems to be associated with the css scripting for the nav bar (within head section of page). Help much appreciated. John Caton. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] 2 column fixed width
Čistý design wrote: I would be grateful for any tips or links... Plenty of examples and links under *containing floats* http://www.gunlaug.no/contents/wd_example_01.html Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Named Anchor and disappearing menu
I have links to named anchors on a separate page. There is no problem getting to the appropriate spot. The problem is that the page can't be scrolled up to see all the menu items. I have used the hack for equal height columns on the menu - don't know if this affects it. The page is here: http://www.quinebaugkennels.com and the links to the left of the photo are the ones I'm concerned about - i.e., private lessons, gun dog training, etc. The further down the page the link is, the more or all of the menu disappears. Thanks for any advice - in the meantime, I just added a page up link to each section to get the menu to be viewable. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Problem with IE for Mac
On Sep 7, 2006, at 8:52 PM, [EMAIL PROTECTED] wrote: I have a problem with the IE browser for Mac. The page can be seen at: http://www.sheldrake.org/homepage.html which will eventually be the new index page for this website. The page works ok on IE 6.0 for Windows, Firefox 1.0.1 and Safari 1.2 for Mac I would suggest as a first step to validate your html http://validator.w3.org/detailed.html your Doctype is on the 3rd line instead of the first one,... (I tried to save your page locally, but my browser happily made a mess). The clean up the comments in your css section. I saw a least one miss- nested comment there, under div#listmenu, you start a comment that is not closed. Some browsers are quite relaxed on those things, IE Mac can be very picky. If you still have problems with IE Mac, browse around this site: http://www.l-c-n.com/IE5tests/ Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Named Anchor and disappearing menu
From: Kay Olson [EMAIL PROTECTED] I have links to named anchors on a separate page. There is no problem getting to the appropriate spot. The problem is that the page can't be scrolled up to see all the menu items. I have used the hack for equal height columns on the menu - don't know if this affects it. The page is here: http://www.quinebaugkennels.com and the links to the left of the photo are the ones I'm concerned about - i.e., private lessons, gun dog training, etc. The further down the page the link is, the more or all of the menu disappears. Thanks for any advice - in the meantime, I just added a page up link to each section to get the menu to be viewable. Im not at all sure of what you mean, or of which browsers you are seeing a problem in. If the issues is your Top of Page named anchor, it is simply in the wrong spot if you want it to scroll the page all the way up to your masthead. -- Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] IE problems can't be solved
Lyn Williams wrote:
I have a web page that displays perfectly in Firefox but has errors
when displayed in IE 6.
http://www.alanevansmotors.co.uk/browse.php
1: div.nplinks becomes 100% + 20px wide (the W3C box model).
#main-l div.nplinks {
text-align: right;
/* width: 100% -- delete this property */;
padding: 10px;
}
Since IE/win always makes elements expand to make space for everything
inside (an IE-bug), #content #main-l will become 20px wider than it
should be in IE6. Thus, #content #main-r is pushed that much too far to
the right.
Deleting the width will make it default to 'width: auto', and it will
self-adjust to 100% width without overshooting. Result: no expanding and
no pushing.
2: adding...
#head img {display: block;}
...will get rid of the gap in div id=head in IE6.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Named Anchor and disappearing menu
I have links to named anchors on a separate page. There is no problem getting to the appropriate spot. The problem is that the page can't be scrolled up to see all the menu items. I have used the hack for equal height columns on the menu - don't know if this affects it. The page is here: http://www.quinebaugkennels.com and the links to the left of the photo are the ones I'm concerned about - i.e., private lessons, gun dog training, etc. The further down the page the link is, the more or all of the menu disappears. In my experience, this is a known error with the equal height columns hack. The overflow: hidden; that you place on the containing element means that if the div scrolls (as it sometimes does when using anchor elements), it will scroll content off the top of the page (or off the top of the visible view port). I'm sorry to say that I have no solution for this--all I can tell you is that you're not crazy. :) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Named Anchor and disappearing menu
In my experience, this is a known error with the equal height columns hack. The overflow: hidden; that you place on the containing element means that if the div scrolls (as it sometimes does when using anchor elements), it will scroll content off the top of the page (or off the top of the visible view port). I'm sorry to say that I have no solution for this--all I can tell you is that you're not crazy. :) Is this specific to a browser or OS? I cannot duplicate that problem. All I see is that the top of page anchor simply goes where it should, based on its position in the markup. The page can then be manually scrolled from that point. I'm curious to see the problem if someone can provide a more detailed description with steps to reporoduce. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Named Anchor and disappearing menu
On Sep 7, 2006, at 10:04 PM, Al Sparber wrote: In my experience, this is a known error with the equal height columns hack. The overflow: hidden; that you place on the containing element means that if the div scrolls (as it sometimes does when using anchor elements), it will scroll content off the top of the page (or off the top of the visible view port). I'm sorry to say that I have no solution for this--all I can tell you is that you're not crazy. :) Is this specific to a browser or OS? I cannot duplicate that problem. All I see is that the top of page anchor simply goes where it should, based on its position in the markup. The page can then be manually scrolled from that point. I'm curious to see the problem if someone can provide a more detailed description with steps to reporoduce. I think that is referring to this kind of problems http://dev.l-c-n.com/overflow/equal-height3-1.php With more details from Alex here http://www.positioniseverything.net/articles/onetruelayout/appendix/ equalheightproblems Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Named Anchor and disappearing menu
I wrote: I think that is referring to this kind of problems http://dev.l-c-n.com/overflow/equal-height3-1.php With more details from Alex here http://www.positioniseverything.net/articles/onetruelayout/appendix/ equalheightproblems Sent to fast, forgot something or two. 1/ the same problems affect recent WebKit (future Safari) builds and the just release Omniweb5.5. 2/ Nobody seems to have a clean picture of what exactly should happen in the case of overflow hidden boxes and anchors. There are some Gecko bugs open on this, but they have been silent for some months. I wonder if a next version of the CSS 2.1 docs doe out soon will provide some answers. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Named Anchor and disappearing menu
From: Kay Olson [EMAIL PROTECTED] http://www.quinebaugkennels.com and the links to the left of the photo are the ones I'm concerned about - i.e., private lessons, gun dog training, etc. The further down the page the link is, the more or all of the menu disappears. Thanks for any advice - in the meantime, I just added a page up link to each section to get the menu to be viewable. OK. I see it now. Your page does not need to be using that kind of hack. Check this lists wiki for faux columns. You might have to do a bit of remodeling, but it will be more stable. You might want to check the wiki for dropdown menus, to replace those nasty Macromedia ones, too :-) -- Al __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] 2 column fixed width
At 1:48 PM +0200 9/7/06, =?iso-8859-2?Q?=C8ist=FD_design?= wrote: Hello I was trying to do simple 2 column layout fixed width (not liquid layout) using float for the left column which contains menu. The problem I found is that when the menu is longer than the the right column, it tends to run outside the page area and continues into the background below the page. Is there any way to fix this? Sometimes the left column will be longer, sometimes the right one. I need the page to expand according to either one. I would be grateful for any tips or links... Thank you! Jana Forsyth Jana: Try looking into faux columns. http://alistapart.com/articles/fauxcolumns/ It's just simply a way to use a background image to make the columns look like they're the same size. It works. tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Examples of true pure semantic XHTML web sites using css?
Rimantas Liubertas wrote: ... Well, divs have no semantic meaning, so *any* div that you add to a page is for the purpose of design, really. There's no such thing as a semantic div, in the strict sense. But, I doubt you are looking for examples of sites that use neither tables nor divs, as that would be a pretty plain page. So I'm guessing you are looking for pages that structure the chunks of information on the page into divs with meaningful ids (which are nevertheless just there for style) and don't nest divs? ... I wouldn't be so strict. I'm not. :-) The original poster was, and I replied in kind. If you want absolute 100% separation of content and presentation, and pure semantics, you can't use divs. But that's pretty silly. Divs are/may be used to group related content together, just like ol/ul groups a bunch of list items. Yes, div is more general in semantic sense, but not without semantic meaning. Ids can be used not only for the styling or DOM manipulation. Ids are for that their name says - identification which can be useful in many ways. Maybe we don't have default meanings for those things, but it does not mean we cannot provide them. Class attribute has even less semantic meaning than div element, but take microformats and it is no longer meaningless. No, divs have no semantic meaning, inherently, in the pure sense of the word. They can contain anything -- thus, there is no match between the element and its content. An id can't establish semantics -- again, in the pure sense of the word. Divs and aren't non-semantic (like font or center elements), they are just a-semantic. Neutral. But this is just a debate about pie-in-the-sky theory about the meaning of words. Now, if you want to speak more generally, instead of in strict standards-speak, and say whether a div with an id of header that contains heading information for the site is meaningful, yes, it is. That way my point -- that all divs are inherently neutral, and are only used for presentation purposes, but that doesn't mean that you can't use divs selectively and in a meaningful way to create your designs. But this balance (what a meaningful div is and what an extra div is) is something that is determined by each individual. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Body background image align to bottom: Firefox
Micky Hulse wrote:
Hi,
Just wondering if this is the /best fix/ to make an image align to the
bottom left of the BODY background for Firefox:
html {
min-height: 100%;
height: auto;
}
body {
url(/le/images/template/bkgrnd-grfk.jpg) no-repeat bottom left;
}
Hehe, it has been a while since I have had to put a background image in
the body aligned to the bottom... did not know this was the typical
behavior (i.e. having to specify a height for the HTML element.)
Just wondering if there is a better solution, particularly one that
works well in all browsers.
What don't you like about this solution that you are trying to fix? What
browsers or content situations doesn't it work with? Do you have a test
page?
Generally, there is no best fix for things in CSS. There are multiple
ways to do things. If something works in your layout and target
browsers, and uses the leanest markup or CSS possible, go for it.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Avoiding empty pages in print - any ideas?
hepabolu wrote: Hello list, I've created a print.css that does what I want most of the time. However, every now and then I end up with empty pages. Does anyone know of a trick I could use to loose at least the last empty page? I've searched high and low, but I can't find something workable. Also: could people on OS other than Mac or using another default paper size than A4, please let me know if things work out? on this page it works: http://www.origami-osn.nl/minori/model2006-08.html on this page I end up with an empty page at the end: http://www.origami-osn.nl/minori/model2006-07.html The first obvious idea to make the image smaller is not an option since I might have multiple images. Helma, If the image is too big to fit on a piece of paper, with the other content that is already there, the browser has only two options: split the image across the sheets, or push the whole thing to the next page so it can display in one piece. My browser was doing the second option, which I think you would agree with me is far preferable to the first option in this case, no? So I'm afraid that you'll have to live with it. If something doesn't fit, it doesn't fit, unless you make it smaller. Where the pages break is going to be entirely dependent on the users' settings anyway: paper size, paper orientation, whether they have shrink to fit turned on, whether they are printing at 50% size, etc. So there's only so much you can do to control this. I think the way you have it set up now is the best you can do. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Body background image align to bottom: Firefox
Hi Zoe, thanks for the quick response, much appreciated. Zoe M. Gillenwater wrote: What don't you like about this solution that you are trying to fix? What browsers or content situations doesn't it work with? Do you have a test page? I have yet to do a browser-cam capture... or I would share that. The test page is not really at a point where I can share... sorry. :( I could do a minimal test page, but I think you have already answered my question. :) Generally, there is no best fix for things in CSS. There are multiple ways to do things. If something works in your layout and target browsers, and uses the leanest markup or CSS possible, go for it. Sounds good to me. And yep, appears to work great in IE6 and Firefox. I guess I was just surprised to see the body tag shrink-wrapping to my content... I always thought it was more of an invisible element (like html element) - or, well, an element that did not behave like a container div... Anyway, thanks for the feedback, I really appreciate your time. :) Cheers, Micky -- Wishlist: http://snipurl.com/vrs9 Switch: http://browsehappy.com/ My: http://del.icio.us/mhulse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Named Anchor and disappearing menu
I did come up with a fix for Gecko gang which I posted here along with reservations http://archivist.incutio.com/viewlist/css-discuss/77165 Sent to fast, forgot something or two. 1/ the same problems affect recent WebKit (future Safari) builds and the just release Omniweb5.5. 2/ Nobody seems to have a clean picture of what exactly should happen in the case of overflow hidden boxes and anchors. There are some Gecko bugs open on this, but they have been silent for some months. I wonder if a next version of the CSS 2.1 docs doe out soon will provide some answers. Philippe hits the nail on the head. However the answer to 2, now that Opera and Safari have got in line with Gecko and IE's behaviour (as Gecko got in line with IE before), is pretty obviously going to be the current anchors jumping within the hidden block. The specs will be amended to conform to browser behaviour (if necessary - it's arguable that the change from 2 to 2.1 is already sufficent) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] 2 column fixed width
Thank you everyone! Your answers really helped me... I have it now. Jana Hello I was trying to do simple 2 column layout fixed width (not liquid layout) using float for the left column which contains menu. The problem I found is that when the menu is longer than the the right column, it tends to run outside the page area and continues into the background below the page. Is there any way to fix this? Sometimes the left column will be longer, sometimes the right one. I need the page to expand according to either one. I would be grateful for any tips or links... Thank you! Jana Forsyth Jana: Try looking into faux columns. http://alistapart.com/articles/fauxcolumns/ It's just simply a way to use a background image to make the columns look like they're the same size. It works. tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Navbar disappearing in IE and spacing questions
I'm having a great weirdness in IE - my dark blue navigation bar is simply disappearing. It works fine in Firefox, and I'm really puzzled as to what is causing it to simply not display at all in IE. There are two examples of this phenomenon: http://www.language-works.com/swimdesign/template-public-1.htm http://www.language-works.com/swimdesign/template-1.htm I have two other questions :) (1) On this page: http://www.language-works.com/swimdesign/template-public-1.htm the grey box on the right is not flush with the margin - is it possible to get it over there? I've checked the margin definition and it is 0, so I'm not sure how else to accomplish that. (2) I need a grey line to go over the footer navigation - right now I'm just using an HR tag and specifying a width, but really the grey bar needs to expand or contract along with the text under it. Any ideas how to accomplish that? I apologize if these are naive questions - i'm still struggling through the maze of CSS-dom. Anne __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] alternative to inline-block
I have a menu that is floated, and the only way it renders correctly in ie6 is if it gets a hasLayout attribute. I added display: inline-block to the container div, and all is well. except, it doesn't validate. You and I both know it does, but the validator says otherwise, and unfortunately, that is what my client is going to be looking at. Is there an alternative to display:inline-block that will give a div hasLayout? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Firefox 100% Height
This problem I'm sure many have had, I need my page background to stretch 100% of the page in an absolute div. But in Firefox, It will go 100% until it scrolls. Then the background stops. If anyone has any suggestions or fixes. Thank you. - Here is the link: |http://www.kilroymultimedia.com/clients/messina/home.html| __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] alternative to inline-block
Is there an alternative to display:inline-block that will give a div hasLayout? It goes a bit against the validation grain, but I suggest using: zoom: 1; in a separate CSS file hidden from the validator by conditional comments. It's a little more future-proof (since it's a proprietary property from MS) than other methods, even if it is completely and utterly invalid. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Body background image align to bottom: Firefox
Micky Hulse wrote: Generally, there is no best fix for things in CSS. There are multiple ways to do things. If something works in your layout and target browsers, and uses the leanest markup or CSS possible, go for it. Sounds good to me. And yep, appears to work great in IE6 and Firefox. I guess I was just surprised to see the body tag shrink-wrapping to my content... I always thought it was more of an invisible element (like html element) - or, well, an element that did not behave like a container div... Anyway, thanks for the feedback, I really appreciate your time. :) If you want to get even more confused, you should experiment with the differences of the body element between HTML and XHTML Strict. :-) The body element does not always take up the entire viewport, as you may expect it to do. Anyway, glad you found a solution that worked for you. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Wiki Updated - IE on Linux
It's now easy to test for yourself using IE on Linux. Screenshot: http://mrmazda.no-ip.com/SS/kde-IE6.gif Howto link: http://www.tatanka.com.br/ies4linux/index-en.html Updated wiki page: http://css-discuss.incutio.com/?page=BrowserTesting It wasn't entirely simple, as it complained about old Wine version when I tried installing it on my SUSE 10.0 system. When I tried to start it, it crashed before finishing loading. I then tried on a newer Linux version equipped with a newer Wine, and it installed quickly and easily. The result you can see in the screenshot. I didn't change very much on the wiki page. Someone else might want to tweak it. -- Wisdom is supreme; therefore get wisdom. Though it cost all you have, get understanding. Esteem her, and she will exalt you; embrace her, and she will honor you. Proverbs 4:7-8 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Explorer hack / not only IE...
francky wrote: [...] Yes, here's a test page http://home.tiscali.nl/developerscorner/css-discuss/test-ie-important3.htm Sorry, wrong link; must be: test page http://home.tiscali.nl/developerscorner/css-discuss/test-ie-important.htm francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Layout check please- was Table squirting out of DIV
Hi again and thanks Gunlaug. I don't feel so inept when the solution
is something I wouldn't have thought of in a million years...hehe.
Both of your suggestions worked perfectly to fix the footer width and
gecko 1px line problems. And you are correct, my test page did not
validate but it should now validate as html 4.01 strict.
The fact that IE doesn't understand XHTML is news to me and makes me
wonder if why I've been using XHTML all this time. (embarassment =
[) I think I may have made a mistake saying, only used by IE on
pc's in North America I should have just left it at, should
support firefox and ie on mac and pc. Sorry for the confusion.
The LayoutGala page with the margins that seemed to cancel each other
out still confuses me. The html has a #wrapper directly around only
the #content. My confusion comes from not knowing why this example
needs to shove the #wrapper to the left, then push the #content back
to the right the same amount. What problem does the #wrapper solve
that makes its use necessary?
http://blog.html.it/layoutgala/LayoutGala24.html
div#wrapper{float:right;width:100%;margin-left:-200px}
div#content{margin-left:200px}
div id=wrapper
div id=content
...
/div
/div
Thanks!!!
=
Your test page isn't XHTML 1.0, so you should clean it up first, or
change it to HTML 4.01 and mark it up accordingly.
http://validator.w3.org/check?uri=http://rollandburn.com/index.html
Don't know how your original page is, but the same standard-requirements
should be applied to that too. No IE-version understand XHTML anyway, so
you may as well change it since IE-only is one of _your_ requirements.
Having written that: it shouldn't be much of a problem to clean it up
and turn it into proper XHTML, that survives if served as
'application/xhtml+xml' if _that_ is a requirement (it is according to
W3C). I just did, and all standard-compliant browsers rendered it
perfectly, but IE/win will of course not play ball. Maybe IE8 will :-)
--
When scrolling to the right in IE/PC, I notice the footer doesn't
stretch along 'x' plane all the way when the table is really wide
IE/win lose track of how wide the page really is, and limits the
footer-width to the window-width. It is sometimes a tricky one.
Here is a future-safe hack for IE6 and older versions, which must be
placed - completely with @media rule and all - after all other styles.
Will make IE6 behave - or appear as if it does.
@media screen {
* html #footer {
float: left;
width: 5000%;
margin-right: -4999%;
}
}
I have no idea how IE7 renders that footer, but it won't be disturbed by
the above hack. Neither will any other browser.
In Firefox PC and Mac i notice at the bottom of the footer a baby
blue 1px horizontal line where the background image shows through. It
comes and goes with keyboard font resizing.
The overprecise calculation in Gecko tends to hit and miss a bit.
The simplest cover-up in your case is to pull up the bottom margin on
the footer.
#footer {margin-bottom: -1px)
...should do.
-
Regarding margins seem to cancel themselves out..., is not so.
The #content {margin-left:12em} is positioning that container so far
from the left edge of #container to make space for navigation. If you
don't need navigation, then you simply change that margin to zero.
Example:
body#with-nav #content {margin-left:12em;}
body#no-nav #content {margin-left:12em;}
...or something like that.
I don't know how many eventualities you have to cover with this layout,
so I can't say if this layout CSS has all the bases covered or not.
Given proper (and clean) markup I can't see any problems with it in any
of my browsers.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] putting it all together (side-scrolling portfolio)
Thanks for the tips on my dropdown navigation menu. I'm starting to wonder whether ANY dropdown is a bit too fancy (from a user, rather than a code, perspective). But to make a decision, I need to get the dropdown up-and-running with the scrolling gallery. However I can't for the life of me figure out how to do the layout! Here's what I've got (pink and green backgrounds inserted to help me try to figure out what's going wrong). It looks similarly wrong in FF Mac and Safari. (Probably not worth checking in IE at the moment as that will introduce more errors.) http://www.richardnicholson.com/testing/menu_gallery.html What I want: - name + navigation all on the same horizontal level. - name + navigation expand simply to the right (without wrapping, and maintaining spacing) when the text is enlarged. - name + navigation fixed at top, as if in a frame (I've accomplished this by putting name + nav in a fixed topbar div - but I gather I need a workaround to get working in IE). At the moment the navigation is dropping downwards, below the level of my name. To fix this I've tried everything - pixels, margins, boxes, positioning, pixels, ems etc I think the HTML is ok - clean and simple. So I must be doing something wrong with the CSS. What am I missing Thanks for any tips. Richard __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Layout check please- was Table squirting out of DIV
rollandburn wrote:
http://blog.html.it/layoutgala/LayoutGala24.html
div#wrapper{float:right;width:100%;margin-left:-200px}
div#content{margin-left:200px}
Try to think of it like this:
1: div#wrapper will show up as a 100% wide float-container, but will
/only take up space/ equivalent to '100% minus 200px' (regardless of how
much that is).
That leaves 200px empty space on the left side.
2: div#content will stay 200px away from the left edge of div#wrapper,
so it won't cover up the empty space on the left side.
Result: there's 200px empty space for 'navigation' and 'more stuff here'
to stay in.
Method with 'negative margins' on floats is best described here...
http://www.alistapart.com/articles/negativemargins/
...and your LayoutGala example is just a variation.
This example on my site is a bit overdone...
http://www.gunlaug.no/contents/wd_demo_float_03.html
...but the entire page-layout and the 'removed floats' rely entirely on
the same 'negative margins' method as described in the ALA article. A
useful bit of standard float-behavior.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Wiki Updated - IE on Linux
Good stuff. A near enough a straight install on Fedora - apart from a checksum error on one file which I did a wget on and reran the installer and it worked fine. A a bit buggy on the left hand favorites/search bar resizing, maybe other bugs too. Great for checking out layouts though. Thanks, Aaron Felix Miata wrote: It's now easy to test for yourself using IE on Linux. Screenshot: http://mrmazda.no-ip.com/SS/kde-IE6.gif Howto link: http://www.tatanka.com.br/ies4linux/index-en.html Updated wiki page: http://css-discuss.incutio.com/?page=BrowserTesting It wasn't entirely simple, as it complained about old Wine version when I tried installing it on my SUSE 10.0 system. When I tried to start it, it crashed before finishing loading. I then tried on a newer Linux version equipped with a newer Wine, and it installed quickly and easily. The result you can see in the screenshot. I didn't change very much on the wiki page. Someone else might want to tweak it. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Examples of true pure semantic XHTML web sites using css?
Audra Coldiron wrote: http://designerkarma.com [...] They are all totally necessary to have nearly complete design flexibility while working with the same skeleton. I'll say a 'conditional yes' to that - given the current standards, but are those inline styles necessary too? I've often thought we'd get the same people saying the same thing about our system... that is, until they use it and see the utility of it ;-) Pity it doesn't survive when properly served, as 'application/xhtml+xml'... ( XML parsing failed: syntax error (Line: 114, Character: 44) ) Might have been more useful then, and in accordance with XHTML 1.0 standard. Shouldn't be too difficult to achieve. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Font choices - Safari acting up (beginner question)
In the site I'm creating I've set up the fonts for the Body tag like so: 'font: small Gill Sans Light, Gill Sans, Trebuchet MS, Helvetica, Arial, sans-serif;' (I believe that Gill Sans and Gill Sans Light are supplied as standard with OSX. They're unlikely to be on the average PC, so Trebuchet is for them.) Previewing in different browsers on my Mac, I see Gill Sans Light in Firefox, Opera and even IE Mac 5.2.3. Safari, however, won't display Gill Sans Light - it displays Gill Sans. Anyone know why? Thanks Richard __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Examples of true pure semantic XHTML web sites using css?
Paul Novitski wrote: At 9/6/2006 03:13 AM, David Dorward wrote: One of the major critisms of CSS Zen Garden is that it is laden down with vast numbers of divs and spans which are there solely to hook CSS onto. I find it hard to take seriously criticism that the Zen Garden page has too many tags! That would be like criticizing an actor for having too many colors of greasepaint in her kit. The Zen Garden page isn't a model for every web page -- it's marked up specifically to achieve its goal of multitudinous reskinnability. I totally agree. I could never understand that criticism either. In fact, I'm such a big fan of the Zen Garden my developer parter and I have created a CMS that works around the same principle. Everything has an ID and/or a class and in many cases multiple classes. Divs wrap most everything and there are spans here and there that at first glance you'd question too. They are all totally necessary to have nearly complete design flexibility while working with the same skeleton. I've often thought we'd get the same people saying the same thing about our system... that is, until they use it and see the utility of it ;-) If anyone's curious you can check it out here: http://designerkarma.com -- Audra Coldiron Rock-n-Roll Design Hosting http://rock-n-roll-design.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Image wrapping on window resize in IE
Hi everyone, any help would be great: I'm working on re-coding an existing website into XHTML/CSS and am hitting a small snag: The banner ads section. Using min-width I am able to get the desired behavior w/ Firefox but (big surprise) not in IE... http://www.alexburr.com/yehoodi/3/index.php In IE when you resize the window down, the banner ad jumps down a line to fit itself. What I want is for it to wrap under the right-hand column as it does in IE... Any thoughts? Thanks in advance... - A Burr __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 hack for center images, center linked captions
Suggestions please? http://www.keshavhowe.com/7/upcoming_intensives.php The CSS code for this is all at the bottom of keshav.css, all what I'm calling the 'grid' - where I'm lining up images links below, all centered. Beautiful in FF, stacks vertically in IE. I need an IE hack. I'm SURE it's something simple I keep missing... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Navbar disappearing in IE and spacing questions
Anne E. Shroeder wrote:
I'm having a great weirdness in IE - my dark blue navigation bar is simply
disappearing. It works fine in Firefox, and I'm really puzzled as to what
is causing it to simply not display at all in IE. There are two examples of
this phenomenon:
http://www.language-works.com/swimdesign/template-public-1.htm
http://www.language-works.com/swimdesign/template-1.htm
Hi Anne,
This is one of the hasLayout issues in IE [1].
With giving the #bluenavBar container an imaginary {height: 1%;} it can
be solved.
See testpage 1
http://home.tiscali.nl/developerscorner/css-discuss/test-swimdesign-tpublic1.htm.
Also in this testpage: with a {vertical-align: bottom;} for the header
image, the IE gap between the header and the bluenavBar can be closed.
Even although not indicated, IE thinks the image is on a paragraph line
with text, and positions it at the height of the bottom of a letter with
a tail (as an y).
I have two other questions :)
(1) On this page:
http://www.language-works.com/swimdesign/template-public-1.htm
Here in IE (IE6 on my Win98SE) my eyes got attracted immidiately to the
messing up of the Regions and Products tabs; only after some
hovering you see the right place.
Again a positioning error of IE, this time it can be solved with giving
a { position: relative;} to the containing table.
See testpage 2
http://home.tiscali.nl/developerscorner/css-discuss/test-swimdesign-template1.htm.
Also in this testpage some adaptations to make it possible for FF and
other bowsers to enlarge the browser font scale, without breaking this
table.
See source code.
Now to serve also the Products you have to change the ID #tabnavbar in
a class=tabnavbar; an ID is an unique IDentification, allowed only
once in 1 page.
the grey box
on the right is not flush with the margin - is it possible to get it over
there? I've checked the margin definition and it is 0, so I'm not sure how
else to accomplish that.
I see this problem is melted by the assigning of the 1% height to the
bluenavbar. :-)
(2) I need a grey line to go over the footer navigation - right now I'm just
using an HR tag and specifying a width, but really the grey bar needs to
expand or contract along with the text under it. Any ideas how to
accomplish that?
For instance: making a span with a border-top around the footer links.
Implemented in testpage 2.
I apologize if these are naive questions - i'm still struggling through the
maze of CSS-dom.
Anne
If it is about IE-errors, no naive questions exists, only a naive
browser (or something like that). ;-)
See also [2].
Greetings,
francky
[1]
Ingo Chao: OnHavingLayout
http://www.satzansatz.de/cssd/onhavinglayout.html
[2]
PIE: Explorer Exposed! http://www.positioniseverything.net/explorer.html
PIE: Internet Explorer vs. the Standards
http://www.positioniseverything.net/ie-primer.html
**Community MX: How To Attack An Internet Explorer (Win) Display Bug
http://www.communitymx.com/content/article.cfm?cid=C37E0
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Examples of true pure semantic XHTML web sites using css?
http://designerkarma.com Pity it doesn't survive when properly served, as 'application/xhtml+xml'... ( XML parsing failed: syntax error (Line: 114, Character: 44) ) Might have been more useful then, and in accordance with XHTML 1.0 standard. Shouldn't be too difficult to achieve. If you tried to validate it failed due to my own poor mark-up in the content, not the skeleton. That's what I get for trying to do too many things at once. All's fixed now though, thanks for pointing it out :-) -- Audra Coldiron Rock-n-Roll Design Hosting http://rock-n-roll-design.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 100% Height
Bradley Wright wrote:
This problem I'm sure many have had, I need my page background to
stretch 100% of the page in an absolute div. But in Firefox, It will
go 100% until it scrolls. Then the background stops.
I think (from memory) that this fixes the issue:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
* html, * html body {
height: 100%;
}
body {
/* background styles */
}
Hi Jeff,
And if this doesn't work, I guess you can split up the backgrounds for
header, navbar, main and footer; then the background oimage for the #all
wrapper can be mised.
For a raw impression *): see testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-messina.html.
Greetings,
francky
*)
I only adapted the main-section, with existing css. With fresh css it
can be simplified. :-)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] CSS for a telescoping menu
I have a telescoping menu (controlled by JavaScript). All that works
wonderfully, but my problem is the links contained in the list. When the
background for the L2 links changes, it only changes the backgrounds of
the links. I want the whole 130px width to change it's background.
li.L2, li.L2over {
list-style:none;
margin-top:-.25em;
text-decoration:none;
width:130px;
}
.L2 a, .L2 a:link, .L2 a:visited, .L2 span {
background:none;
color:#900;
height:1.5em;
line-height:1.5em;
padding-left:10px;
text-decoration: none;
width:130px;
}
.L2 a:hover, .L2over span {
background:none;
background-color:#900;
color:#fff;
cursor:pointer;
height:1.5em;
line-height:1.5em;
padding-left:10px;
text-decoration: none;
width:130px;
}
li class=L1spanMy Flagship/a
ul class=hideme id=myflagship
li class=L2a href=blahMy
Home/a/li
li class=L2a href=blahMy
Loans/a/li
li class=L2a href=blahMy
Tasks/a/li
li class=L2a href=blahMy
Alerts/a/li
li class=L2spanMy Settings/span
ul class=hideme
id=flagshipsettings
li class=L3a
href=blahChange Password/a/li
li class=L3a
href=blahUser Profile/a/li
/ul
/li
li class=L2a
href=blahTraining/a/li
/ul
/li
--
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Examples of true pure semantic XHTML web sites using css?
Audra Coldiron wrote: http://designerkarma.com If you tried to validate it failed due to my own poor mark-up in the content, not the skeleton. That's what I get for trying to do too many things at once. All's fixed now though, thanks for pointing it out :-) I usually don't bother to run XHTML documents through the validator, but instead just check if they survive when served with a proper MIME type. Most don't, but yours is looking fine now :-) HTML Tidy would like to add... /*![CDATA[*/ ...around those styles in the page-head... /*]]*/ ...but that's all. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Font choices - Safari acting up (beginner question)
On Sep 8, 2006, at 4:03 AM, richard n wrote: In the site I'm creating I've set up the fonts for the Body tag like so: 'font: small Gill Sans Light, Gill Sans, Trebuchet MS, Helvetica, Arial, sans-serif;' (I believe that Gill Sans and Gill Sans Light are supplied as standard with OSX. They're unlikely to be on the average PC, so Trebuchet is for them.) Previewing in different browsers on my Mac, I see Gill Sans Light in Firefox, Opera and even IE Mac 5.2.3. Safari, however, won't display Gill Sans Light - it displays Gill Sans. You need to use the Postscript name of the font: 'GillSans-Light' for Safari, otherwise Safari uses the 'regular' weight font: small 'GillSans-Light', 'Gill Sans Light', 'Gill Sans', .. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 for a telescoping menu
[EMAIL PROTECTED] wrote:
I have a telescoping menu (controlled by JavaScript). All that works
wonderfully, but my problem is the links contained in the list. When the
background for the L2 links changes, it only changes the backgrounds of
the links. I want the whole 130px width to change it's background.
li.L2, li.L2over {
list-style:none;
margin-top:-.25em;
text-decoration:none;
width:130px;
}
.L2 a, .L2 a:link, .L2 a:visited, .L2 span {
background:none;
color:#900;
height:1.5em;
line-height:1.5em;
padding-left:10px;
text-decoration: none;
width:130px;
}
.L2 a:hover, .L2over span {
background:none;
background-color:#900;
color:#fff;
cursor:pointer;
height:1.5em;
line-height:1.5em;
padding-left:10px;
text-decoration: none;
width:130px;
}
li class=L1spanMy Flagship/a
ul class=hideme id=myflagship
li class=L2a href=blahMy
Home/a/li
li class=L2a href=blahMy
Loans/a/li
li class=L2a href=blahMy
Tasks/a/li
li class=L2a href=blahMy
Alerts/a/li
li class=L2spanMy Settings/span
ul class=hideme
id=flagshipsettings
li class=L3a
href=blahChange Password/a/li
li class=L3a
href=blahUser Profile/a/li
/ul
/li
li class=L2a
href=blahTraining/a/li
/ul
/li
Hi Marc,
It smells like adding { display: block; } to the a's, but I didn't test.
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] collapsing heights/widths for inline divs
hi all - problem is inline divs with dimensions that collapse when div is set to display inline - - http://www.fatgraffix.com/testing/test_03-inlinedivs/ i'm assuming that inline elements can't have specified widths and heights - is this true - ? thx to all for your help... =fgx= mail2web - Check your email from the web at http://mail2web.com/ . __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] SPAN obsolete?
I saw a comment on the list recently that the SPAN tag was obsolete. Can anyone explain how that is? Thanks, Wes __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] collapsing heights/widths for inline divs
On 9/7/06, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: problem is inline divs with dimensions that collapse when div is set to display inline - Of course they do - they are supposed to. i'm assuming that inline elements can't have specified widths and heights - is this true - ? Pretty much, though you can give an inline box a line-height which acts a lot like vertical padding. We often talk about the box model, but really there are *two* box models - one for block boxes and another for inline boxes. DIVs shouldn't be used for inline anyway - that's what SPANs are for. -- Ed Seedhouse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] collapsing heights/widths for inline divs
On Sep 8, 2006, at 9:33 AM, [EMAIL PROTECTED] wrote: problem is inline divs with dimensions that collapse when div is set to display inline - - http://www.fatgraffix.com/testing/test_03-inlinedivs/ i'm assuming that inline elements can't have specified widths and heights - is this true - ? width and height do not apply to inline elements (or elements set to display:inline) http://www.w3.org/TR/CSS21/visudet.html#propdef-height http://www.w3.org/TR/CSS21/visudet.html#the-width-property Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] SPAN obsolete?
On 9/7/06, Wes Gamble [EMAIL PROTECTED] wrote: I saw a comment on the list recently that the SPAN tag was obsolete. Can anyone explain how that is? It isn't. It is however much abused and often used when another semantic tag would do a lot better IMO. span style=font-weight: bold;xxx/span for example, is a travesty. SPAN is badly overused but by no means obsolete. It provides a way of grouping inline elements or text when no appropriately semantic other inline tag exists for a particular purpose. -- Ed Seedhouse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] alternative to inline-block
On Sep 8, 2006, at 12:37 AM, Brian Cummiskey wrote: I have a menu that is floated, and the only way it renders correctly in ie6 is if it gets a hasLayout attribute. I added display: inline- block to the container div, and all is well. except, it doesn't validate. If that menu is floated, it already 'hasLayout' [1] I suspect something else is going on with it. Do you have a sample url ? [1] http://www.satzansatz.de/cssd/onhavinglayout.html#prop Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Font choices - Safari acting up (beginner question)
On 06/09/08 08:21 (GMT+0900) Philippe Wittenbergh apparently typed: On Sep 8, 2006, at 4:03 AM, richard n wrote: In the site I'm creating I've set up the fonts for the Body tag like so: 'font: small Gill Sans Light, Gill Sans, Trebuchet MS, Helvetica, Arial, sans-serif;' (I believe that Gill Sans and Gill Sans Light are supplied as standard with OSX. They're unlikely to be on the average PC, so Trebuchet is for them.) Previewing in different browsers on my Mac, I see Gill Sans Light in Firefox, Opera and even IE Mac 5.2.3. Safari, however, won't display Gill Sans Light - it displays Gill Sans. You need to use the Postscript name of the font: 'GillSans-Light' for Safari, otherwise Safari uses the 'regular' weight font: small 'GillSans-Light', 'Gill Sans Light', 'Gill Sans', .. Another problem with Gill Sans is that Lotus Smartsuite shipped with some that don't work right. Here are samples from the system font palette: Condensed: http://mrmazda.no-ip.com/SS/font-gillsanscond.jpg Normal: http://mrmazda.no-ip.com/SS/font-gillsansnorm-good.jpg Ultra Bold: http://mrmazda.no-ip.com/SS/font-gillsansubld.jpg WordPro can use them properly, but Gecko won't. If all three are installed, ultra bold is what Gecko always uses if roman is requested. If you uninstall ultra bold, then Gecko will use condensed. Gecko will only use normal if the other two are removed from the system. That can produce some rather strange looking pages: http://mrmazda.no-ip.com/SS/font-gillsans-fawny-sm101Eplus120.jpg Test page: http://mrmazda.no-ip.com/auth/Font/font-gillsans.html -- Wisdom is supreme; therefore get wisdom. Though it cost all you have, get understanding. Esteem her, and she will exalt you; embrace her, and she will honor you. Proverbs 4:7-8 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] SPAN obsolete?
Wes Gamble wrote:
I saw a comment on the list recently that the SPAN tag was obsolete.
Can anyone explain how that is?
It isn't. Using a span is a great way to hang a class or contextual
style on an inline element inside a paragraph or list item, for example.
p class=foosome text here is blue. but spanthis text/span is
red./p
p.foo {
color:blue;
}
.foo span {
color:red;
}
simplified, but you get the idea, right? You could as easily create a
span class rather than use the contextual approach, but that would mean
actually applying the class to more elements, whereas you could simply
have as many spans occur within a specific container and the rule
automatically applies without affecting non foo spans.
Donna
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] SPAN obsolete?
Donna,
Thanks. I understand how span works. Just wanted to here how they had
been obsoleted :). I guess that I misunderstood the statement.
Wes
Donna Casey wrote:
Wes Gamble wrote:
I saw a comment on the list recently that the SPAN tag was obsolete.
Can anyone explain how that is?
It isn't. Using a span is a great way to hang a class or contextual
style on an inline element inside a paragraph or list item, for example.
p class=foosome text here is blue. but spanthis text/span is
red./p
p.foo {
color:blue;
}
.foo span {
color:red;
}
simplified, but you get the idea, right? You could as easily create a
span class rather than use the contextual approach, but that would mean
actually applying the class to more elements, whereas you could simply
have as many spans occur within a specific container and the rule
automatically applies without affecting non foo spans.
Donna
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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
IE7b2 testing hub -- 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] SPAN obsolete?
Donna,
Thanks. I understand how span works. Just wanted to here how they had
been obsoleted :). I guess that I misunderstood the statement.
Wes
Donna Casey wrote:
Wes Gamble wrote:
I saw a comment on the list recently that the SPAN tag was obsolete.
Can anyone explain how that is?
It isn't. Using a span is a great way to hang a class or contextual
style on an inline element inside a paragraph or list item, for example.
p class=foosome text here is blue. but spanthis text/span is
red./p
p.foo {
color:blue;
}
.foo span {
color:red;
}
simplified, but you get the idea, right? You could as easily create a
span class rather than use the contextual approach, but that would mean
actually applying the class to more elements, whereas you could simply
have as many spans occur within a specific container and the rule
automatically applies without affecting non foo spans.
Donna
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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
IE7b2 testing hub -- 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] Avoiding empty pages in print - any ideas?
I've created a print.css that does what I want most of the time.
However, every now and then I end up with empty pages. Does anyone know
of a trick I could use to loose at least the last empty page? I've
searched high and low, but I can't find something workable.
Sorry, no time to peek...
Are you floating major sections of the content? Like a 2- or 3-col
layout? Try adding to (or adding period) your print style:
* {float:none;} -- or a specific element instead of *
That solved similar things for me. Print is getting tricky for me lately...
HTH
--
Tom Livingston | Senior Multimedia Artist | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] alternative to inline-block
Philippe Wittenbergh wrote:
If that menu is floated, it already 'hasLayout' [1]
I suspect something else is going on with it.
Do you have a sample url ?
No sample URL to post right now, but Here's the basic markup and css:
div id=wrapper
mast head///
div id=navbar
ul class=fleft
lia href=category.asp?cartid=%= cartid %View All
Items/a/li
lia href=category.asp?cat=TV-CLOTHINGamp;cartid=%=
cartid %View Clothing/a/li
lia
href=category.asp?cat=TV-ACCESSORIESamp;cartid=%= cartid %View
Accessories/a/li
/ul
ul class=fright
lia href=about.asp?cartid=%= cartid %About the
E-Store/a/li
lia href=pres.asp?cartid=%= cartid %President's
Letter/a/li
lia href=faq.asp?cartid=%= cartid %FAQs/a/li
/ul
div class=clear!-- --/div
/div
body//
footer/
/div
#navbar {
display: inline-block;/* ie6 fix */
background: #036;
color: #fff;
padding: 0;
margin: 0;
}
#navbar ul {
margin: 0 5px 0 5px;
padding: 6px 4px 6px 4px;
}
#navbar ul.fleft {
float: left;
}
#navbar ul.fright {
float: right;
}
#navbar ul li {
list-style-type: none;
display: inline;
margin: 0;
padding: 6px 4px 6px 4px;
}
#navbar ul li a {
margin: 0;
padding: 6px 4px 6px 4px;
color: white;
background: inherit;
font-weight: bold;
font-size: 1.1em;
text-decoration: none;
}
#navbar ul li a:hover {
color: #222;
background: #CBD3DB;
text-decoration: underline;
}
Without the display:inline-block, the menu is all messed up in IE6.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Site Check Please
Hi, Can you please check http://www.tarotcardcombinations.com/ Also can someone tell me why I am getting those warnings in the CSS validatorespecially with CntBody...because it has a background color in it... and how to solve it.. Thanks for the feedback Thanks PWPaust __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] cancel site check please
Hi, Please do not check the site, it is too big for 800x600 res I will fix it and then ask again. Sorry for the inconvenience Thanks __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] alternative to inline-block
On Sep 8, 2006, at 1:28 PM, Brian Cummiskey wrote:
Philippe Wittenbergh wrote:
If that menu is floated, it already 'hasLayout' [1]
I suspect something else is going on with it.
Do you have a sample url ?
No sample URL to post right now, but Here's the basic markup and css:
[snip]
#navbar {
display: inline-block;/* ie6 fix */
background: #036;
color: #fff;
padding: 0;
margin: 0;
}
#navbar ul {
margin: 0 5px 0 5px;
padding: 6px 4px 6px 4px;
}
#navbar ul.fleft {
float: left;
}
#navbar ul.fright {
float: right;
}
[snip]
Without the display:inline-block, the menu is all messed up in IE6.
Aha.
#navbar is not floated. And yes it better has 'layout' in order to
contain and constrain the floated ul inside of it.
options as 'layout triggers': width, height, zoom:1,
Zoom:1 is probably the best option: hidden from other browsers, and
will work for both IE 6 and 7.
If you worry about validation, put it in a conditional comment.
inline-block is a bit dangerous, at the moment, IE doesn't implement
it correctly at all for block-level elements, it only acts as a
'layout' trigger, but who knows what happen tomorrow.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Site Check again please
Hi, I have fixed the site for 800x600 It was easier then what I first thought it to be, I just had to remove 2 px off everything in the stylesheet Once again could I please ask for www.TarotCardCombinations.com to be checked and could somone please explain why I am getting the warnings in the CSS validator and how to fix it Regards PWP __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Site Check Please
Professional Web Pages - Information wrote: Hi, Can you please check http://www.tarotcardcombinations.com/ Also can someone tell me why I am getting those warnings in the CSS validatorespecially with CntBody...because it has a background color in it... and how to solve it.. PWPaust xp :: ie/ff/opera Some suggestions you may want to consider: -- Re-set all instances of text-align: justify; to text-align: left; (this will dry up the rivers) -- Try adding Georgia as the first font in the TNR, Times, serif font-family string (in the body declaration). This /may/ help to make your page less ordinary. -- Unlock the frozen fonts in ie ( set percent for the base font-size on the body declaration, and use percent to set individual selectors throughout the remainder of your stylesheet ) -- Delete all instances of height on the container (this will prevent the text shooting out the bottom on font zoom) --Re-check all your pages in all browsers with font-zoom --I think you can probably safely ignore the CSS validation service warnings (they are warnings not errors) . --Personally, I'd ditch the validation links-- you are setting yourself, and your client, up. I did not wait for these mac/win2000/ screen captures to load (30): http://www.browsercam.com/public.aspx?proj_id=282856 Good luck. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Site Check again please
- Original Message -
From: Professional Web Pages - Information [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Friday, September 08, 2006 12:50 AM
Subject: [css-d] Site Check again please
Hi,
I have fixed the site for 800x600
It was easier then what I first thought it to be, I just had to remove 2
px off everything in the stylesheet
Once again could I please ask for www.TarotCardCombinations.com to be
checked and could somone please explain why I am getting the warnings in
the CSS validator and how to fix it
Regards
PWP
__
They are _harmless_ warnings and can be safely ignored! It would be a very
rare set of circumstances where you would actually need to set the
background-color to prevent problems.
You can just add {background-color : inherit;} to each of the specifications
that are giving the warnings now, and they will go away.
Michael S. Rose
Bluegrass Plus Events Calendar
http://mmrose.home.comcast.net/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] alternative to inline-block
Aha. #navbar is not floated. And yes it better has 'layout' in order to contain and constrain the floated ul inside of it. options as 'layout triggers': width, height, zoom:1, Zoom:1 is probably the best option: hidden from other browsers, and will work for both IE 6 and 7. If you worry about validation, put it in a conditional comment. inline-block is a bit dangerous, at the moment, IE doesn't implement it correctly at all for block-level elements, it only acts as a 'layout' trigger, but who knows what happen tomorrow. the zoom:1 works the same as display:inline-block so i guess I will use that. Thanks for the help Philippe. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Automatically scaling fonts
Is there a way to scale the font size as the window size increases? I am working on an elastic layout that works fin when the browser window is increased and reduced, however, the fonts do not increase or decrease in size so I end up with blank space when the window size is big and over-flowed text when it's small. I'd like the text size to increase as well. I suppose I could do something with Javascript, but I'd rather not. Regards Pete __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
