[css-d] Best practices for ipad, iphone detection.
Hello, I was hoping to get a reference link to an article or other content on the best practices for detecting ipad, iphone, and other smart devices. I have seen some very good solutions pass by on the list. But, now that I need them in a serious way, I'm having difficulty locating them in the archives. Hoping someone can help out. Regards, Claude __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Best practices for ipad, iphone detection.
On Wed, Oct 12, 2011 at 12:24 PM, David Laakso da...@chelseacreekstudio.com wrote: We're off-topic with this on a list devoted to the practical application of CSS... But anyway, see some of the links in the CSS and Mobile Devices section of this page: http://chelseacreekstudio.com/site/resources/index.php viewport meta tags http://davidbcalhoun.com/2010/viewport-metatag Bruce Lawson:mobile-web-optimization http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/ Google subject line: detecting ipad, iphone, and other smart ~d Thanks for the many references. I have started to go through them. And to my delight several are the very articles I was hoping to find again. However, I don't quite understand the idea that this is off-topic. My immediate application for hacking the css to somehow recognize the device is so that I can modify a fixed height div. In desktop systems (mouse-ish) the fixed height div with vertical scroll works fine for my needs. But in ipad, etc. the div has no scroll bar and appears to require the not well known two finger swipe to scroll within the div. My dream was to find a hack that would let me modify the css for this div so that height restrictions and scroll could be removed for those devices. And if at all possible, I was hoping it could be fully css without recourse to javascript or the ilk. Hopefully modifying my css to accommodate different devices is not off-topic. But then again, I could easily have misunderstood your comment. Best Regards, Claude __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hidden HRs
On Tue, Aug 23, 2011 at 9:47 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote:
23.8.2011 19:30, Philip TAYLOR (Webmaster, Ret'd) wrote:
But now you gave me an excuse to jump in, because I don't think the trick is
particularly clever - it's not reliable, as it requires pixel-exact
settings, and it is difficult to maintain (people tend to forget tricks they
have used). It would probably be more robust to use a background image that
consists of a horizontal line, positioning it suitably using the em unit, so
that the position gets adjusted by font size. What I mean is
pspan.../span/p, with such background set on the p and with
suitable padding (and solid color background) on the span.
I thought the lines were a fun idea.
But, also had some misgivings about how robust this particular solution was.
I've tried the following and found it fairly stable in the half-dozen
browsers I tested it in. I live in a zero bar geography so no mobile
tests at the moment.
h2 {
border-bottom: 2px solid #00;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
h2 span {
position: relative;
top: .45em;
border-bottom: none;
background: #ff;
padding-left: 1em;
padding-right: 1em;
}
Regards,
Claude Needham
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 'Margin' above bullets
On Thu, Aug 11, 2011 at 7:35 AM, Tim Climis tim.cli...@gmail.com wrote:
The 2nd paragraph (The principal areas ... ) has had a 0 margin
applied, but still displays a gap.
Because that's an OL (not a UL). The CSS isn't selecting them. You
can edit it like this:
p { margin-bottom: 0}
p + ul, p + ol { margin-top: 0}
p + ul + li, p + ol + li {margin-top: 0}
---Tim
I've been meaning to ask, how robust is the cross-browser
compatibility of the + feature?
Your solution above is a good one. But, I have limited experience with
whether or not there are cross-browser issues with this. Can I expect
all browsers to properly work with this?
Regards,
Claude
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [OT] Why no HTML
On Tue, Jul 19, 2011 at 8:36 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: gmail + html emails + iphone mail.app = hard to read I wish gmail had an option to strip HTML from all incoming e-mails. Sorry to contribute to this OT thread... :: crawls back into hole :: I've seen the screen under those circumstance. Definitely hard to read. On a different note. I'm lazy. Very lazy. I like being able to insert sample html and sample css into an email without doing anything special. But, I'm even lazier than that. I also appreciate not being forced to take extra precautions to deal with possible hidden links, exploits, and who knows what. There is no who knows what you say. Well, in html email I'm not so sure. In asci email I'm 100% sure. I've never had an asci email download a 1pixel tracking image. Besides, it might be embarrassing to send an html/css reply to a list with such notable designers. My poor little reply might have fonts out of play and god knows what :) Regards, Claude Needham __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why are the properties disappearing?
On Mon, Jul 18, 2011 at 8:38 AM, onno de jong o...@circularcreation.com wrote:
In the following example: http://circularcreation.com/sprites.html I've
created a single image rollover using a sprite, but when I duplicate that
(3x) and give each link a different id and then update the coordinates, the
other three do not show up. In firebug, it shows the background properties of
the other three are missing from the CSS, and in Chrome, Inspect Element,
they are crossed out. What error causes that? It has to be obvious but I
guess I'm too tired to see it at the moment. Thanks for any help.
odej
When I used the Firefox save page as feature to create a local copy
for testing purposes, I noticed the following in the html file
#navi-1 a:link {
width:102px;
height:102px;
display:block;
background:url('images/sprite-example.png') no-repeat -24px -43px;
}
#navi-2 a:link {
width:103px;
height:103px;
display:block;
background:url('images/sprite-example.png') no-repeat -24px −181px;
}
Somehow what looks like - is not really a minus sign as far as
Firefox is concerned.
Fix that and this should all work out much better.
Regards,
Claude Needham
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Logo in a div
On Mon, Jul 18, 2011 at 11:00 AM, Brian M. Curran br...@draftingservices.com wrote: Hello, Why does www.seobook.com put his logo in a div? It seems like its' only purpose is to hold the code class=logo. Wouldn't it have been easier to put the class=logo in the img tag like how I did on my site: www.draftingservices.com ? For myself, I find that using an enclosing div rather than the raw img makes it that much easier to extend the layout with background or text elements. Personal preference I suppose. But often I will do things that might not make sense in the immediate layout but provide a stepping stone toward later development -- a bit of agile programming. Regards, Claude Needham __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] column help...
On Fri, Apr 29, 2011 at 6:59 AM, Michael Beaudoin mich...@ba-doyn.com wrote: I gave it a try and nothing happens. I figured there would be an overflow needed, but I can't seem to find the correct place. I'm still fuzzy about overflow. Will reread the List Apart article I found. Suggest you revisit Jukka K. Korpela's response. I simply replaced 4col1 with fourcol1, 4col2 with fourcol2, etc. And the columns were suddenly behaving more or less as expected. Once the columns are lined up, you will have a couple of minor surprises to fix. But at least you will be on your way. If the code does not validate that should be handled. As in this case just fixing the validation parts will fix the behavior. Because of my background programming in other languages (such as perl) I have a habit of never using a digit as the first char of an id or class. Thus I had no idea how important that really was in css. Thanks for the opportunity to see how important this is. Regards, Claude __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] OT: Protecting pictures
On Sun, Apr 24, 2011 at 8:16 PM, John D xfs...@hotmail.com wrote: OK ignore it because I managed to get the actual link of the picture: http://img.thesun.co.uk/multimedia/archive/01295/silh-120_1295997a.jpg I would still like to learn how they have protected the picture. It's a simple javascript routine. To get around it all you need to do is disable javascript. There are other methods that try to make it more difficult to grab an image. Things like using css background property, cutting the image into dozens of pieces, etc. But, really, all one needs to do is use print screen and photoshop to grab any image that is viewable in a webpage. The one thing that they have accomplished in the little javascript ruse is to demonstrate a definite wish to keep the content protected. Might be of some help in a law suit one can suppose. But, all in all, it is very difficult to protect images. Then again there was one server that looked for a valid referer before allowing an image to be downloaded. If the request was not part of their webpage filling in its own content an empty gif was returned. This worked great to prevent deep linking to their content. But, in order to grab the image all that was necessary was to pull it from my cache. Regards, Claude __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Dead zone beneath linked images
On Wed, Apr 20, 2011 at 6:00 PM, RePost repost...@yahoo.com wrote: I have two floated, linked images in the sidebar, loaded in a div with the class execphpwidget. (See the two tan images, labeled About and Meet in sidebar at right, directly above the tabbed menu). There's a dead zone beneath the images. I can add space above or below the images in question, and no dead zone. Set a height for the div or clear the div, and I still have a dead zone. (Try to select Tweets or Tags in the tabbed menu below and you'll see). I found the dead zone in firefox 4.0 My first guess to fix the issue you are seeing is to try Chetan's suggestion of using overflow: hidden. If this fails to fix the problem I would poke it with a stick. In this case replace the hr class=space with a div that has zero margin but a height of 1.45em. There is something about that hr that makes me wonder if it might not be causing some problems. Regards, Claude Needham __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Need advice please
On Tue, Apr 19, 2011 at 7:18 PM, Kirsten Rourke rourke.train...@gmail.com wrote: Hi - I had to redo my wordpress site and found a theme that works well for what I want BUT even when I make the W3C validator test for CSS3 it still kicks up a TON of errors -http://jigsaw.w3.org/css-validator/validator?uri=http://kirstenrourke.comprofile=css3 If anyone has time, could you look this over and tell me where the heck I should start? I'm only used to making my own (simpler and not wordpress driven) sites. Kirsten Rourke I've never had the experience of getting a wordpress theme to validate. I'm sure there is one somewhere that will validate. Unfortunately the minute a client pops in a plugin or two the validation is out the window again. I will watch this thread with interest to see if I gave up too soon. Claude __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Crashin Column
On Fri, Mar 25, 2011 at 4:14 PM, Thomas Pauly tho...@tpauly.com wrote: The right-hand column on this page: http://www.theablebaker.com/archive-specials.html is crashing through the footer. I'm baffled by my overly complicated layout but I wan to be able to fix it before I redesign. Any help would be greatly appreciated. Thomas Pauly One possible fix is to add the property overflow: hidden to the div id=mosaic This does not address the underlying issues created by the javascript. But it will make your page look better. Regards, Claude Needham __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Same CSS, Same Browser But Looks Different Locally/Online
On Thu, Mar 24, 2011 at 11:16 AM, Elli Vizcaino elli...@yahoo.com wrote: Hello CSS Discuss, I am really stumped by why there are some slight differences when viewing my work locally and then online, since I am using the same exact CSS and the same browser. Unfortunately, I can not provide a URL to the page because it is proprietary and I have signed an NDA. TIA, Elli Something like this was driving me mad a few years back. I could not figure what the heck was going on. I compared the css word for word. I double-checked my cache to see what the actual download version of the style sheet looked like -- in case it was a server issue. Turned out. I had one of those ad blockers running AND I named one of my divs something like adblock. The ad blocker would set any div with a name like adblocker to display: none. And, they only did this on the internet version. When browsing locally it did not do the same thing. So to fix, I renamed my div and all was well. If you have any ad blocker you could be looking at something like this. Or, it could be another issue involving the fact that your local drive is typically white-listed. Regards, Claude Needham __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] strange IEX behaviour
On Fri, Dec 17, 2010 at 4:54 PM, Thijs Hakkenberg th...@ebrius.nl wrote: Dear list, My website looks fine except in IEX where behaves strange: http://kunstomhetlijf.nl/res2/ Anyone know why? A CSS issue? Yes, it does behave weird in IE8. I would start by validating your html code http://validator.w3.org/ (20 errors at the moment) Also validate your css code http://jigsaw.w3.org/css-validator/ (26 errors at the moment) There is a good chance that you problems will either clear up or become obvious after you validate the page. Regards, Claude Needham __ 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] Anchor tags and ability of browser window to scroll
On Thu, Dec 16, 2010 at 11:37 AM, Alan Chandler a...@chandlerfamily.org.uk wrote: I have been struggling for a few days with a problem related to using anchor tags. The page is question is here http://www.hartley-consultants.com/forum/index.php/board,1.0.html The are links (ie a href=#topGo Up/a to anchors of the form a id=top/a Any ideas? Hello Alan, I am not familiar with using a id=top/a I am more familiar with a name=top/a Try that and see if it helps. Also, this is more of an html question. There is a list specifically designed to handle html specific issues. Folks there might be a better target for your question. Folks on both lists are equally friendly and knowledgeable. WebDesign l...@webdesign-l.com Regards, Claude Needham __ 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
On Thu, Dec 16, 2010 at 12:23 PM, David Hucklesby huckle...@gmail.com wrote: On 12/16/10 10:28 AM, Chetan Crasta wrote re: http://fattoad.co.uk/ Give div#inner_wrap a height of around 1100px. The testimonial is getting cutoff because the height of 1015px is insufficient. FWIW I generally find that min-height works better than plain height in a majority of cases. (And height behaves like min-height in IE 6...) Cordially, David -- I hope it is okay to fork this discussion. (didn't want to disturb the original thread) Reading David's response I realize that I vastly under use min-height. I would like to correct that and start using it in appropriate settings. For the life of me I can't recall why I shied away from min-height a few years back. I started to use it. But, ran into some trouble and an article or two that somehow convinced me that I was better off trying to make due without it. That was then, this is now. I am hoping that someone might be able to point to a good source of info on proper use of min-height so that I don't open a can of worms with cross-browser issues or other gotchas. Regards, Claude Needham __ 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
On Thu, Dec 16, 2010 at 9:32 PM, Chetan Crasta chetancra...@gmail.com wrote: This is a good reference on min-height: http://reference.sitepoint.com/css/min-height On Thu, Dec 16, 2010 at 10:04 PM, Philippe Wittenbergh e...@l-c-n.com wrote: The spec is a good start :-) see 10.7: http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height one or two things to note: * min-height (and max-height) trigger 'haslayout' in IE 7 http://www.satzansatz.de/cssd/onhavinglayout.html#prop http://www.satzansatz.de/cssd/onhavinglayout.html#reset * conflicting behaviour with margin-collapsing see Bruno's test / demo page: http://www.brunildo.org/test/collminmax.html Thanks to you both for the references. I'll dig into them. As you say the spec is a good place to start. However, the parts I am mostly looking is how navigate the idiosyncrasies created by implementations from the various browsers. The other references look to be good starting points for those. Thanks again, Claude __ 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] should this class override my other one?
On Tue, Dec 14, 2010 at 7:58 PM, Tim Climis tcli...@indiana.edu wrote: No they don't. Take your style attribute out. Now move it to an external style sheet. Put the link to the style sheet before the style tags, and your text will be green. So far, things are doing what you expect... But now, put the link to the style sheet AFTER the style tags. The text is now red. As Jukka said, style tags and external sheets have the same level in the cascade order, so it only matters which order they're in -- not what file. ---Tim To clarify this in my own head I have divided cascade into two parts: 1) Assembly of a virtual consolidated style sheet 2) Calculating selector's specificity I know the real situation is a bit more complex. But this has helped me to keep the various parts of the process somewhat understandable. The question of external style sheet reference before or after internal style relates to assembly of the consolidated style sheet. I have found in every test I've made that a subsequent definition with the exact same specificity will over-write a previous one. The only exceptions to this resulting from the use of !important. Which is the expected behavior. I don't have the link (sorry) but there was a very interesting article written a while back detailing the race conditions that can happen with various combinations of @include and link. (I bet the author is on this list somewhere.) Again all of this contributes to the assembly process. Once the consolidated style sheet has been assembled then issues of selector specificity will come into play. Others know the area of selector specificity better than I could ever hope to. The only piece of the puzzle I would proffer to the list is possible clarity to the discussion if we divide it into the 1) accumulation into a single consolidated style sheet and 2) resolution of precedence and priorities of various selectors. Regards, Claude __ 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] Site Revision
On Thu, Dec 2, 2010 at 9:27 AM, Del Wegener d...@delweg.com wrote: Good Day; In response to the comments I received about a week ago, I have made quite a few changes to the proposed redesign of one of my sites. http://www.drdelmath.com/playpen/tableless_single_index_page2.html Because I have ripped this page from its normal moorings, the links do not work. I have tried a number of colors and have tested the readability when projected in my classroom. I have used unordered lists. I have changed some font families. All constructive comments are appreciated. Del Hello Del, The button-ish box will press when the cursor hovers over the image, however, this area is not clickable for the link. For usability this is confusing. I question the white background on the link hover. Looks odd to my eyes. There might be a better method of handling this by using something like: background: url(background_hemp3-hover.jpg) for the ul.index li:hover It would be better to be able to read the thematics part of Mathematics. Maybe move the gradient fade to the right a little. Just cosmetics. But anytime you can help put a user at ease the better. Maybe add a little code to the changeStyle function so that the radio button checked state keeps up with the monitor state. If you click the word projection the style will change but the radio button check is not altered. This is a little confusing. A few observations. Hope they are constructive. Claude Needham __ 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] span:link and span:visited
On Tue, Nov 30, 2010 at 4:00 PM, Michael McGinnis mcsty...@biographiks.com wrote: Using Javascript, clicking on a span either shows or hides a div. But I want to make the span disappear after I click on it. I see that I can style span:hover and span:active, but not span:visited, since it's not actually a link. But is there a counterpart or workaround? Or would this be done using Javascript rather than CSS? __ I would recommend doing this in the javascript. You should have a pointer to the element handy when processing the click. So it should be easy to set the display for the object which generated the click to none. I believe this will be the proper place to put this feature. If for no other reason it gives you a simple means to set a variable in your javascript to either disappear the span or not. I like to keep my javascript functionality in the javascript. This helps when a user does not have javascript enabled (or is using NoScript addon). Regards, Claude Needham __ 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-d] Can this stretch be made to work in IE6?
Hello All, http://www.galaxywebsitedesign.com/temp/test.html The above link works for Firefox 3.6.12, IE8, Safari, and IE7. Is it possible to make this work in IE6? The idea is to stretch the pseudo-background image. I found some nice tutorials that will make this work for the full page. But I want to only have a background in the div under the content -- not the full page. Thanks for any help or hints. Regards, Claude Needham __ 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 this stretch be made to work in IE6?
On Sun, Nov 14, 2010 at 8:11 PM, Thierry Koblentz n...@tjkdesign.com wrote: http://www.galaxywebsitedesign.com/temp/test.html The above link works for Firefox 3.6.12, IE8, Safari, and IE7. Is it possible to make this work in IE6? The idea is to stretch the pseudo-background image. Works for me in IE6. But I don't think you need that div. Did you try to style the image itself rather than wrapping it in a div? Thierry Sorry about the false alarm. I just checked again and it works for me too. I use IETester. There must have been a cache issue. Thanks for taking a look. And thanks for the hint about trying to remove the div. I'll see if I can get it to work sans div too. Thanks again, Claude __ 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 aren't these 2 divs on top of each other?
On Tue, Nov 9, 2010 at 2:21 PM, John j...@coffeeonmars.com wrote: my goal is for blackbar to be underneath header and for it to remain at the left of header as the browser window gets wider... what I'll do after the 750px is exceeded, I haven't figured out, but why is the blackbar div not underneath (in the Z dimension) the header div? thank you! John John, I suggest that you send a link to a web page that illustrates the problem. I used your css in a Try It window on w3schools.com and it worked for me. Admittedly, this may not duplicate a working environment. But in this one situation it worked. So it would be good to see a live example of your problem for reference. Your problem might be related to the interaction of the html and the css. Regards, Claude Needham __ 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] Line Break in Image Row
On Mon, Nov 8, 2010 at 1:44 PM, Roth x...@roth.biz wrote:
Hello everybody,
since several days I am dealing with a problem I have with IE.
With TYOP3 I have created a picture gallery. It consists of 5 columns
and 4 rows. In Firefox is shows like following:
__ __ __ __ __
|__| |__| |__| |__| |__|
__ __ __ __ __
|__| |__| |__| |__| |__|
__ __ __ __ __
|__| |__| |__| |__| |__|
__ __ __ __ __
|__| |__| |__| |__| |__|
Unfortunately in IE it shows like this:
__ __ __ __
|__| |__| |__| |__|
__
|__|
__ __ __ __
|__| |__| |__| |__|
__
|__|
__ __ __ __
|__| |__| |__| |__|
__
|__|
__ __ __ __
|__| |__| |__| |__|
__
|__|
I have tried with overflow: hidden but couldn't come to a solution.
Here my CSS file:
div#content {
width: 920px;
height: 600px;
clear: both;
clear: both;
}
div#content_normal {
width: 920px;
}
div#content_right {
width:920px;
height: 450px;
position: absolute;
top: 220px;
margin: 0;
padding: 0;
}
div#content_border {
width: 920px;
position: relative;
top: 10px;
}
The picture gallery is displayed in the #content_right area.
Here my html-template:
div class=wrapper
div id=logo
###LOGO###
/div
div id=navigation
###MENU_LEFT###
div id=nav_right
###MENU_RIGHT###
/div
/div
div id=content
div class=clear
nbsp;
/div
###IMAGE_TOP###
div id=content_normal
###CONTENT_NORMAL###
/div
div id=content_right
###CONTENT_RIGHT###
/div
div id=content_border
###CONTENT_BORDER###
/div
div class=clear
nbsp;
/div
/div
/div
Any help is very appreciated!
Kind regards
Max
__
I suspect a margin issue.
Try lowering the margins in IE and see if suddenly the break goes away.
If that works then you can use one of several methods to input a
conditional style that sets a different margin for IE
There are others that can best tell you how to accomplish that.
Regards,
Claude
__
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] Quirks compendium?
On Sun, Nov 7, 2010 at 11:38 AM, David McGlone da...@dmcentral.net wrote: On Sun, 2010-11-07 at 13:15 -0600, Keith Purtell wrote: When it comes to making sure my Web design appears normally in different browsers, I've been checking via the three installed on my PC, the Mac at work, two other PCs owned by family members, and an iPhone a friend has. I'll probably always check to see how a site looks on different machines because of differing resolutions and media, but when it comes to simply sniffing out CSS quirks, I wonder if someone on the Web has a list of the most common quirks for different browsers/versions? Why go through all that? Use adobe browserlab to check your site in a bunch of browsers easily. http://www.Adobe.com/BrowserLab If anyone here has a different perspective, I'd like to hear it. I can't find anything other than browswerlab, but everyone here IMHO is much better than I, so I am all ears. -- Blessings David M. Last time I looke BrowserLab did not test functionality. Meaning you could not test out javascript. And I don't recall if hover is enabled. Unfortunately javascript is just as quirky as css and everything else the individual browsers decide to do differently. There can be some major weirdness if the javascript is not written to work with the different browsers. So I like to actually run the site in each of the main browsers. Regards, Claude __ 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] Blocking css was ADMIN: Is blocking ads OK for web developers?
On Thu, Nov 4, 2010 at 1:57 PM, Kathy Wheeler kat...@home.albury.net.au wrote: On 11/05/2010, at 1:36 AM, Eric A. Meyer wrote: Of course, we could bring it back on-topic by discussing various ways to employ user stylesheets to block the display of ads while avoiding (as much as possible) the suppression of non-ad content. Actually, that and a comment by another poster re css id names (#advertisement) makes me ask are there names we should avoid using for class and id identifiers if they are likely to trigger some sort of blocking mechanism that might wreck havoc on a page by hiding parts of it?? KathyW. __ I have run into a problem with using certain id and class names. It was very mysterious at the time. My page looked different when viewed locally on my computer compared to in place on the web server. Reason for this was, I used an id name that was blocked by AdBlocker add-on. AND, the AdBlocker was set to not filter localhost content. Thus my page looked okay on my c drive. But the minute I uploaded it large chunks of content were missing. http://adblockplus.org/en/filters#elemhide_basic The url gives you a peek inside the mechanism for element hiding in Adblocker. I have not been able to find a list of default id and class that are blocked. However, I can tell you conclusively that (at the time) id=ad was blocked :) Since then I have avoided such names for id or class. Regards, Claude Needham __ 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] setting z-index on a lightbox in WordPress
On Tue, Nov 2, 2010 at 4:39 PM, Debbie Campbell d...@redkitecreative.com wrote: In this WordPress site: http://www.greyrockconcretedesign.com/gallery/?album=6gallery=2 I can't get the div#TB_window (NextGen Gallery is the plugin) to show in front of the menu - z-index isn't working or I'm applying it incorrectly. Can someone help? -- Debbie Campbell www.redkitecreative.com I work hard on my websites that contain a drop-down menu to make sure the drop items show over the top of any elements in the page. Normally you want the viewer to have access to those menu options. Unless I misunderstand your situation, I'd say that everything is working the way it should. Regards, Claude Needham __ 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] PX vs. EM ?
On Wed, Oct 20, 2010 at 5:04 PM, Corona Rivera corona.riv...@johnmuirhealth.com wrote: Would someone please explain why EM is usually used for the width property instead of Pixels? I'm inclined to use pixels since that's the monitor's unit of measurement but Adobe and most CSS examples I see use the M. - How come? Thanks, Corona I use em on font-size so that I can more easily respect allow users to alter the font setting in their browsers and have the page expand or contract in relationship. I suppose % could be used throughout. I just got used to em because so many of the designers I respect used em. The use of px on a font-size sets it in absolute terms. Meaning you end up disregarding the preferences of the user. And you end up disregarding the differences between OS and browsers. I use em on images and divs whenever I can so that my whole layout with breath with changing font-size. If you use px on images and em on font, then if the user increases the size of the font the images will become smaller in relationship. Conversely if they make the font size (in their browser settings) smaller then the images will be larger in relationship. That's my two cents. Hope it is of some help. Regards, Claude Needham __ 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] What in the world
On Fri, Oct 15, 2010 at 12:31 PM, David McGlone da...@dmcentral.net wrote:
Hi everyone.
I've been trying to create a very very simple style sheet and for some
reason it's not working. I'm so frustrated to the point I'm almost P'd
off.
The problem is I have a wrapper, a left menu, body and a footer. I'm
trying to get the body to float next to the left menu, but every time I
add a float to any of the elements, they move outside the wrapper.
What don't I understand here? here's the code:
BODY {
font-family: helvetica;
font-size: 100%;
}
#wrapper {
width: 980px;
border: 1px dashed #ff;
margin: 0 auto 0 auto;
}
#left-nav {
width: 180px;
border: 1px dotted;
}
#main_body {
width: 200px;
border: 1px solid #ff;
}
#footer {
width: 900px;
border: 3px dashed;
}
Hello David,
I might not be understanding your goals but try the following changes:
#left-nav {
width: 180px;
border: 1px dotted;
float: left; /* add float here */
}
#main_body {
width: 200px;
border: 1px solid #ff;
float: left; /* add float here */
}
#footer {
clear: left; /* add clear here */
width: 900px;
border: 3px dashed $ff;
}
In order to see what this looks like try stuffing some content into
the elements.
I use http://www.lorem-ipsum.info/_latin as my favorite gibberish generator.
Regards,
Claude Needham
__
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] Using ems for image size
On Sat, Sep 25, 2010 at 11:49 AM, Felix Miata mrma...@earthlink.net wrote: On 2010/09/25 13:05 (GMT-0500) Keith Purtell composed: snip some excellent stuff multiply or divide, depending on your conversion direction, by the contextual px font-size Firebug will be your friend in this regard. Be sure to click on the computed tab to see what the actual font size is in px. Claude __ 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 i vertically centre a UL?
On Tue, Sep 14, 2010 at 1:47 PM, Climis, Tim tcli...@indiana.edu wrote: I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? As far as I know, not with anything with a dynamic height. You can do it with javascript, but that's off-topic for the list. And you can do it with CSS if the height is fixed. But I think that's it. ---Tim Could you give a pointer on how to do this given fixed height ul? The only method I know of requires that both the containing element and the ul have fixed height. If there is a way to do this with dynamic containing element and fixed height ul that would be great. Regards, Claude __ 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] Managing import rules
On Mon, Sep 13, 2010 at 4:55 AM, Philippe Wittenbergh e...@l-c-n.com wrote: On Sep 13, 2010, at 6:58 PM, Philip Taylor (Webmaster, Ret'd) wrote: Gabriele, I don't understand : In a past project I used the following approach: @import base.css; @import layout.css; @import typography.css; @import colors.css; The server-side developer (who used Ruby) encountered several problems when trying to merge these files properly and in the correct order, Why was it his job (the server-side developer's) to merge these files properly and in the correct order ? Surely merging takes place in the browser, not server-side ? Hmm, just guessing. The files are created by the designer, front-end coder as separate blocks - and maybe they are served that way on a test server prior to going live. To improve performance for the live site, they merged on the server into one file: less http requests for the end user, better minification, more efficient gzip compression (one file !) and so on - faster delivery to the end user, faster browser rendering. PS you do know that @import is a huge slowdown/bottleneck for IE 9 in particular the first @import blocks _all_ subsequent downloads; that is: the 2nd @import has to wait for the 1st to be downloaded etc. PS 2 I always find it cumbersome to work with multiple files like that and I think I've dropped using @import 3 years ago or so. Philippe My non use of @import comes from reading Steve Souders article High Performance Web Sites blog -- don’t use @import [April 9, 2009 12:32 AM] http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ I suppose there may be cogent reasons to use @import in some situations. I have not encountered those in my limited experience. Would definitely be interested in examples if they turn up in this discussion. Regards, Claude Needham __ 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] Using templates from CSS Zengarden site
On Sat, Sep 11, 2010 at 4:31 PM, Janet Lenius ja...@jalenenterprises.com wrote: Hello. I am new to this discussion group. Has anyone attempted to modify a template from the CSSzengarden.com website? I noted that the html files completely lack all div tags. Any advice is appreciated. Thanks, Janet Hello, When I use firefox view source the html shows plenty of div elements. So I'm not sure if you are referring to something else. By the way, if you look in the style sheets you will notice the following: /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ Regards, Claude Needham __ 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] Type sizes?
On Thu, Sep 9, 2010 at 5:18 AM, tedd tedd.sperl...@gmail.com wrote:
You can set default font for the entire page in the BODY:
body
{
font-size: 100%; /* don't use anything else for the default */
font-weight: normal;
font-family: helvetica, arial, sans-serif;
}
You can also use em's, such as:
body
{
font-size: 1em;
font-weight: normal;
font-family: helvetica, arial, sans-serif;
}
and then base everything else upon that, such as:
h1
{
font-size: 1.3em;
}
.copyright p
{
font-size: 0.8em;
}
and so on.
I have developed a practice of using 100% in the body and then using
em elsewhere to set sizes.
Such as:
body {
font-size: 100%; /* base my size on user default */
font-weight: normal;
font-family: helvetica, arial, sans-serif;
}
h1 {
font-size: 1.3em;
}
I have vague memories of doing this because the percentage handled a
glitch in one browser or another. Can't recall the details now. Is
this a case of age invented memories, or was there such a
consideration at one time that made the % in body a good idea even if
one had a personal preference for em in the rest of the style sheet?
Claude
__
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-d] Unusual IE7 weirdness
In tracing down a css issue I decomposed the html to the code below. In IE6, IE8, Safari (pc), Firefox 3.6.8 the page displays just fine. In IE7, nothing shows. (ie7 in ietester program) If the position: relative is removed from div1 the page works. Or, if the float left is removed from div2 the page works. Or, if either the clear or width is removed from div3 the page works. There is something about this exact html/css combination that causes the problem. In fact, if one adds any element at all in div1 prior to div2 the page will work. Since this is a unique combination of elements and easily avoided, I can finish my project no problem. But, before filing this away under the heading of unique oddities to avoid in the future I wanted to check with others to see if there was a deeper understanding to be gleaned or a best practices type of lesson to be learned. Regards, Claude Needham !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; html head title/title /head body div id=div1 style=position: relative; div id=div2 style=float: left; h1Test Page/h1 pAt pro alii vidit utroque./p pVix in feugiat percipitur./p /div div id=div3 style=width: 50%; clear: left; pAt pro alii vidit utroque./p pVix in feugiat percipitur./p /div /div /body /html __ 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] Unusual IE7 weirdness
On Fri, Aug 27, 2010 at 7:19 PM, David Laakso da...@chelseacreekstudio.com wrote: Claude Needham wrote: But, before filing this away under the heading of unique oddities to avoid in the future I wanted to check with others to see if there was a deeper understanding to be gleaned or a best practices type of lesson to be learned. Regards, Claude Needham I suppose you could concentrate on what does not work from here to eternity and then some. Sounds like a total and complete waste of time to me. Best, ~d Contrary to how it may appear to you, I am not concentrating on what does not work. I have already handled the necessary issues for the website in question. However, as per my original question, I wanted to run this by a few folks to see if there was something about this that goes beyond my limited knowledge. For all I know it is common knowledge that ie7 has a problem with floats in a relative div. Don't know. That is why I asked. If this is a complete oddity that does not reflect any more general do's or don'ts for css in ie7 than that answers my question. A never seen this before, and I doubt it means much of anything is much more informative than sounds like a total and complete waste of time. I have found that the more I can train myself to follow best practices the fewer cross browser surprises I need to deal with. Thanks for taking the time to respond. With suitable translation it gives me the answer I was looking for. Regards. Claude __ 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 CSS get me out of the stone age?
On Thu, Aug 26, 2010 at 5:22 AM, Lineberger, Scott sline...@coastalind.com wrote: http://www.coastalind.com/ciordersample.html Does anyone have any suggested CSS coding that would streamline this page? Scott The fundamental problem with this page is the factor of 15. You have a list of possible products listed 15 times so that a customer could purchase multiple items. In my opinion javascript might be your best bet for cutting back on the shear volume of content in the page. There is another list that might be more helpful on that aspect of the problem. http://webdesign-L.com/ There could easily be other more appropriate lists. This just happens to be one I subscribe to. One approach to tackling the problem would be to have a single list of products and multiple lines of input. In a simplistic approach a radio button could be used as the selector. The form would open with the radio button selected for the first sales line. The customer could select a product from the master drop-down list, select quantity, then click a button indicating wish to buy it. This would add that item to a separate input field and move the radio button selection to the next item and restyle the drop-down list so that now it is positioned on the second line. etc. All of this would require some nice css styling (this list could help with that.) But to run the guts of the process you will need javascript or php or something similar. Basically to make that page accessible, in my opinion, you will need to divide the content size by 15. Regards, Claude http://www.galaxywebsitedesign.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/
Re: [css-d] Off topic, web hosting help
On Thu, Aug 26, 2010 at 6:34 AM, Tomasz Kisielewski tom.kisielew...@gmail.com wrote: Hi I know this list is about CSS, but I don't trust google.com when searching for web hosting. I need basic host for drupal, joomla just for my business. I have no experience in this field, I can do programming and design but hosting,domain registrationhave never done it. Will register domain with godaddy, can I register domain and find hosting later? I wouldn't like to make big mistake at the beginning. It is not my intention to spam the list, but I need help and advice Thanks Tom Hello Tom, I do my hosting with rackspace. They offer solutions way beyond the needs of the average website owner. So when a couple of good friends asked me the same question you are wondering about I created a page on my site to explain my approach to finding a good web hosting company. In addition I gave them my top recommendations. http://www.galaxywebsitedesign.com/blog/learn-how-to-choose-web-hosting.html The article is slightly tongue in cheek in places, but they found it helpful for them -- and they were in fact the target audience so I guess it worked. Regards, Claude Needham __ 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] iPad
On Thu, Aug 26, 2010 at 10:36 AM, Adam Stemple hatfiel...@gmail.com wrote: I am trying to debug a WordPress site so it will look/function better on the iPad. The site is www.madwomanintheforest.com. It was odd, because I found that the front page was messed up in different ways on side by side iPads. Has anyone run into this? Is there a way to emulate the iPad from my normal mac? Is there anyway to see the code the php is writing on an iPad? Any hints, tricks, magic spells, anyone has regarding the iPad? ---Adam The utility that I am experimenting with at the moment is http://ipadpeek.com/ I have yet to verify that it is presenting an accurate view of an actual ipad. In fact, looking at your page, I don't see any obvious weirdness. Can't tell if this means you page has been fixed, or the silly ipadpeek is not actually showing the true rendering. I look forward to hearing any news of ipad emulators. By the way http://www.ipadatelier.com/design-for-ipad.html has several interesting links. I'm just now running them down. Regards, Claude Needham http://www.galaxywebsitedesign.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/
Re: [css-d] iPad
On Thu, Aug 26, 2010 at 12:06 PM, Rick Gordon li...@rickgordon.com wrote: You're probably right. I have noticed that some results are different when * is not included, but haven't gotten clear on exactly what. -- I seem to recall that td does not inherit from body. Was this just for some properties or in general? And would the * solve this issue? Regards, Claude __ 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] Any good CMS platforms?
On Tue, Aug 17, 2010 at 7:55 AM, Christie Mason cma...@managersforum.com wrote: [-CM-] How about Are there any good CMS platforms that use a text editor that makes it easy for users to apply site's existing CSS? Last I looked, that question pretty much removed most of the popular PHP CMS apps, and most of the .Net CMS apps. Christie Mason How about a cms that will produce pages that pass html validation and css validation? Is it a necessary by-product of cms that they don't pass validation? Claude Needham __ 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] Inline Style
On Sun, Jul 25, 2010 at 11:09 AM, John D xfs...@hotmail.com wrote:
It works and I can live with it for now. I am restricted because of
restrictions imposed by Google Sites. See my previous message.
Thanks for the wonderful trick.
Regards,
If you are trying to create a teaching situation with free websites
for the students would it not be somewhat satisfying to use a style
section in your html document embedded in the body?
Obviously this will not validate. But it does allow students to use
standard class and id definitions.
The transition from inline style to proper use of an external css
style sheet is not trivial. However, the transition from embedded
styles to external css style sheet might be an easy one.
Not sure precisely what you are trying to accomplish. But for a
teaching environment it might be better.
I don't use google pages so I don't know if they will accept a
style/style section.
style type=text/css
p.testfl:first-letter {
color:#ff;
font-size:xx-large;
margin-right: -6px;
}
/style
p class=testflThis is a text./p
pThis is more text/p
Regards,
Claude Needham
__
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] ID vs. Class
On Mon, Jul 19, 2010 at 8:15 PM, Chris Blake ch...@3pointdesign.com wrote: Really for this because it is only appearing once for now I should use ID - but there's a good chance I may use it again later on this page - so class for now is OK? I like to treat class and id semantically -- or at least according to my understanding of what that means. ID is properly used on elements (div, etc) that are unique. Class is used with elements that are categorical or a class in the mathematical and programming sense. For me an ID is something like header, footer, masthead, basically anything that makes sense as unique. If I happen to have a page for which I currently only have one newsitem. I will still use class. Simply because to me a page could naturally have more than one newsitem. I don't base the notion of ID simply on the fact of there being only one element of that type currently. I base it on there should rightfully be only one. This is how I go about it. As they say your mileage may vary. Regards, Claude Needham __ 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] I need a good scripted font
On Wed, Jul 14, 2010 at 1:52 PM, Andy B. sonfir...@gmail.com wrote: Taking this as a css question, because it is posted in a css forum, I will assume you are asking which font might be well represented in the different browsers. Not sure how much of a css question that is either, but it is certainly something that worries me from time to time. I have been experimenting with a font stack calculator: http://www.codestyle.org/servlets/FontStack Assuming the values are correct, this will give you some idea which font selections will be represented in PC, Mac, Linux. Regards. Claude __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] styling text inside a div
Line3: The text For in Him we move and live and have our being... (Acts 17:28) should: - Be on a line all by itself. - Be the same font size as the text on the rest of the page. Do you perhaps mean to say Be in a sentence all by itself? The reason I ask is that my email program is wider than 298px and the text wraps. Claude __ 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 'overlabel' absolute position problem
On Tue, Jul 6, 2010 at 1:36 AM, Eystein Alnaes eyste...@gmail.com wrote: Hi, I'm using the jQuery version ( http://scott.sauyet.com/thoughts/archives/2007/03/31/overlabel-with-jquery/) of the overlabel.js script from A List Appart ( http://www.alistapart.com/articles/makingcompactformsmoreaccessible). Hold on - this is a CSS question! I've triggered some weird behaviour in Safari (Chrome/webkit) which I assume comes from the absolute positioning of the label element. To see it in action go to http://unf-j016.universalfavourite.com.au/, fill in a couple characters in the Enter your e-mail to join… field, then try clicking with the mouse to set the marker in between the characters you just filled in. It doesn't work. I'm pretty sure it's CSS related, because this issue doesn't appear on the script's demo page (http://scott.sauyet.com/Javascript/Demo/Overlabel/). I find this to be at least in part a javascript problem. In Safari I was able to duplicate your observed behavior. But, when I entered preferences, disabled javascript, then reloaded the page the behavior was gone. I did not trace the javascript. It is possible that the javascript is loading css definitions. I did not look. At the moment, all I have verified is the existence of your issue in Safari with js enabled and the absence of the problem in Safari with js disabled. Regards, Claude Needham __ 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] Verifying positions of modules and page layout.
On Tue, Jul 6, 2010 at 9:32 AM, Andy B. sonfir...@gmail.com wrote: re: http://eternityrecords.org/private/ Either way, are the content blocks logically and practically grouped and related? There is a logic and grouping. It is just not one I would have chosen. I would have suggested the main page content to be top center of the page. As it is the search form and email join form take up some of the most important (in my opinion) real estate on the page. They push the Journal and Welcome message almost to the fold. I exaggerate. But not by much. On my screen the Welcome message is in the bottom one fourth of the screen. Speaking of Welcome message, that message uses an inline style. p style=text-align: left; font-family: Verdana,Arial,'Microsoft Sans Serif'; color: black; font-size: 12pt; text-decoration: none;Welcome to Eternity Records! . /p I am wondering if this is a by-product of a copy and paste operation. When I paste text into blogger I have to put the text through a non-rtf canvas in order to remove layout. (I use an old asci text program for this). Regards, Claude Needham __ 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 on avoid background-image to move while scrolling the page.
On Sun, Jul 4, 2010 at 6:09 AM, MEM tal...@gmail.com wrote: Hello all, Html: http://www.nuvemk.com/nascer/ Css: http://www.nuvemk.com/nascer/Css/Main.css At some point you may want to look at your page with javascript disabled. I know the intended audience of the page folks that have javascript enabled. It is reasonable for significant functionality to be lost for those browsers that have chosen to not enable javascript -- maybe they have Firefow NoScript running. However, if possible, the page should render in a reasonable fashion even for those without javascript. Regards, Claude Needham __ 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] CSS + Webkit question - moving elements
On Wed, Jun 30, 2010 at 10:47 PM, Fobin fobi...@gmail.com wrote: Hi, But the big thing is still there. In webkit browsers the top line moves on hover just a little bit. Except if you hover over the top row most right picture. Then everything is ok and pictures change perfectly. Cannot figure out why... As experiment try commenting out the #esittely.toggle() in your javascript. I think that maybe the difference in width of the default and the framed image with text is causing a re-calculation of dimensions leading to the shift on hover. This would be just a test to see if we can isolate the mechanism to this piece of the javascript. Regards, Claude __ 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 is the space collapsed?
lol, Thanks. But hey - my font is normal sized when compared to the other sites I look at!! :-) ...I'll prove my point too!! :-) ...Query something is Google, and look at the size of the font they return on their search engine results page. That font size is basically the same as mine. Hello Brian, Using Firebug to check out the google SERP they use 13px Arial, san-serif Your page happens to be calling for 13px Helvetica Neue,Arial,sans-serif The Helvetica Neue is visually a smaller font at 13px than Arial is at 13px. Anyone without Helvetica Neue on their computer will see the pages the same. For those of us with Helvetica Neue we see a smaller looking font. I would be so happy if there was a mechanism (other than javascript) to change the font-size depending upon which font is selected. It would be so nice to fudge the font-sizes to compensate for the fact that different fonts have different visual sizes at the same numeric font-size. Regards, Claude Needham http://www.galaxywebsitedesign.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/
Re: [css-d] CSS + Webkit question - moving elements
On Wed, Jun 30, 2010 at 1:56 PM, Fobin fobi...@gmail.com wrote: Hi All, I'm trying to figure out why in earth few elements move when I change them in javascript. Firefox shows it well but webkit browsers there is little movement with the elements. You can see the site here: http://www.solarflare.fi/jarjestovaenkoti/ Elements are those pictures of persons. On hover they change and there happens a little bit movement with Webkit browsers. Best Regards, Rauli Rikama When I encounter weirdness in behavior between browsers I start by cleaning up my code. Partially to see if I stumble upon the answer. Mostly because clean code gives better results. And, also so that if I ask for help I can eliminate distraction. I suggest you clean your html so that it will validate. I have heard that /head closing element is optional. But, I would add it. Also put a width and height on all your images. This will make the page load look less chaotic and different browsers might handle missing width and height not in the same way. This is not a direct solution. But if get the page to validate and add dimensions to images it might fix the problem and/or give helpers a cleaner page to test for you. Regards, Claude Needham __ 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] learning html5
On Tue, Jun 29, 2010 at 9:22 AM, John j...@coffeeonmars.com wrote: Any suggestions on how one can learn html5? thanks! J Here are a few links I am trying to learn from: http://diveintohtml5.org/ http://www.html5rocks.com/ http://www.whatwg.org/specs/web-apps/current-work/multipage/ Regards, Claude Needham p.s. I also found the following page very informative http://camendesign.com/code/video_for_everybody __ 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-d] Is this even possible with blockquote?
On the following page I have a div floating to the left with a blockquote wrapping it on the right. http://www.imag3.com/test/ Is there a way to style the blockquote and/or the floating div such that the left margin of the blockquote comes into play for the text along side the div? If I put the h1, p, and blockquote inside another context then everything will behave as expected. But then I lose the word wrap effect. I am thinking there is either I am overlooking an extremely easy and painfully obvious means of doing this, or, it isn't really possible to accomplish until a future version of css. Regards, Claude Needham __ 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] Is this even possible with blockquote?
On Mon, Jun 28, 2010 at 11:06 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: http://www.imag3.com/test/ I don't see what you are aiming at. It seems that you wish to float the blockquote but don't actually set anything in CSS on blockquote elements. Maybe it would help if you posted a real example URL demonstrating what you want, except for word wrap effect, whatever that means. At the bottom of the page (http://www.imag3.com/test/ same as previous URL) there is a sample of the visual effect I am looking for. However, this is a fragile solution that could break with changes in font size, length of h1, length of p element etc. A typical form for a blockquote has an extra inset. In the sample as shown in the upper part of the example page, there is no left margin on the h1, p, or blockquote. The only way I know of to simulate the left margin is to add a margin-right to the floating dive. But this will give the same apparent left-margin to the h1, p, and blockquote. I was hoping the blockquote could be treated so that it would be shown with the little extra indent that is typical for blockquote. As mentioned by Tim, this problem will also be evident in lists. I was hoping that any solution here would also transfer to lists. I am leaning toward impossible at the moment. But I have seen folks on this list contribute css suggestions that were absolutely amazing to me in my limited css. So, I'm still holding out some hope that there is a proper solution. Regards, Claude __ 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] Is this even possible with blockquote?
On Mon, Jun 28, 2010 at 1:29 PM, David Laakso da...@chelseacreekstudio.com wrote: I don't know if this will work for you in the particular situation you have at hand? http://chelseacreekstudio.com/ca/cssd/bq.html Best, ~d Thanks David, That is the kind of solution that I suspect will be necessary. Was hoping for something more fluid, but alas, I don't think that is possible. Thanks for the sample, I always learn something new when I look into your css. Claude __ 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] centered nav over an image /?
On Thu, Jun 24, 2010 at 5:04 AM, Tim Climis tcli...@exchange.iu.edu wrote: This is where having a link helps. It sounds like you're perhaps using floats to create your navigation (which would then cause your container (div?,ul?) to have a hieght of 0. If you add overflow: hidden or an explicit height to that container, the background should have an effect. ---Tim I believe the url in the original post leads us to the only sample for the page. http://ecoitsf.com/test.html Regards, Claude __ 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] page not loading properly in IE8
On Thu, Jun 24, 2010 at 7:10 AM, Debbie Campbell d...@redkitecreative.com wrote: Pages on this WordPress site are not always loading correctly in IE8: http://www.tomlinsondesigns.com/projects/ If you don't see it, you should when you move to different pages - sometimes the white background is missing and other design elements in the sidebar and footer are moved. Can someone advise? This only seems to be happening in IE. As an experiment, try the page without the What Clients Say widget. It looks like there is a problem with the javascript for that widget in IE8. In IE8 it loaded three different customer comments with a delay of just 1 or 2 seconds in between. As each new comment was loaded the css would change. I suspect that one or another of the comments or the widget itself is breaking the layout. Regards, Claude Needham __ 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] web page help
On Tue, Jun 22, 2010 at 9:42 AM, Bernardo Doré berd...@gmail.com wrote: This is the most simple and compatible one I've found so far: http://ryanfait.com/sticky-footer/ Been using it for a while with very good results. Bernardo Can you point to a page that demonstrates the sticky footer working? I'm not seeing it on the url given. Regards, Claude __ 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] Newbie Building Boxes
This is relatively easy to do /tableless/. Construct a CSS box with a dark-blue background-color. Nest a light-blue CSS rounded-corner box inside it. This is one of a zillion ways it might be done: http://green-beast.com/experiments/css_smart_corners.php Best, ~d Thanks for posting this solution for rounded corners. I have seen several other solutions, but somehow missed this one. Many of the other solutions had nested divs inside divs inside divs, or tables that made my head spin. This one is as promised: round, simple, and easy. Because it relies upon absolute positioning it seems like it would tend to be very cross browser compatible. (maybe change png to gif to avoid that issue.) Regards, Claude Needham galaxywebsitedesign.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/
Re: [css-d] Pure CSS fisheye menu with icons: a demo
Claude, there is a link Gabriele's live demo page. I think you just didn't see it... http://dev.css-zibaldone.com/demos/pure-css-fisheye-menu-icons/demo.html Best, ~d sheepish grin Right you are. Sitting there in plain sight for all to see. Thanks for pointing the way to it. It is a nice effect. Reminds me of the first time I saw a Mac user interface. Claude __ 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] interesting nav issue - please help :)
On Wed, Jun 2, 2010 at 6:49 PM, Theresa Mesa trixiesirishe...@gmail.com wrote: Because the contact page doesn't have a vertical scrollbar on the right, but the agreement page does. The whole page is jogging, not just the navigation. And actually, the contact page seems to be *stretching*, along with the jogging. Your HTML still has a few errors. I can't get your CSS page to validate. It's still loading in the validator. Still loading...still loading...still loading... I was able to validate the css using the direct input method at http://jigsaw.w3.org/css-validator/validator However, the url method does not seem to be working at the moment. I tried it on a couple of different webpages. Hopefully a transient problem. __ 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-d] Need help on handling h1 next to a floating div
The test page is: http://www.imag3.com/test/ Is there a way to stop the h1 from extending behind the div that is floating to the left? And, is it possible to have the yellow box dynamically center itself in the area to the right that is remaining after the left div takes up its space? Thanks for any help, Claude Needham __ 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] Need help on handling h1 next to a floating div
On Thu, May 20, 2010 at 8:54 PM, Thierry Koblentz
thierry.koble...@gmail.com wrote:
The test page is: http://www.imag3.com/test/
h1,.centerbox {overflow:hidden;zoom:1;}
You may want to read this article to find out why it works that way:
http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
Thanks. That did the trick.
I was wandering around in the world of hasLayOut and didn't know about
the block issue. Thanks much for the link to the article.
Regards,
Claude
__
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-d] Question about cross browser compatibility of max-width
Some time, in the now distant past, I tried using max-width in a css project. The behavior was so quirky across browsers that I solved it another way. The numerous code samples suggested on this list lead me to believe that the situation has changed and that max-width is a very functional property. So I guess the question is: Are there any gotchas to look out for? Or, perhaps standard cross browser considerations when using it. I don't intend to go hog wild with it, but max-width could certainly have its place. Thanks for any input. Claude __ 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] Menu problems in IE7
On Fri, Apr 2, 2010 at 6:20 PM, Matt Fielding itzma...@gmail.com wrote:
Hello all,
I am almost 100% done writing the code for a client, but they have
discovered an issue and despite my efforts I cannot figure out what it is.
In Firefox, Chrome, Safari, and IE8, everything works fine. However, in IE7
the
menu http://www.gomcc.org/communities on the left hand side floats over
the content area.
If anyone can lend me some advice, I'd greatly appreciate it.
Your sidelinks has its position set to absolute.
But you don't have a top, left set.
I suspect that FF, IE8 are defaulting to some value that works for you.
But IE7 does not do so well for you without the actual top and left being set.
I modified a local copy of the page by setting the top and left and
could get the page to work in ieTester.
I don't use position absolute much. Hence, not defining top and left
might be an appropriate way to go. You could paint it orange and call
it a pumpkin I wouldn't know the difference.
But when I look at http://www.w3schools.com/Css/pr_class_position.asp
all the examples specifically set the position elements when using
absolute.
#sidelinks {
position: absolute;
width: 154px;
background-color: #C3DE9A;
margin-right: 11px;
color: #A87D50;
padding: 5px 0px 11px;
}
Regards,
Claude
__
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] Unwanted horizontal scroll in IE 7/6
On Thu, Apr 1, 2010 at 10:13 AM, Bill Braun bbr...@hlthsys.com wrote:
Tom Livingston wrote:
List,
Can anyone see where the horizontal scrollbar is coming from in IE 6
and 7 at this address? I can't find it and i'm going nuts...
http://www.mlinc.com/products/zpache/
Thanks!
I was able to reproduce the scrollbar in IE8 in compatibility view,
and in ieTester.
I have no clue what is causing the horizontal scrollbar to appear.
However, I can make it go away though by adding overflow:hidden to
your #outerWrap
#outerWrap{position: relative; overflow: hidden; background: #fff
url(../images/phase2/html_grey_bar.png) 0 0 repeat-x;}
I did this test on a local copy of the page (saved from firefox) with
all javascript removed. So when you try it on the actual page your
mileage may vary.
Also, poking code with a stick until it works is not what one would
call the elegant solution. :)
By the way, from what I could see in a couple of web references,
expression has been dropped as of IE8.
#sb-overlay{
height:expression(document.documentElement.clientHeight + 'px');
}
Claude
__
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] New to css
On Mon, Mar 29, 2010 at 11:28 AM, Climis, Tim tcli...@indiana.edu wrote: If you use class names (form class=track) instead of id's then put in a dot (.) instead of a hash (#). ---Tim If you are truly new to css, you might wonder when to use id and when to use class. id is for unique elements -- on a page by page basis. Thus any element (such as a div) that is given an id should be unique. div id=header .. /div Things like footer, menu, maincontent, masthead, or the form. id is like your driver's license -- one to a customer. For any elements that will be used more than once on a page you need to use class. class is like a room full of students. they may all be special in their own way but they share common characteristics that can be assigned together using the class name. Just covering the bases in case you haven't stumbled across this distinction yet. Regards, Claude __ 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] New to css
On Mon, Mar 29, 2010 at 2:16 PM, Bill Braun bbr...@hlthsys.com wrote: Setting aside the moral implications, having made a transition from a site built completely around tables to one based on div, the latter, in my experience and opinion, takes much better advantage of CSS. I have been able to do everything using div as I did using table, in a much more flexible manner, and, again in my opinion, with a slight edge in favor of design aesthetics. Bill B I have to agree with the go whole hog into css and leave the tables behind approach. After a very rocky first week or two things are working about much better. I am very happy with the subtle aesthetic improvements that strict css affords. During those first few weeks getting my divs to behave was like trying to corral a herd of kittens. Things would pop up here and pop up there. I still don't know what I was doing wrong. All of a sudden it was coming out right. If I didn't know better I would say that they updated Firefox. Because I could swear my code is the same. But it wasn't. I had discovered the one or two tricks that let my divs behave themselves. So don't be surprised if you have a few days of what in the heck is going on. But, after that you will be happy you dropped the tables. However I still expect to run into some problem that I might need tables for. Just haven't yet. I don't have a philosophical objection to tables. Just don't need them at the moment. Got tired of colspan and rowspan I guess. :) Regards, Claude __ 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] Nested Divs - Backgrounds Out of Sequence
On Tue, Mar 23, 2010 at 7:36 AM, Andrew Frazier cs...@kidderminsterharriers.com wrote: It looks OK in all browsers, but it's not showing what I've asked it to. The grey border down each side of the central area should actually come in diagonally at the bottom to join the black border. I think the css is behaving as expected. The issue here is that your bg_contentBottom.png has transparent areas on the outside edges. This allows the underlying (note: under) graphics to show through. If you add a solid color to the outer areas of the png you will see that it is indeed on top of the other div backgrounds. Hopefully I've missed something in my experiment. Because if the issue is in fact this transparency thing I don't see how you will solve it -- unless a solid color is okay near the bottom of the page. Regards, Claude __ 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] div not floating in FF
-Original Message- Other than that, if you want to have the two floating divs side-by-side, I do believe you need to give them a width value - otherwise they will assume 100% width. Dennis The width value of the two inner div is indeed the direction to look. If you replace the right text content with an image than the two divs will float nicely side by side. However, with the text content the div will expand as much as necessary to accommodate the text. You can either use br to cut the text into short lines. Or, put a width on the containing div. Claude __ 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] Question about standards compliant mode in IE
Thanks for the suggestion. Much appreciated. Is the web developer toolbar you are referencing the one from http://www.my-debugbar.com Or, would that be the F12 Developer Tools thing in the IE8? Or, is there another developer tool for ie8 that you are referring to? Normally I do all my development in Firefox, so any clues about developer tools for IE would be most welcome. Thanks, Claude On Sun, Mar 21, 2010 at 1:34 PM, Tim Snadden li...@snadden.com wrote: On 20/03/2010, at 7:42 PM, Claude Needham wrote: Does such a thing as a quirks detector exist? If you use IE8 and the web developer toolbar there is an area on the top right of the bar that describes 'Document mode'. This shows what the default document mode is. You can also use it to switch modes. You can also find out via javascript with document.compatMode Cheers, Tim __ 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/
[css-d] Question about standards compliant mode in IE
Rumor has it that by using the proper doctype it is possible to force IE to operate in a standards compliant mode -- and thus avoid (in that one situation at least) the quirks that one might otherwise confront. I have two standard-ish header templates I'm working with. (i.e. flailing in the dark). 4.01 strict and XHTML 1.0 Strict. It annoys me that apparently I need to leave off the ?xml version=1.0... thingy in order to prevent IE from going into quirks mode. This means the page will not validate as xhtml. And I've heard some folks suggest that delivering xml as text content is not a good idea (sounds like a fight above my pay grade). So because of this I am using the 4.01 strict. But I don't know if I'm making a mistake or not. In any case, the real question is: Is there a validator type page that will tell me whether or not a particular url is definitely being rendered in standards - mode or if it is in quirks mode. Basically I'm looking for a quirks detector. Does such a thing as a quirks detector exist? Regards, Claude !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; html head title/title link rel=shortcut icon href= meta name=DESCRIPTION http-equiv=DESCRIPTION content= meta name=KEYWORDS http-equiv=KEYWORDS content= meta http-equiv=Content-Type content=text/html; charset=utf-8 link type=text/css href=main.css rel=stylesheet /head !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; html xmlns=http://www.w3.org/1999/xhtml; head title/title link rel=shortcut icon href= / meta name=DESCRIPTION http-equiv=DESCRIPTION content= / meta name=KEYWORDS http-equiv=KEYWORDS content= / meta http-equiv=Content-Type content=text/html; charset=utf-8 / link type=text/css href=main.css rel=stylesheet / /head ?xml version=1.0 encoding=UTF-8 ? removed from its proper position at top of file because of rumors that it will put some version of IE into quirks mode. __ 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-d] Question about how to handle div height with floating children
The issue is when an image is set to float, the height of the graphic is not taken into account for the calculation of the div height. This is illustrated on page: http://www.xxaxxsoft.com/cssdiscuss/test.html I can hack my way around this by setting the height of the div explicitly. Or, I can also put something like div style=clear: left/div inside the parent div after the image. This seems to trigger the image's height being used to calculate the height of the div. But I would like to understand why this is happening and have some idea of the best practice for handling this issue. Any hints would be much appreciated. Regards, Claude Needham __ 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] Question about how to handle div height with floating children
Bobby: http://www.fiveminuteargument.com/float-container Thierry: http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp Thank you both for the explanations. I think I have a much better idea why this behavior is necessary as the default. And I have a better idea on how to handle it. I must say though, that Thierry's article reintroduced me to the hell in a can of worms known as cross-browser compatibility. Periodically I make resolutions (of the New Year's variety) to be more cross-browser compatible. Then I fall into blissful sleep forgetting about everything other than Firefox and IE7+. Now at least I have another resource when making fresh attempts to handle those other browsers properly. Thanks for the help. Much appreciated. Claude Needham __ 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 problem
On Fri, Mar 19, 2010 at 8:28 AM, Atkinson, Sarah sarah.atkin...@cookmedical.com wrote: I have been working on this yesterday and today And I simply can't figure it out. It is a wordpress site. And it just is giving me some very weird giant white box display problems win IE6 and 7. http://test.grantstinn.com/ Hello Sarah, In IE6, I am not seeing what I would call a giant white box in the above sample page. I do see two issues. 1) The png images are not displayed properly. This is a common problem with IE6. There are known methods for handling png in IE6. Me, I'm a coward. I just use gif and jpg. 2) There is a 10 px margin between the light brown background content box and the darker brown border like line. For me, given my attitude about folks still using IE 6 in the light of current hyper-security risks, I would just pretend that I wanted the 10px margin at the bottom of the page. And let the IE6 users have a slightly different viewer experience. If this is a job for a client try browbeating them into upgrading to IE8 grin. Given the ultra weirdness of Wordpress/Addon css handling. I would try saving the document onto your hard-drive using something like the Firefox save complete document. Then you can edit the page removing stuff bit by bit until you isolate the problem without the extra complexity of potential cross interactions between different style sheets. If your giant white box is a different effect than I am seeing in my particular IE6, perhaps you could point to an image displaying the behavior. Regards, Claude __ 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] 2 small css problems
On Wed, Mar 17, 2010 at 8:43 PM, Rod Castello flashju...@sbcglobal.net wrote:
--- On Thu, 3/18/10, Rory Bernstein r...@rorybernstein.com wrote:
http://rorybernstein.com/francesca_proto/
On this page, I cannot get the hover to work on the nav bar links.
The style sheet is here:
http://rorybernstein.com/francesca_proto/style.css
The rule that I think should be making the text links turn red when
you hover is:
#nav li a:hover {
color: #FF000;
When I look at the current version of the page I get the following error:
Warning: Expected end of value but found ''. Error in parsing value
for 'color'. Declaration dropped.
Source File: http://rorybernstein.com/francesca_proto/style.css
Line: 85
style sheet
When I look at the style sheet I see the following:
/* HOVER NOT WORKING!!! */
#nav li a:hover {
color: #FF�;
}
You have a funny character in the code.
Delete the line and retype it.
This should fix the problem.
Regards,
Claude Needham
__
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] 2 small css problems
On Wed, Mar 17, 2010 at 8:33 PM, Rory Bernstein r...@rorybernstein.com wrote: Next, on this page: http://rorybernstein.com/francesca_proto/section_landing.html The div with the id of thumbnail_grid has a float:left rule. Shouldn't it sit alongside the div nav, and not under it? Why is it under it? I want the grid to sit to the right of the nav list. And, I can't figure out why the photos don't line up in neat rows/columns. Why is the grid irregular? The grid is irregular because the images are not the same height. If you make the images the same height then the irregular stuff should go away. To fix the nav and thumbnail_grid you can do the following. But first a word of disclaimer. I have learned css by doing tutorials and hacking around until stuff works. So, my background is not exhaustive. I am looking forward to other answers to this question. However, to just get the darn thing working so you can move on with your life you have a few options. Basically, as far as I know, the problem is you declare the width to be 100% If you give the width a value less than 100% it will work. You can either work with px or % If you choose px, then you should create a wrapper div that surrounds both the nav and the grig. Give this wrapper a width equal to the total width you want to use. Then give the grid a width = wrapper - nav. If you choose %, convert the 200px of the nav div to 20% or 25% or ??%, then make the grid 80% or 75%, etc. There is a possible issue with margin, padding, width combining differently in different browsers. So you might have to leave wiggle room in the widths. Hopefully someone with a broader background will clue us both in on this issue. But, in the mean time get your width down and things will work better. Regards, Claude Needham __ 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/
