Re: [css-d] How best to revise my style sheet? Reverse it?
I've already started working with the suggestions that were provided. Many thanks. -Keith __ 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/
[css-d] How best to revise my style sheet? Reverse it?
I recently looked at the style sheet for my long-neglected hobby site. It's a train wreck. I started thinking about the best way to rebuild it from scratch. Remembered some comments I may have heard here about building first for mobile devices, then adding any CSS necessary for computers/laptops. Is that good practice? Didn't find any discussion of this via Google. Tips? -Keith __ 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/
[css-d] CSS-only auto-center popup?
None of my tests for this have succeeded. We have a Flash-only online publication. Certain areas can be designated as plain hyperlinks. Plain meaning I can only assign a URL, not add a variables. I want one of these URLs to go to a small HTML/CSS file that will display as a popup window on top of -- and in the center of -- the original publication. This popup is for people who want more info about a particular topic in the article in the publication. I've found solutions using JavaScript, but prefer CSS only. Here's a link to one of our typical publications where areas are links ... http://seattlebusiness.imirus.com/Mpowered/book/vseabus13/i4/p6 - Keith __ 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/
[css-d] Media query to distinquish iPad 12 vs iPad 34
I put together the following code that was the same on several CSS
instructional sites. This test should show 1 2 when viewed on iPad 1 or
2, and show 3 4 when viewed on iPad 3 or 4. Not working; shows 1 2 on
iPad 3. I tried code verification thinking there was a typo, but it
approved everything except the webkit reference, which I expected.
- Keith
!DOCTYPE html
html
head
meta http-equiv=Content-Type content=text/html; charset=utf-8
titlecss to detect screen resolution/title
style type=text/css
html {margin:0; padding:0;}
body {margin:10px; padding:0;}
/* ipad 1 and 2 */
@media only screen and (min-device-width: 768px) and (max-device-width:
1024px)
{body {background-color:#3C3;}
}
/* ipad 3 and 4 */
@media only screen and (min-device-width: 1536px) and
(max-device-width:
2048px) and (-webkit-min-device-pixel-ratio: 2)
{body {background-color:#33F;}
}
/style
/head
body
bodyspan
style=color:#33F;font-weight:bold;font-size:4em;nbsp;1nbsp;amp;nbsp;2
/spannbsp;nbsp;span
style=color:#3C3;font-weight:bold;font-size:4em;3nbsp;amp;nbsp;4/span
/body
/html
__
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] Media query to distinquish iPad 12 vs iPad 34
On 2/18/2013 7:17 PM, Philippe Wittenbergh wrote:
@media only screen and (min-device-width: 768px) and (max-device-width:
1024px)
/* ipad 3 and 4 */
@media only screen and (min-device-width: 1536px) and (max-device-width:
2048px) and (-webkit-min-device-pixel-ratio: 2)
It is not surprising this is not working… the device-width media-query works in
CSS pixels, not physical pixels. What is the source of your above MQ's?
http://www.w3.org/TR/css3-mediaqueries/#units
Try this:
@media only screen and (min-device-width: 768px) and (max-device-width:
1024px) { /* iPad 1, 2, iPadMini */ }
@media only screen and (min-device-width: 768px) and (max-device-width:
1024px) and (-webkit-min-device-pixel-ratio: 2) { /* iPad 3, 4 */ }
When in doubt, always check the specs…
I didn't track the sources although I could find them again. At this
point the only reason would be to identify who not to trust, eh?
I'll try your suggestion when I'm back at the office.
Many thanks.
- Keith
__
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/
[css-d] CSS3 slider box/image triggered by onload?
My client has her heart set on each page of her site featuring a different image that slides in when the page loads. I found plenty of info about CSS3 and JQuery slider boxes. I'll probably design for the former and fall back on the latter. Having onload trigger the JQuery slide is a no-brainer. But in the case of the CSS3, would it not just be a matter of supplying the code which would launch the moment it finished loading into the browser (unless I add a delay attribute)? The only triggering events I've found so far for CSS3 were based on methods like a:hover -Keith Purtell __ 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] CSS to auto-adjust iframe content?
On 3/11/2012 4:53 AM, Philippe Wittenbergh wrote: http://www.keithpurtell.com/kthings/if.htm So, that is the typical Twitter packet - it generates a truck load of divs and loads contents via ajax calls. If you look at the source of that page, you see a js string that sets the width of one of the divs (as inline style in the generated code). If you look at the generated code through webkit inspector of firebug, etc, you'll see the whole html structure. What you actually want to do is not clear to me, but it should be dead easy to adjust the whole thing to your needs. Philippe Wittenbergh http://l-c-n.com/ Time to dig in and make some changes. Thanks for the pointers. - Keith __ 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] CSS to auto-adjust iframe content?
On 3/10/2012 9:11 AM, Ghodmode wrote: It's not really a CSS question, but a basic HTML question. Iframes have a scrolling property that defines whether or not the iframe should have scroll bars... http://www.w3.org/TR/html4/present/frames.html#adef-scrolling However, the default setting will give the iframe scroll bars. So, unless you see scrolling=no in the code, I think there might be something else going on there. Do you have some code you can share with us to help you solve the problem? -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com Here's a temporary link to their code. I'll take a look at the w3 link while anyone who cares to can comment on the following: It's supposed to fit inside a tall slender area, and the publisher wants the full text width visible via different viewports. One of my co-workers thinks the only solution is JavaScript. (NOTE: The publication is a relatively tame girlie/lifestyle magazine, just letting you know in advance in case you dislike such) ... http://www.keithpurtell.com/kthings/if.htm -Keith __ 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/
[css-d] CSS to auto-adjust iframe content?
We have a client where I work whose online publication has one area on a page defined as an iframe to pull in data from Twitter feeds. Data comes in fine. But this area does/doesn't have vertical/horizontal scroll bars showing up depending on your screen resolution or device. His tech who handles this doesn't know how to fix it, and he's asking us for help. Normally our system is a PDF-to-PNG process (how we publish for Web) not HTML/CSS/JavaScript. We do some of the latter for a few situations. I never use iframes. Wonder if someone can just point me in the right direction for info on how he can revise CSS to adapt iframe to different visitor platforms? (No link available at this time.) Thanks! Keith __ 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] Trying to override site style sheet with inline CSS?
On 10/9/2011 10:21 PM, Jukka K. Korpela wrote: 10.10.2011 5:57, Keith Purtell wrote: Here'a a direct link... http://tahlequahnow.com/story.php?id=568 Didn't you get my message that I sent to the list? (Sen Sun, 09 Oct 2011 13:20:32 +0300) You have the HTML attribute name style misspelled as stye. Jukka: Apologies; I've once again overlooked something important while juggling multiple projects. - K __ 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] Trying to override site style sheet with inline CSS?
On 10/9/2011 12:24 PM, css-d-requ...@lists.css-discuss.org wrote: Date: Sun, 09 Oct 2011 12:03:34 +1300 From: Mark Henderson shadefro...@gmail.com To: css discuss css-d@lists.css-discuss.org Subject: Re: [css-d] Trying to override site style sheet with inline Keith Purtell wrote: But one item defies all efforts. For some reason, hiss CSS for general text content is set up with a 1cm indent, which looks pretty ugly. I've been tolerating it with paragraphs, but it also kicks in whenever I try to add a list, which is uglier yet (screen capture: http://www.keithpurtell.com/kthings/gaps.jpg). I tried inserting inline CSS of text-indent:0 in both theol and thelis but it didn't have any effect. What to do to banish this monster? A screen shot for code debugging just isn't going to cut it I'm afraid. Help yourself by helping us and provide a public clickable link or your own simplified test case of the problem, and I am sure someone will find a solution. FWIW, it doesn't sound like it's limited to text elements and I would be inclined to look at any wrapper divs in question and check for margin or padding on those (but I am just guessing, because in this case a picture does NOT tell a thousand words!). Here'a a direct link... http://tahlequahnow.com/story.php?id=568 (P.S. Tried the !important method without success.) - Keith __ 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/
[css-d] Trying to override site style sheet with inline CSS?
I've taken on a project supplying content for an online new source. The problem is that the guy who set it up did a pretty good job with the PHP (and most the HTML and CSS) that allows me to use password-protected forms to upload articles and photos. I can also tweak some of my content occasionally by using inline CSS. But one item defies all efforts. For some reason, hiss CSS for general text content is set up with a 1cm indent, which looks pretty ugly. I've been tolerating it with paragraphs, but it also kicks in whenever I try to add a list, which is uglier yet (screen capture: http://www.keithpurtell.com/kthings/gaps.jpg). I tried inserting inline CSS of text-indent:0 in both the ol and the lis but it didn't have any effect. What to do to banish this monster? - Keith Purtell __ 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/
[css-d] Expression hack for IE quirk?
I'm curious as to what some of you may think of this method I saw for
handling IE's refusal to recognize max/min-width? I had never heard of
an expression hack.
* html #wrapper {
width: expression( document . body . clientWidth 972 ? 970px:
auto );
}
- Keith Purtell
__
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/
[css-d] DIVs referring to each other, and absolute positioning
I've removed most of the ugly blankness of my splash page, but two technical problems remain. 1-The horizontal positioning of the navigation and the text/pic content only work on a 1024x768 screen. I set the first at 25 percent width and the second at 75 percent width thinking they would adapt to different screen sizes. I suspect the reason it breaks on a narrower screen is that both items are floated and don't see each other, therefore can't work out the 25%/75% space. 2-The bottom color bars are supposed to sit at the bottom of the screen, and there should be no scrolling. It's based on the second link here, but my version ain't working. http://www.keithpurtell.com/kthings/ http://peterned.home.xs4all.nl/examples/csslayout1.html (his scrolls because of increased content) - Keith Purtell __ 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] DIVs referring to each other, and absolute positioning
On 8/15/2011 7:13 AM, Philip TAYLOR (Webmaster, Ret'd) wrote: Keith Purtell wrote: I've removed most of the ugly blankness of my splash page, but two technical problems remain. ... http://www.keithpurtell.com/kthings/ Keith, do you have any idea why the T is so badly (over)kerned in CONTACT ? It is very tight in OTHER and AUTHORS, but just gets away with it there because of the following H. With a follow A, it looks /really/ bad. Philip Taylor Philip, I don't know yet. It doesn't render that way on the browsers I use on my PC. I can run it through BrowserCam and find out where else it's doing that. I've never seen such a problem before. I was under the impression that reasonable kerning was built into most typefaces. - Keith Purtell __ 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] DIVs referring to each other, and absolute positioning
On 8/15/2011 3:22 AM, Chetan Crasta wrote: I have made many changes to your code to fix the problems you mentioned, see: http://roughtech.com/t/tft.html . Also, make sure you check your code with the w3.org http://w3.org css validator http://jigsaw.w3.org/css-validator/ and html validator http://validator.w3.org/ Regards, Chetan Crasta Chetan, thank you for going to the trouble to create better code. I'm studying it now to see how you approached the problem. Regarding the validation... I have run this page through both the markup and CSS validators. As you know, the CSS validator spits out a ton of error messages. Some of these are from the gradients, and if I understand correctly, there's not much I can do about what the validator thinks of commonly-used gradient CSS. The other errors seem to stem mostly from the fact that the style sheet contains numerous selectors from test pages and other experiments. It desperately needs housecleaning. Not only to be more professional, but because errors relating to recent issues I'm working on are likely to be lost in the torrent! - Keith Purtell __ 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/
[css-d] Testing CSS on iPhone not going well
I finally decided to fork over the cash for a smart phone; an iPhone 3GS. Since then I've been using it to make sure my site looks OK on a mobile device. Lots of bugs, despite the fact that my starting point was CSS provided by David L.: 1-I had to add a meta tag in each page header just to bring the page appearance into roughly normal appearance (meta name=viewport content=width=device-width, initial-scale=1) 2-I had to change the navigation box and article width from 98% to 62% to get them to stay inside the screen. 3-The vertical red line that separates my byline/name from the most recent update date has gone missing. 4-Problems like the headline on the Contact page going off the right side of the screen rather than wrapping. 5-The little blue boxes I use as a closing motif have shifted from the bottom right to a space closer to the left that overlaps the return to top link. http://www.keithpurtell.com/kthings/ Any suggestions? - KP __ 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/
[css-d] Separating DIVs vertically
This may seem really basic, but I'm trying to figure out best practice for stacking DIVs vertically. The first idea I had was a page with two fixed-width DIVs inside a wrapper DIV of that same width. I thought the second DIV would be forced down. Then I built a test page with three sequential DIVs and gave each one a class that set display:block. All three stacked up fine. Just to make sure it was the class causing that positioning, I disabled the class, and the DIVs remained vertically stacked. Does this mean sequential DIVs will inherently each fall into position one on top of the other? I looked through Eric's Definitive Guide but apparently not in the right place. If someone knows of where this may be discussed in his book, please let me know. - Keith Purtell __ 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/
[css-d] battling style sheets, or something else wrong
As an experiment, I've installed an Amazon widget called an Omakase on my site pages. (I've found Amazon to be the most likely place to find the books and music discussed on my site.) The JavaScript in it talks to the Amazon servers, somehow collecting the page topic and generating a small horizontal box which contains two links to other items by the same author/musician/whatever. The problem is the text size. For some reason, Amazon's text is showing up too large inside the box, at least with the browsers I've tried. I posted to the Amazon associates forum, and someone with more experience showed me the selector Amazon is using in their style sheets to control text size. He suggested I include it in my style sheet as well with a size change, based on the theory that this would somehow force the font size to obey. Didn't work. I can see Amazon's remote code via Firebug, but I can't figure out if my local style sheet is interfering with theirs, or what to do about it. Here's a link to one of the pages using the Amazon link... http://www.keithpurtell.com/kthings/robert-fripp.htm And here's a link to what I see in Firefox... http://www.keithpurtell.com/kthings/Omakase.png ... where the top of the text forced down is peeking just above the bottom border of the box. - Keith Purtell __ 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/
[css-d] Best way to use CSS to create image gallery
For a long time, an article on my site about a photographer has had a big problem. It talks about him but doesn't show any images. The problem was coming up with quality scans of a few of his prints. I solved that problem. Now I'm trying to think of the most efficient way to present the images. The best idea I've had so far is that this might be a good time for me to use a sprite. Suggestions? - Keith Purtell http://www.keithpurtell.com/ __ 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] Trying to retain CSS rounded corner during hover
On 5/23/2011 6:36 AM, css-d-requ...@lists.css-discuss.org wrote: Date: Sat, 21 May 2011 21:19:23 -0400 From: David Laakso da...@chelseacreekstudio.com To: css-d@lists.css-discuss.org Subject: Re: [css-d] Trying to retain CSS rounded corner during hover --- snip -- Whatever layout suits U2 is fine with us. Keep it lean and simple and the rounded corners will take care of themselves,.. sort of. http://chelseacreekstudio.com/purtl.htm Best, U2 David: Dang! I had this gut-level feeling that my implementation of rounded corners just wasn't working (not working as in kinda ugly). But it didn't bubble to consciousness until I saw your simple all-corners-rounded version. I saved a local version of your revision pronto. -Keith __ 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/
[css-d] Trying to retain CSS rounded corner during hover
On the top right of the draft version of a page, the Contact link is supposed to retain its rounded corner during hover. However, it's reverting to a rectangle, and I'm not sure why. http://www.keithpurtell.com/kthings/bab/index01.htm (Yes, I know that I haven't yet added the code for rounded corners in IE.) - Keith Purtell __ 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] Borders oddity when page viewed in Chrome
On 5/3/2011 12:45 AM, css-d-requ...@lists.css-discuss.org wrote: On May 1, 2011, at 6:16 AM, Keith Purtell wrote: I noticed the following problem today when I view my splash page in Google Chrome. The lower borders in the navigation box render normally, but all vertical and topmost borders are too light. I'm baffled. http://www.keithpurtell.com/kthings/chrome.png Interesting? Which OS is that ? And which version of Chrome ? Looking at the screenshot, the lower borders are rendered twice - once the expected color, once a lighter shade. Looks more like an issue with graphics rendering libs. it is like the borders are not painted hooked on the pixel grid (painted between 2 pixels). Does it changes if you resize the window slightly (making the width an even or odd number of pixels) ? #navigatex is set to have a width of 604px (even), but due to margin: auto, it doesn't always land exactly on the pixel grid, depending on the width of the parent blocks(s)/viewport. Each LI has a computed height of 109px (odd number !) on my system. Philippe, David, et al... Sorry for the ridiculously tardy reply. Something big came up. I took all the suggestions and reworked the style sheet wherever it seemed appropriate. The results were successful. Thank you! -KP __ 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/
[css-d] Borders oddity when page viewed in Chrome
Well, I expect quirks from IE, but I noticed the following problem today when I view my splash page in Google Chrome. The lower borders in the navigation box render normally, but all vertical and topmost borders are too light. I'm baffled. http://www.keithpurtell.com/kthings/chrome.png - Keith Purtell __ 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] Looking for online reference re optimizing style sheet syntax
On 4/18/2011 12:19 PM, Nancy Johnson wrote: There are optimization checkers and I have used those but do it judicially. http://designshack.co.uk/articles/css/18-css-compression-tools-and-techniques Some good info there. I hadn't looked into CSS sprites before. They'll be useful when I have pages with multiple images. -K __ 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/
[css-d] What is best practice when using CSS to create forms?
I have a simple form on my Contact page where I've used DIVs to organize content. Not sure this is best practice. I've seen online articles advocating definition lists (dl) and then the approach described at A List Apart: http://www.alistapart.com/articles/prettyaccessibleforms/ - Keith Purtell http://www.keithpurtell.com __ 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/
[css-d] Looking for online reference re optimizing style sheet syntax
I'm about 85 percent done with my site. The pages look acceptable but awaiting batch html/css validation. One thing I need to do is clean up the main style sheet. I found some general tips about this (at websiteoptimization.com), like ... ...remove whitespace, and use shorthand properties. Group common declarations, selectors, and CSS code in multiple classes to save space. Use the simplest selectors you can, high in the document tree and let them cascade. Be as vague and as abstract as possible in your CSS selectors. Sounds like good advice, but is there a place online where these topics are broken out in a bit more detail? - Keith Purtell __ 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/
[css-d] need local tool compress/expand css
I've found a variety of online tools that will compress the contents of my style sheet. But what I really want is software on my PC (Windows XP) that will let me both compress and expand. (I prefer to edit the CSS in expanded form.) Is there such an animal out there? - Keith Purtell __ 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/
[css-d] Gradients and CSS validation
Up until I put a final finishing touch on my website revision, I was successful in validating both HTML and CSS. That came to a crashing end when I added a gradient. Is this something I have to live with or can I change the gradient syntax to validate? http://tinyurl.com/44aeabd - Keith Purtell __ 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 didn't div border wrap around div contents?
Date: Thu, 07 Apr 2011 12:13:48 -0400
From: David Laakso da...@chelseacreekstudio.com
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Why didn't div border wrap around div contents?
Try opening the nav block and containing the content within it...
body {
/*font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 1.0em;*/
font: 1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#navigatex {
border: 1px solid /*#F3E5CE*/red; overflow: hidden;
}
ul#navlistx {
/*font: normal bold 2em Arial, 'Helvetica Neue', Helvetica,
sans-serif;*/
}
#articlex {
/*display:block;*/
/*font: italic bold 1.25em Arial, 'Helvetica Neue', Helvetica,
sans-serif;*/
margin: /*17em*/0 auto 5em auto;
/*width: 606px;*/
width: 60%;
}
David, I built a successful version using Jukka's suggestion about
modifying the li borders, but I'm also going to build one using your
idea and compare the two to see which is better suited for my site.
Thanks, both of you!
-K
__
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/
[css-d] Why didn't div border wrap around div contents?
I'm experimenting with a different version of my site entry page that is stripped down to banner, complimentary color boxes, simplified navigation buttons, and shorter introductory text. The problem I've just encountered is the borders on the navigation buttons. When I gave each list element a 1-pixel border, I knew they would double where the elements touched. But I figured the easy fix would be to add a 1-pixel border to the enclosing div. To my surprise, it only added thickness at the top. When I checked in Firebug, it seemed to indicate that the surround div border is acting like it is vertically squashed instead of drawing a line around the perimeters of where I believe the div exists. On top of that malfunction, adding the border to the div pushed the intro text way down, and along with it, the margin area below. What's the deal? http://www.keithpurtell.com/kthings/indexNew.htm - Keith Purtell __ 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] My media redirect is not kicking in
David, I'm not ignoring you. Since I started work on the media redirect, I've had a health issue that put me in the local hospital emergency room. And the house where I've rented a room for several years has gone into foreclosure, sending me quickly in search of a roof to put over my head. Sorry to go off topic; I just don't want anyone here to think I disrespect them. - Keith Purtell www.keithpurtell.com __ 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] My media redirect is not kicking in
On 3/27/2011 7:39 AM, HallMarc Websites wrote: I fixed the path to my style sheet for 800x600 screens but when I test it at that screen setting, I still get the style sheet for bigger screens. The validator says unrecognized media screen and (max-device-width: 800px) I'm steeling myself for the discovery of another dopey error. http://www.keithpurtell.com/kthings/ - Keith Purtell use link rel=stylesheet type=text/css media=screen and (max-device-width: 799px) href=css/style800.css and see this page http://www.ist.rit.edu/~jxs/services/mediaQueries.html Change to 799px had no effect when viewed on my PC. I'm interested in Alan's reply about that but the jargon w3.org uses in its recommendations confounds me. I only understand real-world syntax as it appears in Web page source. The html tag was gone from most of my pages. I can guess what happened; the power of search-and-replace: entire site can be disastrous. * width: 940px is (I'm told by experienced people) a hack to get around the fact that IE ignores max-width: 940px. I've temporarily removed the hacks until I sort out these other issues. The main style sheet always being called is precisely my problem. Here's the trigger ... I built the site at my usual 1024x768 display setting and it looked fine. Was reminded by several people this was unfair to people with smaller screens. My first effort to accommodate by creating liquid/responsive (still sorting out the distinctions between these terms) css but I didn't have a firm enough comprehension to make it work right. So I decided to at least provide for people on 800x600 screens. Yes, I understand they are a minority, but if it's within my power to respect such a minority I will try. I went into my Display control panel and changed my screen to display at 800x600. Then I built a style sheet within that environment. My test page was set up so that the only style sheet called was the 800 version. It looked fine on my screen; I was pleased. Then I added what I thought was a correct media redirect that would call the 800x600 sheet if that was what the visitor was using. I uploaded pages with the additional 800 redirect to the site. I fired up Firefox and went to the site. It wasn't working. Did a force reload to clear the cache; still wasn't working. Ran the html through a validation check and it passed. Used one of my Web developer tool bars that has a View CSS option that shows me which style sheet is in force. Sure enough, it was calling the main sheet not the 800. Tested it in Chrome (works great), Opera (needs a few more pixels clearance on the right), IE (not working). Got mad and posted to the list. Finally, my 800 style sheet a copy of the main style sheet with some changes to width, etc. As for writing a screen-size check to call the sheet for larger displays, won't that still leave me with the issue that the media redirect isn't working? (Well, not working for in some cases.) - Keith Purtell __ 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/
[css-d] My media redirect is not kicking in
I fixed the path to my style sheet for 800x600 screens but when I test it at that screen setting, I still get the style sheet for bigger screens. The validator says unrecognized media screen and (max-device-width: 800px) I'm steeling myself for the discovery of another dopey error. http://www.keithpurtell.com/kthings/ - Keith Purtell __ 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/
[css-d] Will on-page css override same selector in external style sheet?
Didn't find answer to this in my E. Meyer book or on the Web. Say I have a decent external style sheet that works for 85% of my site visitors. Then I decided that the selector for one item used throughout the site -- paragraph (p) for example -- needs to have a completely different set of properties and values for the remaining 15% of visitors. (So, it's not a situation like going into the main style sheet and adding a hack version of one of the property/value pairs within the the paragraph selector.) If I put a conditional comment (a simple if) for the 15% in the head, just below the call for my external style sheet, and include this completely different paragraph style within, will it override the one defined in the external sheet? Or do I need to instead have my conditional comment be an if or that calls up the main style sheet for the majority of visitors and a variant of the main style sheet with the alternate paragraph style? - Keith __ 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/
[css-d] UL or css table for navigation panel?
I'm trying to create a navigation panel with six links. I want it to appear as a horizontal rectangle with three links across the top and three directly below (all centered on a page). I'm not sure whether I should use my usual unordered list and then position the fourth, fifth and sixth li's below the first three somehow, or use a table. Yes, I know one of the goals of CSS was to provide a method for structuring Web pages that was superior to tables. But, Eric Meyer's reference has an entire chapter on the correct use of CSS to build/style tables. What do you all think? - Keith Purtell __ 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/
[css-d] Can an object be styled?
Can I apply CSS to an object (in this case a Flash object) in a page or do I need to wrap it in a DIV or P? The page where I applied styling directly to an object passed the validator, but I've got a funny feeling it's still not kosher. - Keith Purtell __ 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] Internal site links handled in print style sheet
David, I've been puzzling over the contents of that link ever since you
responded. The answer to the question in that discussion seemed to be in
Jason Arnold's post where he talked about ...
a[href^=http]
and
a[href*=sitethatisnotanexternalsite.com]
But, if I understand him correctly, his solution would mean using
absolute URLs to handle the internal links. Have I misinterpreted? I
noticed the difference between the use of the ^ and the * and wondered
if this was syntax like the methods I've used in regular expressions,
but I couldn't find an explanation on the Web of what these two
different symbols do here.
- Keith Purtell
On 11/12/2010 3:46 PM, css-d-requ...@lists.css-discuss.org wrote:
--
Date: Fri, 12 Nov 2010 11:47:51 -0800
From: David Hucklesby huckle...@gmail.com
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Internal site links handled in print style sheet
On 11/10/10 5:09 PM, Keith Purtell wrote:
I'm using this CSS ...
a[href^=http://]:after {
content: (online at: attr(href));
}
...to handle links to external sites when a visitor prints one of my
pages. However, I occasionally refer to related pages within my own
site/file directory. Not sure how to handle these links in the print.css
style sheet.
Oddly, there was a useful discussion of this kind of issue over at the
Web Standards Group recently:
http://www.mail-archive.com/w...@webstandardsgroup.org/msg41914.html
HTH.
Cordially,
David
__
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] How to avoid quirks mode
I have a newbie question. I'm aware from discussion here that IE may run in quirks mode depending on how the html document is set up. But, it wasn't until viewing a css tutorial on lynda.com that I saw a specific way to prevent (most) IE quirks. Author Bill Weinman suggests the following code at the top of each html document. I've made the change throughout my site, but I want a second opinion about whether this is best practice. Thank you. (I noticed that after I made this change and opened ea page, Dreamweaver showed an alert that it had added a closing space and forward slash to many of my tags. Mostly in the head, but also with images and some code that embeds a Flash object for playing mp3 files. I'm curious as to why it did that.) !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; ?xml version=1.0 encoding=utf-8? html xmlns=http://www.w3.org/1999/xhtml; - Keith Purtell __ 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 to control indent
Aha; it worked! The only oddity was that I had to make the last space following the em dash a non-breaking space. Otherwise, the browser acted as if it wasn't there. Wonder why? As for keeping the text on the left from breaking, I just took a shot in the dark based on a vague recollection that width: auto would work. At first, the fact that the credit contents on the right had varying widths was kind of visually jarring. It still is, but I reduced some of the visual confusion by making the left text bold. Thanks. - Keith Purtell On 11/15/2010 2:47 AM, css-d-requ...@lists.css-discuss.org wrote: -- Message: 22 Date: Mon, 15 Nov 2010 09:46:52 +0100 From: G.S?rtun gunla...@c2i.net To: css-d@lists.css-discuss.org Subject: Re: [css-d] css to control indent Message-ID: 4ce0f37c.4000...@c2i.net Content-Type: text/plain; charset=ISO-8859-1; format=flowed On my credits page, I want any long text after the em dash that wraps to restart below and at that point where the text string begins after the em dash. Rod Castello's idea is sound, but instead of divs you should place 2 spans inside the existing paragraph. Float the first span left and prevent its (text-)content from breaking so the float can take some resizing. Then apply 'display: block; overflow: hidden' to the second span. The effect - and additional styling for less capable (older) browsers - can be seen here... http://www.gunlaug.no/contents/wd_example_01_02.html#ex4 Experiment a bit with the left-floating span, as I have used an image while you'll be using text. Un-styled those spans will fall back to what you have now - normally wrapping text inside paragraphs. regards Georg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css to control indent
This looked like such a simple problem, but none of my experiments have worked. On my credits page, I want any long text after the em dash that wraps to restart below and at that point where the text string begins after the em dash. Seems like I'm overlooking an obvious solution? http://www.keithpurtell.com/kthings/credits.htm - Keith Purtell __ 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-d Digest, Vol 96, Issue 6
Pardon my ignorance, but does this mean leading is not normally applied to replaced elements, or that applying leading to the replaced element (in this case an img) would be correct procedure and avoid the need for the padding technique I used? - Keith Purtell On 11/8/2010 12:32 AM, css-d-requ...@lists.css-discuss.org wrote: -- Date: Sun, 7 Nov 2010 21:27:36 -0800 From: Thierry Koblentz n...@tjkdesign.com To: keithpurt...@keithpurtell.com, 'css discuss' css-d@lists.css-discuss.org Subject: Re: [css-d] Aligning a floated image with the top of following text Part of the way into revising my little site, I noticed that the top edge each floated image was about four pixels above the top of the capital letter(s) of the text that immediately followed. I found a solution; using padding to push the image down a bit. But I never understood why that four-pixel disparity was there in the first place? http://www.keithpurtell.com/kthings/atget.htm This space is called half-leading. It is half the difference between the value of line-height and font-size. If the image does not have the same space above it, it is because leading is not applied to replaced elements. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Internal site links handled in print style sheet
I'm using this CSS ...
a[href^=http://]:after {
content: (online at: attr(href));
}
...to handle links to external sites when a visitor prints one of my
pages. However, I occasionally refer to related pages within my own
site/file directory. Not sure how to handle these links in the print.css
style sheet.
- Keith Purtell
__
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] Quirks compendium?
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? - Keith Purtell __ 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] Aligning a floated image with the top of following text
Part of the way into revising my little site, I noticed that the top edge each floated image was about four pixels above the top of the capital letter(s) of the text that immediately followed. I found a solution; using padding to push the image down a bit. But I never understood why that four-pixel disparity was there in the first place? http://www.keithpurtell.com/kthings/atget.htm - Keith Purtell __ 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] Using ems for image size
Hope this doesn't veer off topic... I'm experimenting with making my site more accessible for vision-impaired people by using ems in my CSS style sheet for image sizes as described at http://sperling.com/examples/zoom/ The problem is calculating the ems. I have to open the image in Photoshop, use Image Size to figure what the height and width pixels would be at a slightly smaller size, then go to an online site that lets me convert pixels to ems. What a hassle. Shorter path? - Keith Purtell __ 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] Seeking browser compatibility
Wow, thanks for all the replies. Looks like I need to do some testing after all. - Keith Purtell -- Message: 19 Date: Thu, 16 Sep 2010 09:32:07 -0700 From: David Hucklesby huckle...@gmail.com To: css-d@lists.css-discuss.org Subject: Re: [css-d] Seeking browser compatibility On 9/15/10 5:24 PM, Keith Purtell wrote: In my search for information about accommodating different browsers, I've come across four recommended approaches: 1-Write a JavaScript to load separate style sheets. 2-Use JavaScript to write local css in the page header. 3-Use conditional comments to insert JavaScript or css into the header. 4-Write a single css style sheet that is cross-browser. [...] At the risk of gilding the lily--you have already seen three excellent solutions-- here is yet another alternative: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ (If that link breaks, try http://goo.gl/CRQY ) Cordially, David -- __ 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] Seeking browser compatibility
In my search for information about accommodating different browsers, I've come across four recommended approaches: 1-Write a JavaScript to load separate style sheets. 2-Use JavaScript to write local css in the page header. 3-Use conditional comments to insert JavaScript or css into the header. 4-Write a single css style sheet that is cross-browser. A typical example of a problem I'm trying to deal with is IE ignoring max-width. I've found the least info about option 4; not sure it's possible? PS I'm trying to accomplish this without server-side functions. My cheap-o agreement with my hosting service limits me to plain html and css documents. Sites advocating these different approaches seem credible, so I'm left with the problem of figuring out which is best. I'd rather ask you folks than run tests that someone else has already performed. - Keith Purtell __ 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] Using em or pixel
I've been working on making my css flexible with different browsers/screen resolutions/devices. The best information I've found so far has been the Patrick Griffiths article at A List Apart. In applying the suggestion that I use ems as often as possible, I've found instances where only pixels would give me control. Is there a general guideline about best use of each? - Keith Purtell __ 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] Zooming and wrappers
David: It's taken me a while to write you because I've been digesting and applying all the advice I got about my newbie CSS efforts. You said: Be aware that IE7 will not change the size of a background on the body element when a page is zoomed. I suggest you put that faux column background on a full-width wrapper element instead. This sailed right over my head. The only zooming I'm familiar with is when I use Ctrl- or Ctrl+ if a site page is too large or small inside my browser window. If the faux column you're talking about is the vertical brown column on the left, you'll be glad to know I killed that. However, I'd still like the educational benefit of know what you meant by putting it in a wrapper element. One more question: In the text of my article, I've used two hyphens to simulate a dash. Can someone point me to a tutorial on how to achieve punctuation like dashes on the Web? http://www.keithpurtell.com/kthings/a_body_vance_divs.htm - Keith Purtell __ 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] kthings 02 (Formerly Floating images -understanding ...etc.)
I will correct these errors asap. Thank you for taking time to critique my efforts. Css-d is an outstanding community resource. - Keith Purtell http://www.myspace.com/canyonsofthesky __ 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] kthings 02 (Formerly Floating images -understanding ...etc.)
Time, and considering keeping the existing brown area, putting brief text in the nav buttons. Then they'd see the full page title when they got there. So many options. Thanks again for helping. - Keith Purtell __ 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] kthings 02 (Formerly Floating images -understanding ...etc.)
Re David Hucklesby's reply: First, thanks for the image citation advice. And the navigation on the left: Somehow I have to make that fit the available space. What to do? Why not give it more space? This end, I have very long line lengths on the main text - shorter would be easier to read. That would give you more room for the navigation. The brown area is too narrow, unless I use one of the fly-out menus (what I call them) in the Listmania link you provided. Before I go there, however, I'm going to try something more simple that will post soon. It also will borrow from one of the Listmania examples. http://css.maxdesign.com.au/listamatic/ B - Please follow the Dave Marsh link on the left. There are three important features on this old page. 1-The way Keith's Favored Things butts up right at the top. I tried using the same code in the Jack Vance page but it didn't work. The page markup and styling for this text are entirely different, so I don't know why you would expect them to look the same? Because I'm green. Need to do more work on my end and less expecting you guys to supply answers. Finally, please note the comment I put about half way down in the style sheet. http://www.keithpurtell.com/kthings/a_body_vance_divs.htm Are we supposed to guess which one? Be nice to Opera 5 perhaps? (Why?) I was referring to the comment: All the following code is seven years old. Since then, I've forgotten how most of it works. There are references in the Web pages to style in this sheet that I can't even find. Examples: id=Header AND id=ContTop - Keith Purtell http://www.myspace.com/canyonsofthesky __ 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] kthings 02 (Formerly Floating images - understanding ... etc.)
I took every message I got about this Web page and pasted it into a 24-page MS Word document. I read it all once, then went back and highlighted the most important parts. Then I went to work on the page and style sheet. The result is better, but A) has a few glitches, and B) doesn't have some features I want that are on the other older pages of the site built when I didn't know what I was doing (sounds crazy). A - Notice the first photo credit. The only way I could make it fit was to put it in a div the same width as the image. I don't see myself doing that for the entire site. Also, I can't figure out why the word Used didn't appear on the previous line. For some reason, the text wrapped prematurely. The second image credit has the same cheat even though it doesn't match the image width. And the navigation on the left: Somehow I have to make that fit the available space. Smaller font? But that leaves the issue that this page will be within the Books section, and those selections overflow to the right. What to do? B - Please follow the Dave Marsh link on the left. There are three important features on this old page. 1-The way Keith's Favored Things butts up right at the top. I tried using the same code in the Jack Vance page but it didn't work. Something to do with our old style sheet import issue? 2-The way the Dave Marsh heading appears. I also tried the same code on the Jack Vance page. It failed. 3-The slightly textured background on the Dave Marsh page. Apparently a property of the BODY tag, but it's not working on the Vance page. Finally, please note the comment I put about half way down in the style sheet. (My apologies for these posts that are so much longer than most everyone else.) http://www.keithpurtell.com/kthings/a_body_vance_divs.htm - Keith Purtell __ 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] Missing digest for Aug 20?
I normally receive a daily digest from lists.css-discuss.org sometime during the morning. It is now 7 p.m. CST on Aug. 20 and I haven't received anything. Was wondering why. I don't want to miss any of today's comments. - Keith Purtell __ 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] Floating images - understanding the details
Bobby, Embarrassed to admit this, but Firebug was one of three Firefox add-ons that were suggested; all have been installed but I've been too busy to try them out! - Keith Purtell On 8/19/2010 5:51 AM, Bobby Jack wrote: I don't think anyone's mentioned Firebug yet, which must be a first! It's a Firefox plugin which is excellent as a debugging tool, a design tool, and a training tool for those new to CSS. Firebug will (to some extent) answer your 3 questions - and many more - by providing visual feedback, in your browser, of how various styles affect the design. http://getfirebug.com/ I recommend it as an absolute must for any web design work. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating images - understanding the details
OK, I'm taking a break. I need to re-read everything you all sent me, and I need to finish Eric's book. Then, I'll revise the page and style sheet. Thanks a million! - Keith Purtell __ 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] Floating images - understanding the details
Making progress. As you kindly recommended, my images now use a float
property for both left and right. Here's the glitch. In order to provide
white space for text that flows around each one, I lifted the following
code directly from Eric Meyer's book:
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
Second, I especially don't understand how he has illustrated margin. Why
do '1' and '1em' and '1em' follow each other that way, and what are they
accomplishing.
Third, the padding. Why is it necessary and how is it affecting the the
flow of text around my images?
Finally, I need the images to indent 140 pixels like the text. Easy?
I will include the same caveat I have repeated before: If I am depending
on you folks too much and not relying on my own brain power, simply
refer me to the correct section in my bible; Cascading Style Sheets,
The Definitive Guide
http://www.keithpurtell.com/kthings/a_body_vance_divs.htm
--
- Keith Purtell
__
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] The big picture (formerly floating images understanding the basics)
Wow. I got a mountain of suggestions that I did not expect; all valuable. There were common themes. Many involved the way I lifted example code and expected it to work real time without understanding the specifics. In my own defense, this fascinates me, and I'm probably trying to go too fast to arrive at the result I can see in my mind. Several people also made comments that made me think about which code belongs in the style sheet and which items must be handled at the page level. Here are two responses giving me the most to think about: 1. Tim wrote about putting page elements in containers (hope I paraphrased him correctly). That brings up an issue I will have to deal with quickly. My goal for each image is this: Beneath each one should be a bit of text crediting the source/photographer. In print publications, it's not only standard courtesy, but there are some legal issues concerning copyright and fair use. I can either add the credit by going into Photoshop and re-processing every single image so that it includes said text (NOT going to happen), or I can devise some way via html/css to display the credit beneath the image. 2. Also, the mail I got from Chris. He touched on something crucial. Notice how I named this document a_body_vance_divs.htm? One of my first thoughts when I started this was that I should use divs to speed download. Not so important now that dial-up is mostly dead, but I'd still like to simplify page loading. If I understood him correctly, he was also pointing out that using divs would be the most efficient way to push all body text and images 140 pixels to the right. That leads me to a what I'm planning for that cleared area on the left Remember how I prefaced an early query by saying something like ignore the attempted fly-out navigation links at the top left? My preferred design for this site is that the user will navigate to categories via some type of links in a column occupying the medium-brown area on the left. (I'll wait until a future version to use fly-outs, although I think Amazon.com has implemented them successfully.) One method I've seen (I won't provide a link because it was at a porn site) featured a link the user could click on and up would pop a tall vertical box with main topics in bigger gray text and individual pages within that category in smaller gray text. It was all seamless and the user merely had to mouse up to the target and click. Clever, but a little too graceless for my taste. What I prefer for this first revision of my little hobby site is a vertical row of lighter-brown boxes in the medium-gray area on the left, each with the category only (books, music, etc). Upon arrival in that category, the links at left will change to separate pages. Apologies for this lengthy note. - Keith Purtell __ 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] Controlling image placement with CSS
Because, long ago when I started with CSS, someone I thought was a guru told me I had to do it that way to accommodate several browsers. At that time, it may have been true. I will make the change you have suggested and move on to the matter of placing images correctly. Why not try the alternative : link rel=stylesheet type=text/css media=all href=style_120704.css Philip Taylor - Keith Purtell __ 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] Controlling image placement with CSS
I noticed that the answers I got to this were the exact same ones that I posted in the Adobe Dreamweaver forum. If the same people are giving me the same answers, I suppose I can quit posting to the Dreamweaver forum, and save myself the trouble of deleting the large number of individual emails it generates in my inbox! -- - Keith Purtell __ 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] Controlling image placement with CSS
Well, the validator was a huge help. Two problems I ran into: 1- It did not like the way I imported my style sheet. I thought my tag style type=text/css media=all @import=style_120704.css;/style was correct, but the validator choked on both the @ and the ; 2-I tried just pasting in my link into the 'address' field at http://validator.w3.org/ and clicking on the 'check' button, but the result was incomprehensible. I'll fix the image and 'pindent' problems next, Chris Akins, it's almost midnight and I'm tired! - Keith Purtell Message: 21 Date: Mon, 16 Aug 2010 08:18:20 +0100 From: Duncan Hill dun...@gmail.com Subject: Re: [css-d] Controlling image placement with CSS To: css discuss css-d@lists.css-discuss.org, Keith Purtell keithpurt...@keithpurtell.com Message-ID: op.vhirwuabrio...@asus-01.lan Content-Type: text/plain; charset=utf-8; format=flowed; delsp=yes On Mon, 16 Aug 2010 04:35:09 +0100, Keith Purtell keithpurt...@keithpurtell.com wrote: I want to diagnose problems on this page. One at a time; I don't want all the answers to every flaw you see ... I want to work and try to figure out most of this myself. Please ignore the attempted fly-out navigation links at top left for now (I'm looking at this in FireFox by the way). What about my images? You can see how I handled them years ago; putting them in boxes so text would flow around them. I turned on the borders so you could see that. Obviously they are not indenting 140 pixels like the text. I tried placed the first image/table inline the paragraph, but that obviously failed. Comments? I'm still reading Eric Meyer's book (Cascading Style Sheets/The Definitive Guide): Maybe I just need a pointer to the right chapter? http://www.keithpurtell.com/kthings/a_body_vance_divs.htm - Keith Purtell Keith, The first place to start with any problem on your page is code validation, both the HTML and the CSS. http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.keithpurtell.com%2Fkthings%2Fa_body_vance_divs.htm http://bit.ly/9O9lp8 __ 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] Controlling image placement with CSS
I want to diagnose problems on this page. One at a time; I don't want all the answers to every flaw you see ... I want to work and try to figure out most of this myself. Please ignore the attempted fly-out navigation links at top left for now (I'm looking at this in FireFox by the way). What about my images? You can see how I handled them years ago; putting them in boxes so text would flow around them. I turned on the borders so you could see that. Obviously they are not indenting 140 pixels like the text. I tried placed the first image/table inline the paragraph, but that obviously failed. Comments? I'm still reading Eric Meyer's book (Cascading Style Sheets/The Definitive Guide): Maybe I just need a pointer to the right chapter? http://www.keithpurtell.com/kthings/a_body_vance_divs.htm - Keith Purtell __ 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] Re-entry into Web design
Six years ago I was a self-taught Web designer just as CSS was becoming widespread. I used some CSS on our company intranet. I am re-entering the field. I've been reading Eric Meyer's book with great interest. I've also done a lot of peeking at other people's code at different sites. I plan to revise a sample page (using CSS) from my old hobby site and upload it to my domain in a few weeks. I'd like to be able to post the link here and get comments/troubleshooting. Hope that's OK. - Keith Purtell __ 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/
