Re: [css-d] desktop. tablet. mobile.
Love it. Very clean design. Good supportive palette. BUT...the page/screen layout is a portrait / vertical layout vs. landscape / horizontal and (virtually) all monitors are horizontal. This is forcing a piano roll page view...that is, I have to scroll down the page to get to some very important information: the site menu and business contact information. And depending on the viewers real world screen resolution they may not even realize that they need to scroll down. Moving the Menu and Contact Info to a screen-left or screen-right may help make the site more universally accessable. Best, DK -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso Sent: Monday, January 30, 2012 6:32 PM To: CSS Discuss Subject: [css-d] desktop. tablet. mobile. First pass: http://ccstudi.com/site/portfolio/w/ Constructive comments and suggestions are always appreciated. Thanks. Best, ~d -- Chelsea Creek Studio http://ccstudi.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-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] How To Clear CSS Caching?
2/ Delete the CSS file from the server. Boot. Upload the CSS file from the hardrive to the server. I have tried this numerous time and even so the browser will still use the CSS stylesheet it has cached. I have used a simple trick in the past which has worked for me: I mis-spell the css file reference on my index.html page, upload that page and I will get a file not found error message. Then I correct the mis-spelling and re-upload the file. It will now find the correct css file and read it. For example: link rel=stylesheet href=/css/global.css type=text/css / is the correct reference. I mis-spell it to link rel=stylesheet href=/css/OLD-global.css type=text/css / And upload index.html. This gives me an error since there is no OLD-global.css I then correct the mis-spelling and re-upload the file...and it is then found and read. Dan 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] dynamic CSS strategies
One solution is to use your server-side programming to dynamically generate the CSS file. This way you can control all sorts of things in your layout and look-and-feel relative to your database queries. In your case, for your column of links, write an IF/ELSE statement based on the record count. This code would be in the file that generates the CSS file that is sent to the browser. Such as site_styles.cfm or .php or .asp, or ... which generates site_styles.css IF #record count# x [css for one column width] ELSE [css for two columns] The downside to this approach is that your CSS file is regenerated and transmitted with EVERY call from the browser. A workaround to this problem would be to use inline CSS in the page that contains the link-list column(s). This way you're not regenerating the entire CSS file, just the particular code (selectors and rules) that pertain to a specific area of your page. This, of course, generates the dreaded future maintenance problem(s)--you now can't go to one place to maintain your CSS, it is now distributed throughout the site code/pages. Dan K -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Colin (Sandy) Pittendrigh Sent: Sunday, October 09, 2011 7:22 AM To: css-d@lists.css-discuss.org Subject: [css-d] dynamic CSS strategies This is a CSS discussion list. So programming issues are not on topic here. But if I keep my dynamic CSS question abstract enough I don't see why it isn't a CSS issue as much as anything else. Let's say my content management system is currently using a three column layout, where a left side column of links is usually defined as 16% of available width. However, if it turns out the current page has a larger than normal number of navigation links, I could (somehow) set the navigation column width to 25% so it could contain two vertical rows of clickable links, rather than one vertical column. What is the best way to do this? My CMS codes could calculate the number of needed links before generating any output, and then choose from any one of several hard-coded CSS files depending on the total link count. Or I could manipulate the browser's CSS on the fly with Javascript and the DOM tree (which used to be a browser-sniffing nightmare, the last time I tried it). Are there any alternate strategies I'm not aware of.simply because I'm an amateur hacker and not a well-educated professional? -- /* Colin (Sandy) Pittendrigh --oO0 Have code will travel */ __ 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-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] dynamic CSS strategies
Excellent solution Barney!
Same general concept IF, but much more elegantly and efficiently delivered.
Dan K
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Barney Carroll
Sent: Sunday, October 09, 2011 8:14 AM
To: Dan Kaufman
Cc: Colin (Sandy) Pittendrigh; css-d@lists.css-discuss.org
Subject: Re: [css-d] dynamic CSS strategies
None of the above: Use a class to determine the various layout
conditions. Assuming some kind of inline templating engine:
CSS:
.navigation {
width: 16%;
}
.navigationWide {
width: 25%;
}
Template:
div class=navigation[ if(linkCount = largeNumber){ print
navigationWide } ]
ul
lia href=etc
etc
etc
Keep all your CSS in one place, introduce CSS hooks from the backend
depending on your various conditions. If your back-end isn't that
flexible, DOM Javascript can provide.
Regards,
Barney Carroll
barney.carr...@gmail.com
07594 506 381
On 9 October 2011 15:40, Dan Kaufman d...@studiokaufman.com wrote:
One solution is to use your server-side programming to dynamically
generate
the CSS file. This way you can control all sorts of things in your layout
and look-and-feel relative to your database queries.
In your case, for your column of links, write an IF/ELSE statement based
on
the record count. This code would be in the file that generates the CSS
file
that is sent to the browser. Such as site_styles.cfm or .php or .asp, or
... which generates site_styles.css
IF #record count# x
[css for one column width]
ELSE
[css for two columns]
The downside to this approach is that your CSS file is regenerated and
transmitted with EVERY call from the browser. A workaround to this
problem would be to use inline CSS in the page that contains the
link-list
column(s). This way you're not regenerating the entire CSS file, just the
particular code (selectors and rules) that pertain to a specific area of
your page. This, of course, generates the dreaded future maintenance
problem(s)--you now can't go to one place to maintain your CSS, it is now
distributed throughout the site code/pages.
Dan K
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Colin (Sandy)
Pittendrigh
Sent: Sunday, October 09, 2011 7:22 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] dynamic CSS strategies
This is a CSS discussion list. So programming issues are not on topic
here.
But if I keep my dynamic CSS question abstract enough I don't see why it
isn't a CSS issue as much as anything else.
Let's say my content management system is currently using a three column
layout, where a left side column of links is usually defined as 16% of
available width.
However, if it turns out the current page has a larger than normal number
of navigation links, I could (somehow) set the navigation column width to
25% so it could contain two vertical rows of clickable links, rather than
one vertical column.
What is the best way to do this?
My CMS codes could calculate the number of needed links before generating
any output, and then choose from any one of several hard-coded CSS files
depending on the total link count. Or I could manipulate the browser's
CSS
on the fly with Javascript and the DOM tree (which used to be a
browser-sniffing nightmare, the last time I tried it). Are there any
alternate strategies I'm not aware of.simply because I'm an amateur
hacker and not a well-educated professional?
--
/* Colin (Sandy) Pittendrigh --oO0
Have code will travel */
__
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-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-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-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
Re: [css-d] :: iPad ::
Works fine in iPad 2, portrait and landscape. Though the site is a piano-scroll layout. In portrait view the last item on the left-column menu is below the screen bottom. Consider tightening up the header and/or line height of the menu li items. Dan K. -Original Message- A quick check of this page http://goo.gl/B2riT in iPad landscape and portrait view appreciated. Best, ~d __ 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-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] :: iPad ::
Piano-scrl Where the page is lng on the vertical. As the visitor scrolls down the page, very soon any information about where they are is lost, out of sight. All they see is the screen-segment of the current content. The site ID is lost, out-of-sight. In your site example at http://goo.gl/B2riT, in the iPad in landscape mode, the displayed screen seems complete, there is no indicator that there is more below. Remember that the iPad doesn't have scroll bars, vertical or horizontal. So in landscape view I may think that I'm seeing it all but in fact there is more below the bottom and more critically there is part of the Nav menu below the bottom. When I rotate to portrait view I see the full Nav menu and the screen also looks complete BUT again you have content below the bottom that I may not find unless I drag my finger to scroll the screen. Try to design for full screen content with nothing hiding below the bottom. Where this isn't possible, try to use an indicator, a clue to the viewer, that there is more below. For example a paragraph of text can extend below bottom and the visitor will naturally scroll as he/she reads it. But when the layout of your content is such that in a static view, the opening, default, position, the screen has an its all there view your visitor may not realize there is more below to scroll for. Hope this helps. Dan K. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso Sent: Sunday, September 04, 2011 2:47 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] :: iPad :: On 9/4/11 5:23 PM, Dan Kaufman wrote: Works fine in iPad 2, portrait and landscape. Though the site is a piano-scroll layout. In portrait view the last item on the left-column menu is below the screen bottom. Consider tightening up the header and/or line height of the menu li items. Dan K. A quick check of this pagehttp://goo.gl/B2riT in iPad landscape and portrait view appreciated. Best, ~d What is a piano-script layout? ~ __ 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-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] :: iPad ::
Yes to 1/ The entire width of your layout is visible in an iPad portrait mode, but not all the height is visible. column 1 which contains a vertical Nav menu, and column 2 which contains content. But in iPad landscape mode because of the individual height of each of the li elements the overall vertical height of the entire Nav meun extends below screen bottom. I only see as far as the Contact list item. Sitemap is below the bottom. I was suggesting to reduce the overall height of the Nav menu so that ALL Nav items appear on the screen when the iPad is rotated from portrait to landscape. I was also suggesting that your page layout is very long vertically and as soon as a visitor scrolls down the page, following your content, he/she looses sight of where they are, what website they are in and how to navigate that site. Consider using the FIXED position property on the Nav menu so it will hold its position on the page. An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled. This way your Nav menu will always be visible while your visitor scrolls down the long content column. See: http://www.w3schools.com/css/css_positioning.asp Best, Dan K. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso Sent: Sunday, September 04, 2011 5:06 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] :: iPad :: On 9/4/11 6:05 PM, Dan Kaufman wrote: Piano-scrl Where the page is lng on the vertical. Hope this helps. Dan K. re: http://goo.gl/B2riT 1/ When the site is viewed in iPad portrait view are there two columns: nav on the left and content on the right? 2/ Or, when the site is viewed in iPad portrait view is there one column: content followed by navigation [as in a Piano-Roll, rather than an in a Garage-Band Piano Scroll? 3/ Either way, I get the point that some stuff is hidden from view; and, therefore, that stuff may not be accessible... Thanks, ~d __ 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-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] Can someone please help me.
I would suggest something like this...
For the nav menu item:
lia href=#tourCosta Rican Real Estate Tour/a/li
Add a class to this item (to identify it uniquely) and then define a CSS
style to eliminate the underline.
For example, change your HTML like this:
li class=noLinea href=#tourCosta Rican Real Estate Tour/a/li
Then in your CSS define a class like this:
.noLine a {
border-bottom: 1px solid # 003fd2;
}
This will simply change the color of the white bottom border to the same
background color of the nav menu, effectively making it invisible. But the
advantage is your nav layout won't change shape, you'll still have the same
bottom space below the last item as you currently have top space above
the first item.
And make sure you place this class definition after the set of #p7PMnav
definitions in your CSS.
I haven't tested this out, but it should work. I often will make a class
called .last when I have a site with lots of lists and I want the last
item to be treated slightly differently than all the other items in the
list.
Hope this idea helps,
Dan
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Gail Issen
Sent: Saturday, August 06, 2011 10:55 AM
To: 'css-d'
Subject: [css-d] Can someone please help me.
I'm working with a ProjectSeven menu and am trying to modify it somewhat.
(For a number of reasons, I don't want to use a PopMenu Magic 2 menu.)
I have my menu almost exactly what I want. It is the bottom menu on this
page: http://www.myzonecostarica.com/ . What I want to do is to eliminate
the bottom white border on the bottom link of both the main menu and the
drop-downs.
Here's a link to the css file.
http://www.myzonecostarica.com/p7pm/p7pmv3.css
Many thanks in advance,
Gail
Gail W. Issen
http://www.xpertwebs.com
http://www.xpertmarks.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-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 Parse Error on Filter:
I am getting a Parse Error from the W3C Validator for CSS3 for the
following:
#header h1 {
font-family: Century Gothic, Geneva, Arial, Helvetica, sans-serif;
font-size: 5.5em;
font-weight: normal;
text-transform:lowercase;
color: #FF70B8;
line-height: 90px;
text-shadow: #33 -0.02em 0.02em 0.05em;
filter: Glow(color=#99, strength=2);
}
The Parse Error is on the line:
filter: Glow(color=#99, strength=2);
The page is at:
http://studiokaufman.com/site/anoulipolooza/index.html
and the CSS file at:
http://studiokaufman.com/site/anoulipolooza/css/AO_screen.css
I have Googled and Googled for some clue for what I have done to offend Mr.
Validator, but thus far every word on the subject I've found appears to
indicate that my code syntax is fine.
Can anyone point me the proper CSS3 documentation re filter: ?
Thanks so much,
Dan
d...@studiokaufman.com
www.StudioKaufman.com http://www.studiokaufman.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] CSS3 Parse Error on Filter:
The Parse Error is on the line: filter: Glow(color=#99, strength=2); I thought filter was proprietary to IE? Maybe you could move the filter to an IE-specific stylesheet? Good point. Sometimes the obvious is the most unobvious. Thank you, Dan __ 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] 100% height issue, and graphic placement q's
:after is a pseudo element. Here's some info about it and its use. http://css-tricks.com/9189-browser-support-pseudo-elements/ -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of John Sent: Tuesday, July 19, 2011 1:57 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] 100% height issue, and graphic placement q's Ghodmode; would you please clarify what you have below as body:after Is this a different tag I'd be applying? thanks! John __ 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] Styling ul and li
Will the site be composed of individual html pages? Home.html, About.html,
Contact.html, etc.
Or will it use dynamic server-side generated pages such as *.php, *.cfm,
*.asp, etc. ?
Dan
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Neil Hunt
Sent: Monday, April 25, 2011 1:00 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Styling ul and li
I am trying to do the following:
(1) Create a menu ul where the home button does not appear on the home
page. I added css to make the display property=none for the home button
on the home page using the id's for the page(body), menu(ul) and menu
item(li). See code below...
(2) Change color of menu items li depending on the page you are on. For
example, on page 1, the page 1 button would be a different color that the
rest of the menu items. My attempts at css formatting for this are ignored
by the browser.
*Ok, I know this sounds like easy stuff*, and I have done this in the past
but I am having a heck of a time with it now. Any help/hints would be much
appreciated!
#topNav {
clear: both;
border: 0;
padding: 8px 18px 0px 0px;
margin: 0;
list-style: none;
float: right;
}
#topNav li {
float: left;
margin: 0 1px 0 2px;
padding: 0 1px 1px 1px;
border-top: 1px solid #005490;
background: #00;
}
#topNav a {
padding: 0 5px 0 5px;
color: #ff;
font-size: 11px;
font-weight: normal;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#topNav a:hover {
color: #fdfb75;
text-decoration: none;
}
#main #topNav #home {
display: none;
}
__
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-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
The BEST browser to review your work in is the SAME browser (and O/S) that your client sits in front of every day. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Elli Vizcaino Sent: Thursday, March 24, 2011 11:56 AM To: Kevin A. Cameron Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Same CSS,Same Browser But Looks Different Locally/Online No. I only hand code in Dreamweaver so I don't use their design view. I am viewing the files via FF, through a local mamp web server. And then I view the files again, in the same browser, FF but on the web server on the domain name of the site. and that is where the discrepancy shows up. Elli --- On Thu, 3/24/11, Kevin A. Cameron kevinacame...@gmail.com wrote: From: Kevin A. Cameron kevinacame...@gmail.com Subject: Re: [css-d] Same CSS, Same Browser But Looks Different Locally/Online To: Elli Vizcaino elli...@yahoo.com Cc: css-d@lists.css-discuss.org Date: Thursday, March 24, 2011, 2:50 PM Wait, are you comparing the preview in Dreamweaver to what you see in a browser? I don't use Dreamweaver, but IIRC the appearance of the preview should be taken with a grain of salt, and to look at the page in whatever browsers you are planning to support. Kevin __ 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] h1 vertical jump
What I noticed (in Chrome 9 Windows) is when going from the Contact page to the Journal page, as Journal renders it first pushes the horizontal rule down a pixel or two and then as if finishes rendering the horizontal rule moves back up to its original/prescribed position. This same push down and return happens on both pages and can be observed simply by refreshing the page, either the Contact page or the Journal page. Could this be that a declaration first sets the position of the header and other elements above the horizontal rule and then a subsequent declaration changes a specification, thus the push on the first line and the return on the subsequent line. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Jukka K. Korpela Sent: Thursday, February 10, 2011 12:46 PM To: css-d Subject: Re: [css-d] h1 vertical jump David Laakso wrote: On this page: http://chelseacreekstudio.com/makeover/journal/index.php the word Journal [h1] will sometimes jump-- click to and from Previous Page Next Page to see it. I think the jump is caused by a change of font - the heading gets first rendered in some font available in the user's system, then changes to use the Calluna Regular web font. Sorry, I have no idea how this could be changed. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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-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] Positioning images within a table cell
Nicely done. Dan K. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of G.Sørtun Sent: Wednesday, February 09, 2011 9:46 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Positioning images within a table cell On 09.02.2011 13:18, Geoff Lane wrote: Any further help gratefully received. Maybe this will do... http://www.gunlaug.no/tos/alien/pb/Map%20Test.htm regards Georg __ 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-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] modernizer usage
My first reaction to the code you've shown is that the syntax may not be correct. header H1 id=NameA id=top/AMichael Bierman /H1 P class=Contactsemail:-deleted-| webaddress... /P /header I don't see and quotes on the id names, such as: header H1 id=NameA id=top/AMichael Bierman /H1 P class=Contactsemail:-deleted-| webaddress... /P /header -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Michael Bierman Sent: Monday, February 07, 2011 9:46 AM To: css-d@lists.css-discuss.org Subject: [css-d] modernizer usage Hi, I hope that someone can help. I'm trying to use modernizer (http://www.modernizr.com/) 1.6 which seems to work well except for the following: I am using the header element. I am unable to style it however. The code in question looks like this: header H1 id=NameA id=top/AMichael Bierman /H1 P class=Contactsemail:-deleted-| webaddress... /P /header When I look in Explorer, I see the following nodes: H1 id=NameA id=top/AMichael Bierman /H1 P class=Contactsemail:-deleted-| webaddress... /P /header/ So of course no css was working on the header tag. The following hack works, but seems contrary to modernizer's usage: header div id=header h1 id=NameA id=top/AMichael Bierman /h1 p class=Contactsemail:-deleted-| webaddress... /p div /header Any advice would be greatly appreciated. Michael Bierman __ 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-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] webiste not rendering in ie9
It also renders fine in Google Chrome 8 Windows and Mac. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Noah Learner Sent: Saturday, February 05, 2011 6:00 PM To: css-d@lists.css-discuss.org Subject: [css-d] webiste not rendering in ie9 Hey All, I just installed ie9 beta and have started to fix the ie9 cufon bug on a couple of client sites. As I was checking over sites I noticed that one of them wasn't rendering at all. I don't even know where to begin. I validated the page's html. There are 6 errors that are linked to a facebook like button, and one duplicated id for a div, but the page renders fine on ie7, 8, firefox 3, safari, 3, safari 4, safari 5. Any ideas or clues on how to start troubleshooting for ie9? page is http://youngsbicycleshop.com Noah Learner || LEARNER DESIGN || www.learnerdesign.com e: noahlear...@gmail.com || p: 508.325.6626 || twitter: @noahlearner m: 9 Lewis Court || Nantucket, MA 02554 LEAVE YOUR MARK* __ 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-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] Positioning a float
This looks like a great solution. I can't wait to use it myself. However, it appears to be a case (for me on my browsers) of IE doing the job asked for and Chrome not quite. A reversal of my normal experience. In IE 8 on Windows it works great. But in Google Chrome (also on Windows) I am seeing the text at the tops of the (orange) images half-overlapped by the image--as if there were more padding needed on the tops of the images. While not always the best solution, I often give up fighting with IE and write a separate IE css file to adjust things back to where I need them and just include that in the head with an IE conditional comment wrap, such as: !--[if IE]link rel=stylesheet type=text/css href=css/SK_screenIE.css media=screen /![endif]-- -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of G.Sørtun Sent: Thursday, January 27, 2011 9:51 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Positioning a float I need the in-flow, wrapping properties of a float combined with the positioning properties of an absolutely-positioned element. Is anyone aware of a way of achieving that? You may be able to adapt the method shown here... http://www.satzansatz.de/cssd/tmp/floatspacer.html ...for the line-up and appearance you describe: a float positioned at the bottom with text wrapping around it. regards Georg __ 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-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 float problem
I am having a (very frustrating) problem of an apparent non-working float
within an @media tag.
The site is a photography gallery site with a main photo div and a
right-hand vertical column of thumbnail images in default landscape mode.
When viewing the site in portrait mode, such as rotating the iPad 90-degrees
to vertical, Im using the declaration:
@media only screen and (orientation: portrait)
{
/* modified ids and classes for portrait mode go
here */
}
This works fine, the issue/problem is when the iPad is rotated to portrait
the right-hand vertical column of thumbnails should move to become a
horizontal-row below the main photo. This should be accomplished by a
simple float: left declaration. However, the float does not appear to be
workingor at least it wont work for me. The thumbnails move to below the
main photo, but they remain as a vertical column.
Such as:
#thumbnails ul
{
float: left;
margin: 0;
padding: 0;
}
Etc.
I have tried everything except the correct solutionso far and with every
change I make the column of thuimbnails remains vertical and will not go to
horizontal.
The temp version of ths site is at:
http://studiokaufman.com/site/index1.html
The css is at: http://studiokaufman.com/site/css/SK_004_Base.css
The @media portrait mode declarations are located about ¾s of the way down
and are marked as:
/* iPad mode */
@media only screen and (orientation:portrait){
If you dont have an iPad handy, if you have a sufficently large monitor you
can simply re-size the browser window to a portrait aspect ration and the
(orientation:portrait) declarations will come into play.
As somebody wise once said: the obvious is often the most un-obvious. If
anyone out there can help me see the obvious it would be greatly
appreciated.
Thanks,
Dan
d...@studiokaufman.com
www.StudioKaufman.com http://www.studiokaufman.com/
Los Angeles
What is the distance between the eyes and the soul?
Fortune Cookie
__
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] Div Positioning Changes when viewed on Smart Phone
There is an app called iPhony but it only (as far as I know) runs on a Mac with OS X 10.4.7. Go to: http://www.tuaw.com/2007/06/21/iphoney-iphone-web-simulator/ It works well for me as I'm still waiting for Feb. 10th when Verizon will (finally) have the iPhone. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of John Hannon Sent: Wednesday, January 26, 2011 11:52 AM To: css-d@lists.css-discuss.org Subject: [css-d] Div Positioning Changes when viewed on Smart Phone Hello, I am a CSS newbie and wondering why the positioning of my SWFObject alternate content moves when viewed on an iphone and appears in the center of the screen. Here's the link: http://www.drain-o.com/index.html 1) Is it because I've got a div=alternate2 set to absolute positioning and nested inside of div=sidebarright? 2) Does anyone know of a way to view to get a browser view of how this looks on an iphone? Thank you for offering help. __ 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-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 float problem
Thanks to Kevin and David for your help and insight to spot the width: 80px; . This declaration was in the default landscape mode section of the css and was (for me) out of sight, out of mind. I had suspected that the width declaration was part of the problem, but all the futzing around I was doing was down in the @media for the iPad section of code. I've learned my lesson. It works now. Just need to clean up the details. Kudos, Dan Kaufman -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Hucklesby Sent: Wednesday, January 26, 2011 9:58 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] @media float problem On 1/26/11 8:18 AM, Dan Kaufman wrote: [...] This works fine, the issue/problem is when the iPad is rotated to portrait the right-hand vertical column of thumbnails should move to become a horizontal-row below the main photo. This should be accomplished by a simple float: left declaration. However, the float does not appear to be working-or at least it won't work for me. The thumbnails move to below the main photo, but they remain as a vertical column. [...] The temp version of ths site is at: http://studiokaufman.com/site/index1.html The css is at: http://studiokaufman.com/site/css/SK_004_Base.css I think that the width: 80px; on #thumbnails, and width: 100%; on #thumbnails ul li are the culprits. I removed those widths this end and the thumbnails lined up for me. HTH. -- Cordially, David __ 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-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/
