Re: [css-d] Link Style Not Showing Up in IE
On Fri, Jan 7, 2011 at 11:00 PM, Gates, Jeff gat...@si.edu wrote: Here¹s a link to a sample page: http://americanartinvites.com/omeka/explore In the footer at the bottom I have two unordered lists to the right of the logos. (One is a set of links, the second will be links but aren¹t at the moment). I want the link color to be the same gray as the list to the right (#7d7d7d) but the style I've created isn¹t working at all. I don't see the problem, IE8 and IE7 render the footer links in #7d7d7d . Your HTML isn't valid http://validator.w3.org/check?uri=http://americanartinvites.com/omeka/explore The link element must be in the head element and ids can be used only once. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Right column drooping
On Sat, Jan 8, 2011 at 12:59 AM, Kim Brooks Wei kimi@kimbwei.com wrote:
Hi People,
I don't remember what will make my right column slide up to sit side by side
with the left one. What am I failing to do?
http://bit.ly/ad7AEl
You can try Tim's suggestion, or if you don't want to change the
markup, try this:
#copy {
margin: 0 0 2em;
padding: 1em 3em 0;
position: relative;
}
.rightcopy {
margin-left: 45%;
position: absolute;
top: 10em;
width: 45%;
}
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Javascript and CSS Strict?
On Sat, Jan 8, 2011 at 3:23 AM, Dagmar Noll dag...@wincog.org wrote:
1. The javascript is a dropdown menu you can see working here, before I did
a lot of tweaking:
http://www.theroute6hoprivercorridor.com/links.html
2. Here is the same page after I stripped it of most of its tables and
replaced with CSS:
http://www.theroute6hoprivercorridor.com/links_stripped.html
Note that the drop-down Towns menu no longer works in Firefox (it is fine
in IE).
The http://www.theroute6hoprivercorridor.com/javascript/towndropdown.js
should be changed to this (from line 4):
document.getElementById('contents').style.visibility=visible;
refer=false;
}
else {
document.getElementById('contents').style.visibility=hidden;
refer=true;
}
}
Note that you can have a similar menu using only CSS. See:
http://roughtech.com/t/dropdown.html
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @fontface
On my computer (ubuntu), there was absolutely no styling of any element on the page. It might have something to do with the CSS error? http://jigsaw.w3.org/css-validator/validator?uri=http://chelseacreekstudio.com/indexx.phpprofile=css3 ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @fontface
On Thu, Jan 6, 2011 at 8:34 PM, Rob Crowther robe...@boogdesign.com wrote: What happens if you take the @font-face rule out of the media query? I wonder if Gecko doesn't like that being nested? Rob Hmm, it works if the fall back font-families are removed. http://www.roughtech.com/t/indexx.php.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why the narrow gap between images?
On Thu, Jan 6, 2011 at 8:23 PM, Dagmar Noll dag...@wincog.org wrote:
The title and such were created by splitting up an image and putting it in a
table. When I switched to CSS, Firefox put a line in between all of the
stacked images.
By default, the bottom of images are aligned to the baseline. To align
the bottom of the image to the bottom of the line box, try this
img{vertical-align:bottom}
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stacked nav in IE7
On Thu, Jan 6, 2011 at 8:12 PM, Shanna Cramer sha...@korbyimagery.com wrote:
website: http://askhg.com/
css: http://askhg.com/wp-content/themes/askhg/style.css
How can I fix that nav in IE7?
Try this:
.menu a {display:block}
.menu .description{/*display:block*/}
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Browser hacks vs PHP vs JS for browser detection
On Thu, Jan 6, 2011 at 10:18 PM, Dougie McGilvray dougie.mcgilv...@googlemail.com wrote: Hi people, I just wondered if people had an opinion about the alternative of using hacks/conditional statements, php or js to account for browser variation? Whenever I need to target only IE, I use Conditional Comments. I have found that to be the most convenient method and it keeps my main CSS files valid and clear of hacks. It is extremely rare for me to need to target a specific non-IE browser. In those rare cases, I used Javascript object detection. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Child Selector and IE7
On Fri, Jan 7, 2011 at 7:57 AM, Del Wegener d...@delweg.com wrote:
Good Evening:
Please look at
http://www.alliedcorrosion.com/products/manufacturer_introduction.php
Click on List Test (top item on left menu)
You will see an ordered list with an unordered list inside each li
In FF, Opera and IE8, the numbered lines are bold and a color other than
black.
However, in IE7, everything is bold and not black.
Why? What is the fix?
Replace
ol li {font-weight:bold;font-size:120%;color:#71}
with
ol li {font-weight:bold;font-size:120%;color:#71}
ol li li {font-weight:normal;font-size:80%;color:black}
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] HTML, CSS, JavaScript: Model-View-Controller
On Thu, Jan 6, 2011 at 5:38 AM, Philip Taylor (Webmaster, Ret'd) p.tay...@rhul.ac.uk wrote: Whilst Gabriele's weblog citations were initially interesting, of late they have been coming so frequently I agree. Many of Gabriele's blog posts are about simple things like Styling a Form etc. These topics do not require discussion and, to me, are not particularly interesting. I'm sure a lot of list members have blogs or websites of their own, so this list would become extremely noisy if everyone sent a message for every post or update they made. However, some of Gabriele's blog posts on CSS3 did start informative discussions and it would be nice if he/she occasionally informed the list of those posts. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nav layout on a mac
On Mon, Jan 3, 2011 at 12:51 PM, David Laakso da...@chelseacreekstudio.com wrote: Careful. The horizontal scroll bar it will throw with + font-scaling will wreak havoc on land and sea as it shoots its way from here to Havana :-) . On my computer the menu doesn't break with font scaling but with zoom. Changing font size units and padding to ems didn't fix it. I don't know if it has something to do with the HTML errors: http://validator.w3.org/check?uri=http://www.applegateelements.com/ or the CSS error: http://jigsaw.w3.org/css-validator/validator?uri=http://www.applegateelements.com/ or the unusual structure of the menu (multiple ULs). ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nav layout on a mac
On Mon, Jan 3, 2011 at 3:44 PM, Alan Gresley a...@css-class.com wrote: And zooming is the only way to increase the text size in any browser. Internet Explorer has *two* options for increasing text size: Zoom and changing Text Size Firefox has Page Zoom and Zoom Text Only http://support.mozilla.com/en-US/kb/Page%20Zoom Firefox and Opera also have the option of setting a minimum font size. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nav layout on a mac
On Mon, Jan 3, 2011 at 5:36 AM, Matthew P. Johnson i...@ecoitsf.com wrote: I have the web site looking alright but I was at a friend house on NYE and notice the navigation was getting clipped on her Mac. If anyone has a Mac and you let me know what browser and OSv you are running if you have the clipping issue occurring? http://www.applegateelements.com/ I have fixed the problems with the page. Here are two slightly different versions: http://roughtech.com/t/apple.html http://roughtech.com/t/apple1.html Regards, ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] google hosted font question
On Mon, Jan 3, 2011 at 10:50 PM, Rory Bernstein r...@rorybernstein.com wrote: Can I get some feedback from the list about whether people are seeing the san-serif font in the nav (left column), Titillium or not? If it is not working on many browsers, then I have some big problems! http://lettershop.ehclients.com/visual_diary_archive Tittlum is visible in Firefox because it uses the WOFF file. Other browsers look for the OTF file and don't find it: http://lettershop.ehclients.com/fonts/TitilliumText22L006-webfont.otf Upload the otf file to your server and everything will be OK. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nav layout on a mac
On Tue, Jan 4, 2011 at 2:19 AM, David Laakso da...@chelseacreekstudio.com wrote: I have fixed the problems with the page. Here are two slightly different versions: http://roughtech.com/t/apple.html http://roughtech.com/t/apple1.html Hit the verticals and hold the horizontals or you'll need to scroll both horizontally and vertically to read the content text with font-scalling. No, take a closer look. With Zoom Text Only, http://roughtech.com/t/apple1.html doesn't get a horizontal scrollbar because the widths have been declared in px. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 7 vertical positioning issue
On Tue, Jan 4, 2011 at 1:25 AM, Carol Swinehart c...@ckfswebservices.com wrote: http://www.edheinleingermanconsultant.com/index3.php This is just an IE 7 problem so I thought of writing a new header for that and using browser detection but that didn't seem to work either. Apart from IE7, the page doesn't look OK in Firefox 3.6 and IE 8. There are a few HTML and CSS errors: http://validator.w3.org/check?uri=http://www.edheinleingermanconsultant.com/index3.php http://jigsaw.w3.org/css-validator/validator?uri=http://www.edheinleingermanconsultant.com/index3.phpprofile=css3 And there are some Javascript errors too. Those problems have to be fixed before tackling IE7. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] google hosted font question
http://lettershop.ehclients.com/visual_diary_archive My issue is that the font weight is heavier in the browser than it looked in our photoshop comp. Is there any way, using CSS, to get the font weight to look lighter (less bold)? Or do I just explain to the designer that the way text looks in photoshop is different from how it looks in a browser? Are you using the Mac Photoshop? If so, the issue might be because of Apple's approach to sub-pixel font smoothing -- see: http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html . I don't know how Photoshop renders fonts in Windows, I use GIMP on Linux. Btw, I think Neuton looks great. The issues described by Phillip are due to Windows' horrible rendering of @font-face embedded fonts. Windows XP, Vista and 7 do not correctly apply font smoothing to embedded fonts. The issue affects all browsers on the windows platform. Linux does not have this issue. One possible work around for this is to apply the proprietary Alpha image loader filter to elements that contain embedded fonts. However, this inconsistently works and it is only for IE. I don't think it is worth the effort. See: http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/ So for now, it looks like one has to just accept the fact that embedded fonts wont look good in Windows ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] google hosted font question
On Sun, Jan 2, 2011 at 6:09 PM, Philip Taylor (Webmaster, Ret'd) p.tay...@rhul.ac.uk wrote: Do you have a citation for this, Chetan ? I'd be interested to read more concerning this artifact of Windows. Apart from the link given earlier [1], I found two more articles that describe the issue: http://www.thebrightlines.com/2010/01/24/test-popular-professional-fonts-as-webfont/ http://www.thebrightlines.com/2010/03/18/font-rendering-in-ie9/ [1] http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/ @ Philippe Wittenbergh : I doubt that the issue has to do with the 'quality' of the fonts. The professional fonts tested by Thebrightlines.com also show the same problems with web embedding on Windows. Every font that I have embedded looked better in Linux. I have take four screenshots of two websites to illustrate the problem: http://roughtech.com/t/rendering.html Regards, ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] google hosted font question
On Sun, Jan 2, 2011 at 8:23 PM, Philippe Wittenbergh e...@l-c-n.com wrote: You're comparing apples and oranges. Windows (and XP especially) and Linux, or OS X. What you have to compare is font-rendering on the same platform for embedded vs native (installed) fonts. Few web designers have issues with Windows' font rendering of local fonts. It is only with embedded fonts that problems arise. The font used by David Laakso looks pretty decent on XP (it did so on my side when we were working on that site), the other one is indeed a real deal breaker - that confirms what I heard about those Google hosted fonts. Sure, on Windows, some embedded fonts render better than others. However, the problems are not due to poor quality of the fonts, but with the way Windows and IE handle them. That is probably why the issues don't occur in IE9 and FF beta 4 (according to http://www.thebrightlines.com/2010/03/18/font-rendering-in-ie9/ ). ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] google hosted font question
On Sun, Jan 2, 2011 at 8:59 PM, David Laakso da...@chelseacreekstudio.com wrote: Ditch Neuton. Go to Font Squirrel. http://www.fontsquirrel.com/ Download Calluna and install it. Go back to Font Squirrel and use their fontface generator [expert setting]. As David suggested, the Rory's only option is to choose a font that renders better in Windows. Just to clarify the situation a bit, Windows' embedded font rendering problems is not restricted to Windows XP and IE8. I have added screenshots of FF3.6 on Windows 7. The problems are exactly the same. Note that in Windows 7 and IE8 Clear Type is the default. This setting wasn't changed. See: http://roughtech.com/t/rendering.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] unable to over ride an li
On Sun, Jan 2, 2011 at 9:08 PM, Lisa Frost birdiefr...@gmail.com wrote: Its the donations link. It needs to be aligned right and be bigger in size. You need to float the last li, not the last a. And the text of the last menu item *is* larger than the rest. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] unable to over ride an li
Try this:
li id=lasta id=donations href=#DONATIONS/a/li
CSS: #container #mainmenu ul li#last {float:right;font-size:1.24em;}
~Chetan
On Sun, Jan 2, 2011 at 10:32 PM, Lisa Frost birdiefr...@gmail.com wrote:
Its the donations link.
It needs to be aligned right and be bigger in size.
You need to float the last li, not the last a. And the text of the
last menu item *is* larger than the rest.
~Chetan
Hi Chetan,
I still can't get it to float.
do i put float right in my ul li #donations declaration ?
This does not seem to work for me.
I tried using left padding which works in FF but the padding varies so much
in IE8 it throws it down onto a new line.
Lisa
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] unable to over ride an li
On Sun, Jan 2, 2011 at 10:46 PM, Chetan Crasta chetancra...@gmail.com wrote:
Try this:
li id=lasta id=donations href=#DONATIONS/a/li
CSS: #container #mainmenu ul li#last {float:right;font-size:1.24em;}
Correction:
CSS:
#container #mainmenu ul li#last {float:right;}
#mainmenu ul li#last #donations {font-size:1.24em;}
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] unable to over ride an li
On Sun, Jan 2, 2011 at 10:57 PM, Thierry Koblentz
thierry.koble...@gmail.com wrote:
Why going through so many elements? It can't be good regarding performance
and it increases specificity for no reason.
I'd go with a simple: #last {...}
Point accepted. In general, one should keep selectors as simple as
possible, with just as much specificity as one needs.
However, in this case, #last{...} does *not* work see:
http://roughtech.com/t/polar.html
The selector #mainmenu li has to be overridden.
Also, I personally prefer to prefix id selectors with the element
name. This makes it easier for me to read and understand a stylesheet,
I wont have to constantly refer to the html file. For example, I
prefer li#last over #last because at a later time I would know, with
one glance, that the id is on an li.
Another thought: Is #last really faster than #container #mainmenu ul
li#last ? It appears to me that the latter should be faster because
the browser does not have to traverse the entire DOM tree looking for
#last, it can just start from #container.
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] unable to over ride an li
On Mon, Jan 3, 2011 at 12:16 AM, Thierry Koblentz thierry.koble...@gmail.com wrote: That's if browsers were reading from left to right, but they actually do the opposite. That's right. Here are two articles that explain the process, that I found informative: http://code.google.com/speed/page-speed/docs/rendering.html https://developer.mozilla.org/en/Writing_Efficient_CSS Regards, ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nav layout on a mac
On Mon, Jan 3, 2011 at 5:36 AM, Matthew P. Johnson i...@ecoitsf.com wrote: http://www.applegateelements.com/ Change the div#menu's parent div's width to 57em. This will ensure that the menu doesn't break even when the text is zoomed in or the minimum font size is increased ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 and 7 help please
http://www.peredur.net/stella/template.php
The page is valid according to the w3c validator and renders correctly in
everything I've tried (FF, Opera, Chrome, IE8) except for IE6 and 7. IE6
isn't respecting the padding given to the links. IE7 isn't displaying the
menu at all!
ul#topnavlist li a {position:relative}
That is the hack that will fix the problem.
BTW, your page is not valid. The Crime, Cats etc sub-menu should be
within an li.
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 and 7 help please
Now I just have to sort out why IE7 and only IE7 seems to be having a
problem with the placeholder image. It's never straightforward, is it.
Many thanks, Chetan.
Happy to help.
Try the same hack:
#header img {position:relative;}
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble with Opacity / Nav Menu in IE
Sure, keep in mind this is not a production level site as of now, so I ask that anyone please be respectful in not sharing/using it beyond debugging/inspecting the HTML/CSS. https://www.moremagicpoints.com/ The page has a lot of errors like incorrect nesting of elements, nonstandard attributes etc. Always validate your html at validator.w3.org and your css at jigsaw.w3.org/css-validator . Also, keep in mind that a webpage is not only read by humans, but also by computers (search engine bots). A page that might look OK to a human might look horrible to a bot. This is why your HTML needs to be semantic if you value a good rank in search engines. Here is an example of how the page might be correctly coded: http://roughtech.com/t/magic.html Regards, ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A good site for font-face
I am looking for a good source of info on webfont embedding. Specifically, usage of @font-face, browser support, and support for font weight and style variants. Can anyone point me to a good online resource (or a few). http://destination-code.blogspot.com/2009/08/font-face-at-rule.html http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] conditional comments, extra style sheets and IE6
On Wed, Dec 29, 2010 at 1:48 PM, Lisa Frost birdiefr...@gmail.com wrote: For a conditional comment i need to link to an IE specific .css file right? Any HTML element (or text) can be put inside a conditional comment. Including style elements or link elements. Here is a brief summary of how conditional comments work: http://destination-code.blogspot.com/2010/09/internet-explorer-conditional-comments.html Regards, ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] parent selector
On Thu, Dec 30, 2010 at 4:38 AM, Jonas Geiregat jo...@geiregat.org wrote: div class=btnwrapper div class=btn... /div /div Is it possible to change the css of the .btnwrapper class when hovering over the .btn class ? I'm aware that it works the other way around when you're selecting the child element on a parent's hover But, what about selecting parent elements ? In CSS, you cannot select parent elements based on their child elements. You need javascript for that. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] body has a top-margin that I can not figure out
As German pointed out, the top margin of div#header is the cause. Since div#container does not have top padding or a top border, the top margin of its child (div#header) collapses through. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image layout question
2. how to align images from right to left instead of the default left to right? when photos are added to the beginning of the list the older photos move into position after new photo. I have a solution that *might* be of help: http://roughtech.com/t/picalign.html However, there are some limitations: The top-margin of the t1#div has to be manually specified to be equal to the total height of all the rows. The number of selectors on line 29 to 35 have to be equal to the expected number of rows. For example, if the maximum number of rows is 5, then there should be 5 selectors. Does not work in IE6. Perhaps someone can improve this design? ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] conditional comments, extra style sheets and IE6
The easiest way (in my experience) to trigger hasLayout is with the proprietary zoom:1 . You can put this declaration within a conditional comment so that your page will validate. For accurate IE6 testing, you can download MS's OS images and install them in VirtualPC or VirtualBox: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8efdisplaylang=en IETester is an app that makes IE testing easy. However, I have found it to be unstable and it doesn't support IE filters. http://www.my-debugbar.com/wiki/IETester/HomePage ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
@David and Felix: Thanks for the feedback.
I have fixed the issues mentioned. The IE7 issues mentioned by Felix
were due to an IE7 bug that is fixed with body{font-size:100%}. See:
http://roughtech.com/t/pcv1.html
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
Oops wrong link: http://roughtech.com/t/pcv.html
~Chetan
On Sat, Dec 25, 2010 at 6:54 PM, Chetan Crasta chetancra...@gmail.com wrote:
@David and Felix: Thanks for the feedback.
I have fixed the issues mentioned. The IE7 issues mentioned by Felix
were due to an IE7 bug that is fixed with body{font-size:100%}. See:
http://roughtech.com/t/pcv1.html
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
Or why not set an a to display block and have the logo be the bg of that a instead of the div? Wouldn't that mess up the nav in the div then? It is best to have the logo in an img element because the logo is not just decorative. Only decorative images should be backgrounds. A few suggestions about your design: Don't use nbsp; to create spacing. Use margins or padding. This keeps your design flexible and your html lean. The p element is only for paragraphs. Use ul or ol for lists and menus. Headings should be in hx elements. Use background-color instead of images for background color. Avoid using Flash. Flash can be used for videos, animations and for certain special uses. Use CSS and Javascript for everything else. It is more efficient and accessible. I have rebuilt your page with these principles in mind: http://roughtech.com/t/pcv.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
The link: http://roughtech.com/t/pcv.html On Sat, Dec 25, 2010 at 5:15 AM, Chetan Crasta chetancra...@gmail.com wrote: Or why not set an a to display block and have the logo be the bg of that a instead of the div? Wouldn't that mess up the nav in the div then? It is best to have the logo in an img element because the logo is not just decorative. Only decorative images should be backgrounds. A few suggestions about your design: Don't use nbsp; to create spacing. Use margins or padding. This keeps your design flexible and your html lean. The p element is only for paragraphs. Use ul or ol for lists and menus. Headings should be in hx elements. Use background-color instead of images for background color. Avoid using Flash. Flash can be used for videos, animations and for certain special uses. Use CSS and Javascript for everything else. It is more efficient and accessible. I have rebuilt your page with these principles in mind: http://roughtech.com/t/pcv.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
Is it possible for a div to be a link? I'm trying to make a logo, which is a background in a masthead, as a link. The masthead div also contains the horizontal nav. . http://ba-doyn.com/junk/link_test/ You'll see the outlined block in the upper left. I would like the block to have a link, but obviously no copy in there. Using display:block and 100% height and width, the whole div is clickable. This would also work if there was in image instead of the text. http://roughtech.com/t/pcv.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] safari glitch
http://ba-doyn.com/junk/ There was some deprecated html like the center tag and align=right etc. and some non-semantic html like br. I've made an example of how you can style the form with valid css and semantic html. http://roughtech.com/t/j.html BTW, the Yahoo tracking code is the cause of many of the validation errors. These can be fixed easily by closing the img tags, replacing language=Javascript with type=text/javascript etc. I have fixed the errors in the example page. Shame on you Yahoo! ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] safari glitch
Thanks so much. By why is there Yahoo stuff there? It wasn't there in the original was it? Man, I dislike messing with someone else's code, especially when they have been unresponsive. You are using Yahoo hosting for your site: go to http://ba-doyn.com/ and view the generated source (view source). You will see that the server automatically added some extra code *after* the closing html tag. This is the tracking/statistics code used by Yahoo hosting. If you want to continue to use yahoo tracking, disable the tracking option in your control panel and manually add the tracking javascript after fixing the errors. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] safari glitch
http://ba-doyn.com/junk/ There was some deprecated html like the center tag and align=right etc. and some non-semantic html like br. I've made an example of how you can style the form with valid css and semantic html. http://roughtech.com/t/j.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do I style links which are only a part of ul li?
Couldn't understand your description, but this page might have the information you need: http://reference.sitepoint.com/html/a ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do I style links which are only a part of ul li?
Here is a page with a phrase which is a link of which only a few words are styled as a link: http://roughtech.com/t/linktest.html You first need to put the words that should appear link links in a span. Then, you need to style a elements to look like normal text. Next, you make the spans that are nested within a elements to look like links. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] strange IEX behaviour
My website looks fine except in IEX where behaves strange: http://kunstomhetlijf.nl/res2/ The whole page is a mess. The CSS has got numerous errors and you have used tables for layout. I have rebuilt the page with valid and semantic code: http://roughtech.com/t/fusionticket.html http://roughtech.com/t/fusionticket_files/style.css ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] the box that clears float can't have margin?
The reason that the margin-top on the div#footer has no effect on the
floated div#content and div#side is floated boxes are not in the flow
and are therefore invisible to other block boxes.
You have three options to create the 10px gap:
div#content , div#side
{
margin-bottom:10px;
}
Or:
div#footer
{
position:relative;
top:10px;
}
Or you can float the div#wrapper and div#footer:
div#wrapper
{
float:left;
}
div#footer
{
float:left;
width:100%;
margin-top:10px;
}
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] the box that clears float can't have margin?
In other words, the '10px' value is overridden by the browser because it needs more than 10px of top margin to push the cleared element down far enough. If that were changed to, say, '1px' then you'd see the top margin in full force. I put a margin-top of 1px (and more) on div#footer, but did not see any effect. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] the box that clears float can't have margin?
I put a margin-top of 1px (and more) on div#footer, but did not see any effect. The margin-top had no effect because it was collapsing through div#wrapper. It worked after I put padding-top:1px on div#wrapper. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The CSS Position Property
It not that the spec disallowed it The spec did explicitly disallow it, see point number 2: http://www.w3.org/TR/2009/CR-CSS2-20090423/visuren.html#dis-pos-flo Absolutely positioned boxes are taken out of the normal flow The phrase taken out of the flow is used a bit loosely in the spec. Both absolutely positioned and floated elements are out of the flow, the difference being that floated elements are still visible to inline boxes. I'm not sure why the spec disallowed combining absolute positioning with floating, because it seems to be the only way an element could be stretched to the width or height of its auto-height containing element while being aligned to the left or right. http://roughtech.com/t/posit.html example 5 and 6. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The CSS Position Property
http://barneycarroll.com/floatAndPos.html Assigned float properties are computed, they just don't take effect. Firebug shows computed value of float as none on an element with position:absolute and float:left or float:right ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Box dropping down behind footer in IE7
Give div#inner_wrap a height of around 1100px. The testimonial is getting cutoff because the height of 1015px is insufficient. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height best-practices
I am hoping that someone might be able to point to a good source of info on proper use of min-height This is a good reference on min-height: http://reference.sitepoint.com/css/min-height ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The CSS Position Property
I thought this article could be of interest to this list: http://www.yuiblog.com/blog/2010/12/14/the-css-position-property/ I believe the article says that already. Check the first bullet point in the Things to remember about position:absolute. It says: For *any* 'absolute' or 'fixed' positioned element the computed value for display is block. Yes, I noticed this later. One point which I think is not mentioned in the article is: On absolutely and fixed positioned elements, the computed value of float is none, regardless of any float declarations. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The CSS Position Property
@Thierry: Happy to help. the element is taken out of flow, thus float is rendered impotent @Barney: It doesn't necessarily follow that because the element is out of the flow, float cannot work. If the spec hadn't disallowed it, it would be conceivable for position:absolute and float to be used together to get the combined effect of 5) and 6), that is: a stretched, right or left aligned element, with text or inline elements flowing around it. http://roughtech.com/t/posit.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The CSS Position Property
Sorry, here's the link: http://roughtech.com/t/posit.html ~C On Thu, Dec 16, 2010 at 12:58 PM, Chetan Crasta chetancra...@gmail.com wrote: @Thierry: Happy to help. the element is taken out of flow, thus float is rendered impotent @Barney: It doesn't necessarily follow that because the element is out of the flow, float cannot work. If the spec hadn't disallowed it, it would be conceivable for position:absolute and float to be used together to get the combined effect of 5) and 6), that is: a stretched, right or left aligned element, with text or inline elements flowing around it. http://roughtech.com/t/posit.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mac 10.4 opera/10.63 [1 + ec]
If you need simplicity at all costs, then your solution is great. If you want your markup to be semantic, thenul is the right choice. Kudos to Georg Sortun for this simple markup suggestion [on server]... re: http://chelseacreekstudio.com/fa/index.php Since it is simplicity you are after (and semantics be damned), I have simplified the markup even further: headerenglisha href=http://chelseacreekstudio.com/fa/es/;español/a p class=taglinePaintings by/p h1David Laakso/h1 /header http://roughtech.com/t/index1.php.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The CSS Position Property
I thought this article could be of interest to this list: http://www.yuiblog.com/blog/2010/12/14/the-css-position-property/ That's a nice informative summary of positioning. It would also be worthwhile mentioning that absolutely and fixed positioned inline elements can be sized with width and height declarations. http://roughtech.com/t/posit.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Block elements in links
I think Firefox, Opera and IE 8 show the correct behavior. An element with display:block that is within an inline element generates a block box within the context that it is in (the inline box). This can be seen when a span with a p has display:block and also in your third example with text outside the a. http://roughtech.com/t/list-display-testing.html Looks like you've found a bug in Webkit. ~Chetan On Mon, Dec 13, 2010 at 3:43 PM, Bobby Jack bobbykj...@yahoo.co.uk wrote: Hi all, I'm investigating an issue in Firefox relating to block display of an element within a link. Here's an example: http://www.fiveminuteargument.com/list-display-testing.html In Safari, a link containing a block element simply wraps that element. However, in Firefox, extra space is created before the nested block element. Does anyone know what the correct behaviour should be? Regards, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Block elements in links
1. div style=background-color: #ccc; display: list-item;a href=#span style=display: block;test/span/a/div Opera shows extra space on 2. but not on 1. Opera puts the extra space only if there is text before or after the a. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Block elements in links
Which version? I get the extra space, in that exact example, in Opera 10.60 Opera 10.63 Linux http://roughtech.com/t/list-display-testing.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Block elements in links
So it definitely looks as if we have a fairly minor bug in Opera, and a more significant bug in Firefox. If anyone's thinking of filing a bug or looking into this in more detail, I have some anecdotal evidence (from a third party) that the Firefox behaviour was not present in April, which might suggest a 3.6 regression, although take that with a large pinch of salt! If indeed this is a Firefox bug, then how come only IE8 shows the buggy behavior (not IE6 and IE7)? Of course - stupid of me to have missed that! I didn't notice that either. Opera bug. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image randomly showing in IE6 and IE7
Thanks, but this doesn't solve the problem. Image is still randomly showing/not showing :( Anything else I could try? Sorry about that. It worked when I applied zoom using the web developer tool. I noticed that div#rightbackground is empty and has a min-height of 854px. Did you try height: 854px ? Also, instead of having a separate div for the background image, why don't you put it in the body or div#container or div#view? You could use background: url(image.jpg) top right; ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image randomly showing in IE6 and IE7
Ok, I think it is fixed: http://roughtech.com/t/debannehome.html I put the background image in the div#container (look at the inline style). ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mac 10.4 opera/10.63
it seems to simplify the markup even a little further... Yes, your solution has less markup. However, the p element is for paragraphs. What you have is a list. Therefore using an unordered list would be semantically correct. If you need simplicity at all costs, then your solution is great. If you want your markup to be semantic, then ul is the right choice. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mac 10.4 opera/10.63
The language names are in two overflowed p elements that are within two floated divs. Then there is some absolute positioning etc. I think the approach is far too complicated. I have simplified the structure using an unordered list and display:inline. This may even fix the alignment issues that you had (I didn't notice any problems with the original). http://roughtech.com/t/index.php.html ~Chetan On Mon, Dec 13, 2010 at 8:11 AM, David Laakso da...@chelseacreekstudio.com wrote: Yet another trivial pursuit... At the very top of the page english/espanol and should share a common baseline [as should ingles/espanol]. Anyone spot the problem? markup http://chelseacreekstudio.com/fa/index.php css line number 19 through 55. http://chelseacreekstudio.com/fa/css/sisu.css Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make text bottom-align?
I have made an example of the design here: http://roughtech.com/t/testali.html It uses CSS only. It works in all modern browsers and IE6 and IE7. I have tested it with different fonts and font sizes. Using a table would not be appropriate. Tables are not for layout. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with dropdowns
Made a number of changes to the CSS. You can see the fixed page here: http://roughtech.com/t/dropdown.html The changes I made to the CSS can be seen here: http://roughtech.com/t/dropdown_files/dropdown.css I have commented the changes as my change. ~Chetan On Sat, Dec 11, 2010 at 12:09 PM, Brian Jones bdotjo...@gmail.com wrote: Hi, I'm working on this dropdown nav (http://www.bleusolutions.com/testing/dropdown.html) and I can't seem to get the text in sub menus to fit correctly. I also want to get the flyout menu to line up directly next to the dropdown menu. Any help would be greatly appreciated Thanks -- -bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make text bottom-align?
None taken :) Thanks for pointing that out. I have now given the div#headingsanddescription a min-width of 37em which should prevent overlapping at large font sizes. ~Chetan On Sat, Dec 11, 2010 at 4:05 PM, David Laakso da...@chelseacreekstudio.com wrote: On 12/11/10 5:10 AM, Chetan Crasta wrote: I have made an example of the design here: http://roughtech.com/t/testali.html ~Chetan No offense intended:-) but beware the cross-over with font-scaling. Best, ~d -- :: desktop and mobile :: http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with dropdowns
Found some more things that needed fixing. Fixed them now. ~Chetan On Sat, Dec 11, 2010 at 4:22 PM, Chetan Crasta chetancra...@gmail.com wrote: Made a number of changes to the CSS. You can see the fixed page here: http://roughtech.com/t/dropdown.html The changes I made to the CSS can be seen here: http://roughtech.com/t/dropdown_files/dropdown.css I have commented the changes as my change. ~Chetan On Sat, Dec 11, 2010 at 12:09 PM, Brian Jones bdotjo...@gmail.com wrote: Hi, I'm working on this dropdown nav (http://www.bleusolutions.com/testing/dropdown.html) and I can't seem to get the text in sub menus to fit correctly. I also want to get the flyout menu to line up directly next to the dropdown menu. Any help would be greatly appreciated Thanks -- -bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make text bottom-align?
That's nice I guess:-) . Have you considered that some of us are on a monitor wider than 1024? Yeah, people with monitors wider than 1024 shouldn't be maximizing their browsers. Kidding :) Then one should add a max-width of around 40em. Or one can just remove the max-width and give div#headingsanddescription a width of 40em. And before you say it; No, I have no consideration for those using IE6 which doesn't support max-width and min-width. They should just upgrade or use Google Chrome Frame :) ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make text bottom-align?
Kidding aside, one man's 1920 (16 laptop; 142 DPI) could easily be narrower than another's 1280 (19 desktop; 86 DPI). Designers really ought to quit thinking in px. Px sizes bear no predictable correlation to the physical world, and thus to legibility or appropriate line lengths. Agreed. Btw, the CSS spec takes into account the fact that monitors' pixel-densities differ. This is why, according to the spec, px is a relative length unit. One CSS px is 1/96th of an inch *on the display screen*. Sadly, Microsoft and all the other browser makers have ignored the spec. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with dropdowns
The (eg ulli ) is the symbol for child selector. It only selects child elements, not grand-child, great grand-child etc. Whereas the simple space eg( ul li ), called the descendant selector, selects all descendant elements -- grand-child, great grand-child etc. ~Chetan On Sat, Dec 11, 2010 at 8:47 PM, Brian Jones bdotjo...@gmail.com wrote: On Sat, Dec 11, 2010 at 5:52 AM, Chetan Crasta chetancra...@gmail.com wrote: Made a number of changes to the CSS. You can see the fixed page here: http://roughtech.com/t/dropdown.html The changes I made to the CSS can be seen here: http://roughtech.com/t/dropdown_files/dropdown.css I have commented the changes as my change. ~Chetan Thanks Cheatan. Good stuff. What does it mean when you use the less than symbol like this ul.dropdownlia -- -bdot There are only 10 kinds of people in this world. Those who understand binary and those who don't __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make text bottom-align?
@Jukka: Like I mentioned in my earlier email, I thoroughly tested the solution. I doubt there would be any problems integrating it with any kind of layout. Take a closer look at the solution, there is only one px declaration, for font size (in the container div). This was used for convenience only, it has no bearing on the flexibility of the design, ems can be used if needed. Not using tables for layout is not a religious matter. It has been about a decade since tables for layout have been deprecated. See http://en.wikipedia.org/wiki/Tableless_web_design ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make text bottom-align?
Not using tables for layout is not a religious matter. It has been about a decade since tables for layout have been deprecated. See http://en.wikipedia.org/wiki/Tableless_web_design While true, that's not stopped their use, or promotion: http://developer.apple.com/internet/webcontent/bestwebdev.html Wow! I never thought that the makers of Safari would have an article advocating tables for layout on their website! They had the good manners to say that one should try CSS first, though. :) Yeah, CSS is no magic bullet, but given the choice between hacking a layout table and hacking CSS, I'd go with CSS. No web archeology for me! :) ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image randomly showing in IE6 and IE7
You have to give div#rightbackground hasLayout. You can use the
proprietary zoom:1 to do this:
!--[if lte IE7]
style type=text/css
div#rightbackground
{
zoom:1;
}
/style
![endif]--
~Chetan
On Fri, Dec 10, 2010 at 5:23 PM, Albert van der Veen
albert.lijs...@xs4all.nl wrote:
Hi all,
Please have a look at this site: http://www.debanne.nl/
For some reason the large background photo on the right sometimes shows and
sometimes not in IE6 and IE7. There are different pictures on every page
which is accomplished by overruling the css with an extra style element in
the header (generated by the CMS):
styletype=text/css media=screen#rightbackground {
background-image:url(uploads/media/hp-foto-new.jpg); }/style
Any idea what causes this?
Thanks,
Albert
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] correct use of background-image
An image should be inserted as a background image only when it is purely decorative. If an image is part of the content, it should be inserted using the img element. Background images are ignored by search engines, they don't figure in search results. Also, background images are not accessible because they are ignored by screen readers. ~Chetan On Fri, Dec 10, 2010 at 10:04 PM, TriState Advantage, Kris Jacobson k...@tristateadvantage.com wrote: Recently I was studing a tutorial on taking an existing website and creating a seperate style sheet to make the site workable as a mobile site. In the tutorial you replace the existing header image with a smaller image using background-image selector in the css. What I am not clear about, is the original image would have to be placed on the original site using the background-image selector in css and not the html image tag? Studing this I am thinking all the original images on the site would have to be placed with the background-image tag so that the site could be adapted. Which would probably involve each image in a seperate div so that this would work. Am I interpeting this correctly? Is this proper use of the background-image tag? I have tried googling background-image and haven't come up with any answers. I read an article suggesting you start with building your site for a mobile site and then adding to it to create a desktop site but that is not always possible so I would like to figure out how to adapt a site. Any thoughts or suggestions on a better way to do this would be appreciated. Thank you Kris __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Mac OS X 10.4 Firefox/3.6.12
Didn't notice any H1 drop in Firefox 3.6.12 Ubuntu. ~Chetan On Wed, Dec 8, 2010 at 6:34 PM, David Laakso da...@chelseacreekstudio.com wrote: Greetings from Oaxaca, Mexico. re: http://chelseacreekstudio.com/fa/ When going back and forth from the index to an inside page note the h1 drop on all inside pages in Firefox/3.6.12. Current Safari, WebKit, Opera, SeaMonkey, Chrome, and IE/8 more or less get it right on this end What to do? Best, Dr Lakra -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Mac OS X 10.4 Firefox/3.6.12
That doesn't surprise me – Liberation Sans has a different aspect ration than Helvetica Neue. http://chelseacreekstudio.com/fa/css/sisu.css Actually, the font that is used is ProcionoRegular -- it is embedded using @font-face. One other possible reason for the difference in rendering across platforms could be the technique of font smoothing used. With embedded fonts, I find that the smoothing is superior in Ubuntu. In Windows XP - 7 the fonts are much more jagged. However, this could have something to do with the quality of the font, ie the hinting that is built in to it. Ubuntu just might be more tolerant of lower quality fonts. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 display problem
The ingallinks div contains a table. This is an incorrect use of tables. It also complicates matters. Use an unordered list with floated li elements instead. ~Chetan. On Wed, Dec 8, 2010 at 7:49 AM, Julie Holmes jhd...@gmail.com wrote: Hello, The following div class .ingallinks displays as I designed in IE8, FF, Safari, Chrome but not in IE7. Please see fixit folder: http://www.thechildrensstoreinc.com/fixit/ Do I need to set up a separate stylesheet for IE7 or is there a fix that won't bork out what I've done for all the other browsers? (I tried to use CSS to style these anchor links and had alignment problem, too). Thank you for your help, Julie __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] unable to hide div in IE7
The CSS seems to be ignored. Even !important didn't work. You can instead put the entire div within conditional comments like this: !--[if gte IE 8]!-- div id=sliderbox ... /div !--![endif]-- The sliderbox div will be visible to all browser except IE7 and below On Wed, Dec 8, 2010 at 10:53 PM, Debbie Campbell d...@redkitecreative.com wrote: I'm using conditional comments to hide the #sliderbox and/or .movingboxes-slider div near the bottom of this page in IE7, but it isn't working: http://www.adventurecamper.com/#slider1=4 What am I missing? Help greatly appreciated. -- Debbie Campbell www.redkitecreative.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with button position in Safari
You have to remove the float:right of the search button. Or you can try this:
#utility #search-form input.button
{
float:none;
}
~Chetan
On Wed, Dec 8, 2010 at 12:40 AM, Debbie Campbell
d...@redkitecreative.com wrote:
In Safari/Win (Safari/Mac too?) the search button at top right is not in the
right place, it should be directly right of the text input box:
http://www.adventurecamper.com/colorado-suv-and-van-rentals/
It's fine in IE, FF, Chrome, and Opera. Can someone help?
--
Debbie Campbell
www.redkitecreative.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Element a is little bigger than inner img
Try a class=tool style=padding:0;border:0;margin:0;display:block;height:100% href=# ~Chetan On Mon, Dec 6, 2010 at 10:29 PM, Yu-Hsuan Lai rainco...@gmail.com wrote: My HTML is : --- a class=tool style=padding:0;border:0;margin:0 href=# img height=100% src=img/next_page.png alt=next page / /a --- I think that a should fill up with img, but in fact, img is smaller than a. Like this:http://ppt.cc/RqlC Can I make them the same size? -- Lai, Yu-Hsuan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Element a is little bigger than inner img
Please provide a link to the page so that we can check the code. ~Chetan On Mon, Dec 6, 2010 at 10:51 PM, Yu-Hsuan Lai rainco...@gmail.com wrote: But... display:block will break my layout. If you consider my short link doubtful, see picasa:http://picasaweb.google.com/raincolee/UntitledAlbum#5547620075452991186 . On Tue, Dec 7, 2010 at 1:18 AM, Chetan Crasta chetancra...@gmail.com wrote: Try a class=tool style=padding:0;border:0;margin:0;display:block;height:100% href=# ~Chetan On Mon, Dec 6, 2010 at 10:29 PM, Yu-Hsuan Lai rainco...@gmail.com wrote: My HTML is : --- a class=tool style=padding:0;border:0;margin:0 href=# img height=100% src=img/next_page.png alt=next page / /a --- I think that a should fill up with img, but in fact, img is smaller than a. Like this:http://ppt.cc/RqlC Can I make them the same size? -- Lai, Yu-Hsuan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Lai, Yu-Hsuan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Element a is little bigger than inner img
Also try this: img src=img/next_page.png alt=next page / ~Chetan On Mon, Dec 6, 2010 at 10:58 PM, Chetan Crasta chetancra...@gmail.com wrote: Please provide a link to the page so that we can check the code. ~Chetan On Mon, Dec 6, 2010 at 10:51 PM, Yu-Hsuan Lai rainco...@gmail.com wrote: But... display:block will break my layout. If you consider my short link doubtful, see picasa:http://picasaweb.google.com/raincolee/UntitledAlbum#5547620075452991186 . On Tue, Dec 7, 2010 at 1:18 AM, Chetan Crasta chetancra...@gmail.com wrote: Try a class=tool style=padding:0;border:0;margin:0;display:block;height:100% href=# ~Chetan On Mon, Dec 6, 2010 at 10:29 PM, Yu-Hsuan Lai rainco...@gmail.com wrote: My HTML is : --- a class=tool style=padding:0;border:0;margin:0 href=# img height=100% src=img/next_page.png alt=next page / /a --- I think that a should fill up with img, but in fact, img is smaller than a. Like this:http://ppt.cc/RqlC Can I make them the same size? -- Lai, Yu-Hsuan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Lai, Yu-Hsuan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: hasLayout triggering best practice
I hate to point this out, but it would be unfortunate if those reading this thread consider this an example of good use of CSS and HTML: http://www.gunlaug.no/contents/wd_additions_36.html The page has 9 (yes 9!) wrapper or container divs that serve no semantic purpose. Not to mention the empty 'spacer' div, the 0-height hr element, the mixing of block and inline child elements in a div, the huge number of nbsp entities and using three periods instead of hellip . If there ever was a page design that could benefit from some structural Javascript, this would be it! ~Chetan On Sat, Dec 4, 2010 at 3:11 PM, G.Sørtun gunla...@c2i.net wrote: Too much back and forth based on assumptions in this thread, me thinks. What matters is that what gets released works reasonably well for all end-users no matter what, so I'll just add the following (old) article... http://www.gunlaug.no/contents/wd_additions_36.html ...where I'll especially point to the *visitors' privilege* section and the linked-in examples in same section, and leave it at that. regards Georg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: hasLayout triggering best practice
@Barney: I didn't say that the script would automatically identify those elements that require hasLayout. I don't think such a script exists. I've made two example webpages which require zoom to work in IE7: one with zoom:1 applied using CSS and the other with zoom applied with javascript. roughtech.com/t/example.html and roughtech.com/t/example1.html The rendering delay, which is in the order of microseconds, is almost undetectable. The advantage of this technique is that the stylesheet contains only valid CSS. @Georg: The hellip is converted to three periods in Firefox 3.6's View Source and in Firebug. This looks like a bug in the browser. After reading your explanation I still don't think the huge amount of non-semantic code is justified. Sure you're site might work perfectly in Internet Explorer 3 running on Windows 95 with a Pentium 200 Mhz and a 14.4 kbps modem, but does anybody care? Why burden search engine bots and normal users with cruft that shouldn't have got past the 90s? ~Chetan On Sat, Dec 4, 2010 at 4:35 PM, Barney Carroll barney.carr...@gmail.com wrote: Chetan, you contradict yourself. On the one hand, you say that you apply hasLayout via script (I'm still interested in when you apply it — every method I can think of involves a delay between initial render and application of the fix — meaning your sites would have a visual flicker of unfixed layout — not an issue with the other methods), then on the other hand you say that you apply non-semantic markup and classes via script as well — and any hook that identified elements needing hasLayout would have to be non-semantic as it relates to a render-agent-specific bug — so what purely scripted method do you use to identify which elements need the fix? Again, I'd be very interested to see the full working script for this; or the revelation that the method is in fact 100% ill-conceived idle theory ;) Sent from my iPod On 4 Dec 2010, at 07:16, Chetan Crasta chetancra...@gmail.com wrote: @David: I think it is established, with reasonable accuracy, that a very small percentage (~1%) of surfers block Javascript. If somebody wants to make sure that their site looks absolutely perfect to the 12 people that surf using Internet Explorer 6 with a Javascript blocking proxy wearing tin-foil hats, that's their choice -- hats off to them. As for me, I believe my energy is better spent making my webpages work well for 99% of my sites visitors. ~Chetan On Sat, Dec 4, 2010 at 12:01 PM, david gn...@hawaii.rr.com wrote: Chetan Crasta wrote: Javascript can considerably improve the aesthetics, Not for a site that's properly-designed in the first place. usability That is one point where JS can provide functionality. and semantics of a site, JS should have NOTHING TO DO WITH THE SEMANTICS of a site. That should be in the HTML where it belongs, NOT IN JS. so it would be a pity if one disables it just to avoid the odd bad apple. There's a hell of a lot of bad apples out there - tons of malicious sites, scammers even cracking into supposedly-trustworthy services like akamai.net and planting attacks. So it's not the odd bad apple. I never had to disable Javascript because good content is found on well-designed sites. The sites with the ugly Javascript are the ones that I wouldn't visit more than once, with or without Javascript. I've been on a number of sites where I had to disable their CSS so I could read their content. Sadly, a number of those sites were the home pages of web design firms! ~Chetan On Sat, Dec 4, 2010 at 1:03 AM, Christie Mason cma...@managersforum.com wrote: From: Chetan Crasta About 1% of Yahoo's visitors had Javascript disabled (2% for Yahoo USA) [-CM-] % of Yahoo visitors disabling js canNOT be used to extrapolate % of all web users disabling js. I haven't visited Yahoo in years and I'm sure that's true of a large % of web users. I also suspect that the type of visitor who would disable js is not the type of visitor that is attracted to Yahoo. Then there's information buried in the comments at http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javas cript-disabled/ that Yahoo redirects mobile users to a different page, so that also skews the results. Within my group of contacts, about 30% block JavaScript all the time, probably another 10%+ block js some of the time. You'd have to dig into what % of your target market is also Yahoo visitors and only if that is a large percentage should Yahoo visitors be used an indicator for % of your site's visitors will have js disabled. Web visitors are not homogeneous. But that's not all you should consider. Nothing on the web stays the same. All it will take is another widespread js security problem then % of visitors disabling js would increase. Or maybe another popular mobile device will ship with js disabled as default, or a browser with js disabled as a default
Re: [css-d] crashing redmond
Looks ok in IE8 on Windows 7, IE8 compatibility view on Win 7 , IE7 on Windows XP (MS VHD image) , IE6 standalone by evolt on Winxp . In IE6 the site has a very simple layout, which I suppose is by design. ~Chetan On Sat, Dec 4, 2010 at 7:28 PM, David Laakso da...@chelseacreekstudio.com wrote: Signature link crashes IETester 6/7/8 on Mac OS X 10.4 running Parallels XP. I find this delightful and rather amusing:-) . Checks on native boxes appreciated. Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: hasLayout triggering best practice
I think this article is relevant to this discussion:
http://meyerweb.com/eric/thoughts/2008/10/22/javascript-will-save-us-all/
I agree with it completely.
~Chetan
On Sat, Dec 4, 2010 at 7:47 PM, Alan Gresley a...@css-class.com wrote:
On 4/12/2010 9:38 PM, Chetan Crasta wrote:
I hate to point this out, but it would be unfortunate if those reading
this thread consider this an example of good use of CSS and HTML:
http://www.gunlaug.no/contents/wd_additions_36.html
The page has 9 (yes 9!) wrapper or container divs that serve no
semantic purpose.
Hello Chetan.
Those wrappers are there to help IE6 and IE7 along. The design / structure
works well over a large spectrum of viewport width. Those who argue over the
use of non semantics divs would also be arguing over resets,
non-consequential selectors strings.
#wrapper #content .two-columns p.special {...}
At least we can all have our own individuality while arguing over *CSS*. Odd
how JS only came into this thread after someone mentioned that zoom: 1 can
be applied with JS.
Not to mention the empty 'spacer' div, the 0-height
hr element, the mixing of block and inline child elements in a div,
the huge number ofnbsp entities and using three periods instead of
hellip .
Must check. I bet that if I copied the code and used a xml or xhtml
extension, it would still be valid.
If there ever was a page design that could benefit from some
structural Javascript, this would be it!
~Chetan
Did you just say benefit? Sorry but cool CSS just make JS look silly (works
nice in Safari).
http://css-class.com/test/demos/thumbgallery-transition2.htm
Since I follow the development of CSS specifications, I can assure you that
the above demo only show a little of how CSS will make JS redundant for
style and structure, leaving JS for behavior only.
The initial poster asked quite an importance question about hasLayout
triggering best practice. They asked this on a CSS list since they wanted
CSS solutions about buggy CSS behavior by IE7 or earlier versions of IE.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] does anyone know of...
A CSS-only lightbox will have many limitations. You cannot have the same functionality as the example you gave, with only CSS2. However, here is one good implementation of a css-only lightbox http://www.cssplay.co.uk/menu/lightbox-hover.html ~Chetan On Fri, Dec 3, 2010 at 6:40 AM, Matthew P. Johnson i...@ecoitsf.com wrote: A css lightbox/shadowbox I can put a photo thumbnail gallery in? Essentially a web page with applicable code. Such a gallery like the one in the following link: http://applegateelements.com/new/lightweight%20image%20gallery.shtml Sincerely, Matthew P. Johnson | Eco I.T. 708 Bay Road Mill Valley CA 94941 | 415.254.1563 | http://ecoitsf.com/ ecoitsf.com P Please consider the environment before printing this email. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] does anyone know of...
Here is another one http://www.cssplay.co.uk/menu/gallery.html ~Chetan On Fri, Dec 3, 2010 at 2:22 PM, Chetan Crasta chetancra...@gmail.com wrote: A CSS-only lightbox will have many limitations. You cannot have the same functionality as the example you gave, with only CSS2. However, here is one good implementation of a css-only lightbox http://www.cssplay.co.uk/menu/lightbox-hover.html ~Chetan On Fri, Dec 3, 2010 at 6:40 AM, Matthew P. Johnson i...@ecoitsf.com wrote: A css lightbox/shadowbox I can put a photo thumbnail gallery in? Essentially a web page with applicable code. Such a gallery like the one in the following link: http://applegateelements.com/new/lightweight%20image%20gallery.shtml Sincerely, Matthew P. Johnson | Eco I.T. 708 Bay Road Mill Valley CA 94941 | 415.254.1563 | http://ecoitsf.com/ ecoitsf.com P Please consider the environment before printing this email. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] does anyone know of...
I stand corrected. Here is a CSS-only lightbox, similar to your example, that works through ingenious use of the object element (iframe for IE): http://www.cssplay.co.uk/menu/object-gallery.html Amazing! ~Chetan On Fri, Dec 3, 2010 at 2:28 PM, Chetan Crasta chetancra...@gmail.com wrote: Here is another one http://www.cssplay.co.uk/menu/gallery.html ~Chetan On Fri, Dec 3, 2010 at 2:22 PM, Chetan Crasta chetancra...@gmail.com wrote: A CSS-only lightbox will have many limitations. You cannot have the same functionality as the example you gave, with only CSS2. However, here is one good implementation of a css-only lightbox http://www.cssplay.co.uk/menu/lightbox-hover.html ~Chetan On Fri, Dec 3, 2010 at 6:40 AM, Matthew P. Johnson i...@ecoitsf.com wrote: A css lightbox/shadowbox I can put a photo thumbnail gallery in? Essentially a web page with applicable code. Such a gallery like the one in the following link: http://applegateelements.com/new/lightweight%20image%20gallery.shtml Sincerely, Matthew P. Johnson | Eco I.T. 708 Bay Road Mill Valley CA 94941 | 415.254.1563 | http://ecoitsf.com/ ecoitsf.com P Please consider the environment before printing this email. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: does anyone know of...
@Thierry: All valid criticisms. However, when one wants to do anything fancy with plain HTML and CSS2, it is often at the cost of semantic correctness. On Fri, Dec 3, 2010 at 9:35 PM, Thierry Koblentz n...@tjkdesign.com wrote: A CSS-only lightbox will have many limitations. You cannot have the same functionality as the example you gave, with only CSS2. However, here is one good implementation of a css-only lightbox http://www.cssplay.co.uk/menu/lightbox-hover.html fwiw, I would not call this solution a good implementation. It is not keyboard accessible, it loads all the assets at once (versus on request), and wrap four block-level elements in each anchor (not a problem in HTML5 I believe). -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hasLayout triggering best practice
If having valid stylesheets is important, one could simply apply zoom using javascript: object.style.zoom=1; ~C On Fri, Dec 3, 2010 at 10:13 PM, Thierry Koblentz n...@tjkdesign.com wrote: Hi Georg, Myself, I use any property/value that gets the job done, whenever I need to trigger hasLayout. Loss of validity because of proprietary IE CSS isn't more problematic than use of some mos-, webkit- or o- proprietary CSS ... IMO. I do not care much about CSS validation, but I see a difference between using a proprietary property like zoom and using vendor-specific extensions [1]. Because these are part of the grammar, they are known to the CSS parser: '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name But I agree with you, I don't see this as problematic. [1] http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: hasLayout triggering best practice
I couldn't guess why presentational javascript is a bad thing, so I did a quick search and I found two articles that appear to address the issue: http://www.bobbyvandersluis.com/articles/presentational_javascript/index.html http://www.digital-web.com/articles/separating_behavior_and_structure_2/ From the articles, it appears that the only disadvantages are: People who surf with Javascript disabled won't see the page as the designer intended; It may be difficult to modify the design of a page when the presentation is handled by both CSS and Javascript. These don't seem to be huge disadvantages: I can't think of a good reason to surf with Javascript disabled. Also, since the majority of sites use some Javascript, one should expect some problems if one disables it. The second problem concerns only developers. Good documentation and project management should mitigate it. ~C On Fri, Dec 3, 2010 at 10:30 PM, Thierry Koblentz n...@tjkdesign.com wrote: If having valid stylesheets is important, one could simply apply zoom using javascript: object.style.zoom=1; But then your presentational layer is bound to the behavior layer :-( -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: hasLayout triggering best practice
The statistics provided by Nicholas Zakas are interesting! http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/ About 1% of Yahoo's visitors had Javascript disabled (2% for Yahoo USA). So I guess the decision whether to use presentational Javascript or not depends on how much one is willing to work to cater to 1% of a site's visitors. It is a lot like deciding whether to support IE6 or not. ~Chetan On Sat, Dec 4, 2010 at 12:22 AM, Thierry Koblentz n...@tjkdesign.com wrote: These don't seem to be huge disadvantages: I can't think of a good reason to surf with Javascript disabled. According to a recent blog post from Nicholas Zakas (Yahoo!) about 2% of users browse the web without JS. As a side note, I don't think it is always their choice. Also, since the majority of sites use some Javascript, one should expect some problems if one disables it. fwiw, I don't agree, if the page is built with progressive enhancement in mind, there should be no problem. The page may look less sexy, but there should be no problem per se. And the first step toward progressive enhancement is to respect the separation of the three layers. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: hasLayout triggering best practice
@Christie: It is true that Yahoo's stats cannot be extrapolated to the whole Internet. Unfortunately it appears that these are the only stats available. Javascript can considerably improve the aesthetics, usability and semantics of a site, so it would be a pity if one disables it just to avoid the odd bad apple. I never had to disable Javascript because good content is found on well-designed sites. The sites with the ugly Javascript are the ones that I wouldn't visit more than once, with or without Javascript. ~Chetan On Sat, Dec 4, 2010 at 1:03 AM, Christie Mason cma...@managersforum.com wrote: From: Chetan Crasta About 1% of Yahoo's visitors had Javascript disabled (2% for Yahoo USA) [-CM-] % of Yahoo visitors disabling js canNOT be used to extrapolate % of all web users disabling js. I haven't visited Yahoo in years and I'm sure that's true of a large % of web users. I also suspect that the type of visitor who would disable js is not the type of visitor that is attracted to Yahoo. Then there's information buried in the comments at http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javas cript-disabled/ that Yahoo redirects mobile users to a different page, so that also skews the results. Within my group of contacts, about 30% block JavaScript all the time, probably another 10%+ block js some of the time. You'd have to dig into what % of your target market is also Yahoo visitors and only if that is a large percentage should Yahoo visitors be used an indicator for % of your site's visitors will have js disabled. Web visitors are not homogeneous. But that's not all you should consider. Nothing on the web stays the same. All it will take is another widespread js security problem then % of visitors disabling js would increase. Or maybe another popular mobile device will ship with js disabled as default, or a browser with js disabled as a default, or who knows? Christie Mason __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: hasLayout triggering best practice
@David: I think it is established, with reasonable accuracy, that a very small percentage (~1%) of surfers block Javascript. If somebody wants to make sure that their site looks absolutely perfect to the 12 people that surf using Internet Explorer 6 with a Javascript blocking proxy wearing tin-foil hats, that's their choice -- hats off to them. As for me, I believe my energy is better spent making my webpages work well for 99% of my sites visitors. ~Chetan On Sat, Dec 4, 2010 at 12:01 PM, david gn...@hawaii.rr.com wrote: Chetan Crasta wrote: Javascript can considerably improve the aesthetics, Not for a site that's properly-designed in the first place. usability That is one point where JS can provide functionality. and semantics of a site, JS should have NOTHING TO DO WITH THE SEMANTICS of a site. That should be in the HTML where it belongs, NOT IN JS. so it would be a pity if one disables it just to avoid the odd bad apple. There's a hell of a lot of bad apples out there - tons of malicious sites, scammers even cracking into supposedly-trustworthy services like akamai.net and planting attacks. So it's not the odd bad apple. I never had to disable Javascript because good content is found on well-designed sites. The sites with the ugly Javascript are the ones that I wouldn't visit more than once, with or without Javascript. I've been on a number of sites where I had to disable their CSS so I could read their content. Sadly, a number of those sites were the home pages of web design firms! ~Chetan On Sat, Dec 4, 2010 at 1:03 AM, Christie Mason cma...@managersforum.com wrote: From: Chetan Crasta About 1% of Yahoo's visitors had Javascript disabled (2% for Yahoo USA) [-CM-] % of Yahoo visitors disabling js canNOT be used to extrapolate % of all web users disabling js. I haven't visited Yahoo in years and I'm sure that's true of a large % of web users. I also suspect that the type of visitor who would disable js is not the type of visitor that is attracted to Yahoo. Then there's information buried in the comments at http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javas cript-disabled/ that Yahoo redirects mobile users to a different page, so that also skews the results. Within my group of contacts, about 30% block JavaScript all the time, probably another 10%+ block js some of the time. You'd have to dig into what % of your target market is also Yahoo visitors and only if that is a large percentage should Yahoo visitors be used an indicator for % of your site's visitors will have js disabled. Web visitors are not homogeneous. But that's not all you should consider. Nothing on the web stays the same. All it will take is another widespread js security problem then % of visitors disabling js would increase. Or maybe another popular mobile device will ship with js disabled as default, or a browser with js disabled as a default, or who knows? Christie Mason -- David gn...@hawaii.rr.com authenticity, honesty, community __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Re: hasLayout triggering best practice
@David: Javascript can improve the semantic-correctness of a site. There are many CSS design patterns that use divs and spans as 'hooks' to apply CSS. These divs and spans don't serve any semantic purpose. Using Javascript to add these extra divs keeps the HTML clean and semantic. ~Chetan On Sat, Dec 4, 2010 at 12:46 PM, Chetan Crasta chetancra...@gmail.com wrote: @David: I think it is established, with reasonable accuracy, that a very small percentage (~1%) of surfers block Javascript. If somebody wants to make sure that their site looks absolutely perfect to the 12 people that surf using Internet Explorer 6 with a Javascript blocking proxy wearing tin-foil hats, that's their choice -- hats off to them. As for me, I believe my energy is better spent making my webpages work well for 99% of my sites visitors. ~Chetan On Sat, Dec 4, 2010 at 12:01 PM, david gn...@hawaii.rr.com wrote: Chetan Crasta wrote: Javascript can considerably improve the aesthetics, Not for a site that's properly-designed in the first place. usability That is one point where JS can provide functionality. and semantics of a site, JS should have NOTHING TO DO WITH THE SEMANTICS of a site. That should be in the HTML where it belongs, NOT IN JS. so it would be a pity if one disables it just to avoid the odd bad apple. There's a hell of a lot of bad apples out there - tons of malicious sites, scammers even cracking into supposedly-trustworthy services like akamai.net and planting attacks. So it's not the odd bad apple. I never had to disable Javascript because good content is found on well-designed sites. The sites with the ugly Javascript are the ones that I wouldn't visit more than once, with or without Javascript. I've been on a number of sites where I had to disable their CSS so I could read their content. Sadly, a number of those sites were the home pages of web design firms! ~Chetan On Sat, Dec 4, 2010 at 1:03 AM, Christie Mason cma...@managersforum.com wrote: From: Chetan Crasta About 1% of Yahoo's visitors had Javascript disabled (2% for Yahoo USA) [-CM-] % of Yahoo visitors disabling js canNOT be used to extrapolate % of all web users disabling js. I haven't visited Yahoo in years and I'm sure that's true of a large % of web users. I also suspect that the type of visitor who would disable js is not the type of visitor that is attracted to Yahoo. Then there's information buried in the comments at http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javas cript-disabled/ that Yahoo redirects mobile users to a different page, so that also skews the results. Within my group of contacts, about 30% block JavaScript all the time, probably another 10%+ block js some of the time. You'd have to dig into what % of your target market is also Yahoo visitors and only if that is a large percentage should Yahoo visitors be used an indicator for % of your site's visitors will have js disabled. Web visitors are not homogeneous. But that's not all you should consider. Nothing on the web stays the same. All it will take is another widespread js security problem then % of visitors disabling js would increase. Or maybe another popular mobile device will ship with js disabled as default, or a browser with js disabled as a default, or who knows? Christie Mason -- David gn...@hawaii.rr.com authenticity, honesty, community __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Outlook 2007 and DL/DD tag
Here is a detailed article on creating HTML emails: http://articles.sitepoint.com/article/code-html-email-newsletters On Thu, Dec 2, 2010 at 1:53 AM, Bobby Jack bobbykj...@yahoo.co.uk wrote: --- On Wed, 12/1/10, Albert van der Veen albert.lijs...@xs4all.nl wrote: I'm setting up an HTML newsletter and come across a problem in Outlook 2007 on Windows. This is an excellent resource for information on cross-email-client support for HTML: http://www.email-standards.org/ In fact, there's a mention of poor support for margin/padding in outlook 2007: http://www.email-standards.org/clients/microsoft-outlook-2007/ and an example of no margin support which looks very like what you're seeing: http://www.email-standards.org/samples/#margin As already mentioned, HTML emails are horrible to work with; however much it pains you, you're actually better off using tables for layout and just coming to terms with this through gritted teeth. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
