[css-d] Large Website ... using multiple @import's
Hi list, A question re: css organisation. The project is a very large publishing site - thinking of implementing/organising our new css in either a traditional 1/2 sheets way or by using basic and custom sheets where the custom sheets define all the @imports for a section/page. Using a custom sheet defining the components to be used does introduce an extra layer of presentation i.e. editing the @import list; but it does depart from monolithic css organisation. Has anyone any experience using this type of organisation - if we do not use it we risk an extremely large css file - perhaps 10k lines. Also if we proceed we introduce more http requests and bandwidth usage.. Any advice appreciated, Ronald.. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Free Opera Licence
If any of you use the Opera browser - they are giving away a free licence code today only. http://my.opera.com/community/party/reg.dml Josh __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Best IR technique ?
Guillaume wrote: Hi all, could someone advise the best/safest Image Replacement (IR) technique to use: cross browser friendly, screen reader accessible. ... We did some testing of various techniques over on Access Matters. (1) Best is debateable, as each of the techniques has strengths and weaknesses. (1) http://www.access-matters.com/2005/05/08/quiz-114-image-replacement-techniques/ -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Accessibility and font sizing
Scott Glasgow wrote: ... This brings up a question I have been wondering about. What is the consensus (if there is a consensus :-) on the best way to provide resizable (accessible) text while still permitting reasonably consistent layout without torturous CSS? Font-size keywords? Relative sizes? ... Extreme caution: there be tigers here. Search the CSS-Discuss archives (1) and you will find numerous flame wars on the font sizing issue. To avoid repeating same, there's a good bit of reference material in our WIKI (2)(3). Several methods of using relative sizes work very well and are described at the places mentioned in the WIKI. One recent technique, which I just added to the WIKI (3), is Joe Clark's ZOOM technique which offers multiple style sheets and a preferencer setting mechanism (4). (1) http://css-discuss.incutio.com/?page=SearchCssDiscussList (2) http://css-discuss.incutio.com/ (3) http://css-discuss.incutio.com/?page=FontSize (4) http://www.alistapart.com/articles/lowvision -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS 100% Height Woes
Hi All--
I'm having issues trying to get 100% height.
I've tried a few methods but I just can't seem to get it down
completely.
Here is the URL: http://www.sveamerica.com/test/contact.php
CSS is below. If the content spans past the browser height, no problem,
but if it shorter, there is a gap between the content div and the
footer.
If anyone can help me I would really, really appreciate it.
Thanks,
Lisa
body, html {
height: 100%;
text-align: center; /* for IE */
background-color: #24252A;
margin: 0;
font: 12px Arial, Helvetica, sans-serif;
}
/* ---[ Fonts ]--- */
a:link {
color: #FFF;
text-decoration: underline;
}
a:visited {
color: #FFF;
text-decoration: underline;
}
a:hover {
color: #CCC;
text-decoration: underline;
}
h1 {
color: #66;
font: bold 21px Arial, Helvetica, sans-serif;
}
h3 {
color: #333;
font: regular 15px Arial, Helvetica, sans-serif;
}
/* ---[ Positioning ]--- */
#wrapper {
min-height: 100%;
width: 768px;
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
}
#header {
width: 100%;
height: 87px;
background: url(img/topBar.png) no-repeat;
background-color: #FFF;
}
#content {
background-color: #FFF;
height: 100%;
}
#menuBar {
width: 100%;
text-align: center;
}
#contentText {
font: normal 15px Arial, Helvetica, sans-serif;
color: #33;
margin-left: 200px;
margin-right: 200px;
padding-bottom: 100px;
text-align: left;
}
#footer {
height: 63px;
width: 768px;
background: url(img/bottomBar.png) no-repeat;
margin: -50px auto; /* align for good browsers */
text-align: left; /* counter the body center */
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Mac comment hack, never seen this before is it right?
Hello,
I've just signed up to this mail list so would just like to say hi to
everyone, I'm from the uk and i've been developing with css for a
short while have been doing pretty much nothing else and can say I
really enjoy it.
Its not so much a problem I want some advice on but something that
wasn't developed by myself I have seen different examples of the
backslash hack for mac IE 5.2, but I've never seen code with a /
after the # is this correct?
I won't bore you all with long lines of code but here's an example of
what I am seeing my end :)
cheers
Stefan
/* Commented backslash hack hides rule from IE5-Mac \*/
#/navigation a, #navigation a span
{ float: none }
/* End IE5-Mac hack */
#/navigation a:hover
{ color: #fff; text-decoration: none; background: url(../images/
header/tab_left_hover.gif) no-repeat left top; }
#/navigation a:hover span
{ background: url(../images/header/tab_right_hover.gif) no-repeat
right top; }
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] setting initial height for a DIV: is it possible?
Hi list! Is it possible to set an initial height for a DIV? I want to use height: auto for this DIV overflow, but as it contains a bg image, I need to start it with an especific height to show the image. Is it possible? Thanks -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check: IE MAC
I am so thankful for comments like that. THIS is the information that I would love to know! Thank you thank you. It seems that this type of CSS information has been hardest to find. -jeremy Roger Roelofs wrote: Jeremy, On Aug 30, 2005, at 2:57 PM, jeremy wrote: Hi there... I am having some problems with this site on IE for Mac (no surprises..) The content is starting halfway down the page. http://tct2005.com/ I was wondering if someone could point me in the right direction towards debugging the issue. IE/Mac was written before css 2.1. CSS 2.0 requires that floated elements have a width defined. Since #love has no width specified, ie/mac makes it 100% in width, forcing the other elements down. CSS 2.1 allows floats to 'shrink-to-fit'. hth Roger, Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] setting initial height for a DIV: is it possible?
cappellano wrote: Is it possible to set an initial height for a DIV? I want to use height: auto for this DIV overflow, but as it contains a bg image, I need to start it with an especific height to show the image. Is it possible? It is certainly possible to set a minimum height. Just specify min-height: [length]. You can separately set the height to auto. This works in most modern browsers. Naturally, however, this does not work in IE/Win. However, IE will (incorrectly) expand a DIV to fit its contents, regardless of what you specify as the height. So, if you don't mind using hacks (see the Wiki), you can set the min-height, and then feed a height value only to IE/Win. That should make IE do what you want, too. Good luck, -- -Adam Kuehn __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] setting initial height for a DIV: is it possible?
Adam Kuehn wrote: cappellano wrote: Is it possible to set an initial height for a DIV? I want to use height: auto for this DIV overflow, but as it contains a bg image, I need to start it with an especific height to show the image. Is it possible? It is certainly possible to set a minimum height. Just specify min-height: [length]. You can separately set the height to auto. This works in most modern browsers. Naturally, however, this does not work in IE/Win. However, IE will (incorrectly) expand a DIV to fit its contents, regardless of what you specify as the height. So, if you don't mind using hacks (see the Wiki), you can set the min-height, and then feed a height value only to IE/Win. That should make IE do what you want, too. But then Ie will set a fixed height for this div. If the layer is containing some text that will be resized over this fixed height, this text will jump off the box... Right ? Guillaume. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Large Website ... using multiple @import's
Ron Kauffman wrote: The project is a very large publishing site - thinking of implementing/organising our new css in either a traditional 1/2 sheets way or by using basic and custom sheets where the custom sheets define all the @imports for a section/page. Using a custom sheet defining the components to be used does introduce an extra layer of presentation i.e. editing the @import list; but it does depart from monolithic css organisation. Has anyone any experience using this type of organisation - if we do not use it we risk an extremely large css file - perhaps 10k lines. Also if we proceed we introduce more http requests and bandwidth usage.. Hi Ronald, This question comes up about once a month on the list, and the answer is basically always it's up to you. Organize your style sheets in a way that makes sense to you and is maintainable by your team, or whoever might inherit the site, in the future. Zoe -- Zoe M. Gillenwater Design Specialist UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] making content appear at the bottom of parent container
Theodore Serbinski wrote: http://151.200.137.29/ now how can i attach that little fishy curvered image with that IOOS image to the bottom of it's parent div? i always want it to be on the bottom of the div even if the content is too short (how it is now) and if the content is much longer to have it expand with it? Ted, I don't see any replies to this thread you started a while ago. Did you get it working the way you want it? Basically, if you want something to stick to the bottom of its container, you have two options. 1. Position it absolutely within the container with bottom: 0 set, OR 2. Set it as a background image on the container with background-position: bottom left set. Option 1 is better for content images, option 2 is better for decorative images. Either way, if you don't want the other content of the container div to overlap the image, set the appropriate amount of bottom padding on the container div. Zoe -- Zoe M. Gillenwater Design Specialist UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] second try posting
I have a page that was previously created with tables www.ironies.com . Recently, I have re-created the entire page using css for the first time. You can see it at www.ironies.com/new.htm . I'm having problems with the positioning when I view from different browsers. In Firefox, the logo on the top right gets pushed down and imposes on the image below it. In Explorer, there is a white space behind the light brown bar at the bottom where the background color doesn't show up for some reason. In safari I have both problems at once. Any help would be GREATLY appreciated. I am totally out of ideas. Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] second try posting
for the logo, try removing the pimg src.../p and put this in your stylesheet for the logo: background: url(images/newfinals/ironieslogo.gif); width: 250px; height: 82px; that fixes that in firefox. Being on linux currently, and no IE or Safari for linux, I can't help you there. juliann wheeler wrote: I have a page that was previously created with tables www.ironies.com . Recently, I have re-created the entire page using css for the first time. You can see it at www.ironies.com/new.htm . I'm having problems with the positioning when I view from different browsers. In Firefox, the logo on the top right gets pushed down and imposes on the image below it. In Explorer, there is a white space behind the light brown bar at the bottom where the background color doesn't show up for some reason. In safari I have both problems at once. Any help would be GREATLY appreciated. I am totally out of ideas. Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- in life, direction is everything, distance is secondary--so keep your bearings! [KJV] Luke 5:16 And he withdrew himself into the wilderness, and prayed. Get Firefox!!! http://www.spreadfirefox.com/?q=affiliatesamp;id=13731amp;t=1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Table Gallery - Participation wanted
Following a request on thelist, where a subscriber had unsuccessfully searched for an online gallery of styled data tables, I came up with the following idea: http://icant.co.uk/csstablegallery/ It is pretty much like csszengarden, only for a single marked up data table. What I need now is people participating with an own style for the data table. You can submit it directly on the site and I will check through them when I come back from a training in 3 days, so please don't expect to see things appearing immediately. Any other comments can be added to the blog to avoid this being OT and going on for hours here: http://www.wait-till-i.com/index.php?p=146 regards, Chris -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Two pixel gap under flash in Firefox
Hi, I have a flash swf movie that when viewed in IE there is no gap between the flash movie and the div below. However, when viewed in Firefox there seems to be a 2 pixel gap between the bottom flash swf and the top of the div. I have the code below and have added a background color to the object tag so you can see the gap. I have tried adjusting the margin and padding on the bottom. I have also tried to adjust the top margin and padding for the div tag below with no results. object classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflas h.cab#version=6,0,29,0 width=692 height=184 style=margin-left:2px; margin-bottom: 0; padding-bottom:0; background-color:#00FF00; param name=movie value=whoclicked-ad.swfparam name=quality value=high embed src=whoclicked-ad.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer; type=application/x-shockwave-flash width=692 height=184 style=margin-bottom:0; padding-bottom:0; background-color:#cc; /embed /object div style=background-color:#006600; height:2px; img src=images/sp.gif/div Is there something I am missing? I am on the digest, so if possible please cc me in your response. Thanks Jessica - Jessica Mays Graphic Designer WebSurveyor Corporation www.websurveyor.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Creating a Print CSS
We have a problem printing pages from our Web site in Mozilla. It will only
print one page, no matter how long that page is.
To try to fix this problem I have created a print test with a link to a
specific print.css file (we're not using a print-specific css file at the
moment).
Here's the test page:
http://americanart.si.edu/education/print_test.cfm
The print stylesheet looks like this:
body {
font-family: Times New Roman, serif;
font-size: 12pt;
background-color: #fff;
background-image: url(/global/saam-logo-print.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
}
#header, #menubox { display: none;
}
What am I doing wrong?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] photo gallery help
hello i was able to go through a tutorial that was posted on the list. i am stuck on getting the images to display relative to the thumbnails. actually i would like the images to display in relative to the container instead of the thumbnail. http://srilankafoundation.org/events/past_events/tsunami_benefit/ benefit.html any help directions towards a tutorial would greatly be appreciated. rush. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two pixel gap under flash in Firefox
I have a flash swf movie that when viewed in IE there is no gap between the flash movie and the div below. However, when viewed in Firefox there seems to be a 2 pixel gap between the bottom flash swf and the top of the div. In addition to removing margins/paddings, setting font-size and line-height to zero usually works for me. Ricky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Japanese font-family
Hello, I've got a client who's looking for support for Japanese fonts in an HTML editor (HTMLArea). I am not concerned with the JavaScript and the HTMLArea stuff - this is not the list for that discussion. However, I'm having difficulty finding any information on the appropriate way to represent the following font families they're requesting: MS P Gothic and MS P Mincho. I have tried to Google for some answers but so far have only come up with limited information. Does anyone have any prior experience with this? I guess what I'm looking for is some example like: font-family: /* font-family for each of these here */ Thanks! -- Randy Peterman www.randypeterman.com [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Japanese font-family
On Wednesday 2005-08-31 15:19 -0600, Randy Peterman wrote: Hello, I've got a client who's looking for support for Japanese fonts in an HTML editor (HTMLArea). I am not concerned with the JavaScript and the HTMLArea stuff - this is not the list for that discussion. However, I'm having difficulty finding any information on the appropriate way to represent the following font families they're requesting: MS P Gothic and MS P Mincho. I have tried to Google for some answers but so far have only come up with limited information. Does anyone have any prior experience with this? I guess what I'm looking for is some example like: font-family: /* font-family for each of these here */ What Mozilla uses internally for its default Japanese fonts suggests using something like: font-family: MS PMincho, ＭＳ Ｐ明朝, MS Mincho, serif; font-family: MS PGothic, ＭＳ Ｐゴシック, MS Gothic, sans-serif; I have no experience with using anything like this in the real world, though. One thing I can say from experience, however, is that if you end up using non-ASCII characters in your stylesheets I strongly recommend beginning the stylesheet with an appropriate @charset rule. -David -- L. David BaronURL: http://dbaron.org/ Technical Lead, Layout CSS, The Mozilla Foundation pgpE8E3VYzOWP.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Liquid layout or faux columns broken.
(Should be: I took a great ALA tutorial and borked it, please help!) Hi folks. I've been hiding in the shadows of this list for a long time and have learned so much; however I am now stuck and making things worse. I had a tables-based site, now it's css based on the 'liquid layouts using negative margins' [0] article over at ALA [1] (great new look there btw), but I have modified it to be 2-columns (basically I took the last-but-one example and ran with it). If you check my website's main page [2] you'll see the layout looks okay, as the content is longer than the sidebar. However on another page where the content is minimal and sidebar is longer, e.g. my pgp-key page [3] the sidebar dies a death as, I believe, the 'faux columns' hack isn't quite working. Now I have tinkered with the original css [4] (of course I did, I broke it!) and I've done some site-checking (only FF and IE Win so far) but things seem to work okay. The XHTML validates perfectly (at least it does on those two pages, I'm still working on it) and so does the CSS. Suggestions and pointing out where I've made a blatant stupid mistake most welcome. Thanks folks, Vaughany. [0] http://www.alistapart.com/articles/negativemargins [1] http://www.alistapart.com/ [2] http://www.vaughany.com/index.php [3] http://www.vaughany.com/pgp_key.php [4] http://www.vaughany.com/style/coolmint.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Now possible: CSS Constants
Hey all,
Shaun Inman recently published a new tool that I though deserved
to get some attention, especially since it's directly about CSS and
fills what I consider to be a hole in CSS.
It's called CSS-SSC, where the SSC parts stands for
Server-Side Constants. It lets you define constants in your style
sheet like so:
@server constants {
baseColor: #ABCDEF;
hiliteColor: #0DECAF;
baseFont: Helvetica, Arial, Verdana, sans-serif;
}
body {font: small baseFont;}
a:link {color: baseColor;}
a:hover {color: hiliteColor;}
Okay, those are very limited examples, but if you picture using
constants in a large style sheet, you begin to see why they could be
very handy.
It does require that you have PHP running, and that you edit a
.htaccess file in order for this to work. It also requires that your
CSS files get poured through PHP in order to be preprocessed. The
end result is that they'll be sent out as regular CSS, with all the
constants substituted. It has to happen this way, because otherwise
browsers would get confused (rightly so).
And while it's possible to cover many cases with grouped
selectors, I speak from personal experience when I say you can end up
jumping through some pretty crazy hoops with just grouping. There
are definitely cases where I'll be using CSS-SSC to make my CSS less
obfuscated.
The forerunner to CSS-SSC, which was called CSS-SSV, came up in a
thread about PHP echoes in CSS, and I was concerned it had gotten
buried. Hopefully this will come to the attention of anyone who
needs it.
--
Eric A. Meyer ([EMAIL PROTECTED])
Principal, Complex Spiral Consulting http://complexspiral.com/
CSS: The Definitive Guide, CSS2.0 Programmer's Reference,
Eric Meyer on CSS, and morehttp://meyerweb.com/eric/books/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Now possible: CSS Constants
At 6:01 PM -0400 8/31/05, Eric A. Meyer wrote: The forerunner to CSS-SSC, which was called CSS-SSV, came up in a thread about PHP echoes in CSS, and I was concerned it had gotten buried. Hopefully this will come to the attention of anyone who needs it. ...and did I include URLs for people who might want to know more? Of course not! Why, that would have been useful! http://www.shauninman.com/plete/2005/08/css-constants (detailed explanation) http://www.shauninman.com/plete/2005/08/css-ssc-quickie (latest version) Sorry. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Now possible: CSS Constants
what I consider to be a hole in CSS. Yes indeed. Good addition to a future version of the CSS spec. __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Liquid layout or faux columns broken.
Paul Vaughan wrote:
... However on another page where the content is minimal and sidebar
is longer, e.g. my pgp-key page [3] the sidebar dies a death as, I
believe, the 'faux columns' hack isn't quite working.
[3] http://www.vaughany.com/pgp_key.php
Yes, it is, but (especially) Moz/FF isn't getting it.
That is: #wrapper isn't stretching to contain the floating sidebar in
that browser, and the browsers need to be told to do so.
This is one way to do it:
#wrapper {overflow: hidden;}
Another way to achieve the same (which I prefer when dealing with
'negative-margins' layouts in most cases):
#wrapper {display: table; width: 100%;}
I've tested the methods above on your page, and they are both working
fine there.
However, if for some reason none of these will work because of some
layout-variations, then using an extra element to clear on, placed just
above the end-tag of the #wrapper element, will do the trick.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Converting javascript heavy page to CSS2 - help needed
Greetings, I'm still medium-low on the CSS learning curve and have been tasked to update a site created by someone else that has lots of javascript button image replacement actions at the top of it. My temptation is to just take the javascript and tuck them into their own containers so that I can position them. I am certain there is a better way to do this. Here's the page: http://www.valleyvethospital.com/index2.html I would welcome pointers and clues as to how I should approach this and learn something (a lot!) in the process. Thanks, Pat __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Now possible: CSS Constants
At 6:08 PM -0400 8/31/05, Eric A. Meyer wrote: http://www.shauninman.com/plete/2005/08/css-constants (detailed explanation) http://www.shauninman.com/plete/2005/08/css-ssc-quickie (latest version) And in case anyone is wondering about CSS running being output via PHP, Mr. Inman is indeed smart enough to set and send correct caching headers with the files, so your server won't have to pre-process every CSS call but will update when you change the contents of the PHP files. Very slick. -- -Adam Kuehn __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Converting javascript heavy page to CSS2 - help needed
I would highly advised reimplementing this and not trying to fudge the
javascript. The css version is much easier to maintain.
do a google search for css rollover buttons. There's a ton of tutorials out
there.
They all basically say:
-make your links block elements. once the links are block elements, you can
arranged them however you want. I usually drop them into a ul and use the
list as a nav bar. (looks like your site could just have 2 list of links and
you can place them on either side of the logo. (be sure to turn list styling
off - ul {list-style:none} - if you use ul's)
a.rollover{display:block;}
- make your links the same height and width as your image
a.rollover{
display:block;
height:25px;
width:100px;
}
- use your desired image as the background of the links
a.rollover{
display:block;
height:25px;
width:100px;
background: #ff url('dogbone.gif') no-repeat fixed center;
}
- then use the a:hover pseudo element to switch the background when you
mouse over the links
a.rollover:hover
{
background: #ff url('dogbonewithbite.gif') no-repeat fixed center;
}
I promise, after doing pure css rollovers, you'll never go back.
cheers,
-jk
On 8/31/05, Pat Pruyne [EMAIL PROTECTED] wrote:
Greetings,
I'm still medium-low on the CSS learning curve and have been
tasked to update a site created by someone else that has lots of
javascript button image replacement actions at the top of it.
My temptation is to just take the javascript and tuck them into
their own containers so that I can position them.
I am certain there is a better way to do this.
Here's the page:
http://www.valleyvethospital.com/index2.html
I would welcome pointers and clues as to how I should approach
this and learn something (a lot!) in the process.
Thanks,
Pat
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org http://evolt.org --
http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Japanese font-family
On 1 Sep 2005, at 6:19 am, Randy Peterman wrote:
Hello, I've got a client who's looking for support for Japanese fonts
in an HTML editor (HTMLArea). I am not concerned with the JavaScript
and the HTMLArea stuff - this is not the list for that discussion.
However, I'm having difficulty finding any information on the
appropriate way to represent the following font families they're
requesting: MS P Gothic and MS P Mincho. I have tried to Google for
some answers but so far have only come up with limited information.
Does anyone have any prior experience with this?
I guess what I'm looking for is some example like:
font-family: /* font-family for each of these here */
Here is what I use:
body { font-family: 'Lucida Grande', 'Hiragino Kaku Gothic Pro',
'ヒラギノ角ゴ Pro W3', Osaka, 'ＭＳ Ｐゴシック', sans-serif; }
h1, h2, h3, h4, h5, h6, strong, b {font-weight: bold} /* must be
specified, some browsers don't bold otherwise */
This works fine across browser-land, except for Omniweb (will be fixed
in a next release) and Opera 7.5 Mac.
Linux is a bit of a problem to specify a font (too many variations
across the distros), but falls back on the default specified in the
browser (and most Linux users know how to handle that).
I recommend against using Serif fonts, they are *very* hard to read on
screen.
XP doesn't do font-smoothing under 18-19px for Japanese text.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Converting javascript heavy page to CSS2 - help needed
Pat, Here is a link to an interesting approach for image replacement http://alistapart.com/articles/imagemap/ Jim On 8/31/05, Pat Pruyne [EMAIL PROTECTED] wrote: Greetings, I'm still medium-low on the CSS learning curve and have been tasked to update a site created by someone else that has lots of javascript button image replacement actions at the top of it. My temptation is to just take the javascript and tuck them into their own containers so that I can position them. I am certain there is a better way to do this. Here's the page: http://www.valleyvethospital.com/index2.html I would welcome pointers and clues as to how I should approach this and learn something (a lot!) in the process. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Creating a Print CSS
Hi,
In your HTML, you basically given 4 CSS print options for the browser. This
might be a bit confusing.
Try (media=screen) where it says (media=screen, print) on three
occasions;
.. href=/css/saam.css media=screen, print ..
.. href=/css/bigtext.css media=screen, print ..
.. href=/css/bigtext.css media=screen, print ..
That will leave the last one as a default for printing.
.. href=/css/print.css media=print ..
Hope this helps.
Regards,
Cem Meric
Kalkadoon
Corporate Solutions
---
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Jeff Gates
Sent: Thursday, 1 September 2005 6:33 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] Creating a Print CSS
We have a problem printing pages from our Web site in Mozilla. It will only
print one page, no matter how long that page is.
To try to fix this problem I have created a print test with a link to a
specific print.css file (we're not using a print-specific css file at the
moment).
Here's the test page:
http://americanart.si.edu/education/print_test.cfm
The print stylesheet looks like this:
body {
font-family: Times New Roman, serif;
font-size: 12pt;
background-color: #fff;
background-image: url(/global/saam-logo-print.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
}
#header, #menubox { display: none;
}
What am I doing wrong?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to get rid of gaps
Hi all. I'm having a similar problem. I'm using Firefox on a PC for
starters. Despite 0margins, 0 padding,I have gaps that i do not
understand between images that make up my banner. I've been reading
CSS , The definitive guide for several weeks and from what i can tell,
if margin is 0, there should not be space with background showing
through between inline elements. Is that right?If i float them
it looks as it should in Firefox however my new Opera browser :)
insists on gaps either way.Am I missing something?
Confused,
Pjs
P.S. Here is the style used for all three images:
img.logo {
border: none;
margin:0px ;
padding: 0px;
/*float: left; fixes it in Firefox PC */
}
div.logobar {
width: 800px;
height: 84px;
padding: 0;
margin:0px auto;
}
Here is the markup:
html
body
div class=logobar
img class=logo src=images/logo_piece_1.jpg
img class=logo src=images/logo_piece_2.jpg
img class=logo src=images/logo_piece_3.jpg
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] How to get rid of gaps
From: Peter Speltz ...Firefox on a PC... I have gaps that i do not understand between images that make up my banner. div class=logobar img class=logo src=images/logo_piece_1.jpg img class=logo src=images/logo_piece_2.jpg img class=logo src=images/logo_piece_3.jpg /div Peter, Whitespace in your markup is the culprit. Try something like: div class=logobar img class=logo src=images/logo_piece_1.jpgimg class=logo src=images/logo_piece_2.jpgimg class=logo src=images/logo_piece_3.jpg /div -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to get rid of gaps
Peter Speltz wrote:
Hi all. I'm having a similar problem. I'm using Firefox on a PC for
starters. Despite 0margins, 0 padding,I have gaps that i do not
understand between images that make up my banner. I've been reading
img.logo {
border: none;
margin:0px ;
padding: 0px;
/*float: left; fixes it in Firefox PC */
}
Peter gave you the answer for the extra space already, but I'd like to add
that you do not really need class=logo in the markup because you can get
to the images through:
.logobar img {}
instead of:
img.logo {}
HTH,
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
