Re: [css-d] better CSS option to group image/content
On Tue, 17 Apr 2007, Paul Novitski wrote: Many people use the definition list for image/caption pairs (although there's disagreement over whether an image and its caption qualify as a term and its description; personally I don't have a problem with the metaphor). But image captions are a different issue, aren't they? The question seems to deal with the use of a floated image on the right or left of some text paragraph (pcontent content/p). If the image has a caption, there's an additional problem (with quite a many possible solutions, none of which is perfect). I think we first need to understand what the problem and goal is. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ 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] Phantom margin problem in IE6
Many thanks for this Georg. Your explanation is very good, and this fixes my problem. Yasir Yasir Assam wrote: I have a phantom margin problem on IE6. You can see it here: http://endlessvoid.com/test_css/phantom_margin1.html The blue bar at the bottom doesn't go right up to the right edge on IE6 (running on W2K3 here) but it looks ok on FF and IE7. Add... body {margin: 0; padding: 0;} ...and the 16px phantom margin will be gone. - The reason is that IE6 can't position absolute relative to opposite sides, so IE6 ignores div#titlebar {right: 0;} completely. - With no established relation the div#titlebar defaults to being positioned relative to the html-element/browser-window. Same in all browsers. - Then IE6 expands div#titlebar in width to make div#thumbs fit inside, but the div#thumbs takes its 100% width from _body_, which have 8px side-margins by default in IE. regards Georg __ 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] Image menu - need bottom alignment (IE-only problem)
Many thanks for the fix Ingo. It works very well. Yasir Yasir Assam wrote: ... http://archivist.incutio.com/viewlist/css-discuss/84900 That solution needs some revision now because I need to use images of different heights, and on IE the images are top-aligned, and I need them to be bottom-aligned. I've tried various things but I can't find a workaround. Here's the problem page: http://endlessvoid.com/test_css/test7.html Does anyone have any idea how I might get these images aligned along the bottom in IE? Note that the menu us implemented very differently on other browsers (there's an IE-only CSS section) and there's no problem in other browsers. Inside the conditional comment, replace .menupic and .menupic_inner with .menupic { display:inline; zoom: 1; text-align: center; margin: 0 1em; border: 1px blue dashed; } .menupic_inner { display:inline; zoom: 1; } (I don't see a reason to position them relatively) Here, .menupic does not float, but acts like inline-block, due to display:inline + haslayout (via zoom:1). .menupic_inner gets the same inline-block behavior, in order to center it like text with text-align:center;. Probably not intended. This does not work around the problem that there is no display:table-cell in IE, so you can't have them at equal height out of the box. Ingo __ 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] A DIV that stay at the bottom of the container whatever happens
Hello everyone ! I'm wondering if someone knows how to force a DIV to stay at the bottom of another DIV that contains it. The DIV InfosArea must have a non-flexible height, but the DIV PartenairesArea could be fixed height. I've done this code, but that's not really a solution : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - style #leftarea { margin:0; padding:0; float:left; height:400px; min-height:400px; width:174px; } #infosarea { background-color:#FFF; height:25px; margin:0; min-height:25px; padding:0; } #adapt { background-color:#ccc; margin:0; padding:0; width:inherit; } #PartenairesArea { height:120px; margin:0; min-height:120px; text-align:center; vertical-align:middle; margin:auto; } /style div id=LeftArea div id=InfosArea [PlaceHolder:Infos] /div div id=Adapt /div div id=PartenairesArea [PlaceHolder:Partenaires] /div /div - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - The result is seable here : http://www.loireavelo.fr And the problem is seable here : http://cms2.enjoyconstellation.com/Sites/85cd8215-64a4-4d47-aa5e-02e3908ae168/Accueil/Infospratiques/unepage/tabid/1902/Default.aspx , where the logos at the left side of the screen (Région Centre, etc.) should stay at the bottom of the page. Can someone give me some kind of tricks to make it work ? Sébastien Fichot - FRANCE _ Personnalisez votre Messenger avec Live.com http://www.windowslive.fr/livecom/ __ 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] A DIV that stay at the bottom of the container whatever happens
This is the way I'd do it: #infosarea { position: relative; // this creates a positioned ancestor padding-bottom: XXXpx; // enough space for #PartenairesArea } #PartenairesArea { position: absolute; // puts it at the bottom of the first bottom: 0; // positioned ancestor } // won't work with Mac IE - which messes up with 'bottom'! djn Sébastien FICHOT wrote: I'm wondering if someone knows how to force a DIV to stay at the bottom of another DIV that contains it. The DIV InfosArea must have a non-flexible height, but the DIV PartenairesArea could be fixed height. I've done this code, but that's not really a solution : -- - Dejan Kozina Web design studio Dolina 346 (TS) - I-34018 Italy tel./fax: +39 040 228 436 - cell.: +39 348 7355 225 skype: dejankozina http://www.kozina.com/ - e-mail: [EMAIL PROTECTED] __ 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] This breaks completely in IE6 - request for help
I have validated both the css and the html, and although this displays as intended in Firefox and an old copy of Netscape, it completely breaks in MSIE 6 (old), all on a pc. http://www.jonathanlouth.co.uk/development/key-jla.htm I am guessing that it is because MSIE interprets margin differently but I really don't know where to start with hacking it, before I do the other pages. I haven't tested it yet in MSIE 7. Thanks v. much in advance. Rachel __ 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] better CSS option to group image/content
Yeah. I usually provide examples but it was late and I was worn. I made up an example page seen at: http://dottedi.biz/codesamples/format_image_text.php I made the text extra small to emphasize the problem. In the left column there are 2 Events boxes. In the first I am letting the text flow around the right or left aligned images. In the second I am using a fieldset to group together corresponding image/text. I know this is not to standard, but it works and I don't have a CSS solution. Placing image and text into a div doesn't do the trick. I can try (will try) definition lists which will take the problem off list topic, but not sure that would be the right solution. Seems like a simple problem. -Bob Jukka K. Korpela wrote: On Tue, 17 Apr 2007, Paul Novitski wrote: Many people use the definition list for image/caption pairs (although there's disagreement over whether an image and its caption qualify as a term and its description; personally I don't have a problem with the metaphor). But image captions are a different issue, aren't they? The question seems to deal with the use of a floated image on the right or left of some text paragraph (pcontent content/p). If the image has a caption, there's an additional problem (with quite a many possible solutions, none of which is perfect). I think we first need to understand what the problem and goal is. __ 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] CSS I/O Error: Stream closed
Hi, I have made a website and the CSS validates on most pages (only one CSS and the same throughout entire website), however, on same pages the CSS Validator gives me the following error message: CSS Validator Error I/O Error: Stream closed. Does anybody know what this is? I do not believe it has anything to do with my CSS since on occasions, it validates and if I retry to validate it, I get this erro, or sometimes, it just won't validate and will give me this error. Any help would be great, thank you. Anahita __ 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] This breaks completely in IE6 - request for help
On 4/18/07, Rachel Mawhood [EMAIL PROTECTED] wrote: I have validated both the css and the html, and although this displays as intended in Firefox and an old copy of Netscape, it completely breaks in MSIE 6 (old), all on a pc. http://www.jonathanlouth.co.uk/development/key-jla.htm I am guessing that it is because MSIE interprets margin differently but I really don't know where to start with hacking it, before I do the other pages. I haven't tested it yet in MSIE 7. Thanks v. much in advance. Rachel looks like the double margin float bug. it does break in ie7 as well. try adding display inline to the first container floating left. hope that works http://www.positioniseverything.net/explorer/doubled-margin.html Jeff __ 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] better CSS option to group image/content
On Fri, 18 May 2007, Bob Meetin wrote: http://dottedi.biz/codesamples/format_image_text.php I made the text extra small to emphasize the problem. In the left column there are 2 Events boxes. In the first I am letting the text flow around the right or left aligned images. In the second I am using a fieldset to group together corresponding image/text. I know this is not to standard, but it works and I don't have a CSS solution. As I suspected (and wrote), this seems to be a simple case where you just need to set clear: both for an element after the first paragraph. For example, use p class=new in the infobox when you start a paragraph that should not appear on the left or right of a preceding image, and use .new { clear: both; } in CSS. Some extra markup like a class attribute is probably needed, since you might not want to deal with _all_ p elements inside an infobox that way. However, if you expect most paragraphs to be of such a kind, you could instead use a class attribute, say p class=cont for those paragraphs that continue the text related to an adjacent image, so that clearing is _not_ desired for them, and use .infobox p { clear: both; } .infobox p.cont { clear: none; } This should keep extra markup to a minimum. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ 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] IE Bug (67): Absolutely positioned element takes up vertical space
It's the way you reveal the UL. Why display: inline;? If you let the UL stay block then IE won't have the bug. Use display: block; instead of display: inline;. What's interesting is that I believe AP elements are required to be block at all times just like floats are, but then display: inline; does fix the IE doubled margin bug. So we know IE doesn't completely ignore display: inline; in that case, nor apparently in this one. Hm... Big John Big John - Unfortunately, I've gotten in the (probably bad) habit of using display: inline due to the double margin bug. But even changing it to display:block doesn't seem to change anything. I've played around with closing the li that the submenu ul was nested in, makes no difference in the spacing issue. Looks like I'm going to resort to a conditional stylesheet to fix IE's spacing on the submenus. Dave __ 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] Height difficulty
Hi All On 16/04/07, Richard Brown [EMAIL PROTECTED] wrote: On this site: http://test.uzellacourtantiques.co.uk/category/ceramics/ http://test.uzellacourtantiques.co.uk/wp-content/themes/uzella/style.css I am trying to get the products to sit nicely! I have added a height declaration in order to force the boxes to float properly but as soon as I do this breaks when you increase text size. Is there anyway around this please? Thank you to everyone for their advice. I think the site is now working. Could folks check this out for me please? Thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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] ie6 png nightmare
hello again, i was wondering if anyone knows what is going on with this. i have been reading about png support in ie6 and am trying to not use javascript to fix it. i have my img src pointing to a blank gif like i was told and have the following in my css: * html #logo{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../logo.png, sizingMethod=scale); } this points to the png that i want. now it comes up on screen with the correct dimensions when i view image dimensions but the image is completely missing. does anyone know what is going on here? Thanks for any help in advance! this is an annoying issue Jeff __ 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] This breaks completely in IE6 - request for help
Rachel Mawhood wrote: http://www.jonathanlouth.co.uk/development/key-jla.htm I am guessing that it is because MSIE interprets margin differently but I really don't know where to start with hacking it, before I do the other pages. I haven't tested it yet in MSIE 7. Gecko interprets percentage-margins differently, and IE6 adds its 'margin-doubling on floats' and a few other bugs. A more cross-browser reliable styling is necessary, or else your design won't have a chance in non-Gecko browsers. Slightly improved example... http://www.gunlaug.no/tos/alien/rm/test_07_4560.html ...with CSS here... http://www.gunlaug.no/tos/alien/rm/jla2.css regards Georg -- http://www.gunlaug.no __ 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] ie6 png nightmare
jeffrey morin wrote: hello again, i was wondering if anyone knows what is going on with this. i have been reading about png support in ie6 and am trying to not use javascript to fix it. i have my img src pointing to a blank gif like i was told and have the following in my css: * html #logo{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../logo.png, sizingMethod=scale); } this points to the png that i want. now it comes up on screen with the correct dimensions when i view image dimensions but the image is completely missing. does anyone know what is going on here? Yes I ran into this as well. It turns out that the path for the image loader is relative to the /page/ that the image is being displayed in - not the CSS file. I had to move this into a conditional comment on each page because I don't have all my pages in one directory, or even at the same level (so I couldn't consistently use ../location-of-image). Drove me nuts for a while too :-) Lori __ 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] Navigation being hidden in IE
Hi Everyone Site validates ok but having a positioning problem in IE The image boxes should be below the navigation in IE they are lying over the top ALSO need some help to push the footer below everything I've read a few tutorials on this but no success I've found putting spacers or returns in the main content pushes it down but this doesnt seem the right solution if I move the div outside the wrapper that fails also can someone give me a few pointers thanks SITE IS HEREhttp://www.philturner-uk.com/kruger/ Phil Turner FREELANCE DESIGNER TEL: 0161 439 1669 Chartered Graphic Designer MCSD BA Hons [EMAIL PROTECTED] http://www.philturner-uk.com V I S I T M Y D E S I G N B L O G http://www.philturnerdesigner.blogspot.com/ NEW BOOK - YOUR PLANET NEEDS YOU http://www.yourplanetneedsyou.org __ 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] ie6 png nightmare
Yes I ran into this as well. It turns out that the path for the image loader is relative to the /page/ that the image is being displayed in - not the CSS file. I had to move this into a conditional comment on each page because I don't have all my pages in one directory, or even at the same level (so I couldn't consistently use ../location-of-image). Drove me nuts for a while too :-) Lori i am not sure i understand. do i have to move both the png and the blank gif into the same folder as my css file then? Jeff __ 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] IE Bug (67): Absolutely positioned element takes up vertical space
Dave Simon wrote: ... ul id=main-nav ... li id=details-floorplans-lia href=#Details amp; Floor Plans/a ul id=details-floorplans-nav lia href=#Unit Description amp; Information/a/li lia href=#Floorplans/a/li /ul /li ... Depending on the page you are on, the sub menus show or hide. ul#details-floorplans-nav is absolutely positioned and set to display:none unless the body class is details. When the body class is details, it's set to display:inline. See it in action here: http://www.advertisingdesign.com/adclient/ 12trails/subpage.php To see the menu on other pages: http://www.advertisingdesign.com/ adclient/12trails/ Right now the menu isn't working. http://www.advertisingdesign.com/adclient/12trails/subpage.php Seems to be a similar problem to this one: http://archivist.incutio.com/viewlist/css-discuss/68792 So I'd check vertical-align:bottom; in #mainNav li once the target stops moving. You won't need to trigger the height:1% in your case. The bug only occurs in IE, in every version tested - 5.5, 6, 7 - so those of you with a PC handy, take a look at the subpage.php. See how there is suddenly a gap between Details Floor Plans and Location? This is where the newly displayed ul appears in the source. But it shouldn't since the element is absolutely positioned... Why would this occur since absolute elements should take up no space at all since they are out of the document flow? I don't know. Staring at the white-space bug + pos.absoulute in a reduction for a while did not make it clearer to me. Ingo -- http://www.satzansatz.de/css.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] ie6 png nightmare
jeffrey morin wrote: Yes I ran into this as well. It turns out that the path for the image loader is relative to the /page/ that the image is being displayed in - not the CSS file. I had to move this into a conditional comment on each page because I don't have all my pages in one directory, or even at the same level (so I couldn't consistently use ../location-of-image). Drove me nuts for a while too :-) Lori i am not sure i understand. do i have to move both the png and the blank gif into the same folder as my css file then? Jeff No. It's just that the path you specify in the filter has to work for all your pages. Let's say you have the following structure: /css/styles.css /images/logo.png index.html /pages/books.html Then, for the image to be loaded into your index.html page, the path would be images/logo.png - even though you are specifying this in the CSS file. But for books.html, the path would be ../images/logo.png. See what I mean? If you have all your pages in a directory, like pages, then you could set the path to ../images/logo.png and it will work for all your pages. If you have the index page at the root, like I show above, then perhaps you could use a conditional comment in just the index page to load the image. I used conditional comments in all my pages because I had several nesting levels. Go to http://beta.goethebooks.com and look at the source. You can also verify your syntax. Note: the site is a work in progress :-) Lori __ 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] ie6 png nightmare
No. It's just that the path you specify in the filter has to work for all your pages. Let's say you have the following structure: /css/styles.css /images/logo.png index.html /pages/books.html Then, for the image to be loaded into your index.html page, the path would be images/logo.png - even though you are specifying this in the CSS file. But for books.html, the path would be ../images/logo.png. See what I mean? If you have all your pages in a directory, like pages, then you could set the path to ../images/logo.png and it will work for all your pages. If you have the index page at the root, like I show above, then perhaps you could use a conditional comment in just the index page to load the image. I used conditional comments in all my pages because I had several nesting levels. Go to http://beta.goethebooks.com and look at the source. You can also verify your syntax. Note: the site is a work in progress :-) Lori thanks. i like how you have done that. i am going to have to look at this more later but i suspect there is something wrong with my syntax as well. Thanks again! Jeff __ 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] Navigation being hidden in IE
Phil Turner wrote: The image boxes should be below the navigation in IE they are lying over the top An old IE 'float won't clear float' bug. Add... * html #leftimageboxone{ float: none; } ...after existing #leftimageboxone declarations. To cure header-problems in IE6, add... #header img { display: block; } #topimaged { margin-right: -3px; } ALSO need some help to push the footer below everything I've read a few tutorials on this but no success Delete the height on rightcolumn, or change it to... #rightcolumn { height: auto; } ...as good browsers won't let a container grow beyond declared height. http://www.philturner-uk.com/kruger/ Maybe a good idea *not* to use pixels for font-size and line-height, and *not* fix size on all containers..? regards Georg -- http://www.gunlaug.no __ 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] Navigation being hidden in IE
Thanks for the help Gunlaug The float is still not clearing shouldnt the navigation div push the image divs down? although the footer clears now :-) Thanks http://www.philturner-uk.com/kruger/ Phil Turner FREELANCE DESIGNER TEL: 0161 439 1669 Chartered Graphic Designer MCSD BA Hons [EMAIL PROTECTED] http://www.philturner-uk.com V I S I T M Y D E S I G N B L O G http://www.philturnerdesigner.blogspot.com/ NEW BOOK - YOUR PLANET NEEDS YOU http://www.yourplanetneedsyou.org __ 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] Styling ruby
Sitting on the bleeding edge here... I have to display ruby text for some chinese language learning modules. I've put up an experiment at http://www.paen.net/en/ruby.mv using the stylesheet from http://web.nickshanks.com/stylesheets/ruby.css (I will only be using simple ruby, so the rtc stuff has been stripped out). IE6: native support is adequate (I need to set lang correctly to fix fiont selection,) IE7: adequate but it is parsing the child selectors so I need to fix font size for rt but I am getting completely different wrong renderings in Firefox and Opera (Safari check, anyone?) Any ideas? Note: It doesn't validate: I haven't yet tackled the task of pummelling Miva into sniffing for IE and sending content as xml rather than text/html -- Richard Grevers, New Plymouth, New Zealand Hat 1: Development Engineer, Webfarm Ltd. Hat 2: Dramatic Design www.dramatic.co.nz Lost yet? http://www.lost.eu/3d33f __ 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] Styling ruby
On Apr 19, 2007, at 7:10 AM, Richard Grevers wrote: Sitting on the bleeding edge here... I have to display ruby text for some chinese language learning modules. I've put up an experiment at http://www.paen.net/en/ruby.mv using the stylesheet from http://web.nickshanks.com/stylesheets/ ruby.css (I will only be using simple ruby, so the rtc stuff has been stripped out). IE6: native support is adequate (I need to set lang correctly to fix fiont selection,) IE7: adequate but it is parsing the child selectors so I need to fix font size for rt but I am getting completely different wrong renderings in Firefox and Opera (Safari check, anyone?) Any ideas? Note: It doesn't validate: I haven't yet tackled the task of pummelling Miva into sniffing for IE and sending content as xml rather than text/html Ruby is not supported by anything but IE win32. There are some hacky ways to get it working in Gecko, using an extension; and you'll need xhtml (real one), not text/html. http://piro.sakura.ne.jp/xul/_rubysupport.html.en https://addons.mozilla.org/en-US/firefox/addon/1935 The stylesheet you linked to only contains part of the whole stylesheet needed to get it working: Here is the source: http://www.akatsukinishisu.net/itazuragaki/id/ruby_for_Mozilla_3 One more link from Google: http://annevankesteren.nl/2004/05/xhtml-ruby Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Height difficulty
Richard Brown wrote: Hi All On 16/04/07, Richard Brown [EMAIL PROTECTED] wrote: http://test.uzellacourtantiques.co.uk/category/ceramics/ http://test.uzellacourtantiques.co.uk/wp-content/themes/uzella/style.css Thank you to everyone for their advice. I think the site is now working. Could folks check this out for me please? Eleven captures: http://www.browsercam.com/public.aspx?proj_id=340780 ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Link menu - Background gap in FF]
The test page is at: http://tinyurl.com/2adrbd I put a ul li menu in a wrapper div and then tried to center that with auto margin in another div. It looks correct in IE7 but in Firefox 2.0 there is a 2px gap on each side where the background color isn't showing. What would be doing that and how could I get it to fill the background? I am using the following styles to try to control the navigation area: #navbar{width: 760px; background-color: #0A2F76; margin: 0 auto;} #menuwrapper{ margin: 0 auto; width: 756px;} The html for the menu is: div id=navbar div id=menuwrapper ul id=nav lia href=#Brain/a/li lia href=#Pain/a/li lia href=#Work Hardening/a/li lia href=#Other Services/a/li lia href=#Testimonial/a/li lia href=#Contact Us/a/li !--[if lte IE 6]style#nav a{height:1em;}#nav li{height:1em;}#nav ul li{float:left;clear:both;width:100%}/style![endif]-- !--[if IE 6]style#nav ul li{clear:none;}/style![endif]-- !--[if IE 7]style#nav a{zoom:100%;}#nav ul li{float:left;clear:both;width:100%;}/style![endif]-- /ul /div/div __ 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] Vailiation
Hello css-discuss, I'm familiar with W3W validation service. A lot of the time I'm working on a laptop and the Internet is not available to me. Does anybody know of a validator I can download (bought or free). -- Best regards, Arthur mailto:[EMAIL PROTECTED] __ 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 1-pixel bug
I have two divs, #nav (floated left) #content. They do not touch each other at all and have 0 margins padding, except for #content, which has a left margin 10px greater than the width of #nav. In IE 6 7, i'm seeing a 1-pixel or so shift to the right in the text that is inside #content where it runs beside #nav. That is, below the bottom of nav, the text correctly hugs the left side of #content. It's sort of like text wrapping around a float, but actually seems to be that a 1- or 2-pixel magical buffer is being created to the right of #nav. Any clues? You can see it in the following test case: http://www.zijn-digital.com/css-d/1-pixel-shift.html I know there are a bunch of 1-pixel bugs for IE--and i think i've seen this very one before--but i can't find anything about this particualr one. Both html (i tried both XHTML-Transitional and HTML 4.01 strict) CSS validate. 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/
Re: [css-d] IE 1-pixel bug
brian wrote: In IE 6 7, i'm seeing a 1-pixel or so shift to the right in the text that is inside #content where it runs beside #nav. That is, below the bottom of nav, the text correctly hugs the left side of #content. It's sort of like text wrapping around a float, but actually seems to be that a 1- or 2-pixel magical buffer is being created to the right of #nav. http://www.zijn-digital.com/css-d/1-pixel-shift.html brian I think it may be a win/IE 3px jog-- corrected in IE7.0 (I think). One fix is: /* Hides from IE5-mac \*/ * html #content {height: 1%;} /* End hide from IE5-mac */ Closed the gap for me in IE6.0 (local :: xp) See: http://www.communitymx.com/content/article.cfm?page=2cid=C37E0 Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/