[css-d] My fonts are too small on Mac!
No, this isn't a cry for help. It's actually a word of advice. If you are experiencing this you'll be glad to know there's a solution. I found it at codestyle.org and thought I'd share it with you. Some might already be aware of this but it's probably not a bad idea to share the knowledge. My fonts are too small on Mac! A: Without seeing your page, this is all guess-work, but you are probably using px or pt units for your font-size values. Mac OS browsers and screen configurations generally result in font sizes that are relatively smaller than on Windows systems for these length units. In any case, it is more appropriate to use % or em length values for fonts on the World Wide Web and this will allow users to adjust font sizes to their preferences using their browser font settings. in http://www.codestyle.org/css/FAQ.shtml#pixelfonts -- [EMAIL PROTECTED] www.adrianocastro.net __ 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] page check request
Greetings All Please check the following page: www.volume4.com/scq/ in the following browsers: PC: IE 5.5+, Firefox - MAC: Safari 2.0, Firefox Thanks! -- Kind Regards Schalk Neethling Web Developer.Designer.Programmer.President Volume4.Business.Solution.Developers __ 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] IE scrolling problem?
Hi There, I have a small problem the answer to which may be as simple as saying it's just not possible! first here are the urls: http://shoponline.com/site_css/test/frames.html http://shoponline.com/site_css/test2/frames.html In the first case, the side bar divs are before the main body content, and scroll with the content in IE6 (PC), Firefox (Mac and PC) and Safari (Mac). This is how I'd like it to behave. In the second case, the side bar divs come after the main body content, and are pinned to the top of the content using position: absolute; (sidebar css file: http://shoponline.com/site_css/test2/sidebar.css ) However, in this case, Firefox and Safari have the sidebars scrolling with the main body content, whereas IE6 has them fixed. I would prefer that the sidebars came after the content in the html source. Any idea how to ensure they scroll with the main content in IE? Cheers for any light you might be able to shed. -- Andy Bennett IT Manager DomainWise Ltd __ 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] page check request
There's really not much to check - no links active, no buttons active - just a very basic page. In general, a few questions/observations (I'm running IE6 and Ffox 800x600) * In IE dealer portal displays over 2 lines and a there is a gap of over half the width of the car below between the dealer portal right border and the right containing boundary * I find trying to read the buttons very difficult with the white text on yellow background * Increasing the font size causes several problems. The 3 images bottom right wrap onto 2 lines and the Did you know. text becomes partially obscured, dealer portal wraps beneath about and contact, Select a model wraps and orange bullet to left is no longer top aligned. * It's a pity that the overall width is restricted to 750px as on my laptop which is set for 1680px width the page takes up just a fraction of the screen real estate yet I still have all the problems above if I try to increase the font to a readable size. Regards Graham Cook www.uaoz.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] page check request
Schalk wrote:
Greetings All
Please check the following page: www.volume4.com/scq/
in the following browsers: PC: IE 5.5+, Firefox - MAC: Safari 2.0, Firefox
Thanks!
Schalk,
Couple of little things you may want to consider:
- You need a background-color on html, body. Not all OS/browsers are
default #FFF. The background-color I have set for Opera is Fuchsia.
- Let the content determine the height. Font-zoom is causing breaking.
- Em set on the body for font-size triggers a bug that causes your
layout to go really goofy in IE..
Try:
html, body {
background-color: #FFF;/*added*/
margin:0;
border:0;
padding:0;
/*font:.9em/120% Verdana,Arial,Helvetica,sans-serif;*/
font-family: Verdana,Arial,Helvetica,sans-serif;
line-height: 1.2;/*raw number*/
}
- You've got a couple of minor mark-up errors.
Best,
~dL
__
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] page check request
On 14 Nov 2005, at 12:38, Schalk wrote: Greetings All Please check the following page: www.volume4.com/scq/ in the following browsers: PC: IE 5.5+, Firefox - MAC: Safari 2.0, Firefox MAC: Looks ok on Firefox, but on Safari, the 3 car images which I guess are supposed to be to the right of the be informed and prepared text, are actually underneath. -- Andy Bennett IT Manager DomainWise Ltd __ 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] yet another FF problem
Hi all, i've some problem to show the left DIV menu in this layout... The problem appair only in FF.. as u can see the left DIV#body_LEFT don't scroll at the bottom. http://www.opent.it/gasper_test/index2.htm sorry for my english.. someone can help me?? Augusto thx __ 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] Combining Project Seven Techniques
This message is pretty much for Al Sparber but of possible interest to others. I have used both the Projectseven CSS Tree Menu and Equal Column Length Java script techniques successfully. On this page I have tried to combine them. http://dreamlaunch.erau.edu/indexec.html The problem is the equal column heights script is triggered onload, not when the tree menu expands. The tree menu in a floated div expands right through the footer since there is nothing to push the footer down. This will be a large university site and I can't always be sure the content will be longer than the menu. Amazingly the footer moves down in IE6 but not newer browsers. Is there a way to combine the two techniques? Also under the heading asking for the moon... a question I have been pondering is, could the equal heights script force the footer to the bottom of the browser window on pages with short content? Since you are manipulating column heights could there be a minimum height? I am not asking for some custom code but it might be something to consider for a future version. Arn Arnold Gregory Web Interface Developer Department of New Media Embry-Riddle Aeronautical University 386-323-8696 __ 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] yet another FF problem
Augusto Murri wrote:
The problem appair only in FF.. as u can see the left DIV#body_LEFT
don't scroll at the bottom.
The problem appear in all browsers but IE/win. IE/win is saved by the
'hasLayout' bug/feature.
Conclusion: IE/win is broken. Nothing new there.
http://www.opent.it/gasper_test/index2.htm
Add this:
div#body_BOX {display: table; clear: both; width: 738px;}
...and Firefox and the others will act as you want them to.
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] Too Funny, and not really off topic...
I just inherited a mostly CSS based site. While poking through code, which is well commented (Hey Mr. Previous Developer - thanks!!!) I came across this on a page with a couple of nested tables: !-- OK, CSS isn't working, try a f**king table! -- ~TABLE HERE~ !-- F**king table ends here -- ...and then all the CSS Stuff was commented out under the table. My wife was in the other room and yelled at me, What's so funny???, but I couldn't explain it to her. ...and I thought *I* left weird stuff in my comments from time to time!! --- Les Mizzell __ 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] Too Funny, and not really off topic...
I've caught several people leeching designs and scripts and stuff by placing odd comments in various locations. I have seen some doozies before but this one is pretty funny. On 11/14/05, Les Mizzell [EMAIL PROTECTED] wrote: I just inherited a mostly CSS based site. While poking through code, which is well commented (Hey Mr. Previous Developer - thanks!!!) I came across this on a page with a couple of nested tables: !-- OK, CSS isn't working, try a f**king table! -- ~TABLE HERE~ !-- F**king table ends here -- ...and then all the CSS Stuff was commented out under the table. My wife was in the other room and yelled at me, What's so funny???, but I couldn't explain it to her. ...and I thought *I* left weird stuff in my comments from time to time!! --- Les Mizzell __ 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] Too Funny, and not really off topic...
couldn't explain it to her. ...and I thought *I* left weird stuff in my comments from time to time!! I've contributed my fair share of odd comments, mostly after encountering frustrated CSS bugs and then documenting the solution. Who says you can't be humorous with comments? =) But, on a quasi-related note, I have this thing about comments appearing on production... Comments, as far as HTML goes, should only be for developers. Language like F**king table isn't appropriate for the end user, and neither is the bytes used (wasted?) on transmitting it. EORant. Cheers, -Mark __ 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] Too Funny, and not really off topic...
I used to do this - and I had to stop when a couple of clients got a little offended. :( (Some people are no fun at all!) I've quit commenting altogether because I can't seem to keep smart remarks like that from coming through - and as they say, if you can't say something nice... I'd hate to look at some of my old code, now that I've learned so much. I can't imagine another developer coming along to take up after me - they'd probably think I was an idiot. Oh well, gotta start somewhere. But maybe I should ocmment more (and double-check after the frustration has passed to be sure I'm not offensive ;) ) It *is* a nice thing to do... ~Shelly __ 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] Too Funny, and not really off topic...
But, on a quasi-related note, I have this thing about comments appearing on production... Comments, as far as HTML goes, should only be for developers. Language like F**king table isn't appropriate for the end user, and neither is the bytes used (wasted?) on transmitting it. To wrap up: http://www.kuro5hin.org/story/2004/2/15/71552/7795 -- 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] weird drop down behavior
I am following the dropdown guide at http://www.alistapart.com/articles/dropdowns. Everything works fine but I found something a little quirky that is throwing me. In the li tag a width is a constant of 10em. I decided that since I can't always guarantee the text size of my list items I would try and design things to be as flexible as possible. To accomplish this I tried setting my width to auto. That works nicely with variable length text but when I hover over a menu item the dropdown menu appears horizontal instead of vertical. My eventual goal is to have a dynamically generated three level vertical dropdown with the top menu items being variable length and each separated by the same amount of space. I'd also like it to be as browser agnostic as possible. I'm new at this so I think there might be a good approach that I'm not aware of. Any guidance would be appreciated. Tod __ 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] Too Funny, and not really off topic...
Christian Heilmann wrote: But, on a quasi-related note, I have this thing about comments appearing on production... Comments, as far as HTML goes, should only be for developers. Language like F**king table isn't appropriate for the end user, and neither is the bytes used (wasted?) on transmitting it. Yea, I wouldn't put that in my code either. My comments usually mark structural stuff that's maybe not obvious: !-- BEGIN THIRD COLUMN HERE -- But, I also tend to sign my pages at the very bottom with a quote of choice and stuff: !--- end content Beware the Jabberwock, my son! The jaws that bite, the claws that catch! CSS, Coldfusion and SQL Database by Les Mizzell --- Something like that anyway... -- --- Les Mizzell __ 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] Font Embedding / Downloading vs Web-Safe Fonts
Hi, I was about to ask if anyone knew where one stands in terms of font embedding / font downloading. However, after going through the archives I came to the conclusion (please correct me if I'm wrong) that font embedding is just not viable. The spec-correct @font [1] is poorly supported or, in most cases, inexistent. Another option is Microsoft's WEFT [2] which is only supported by IE (Win and Mac AFAIK). That said one should design with web-safe fonts [3] and adaptable layouts in mind. Chris Heilmann put it best [4]: If you want to embed your font (...) there is no surefire way to download a font on the fly. We are left with image-replacement techniques [5] such as sIFR [6, 7, 8, 9] . However, these add some other undesired problems [10]. Hope this helps everyone. AD 1. http://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions 2. www.microsoft.com/typography/web/embedding/weft3/ 3. http://www.codestyle.org/css/font-family/ 4. http://archivist.incutio.com/viewlist/css-discuss/63791 5. http://www.mezzoblue.com/tests/revised-image-replacement/ 6. http://www.mikeindustries.com/sifr/ 7. http://www.mikeindustries.com/blog/archive/2004/08/sifr 8. http://www.mikeindustries.com/blog/archive/2004/12/sifr-2.0-release-candidate-3 9. http://usabletype.com/articles/2004/how-and-when-to-use-sifr/ 10. http://www.mezzoblue.com/archives/2004/10/26/sifr/ Relevant results from the archives: font-family choices + http://archivist.incutio.com/viewlist/css-discuss/568 embedded fonts + http://archivist.incutio.com/viewlist/css-discuss/3761 web fonts using CSS2 + http://archivist.incutio.com/viewlist/css-discuss/7110 embed or not embed that is the question + http://archivist.incutio.com/viewlist/css-discuss/15760 Font embedding + http://archivist.incutio.com/viewlist/css-discuss/16272 font lovin' + http://archivist.incutio.com/viewlist/css-discuss/47532 @font-face (was font lovin' and font pushing) + http://archivist.incutio.com/viewlist/css-discuss/47545 Fonts + http://archivist.incutio.com/viewlist/css-discuss/57873 download fonts + http://archivist.incutio.com/viewlist/css-discuss/63761 -- [EMAIL PROTECTED] www.adrianocastro.net __ 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] Skinning/style switching issue
I switch it with ColdFusion, so no client side scripting. I will produce a test scenario on a live site soon, but can't unfortunately provide that yet. I will let you know when it is available! Thanks, Robyn Ingo Chao wrote: Robyn wrote: Why does this happen? Unfortunately this is on an intranet, so I can't really send a link Using the build-in style switching feature in Fx (1.0.5/1.5b2), I wasn't able to reproduce the problem, neither on Alex' original file nor on a modified standalone version of your code snippet (unfortunately, code snippets are next to useless for debugging). Please provide an URL to a minimal test case which reproduces the problem with the Fx version you are testing in, the problem would be serious for the mentioned technique. Ingo __ 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] ADMIN: Re: Too Funny, and (yes) really off topic...
Christian Heilmann wrote: But, on a quasi-related note, I have this thing about comments appearing on production... Comments, as far as HTML goes, should only be for developers. Language like F**king table isn't appropriate for the end user, and neither is the bytes used (wasted?) on transmitting it. To wrap up: http://www.kuro5hin.org/story/2004/2/15/71552/7795 And let's really have that be a wrap on this off-topic thread, please. Thanks, -Adam Kuehn CSS-D List Moderator __ 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] MovieMadeProductions.com
I put some crazy long hours in optimizing moiviemake over the weekend. http://www.moviemadeproductions.com/ There were many GLARING issues including a Meta refresh that was choking google-bot. I did some keyword fishing and everything, FIXED the jacked menus (of course) there is still much work to be done, but I believe it is already in link market. So as soon as Google realizes that it can crawl the site again, and starts picking up pages in its index; we can put up some resource pages start trading links a bit until I can find the time to get back in ad do some more optimizing. I made huge leaps in the right direction but there is still a substantial amount of work to be done on this optimization. You will notice a new section listed on the right list of links that says http://www.moviemadeproductions.com/model-searches-online-free/ Model Searches Online Listings: and leads to: http://www.moviemadeproductions.com/model-searches-online-free/ This is a temporary fix, sol that the spider will be able to crawl the portfolios, as they are only available through the search function. Users can accress the portfolios on moviemade by clicking submit on this page (omitting a search term allows usesers to view all of the portfolios). http://www.moviemadeproductions.com/Search.asp I have made it so the spider can get to those pages too. __ 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] IE and FF Table Cell Gaps
I have an issue with table cells displaying differently in IE and FF. In IE all appears well. But in FF, there is a gap at the bottom of each table td. What is causing this? http://www.kustom.com/092005/amps/guitar/guitaramps.asp TIA Jeff __ 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] i am lost on how to do this in css
Jon, Here is a demo of an approach that uses a single div: http://www.jimdavis.org/multifloats.htm This example assumes all of the main images are the same size. I haven't applied any IE fixes that may be required but it seems to work in IE 6 and FF/win. Jim On 11/14/05, Jon Stephenson [EMAIL PROTECTED] wrote: ... have gotten everything working except for the product page. I have played with making little div boxes and then with a float left on them and it works well enough but I am still having to put tables in the div boxes. Here is an example of one of the pages I am trying to recreate http://www.flora-rose.com/category.asp?rcid=3389. __ 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] IE and FF Table Cell Gaps
I have an issue with table cells displaying differently in IE and FF. In IE all appears well. But in FF, there is a gap at the bottom of each table td. What is causing this? http://www.kustom.com/092005/amps/guitar/guitaramps.asp TIA Jeff __ 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] IE and FF Table Cell Gaps
[EMAIL PROTECTED] wrote:
I have an issue with table cells displaying differently in IE and FF.
In IE all appears well. But in FF, there is a gap at the bottom of
each table td.
What is causing this?
http://www.kustom.com/092005/amps/guitar/guitaramps.asp
Try:
img {vertical-align:bottom}
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/
Re: [css-d] Who is up for a CSS challenge?
It's a challenge allright, but I have to say, I don't think CSS is actually able to do what you're saying. Too much of CSS is dependent of the order of items, that I doubt you'd have enough flexibility to design whatever you want, purely with CSS. If you were not able to modify the underlying HTML you'd be restricting what you can do. However, having said that, it is a good idea for a CMS to have lots of hooks for CSS so that it can be well styled, and avoid editing the HTML as much as possible, but it's simply not mature enough to layout and entire site with, from generic HTML. I think you are missing the point here. There are lots of CMS driven websites that have their layout controlled by CSS. This is not to say that every page is identical, obviously you need different hooks, or divs, on different pages. CSS Toolshed is not against that. The point is that you can use CSS and divs instead of TABLES. If you look at the different pages on CSS Toolshed, you will see exactly what I'm talking about... there's actually at least 3 different page templates, not just one. Please don't be mislead. -- -- C Montoya rdpdesign.com ... cssliquid.com ... montoya.rdpdesign.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] MovieMadeProductions.com
Oh, sorry about that. That email was not intentionally sent to the mailing list. I must have CC'ed CSS-Discuss on accident while composing that e-mail. So chill out asshole. -Original Message- From: David Laakso [mailto:[EMAIL PROTECTED] Sent: Monday, November 14, 2005 11:43 AM To: Steve Tchorzewski Cc: 'Miguel Salcido'; [EMAIL PROTECTED] Subject: Re: [css-d] MovieMadeProductions.com Steve Tchorzewski wrote: I put some crazy long hours in optimizing moiviemake over the weekend. Who cares? http://www.moviemadeproductions.com/ There were many GLARING issues including a Meta refresh that was choking google-bot. Add loud, gross, and unreadable to the glaring issues. __ 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] Flowable CSS Columns?
Is it possible to create columns in CSS where the text automatically flows from one column to another on the page? Rachell Coe Webmaster King Estate Winery 541-942-9874 Ext: 136 http://www.kingestate.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] Flowable CSS Columns?
Is it possible to create columns in CSS where the text automatically flows from one column to another on the page? Rachell Coe Rachell- Only by using CSS3 which is not widely supported. http://www.w3.org/TR/2001/WD-css3-multicol-20010118/ Regards, Ron __ 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] Flowable CSS Columns?
I better say at the start I didn't fully understand the question, so this might be completely off base. If so, ignore it. If not, well good. :) One thing to note is that it's possible to fake the look of crossing columns by using background images. The wiki has many useful links to help you with faux columns if you think this might work for you. http://css-discuss.incutio.com/?page=CssLayouts ++ || | multi-column text that takes up both columns | | but is really only one div with width: 100%| || | little div that looks | another little div| | like a column and only | that takes up 49.9% | | takes up 50% of the| of the space to allow | | space | for rounding errors | || ++ Then have a background image positioned 50% across to look like different columns? __ 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] ul li IE madness
Greetings All Please have a look at the following page: http://www.volume4.com/tc/ When looking at this using Firefox, every thing is perfect(for now), but IE has a different idea of how it interprets my CSS. Any ideas. Is this time for conditional tags or am I missing something. Thanks! -- Kind Regards Schalk Neethling Web Developer.Designer.Programmer.President Volume4.Business.Solution.Developers __ 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] Flowable CSS Columns?
I've seen this done with a javascript/css solution somewhere. Has a FOUC problem though. Might be worth googling, though. On 11/14/05, Pringle, Ron [EMAIL PROTECTED] wrote: Is it possible to create columns in CSS where the text automatically flows from one column to another on the page? Rachell Coe -- Eric Ladner __ 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] Who is up for a CSS challenge?
I think you are missing the point here. There are lots of CMS driven websites that have their layout controlled by CSS. This is not to say that every page is identical, obviously you need different hooks, or divs, on different pages. CSS Toolshed is not against that. The point is that you can use CSS and divs instead of TABLES. If you look at the different pages on CSS Toolshed, you will see exactly what I'm talking about... there's actually at least 3 different page templates, not just one. Please don't be mislead. Exactly. Consider the Shed a simulator of a maintenance task. Many times we get allocated to a project that is already out of order or the templating language just does not allow you to change it without breaking 2 other pages. This is when you need to prove that CSS can even help there. True, it might be less optimised compared to the CSS you can create when you get all the hooks you need, but it still beats mixing presentation and layout just because the templating engine is outdated. I was basically annoyed by the CSS Zen Garden becoming an image replacement contest rather than a showcase for the powers of CSS. Many times I sat down with clients whom I had to help to redesign their site. These are councils for example who legally have to be accessible, resizable and all that jazz. If you show an elaborately graphical Zen Garden design as an example of the powers of CSS you lead non-technical clients to believe that this is possible by CSS magic. The repetition of explaining that something like this is only possible when you know and control the markup, and when you don't change the amount (or sometimes even size or language) of elements is something I've grown entirely sick off. I thought it was time to show that CSS can cater for different situations, that there is beauty in flexibility and giving up control for the users benefit. -- 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] ADMIN: Re: MovieMadeProductions.com
Steve Tchorzewski wrote: Oh, sorry about that. That email was not intentionally sent to the mailing list. I must have CC'ed CSS-Discuss on accident while composing that e-mail. Apology accepted on behalf of the list. So chill out asshole. On the other hand, flaming of any kind is against the list policies, and may subject you to the unsubscribe button. I'm not inclined to do that for a first offense, but vulgarities are inappropriate in this venue. Anyone who has the slightest doubts about that should be re-reading the list policies at http://www.css-discuss.org/policies.html. Let's keep the posting civil, please. Thank you, -Adam Kuehn CSS-D List Moderator __ 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] Flowable CSS Columns?
I'm geekin out over this!!! Using the javascript implementation, how widely is it supported? Rachell Coe Webmaster King Estate Winery 541-942-9874 Ext: 136 http://www.kingestate.com -Original Message- From: Dan Kletter [mailto:[EMAIL PROTECTED] Sent: Monday, November 14, 2005 1:36 PM To: Pringle, Ron Cc: 'Rachell Coe'; 'css-d@lists.css-discuss.org' Subject: Re: [css-d] Flowable CSS Columns? On Mon, 14 Nov 2005, Pringle, Ron wrote: Only by using CSS3 which is not widely supported. Or you can use the Javascript implementation: http://www.csscripting.com/wiki/index.php?title=Main_Page --dk Yes. Beautiful, wonderful nature. Hear it sing to us: *snap* Yes. natURE. __ 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] Flowable CSS Columns?
On 14/11/05, Rachell Coe [EMAIL PROTECTED] wrote: I'm geekin out over this!!! Using the javascript implementation, how widely is it supported? Before you go too far down that route, I suggest that you check out http://www.456bereastreet.com/archive/200509/css3_multicolumn_layout_considered_harmful/ -- Olly http://thinkdrastic.net/ __ 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] Multipart hr styling
Work is continuing apace on the site I am working on:
http://homepage.ntlworld.com/graham.reeds/space
Sometimes I need to split the page into two or more logical blocks.
Naturally a horizontal rule would be the ideal divider for this.
However the current method uses three images to blend it in with the
border effect like so:
img
src=images/left_middlebar.jpg alt= width=54 height=22 /img
src=images/center_middlebar.jpg alt= width=691 height=22
/img
src=images/right_middlebar.jpg alt= width=55 height=22 /
Logically the ideal solution would to wrap a couple of spans around the
hr. That unfortunately causes validation to fail so div's are being
employed instead:
div class=page-splitter splitter-left
div class=splitter-right
hr /
/div
/div
A little CSS:
.page-splitter,
.page-splitter hr,
.splitter-left,
.splitter-right {
display: block;
height: 22px;
clear: both;
}
.page-splitter hr {
border: none;
margin-left: 54px;
margin-right: 55px;
background: #fff url(../images/center_middlebar.jpg) top left repeat-x;
}
.splitter-left,
.splitter-right {
width: 100%;
}
.splitter-left {
background: transparent url(../images/left_middlebar.jpg) left top
no-repeat;
}
.splitter-right {
background: transparent url(../images/right_middlebar.jpg) right top
no-repeat;
}
And the result can be seen halfway down:
http://homepage.ntlworld.com/graham.reeds/space/ (ignore the problem
with the adverts - I know they are broken). The bar works fine in
Windows FF and O8. Unfortunately IE6 is broken. The middle central bar
has a border and is lowered by around 10 pixels.
The fix suggested for IE on http://www.sovavsiti.cz/css/hr.html doesn't
actually work in this instance - my knowledge of CSS is limited so the
why's and wherefore's are beyond me - so I again turn to this list for
assistance.
Thanks, Graham Reeds.
__
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] Flowable CSS Columns?
I've been trying to get it to work, but have been unsuccessful. According
to the page you linked me to, I have to put a link to the js underneath my
css link. I've done that. But where do I put the column commands? Do I add
them as a selector in my style sheet such as:
#columns {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
column-count:3;
column-gap: 10px;
column-rule: 1px solid #999;
}
I've tried this, but it doesn't work.
Or do I add it like: div style=column-count: 3; column-gap: 10px;
column-rule: 1px solid #999;
Or am I wrong on both counts? My test page is up at
http://www.edkingfamily.com/newdesign/test.htm What am I doing wrong?
Rachell Coe
Webmaster
King Estate Winery
541-942-9874 Ext: 136
http://www.kingestate.com
-Original Message-
From: Dan Kletter [mailto:[EMAIL PROTECTED]
Sent: Monday, November 14, 2005 3:16 PM
To: Rachell Coe
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Flowable CSS Columns?
It's not supported by IE5/Mac and probably not anything older on Win or Mac.
However, it gracefully degrades. Instead of displaying multi-columns, it
displays as a single column.
Definitely works in FF (Win Mac) and Safari quite nicely.
Best,
On Mon, 14 Nov 2005, Rachell Coe wrote:
I'm geekin out over this!!! Using the javascript implementation, how
widely is it supported?
Rachell Coe
Webmaster
King Estate Winery
541-942-9874 Ext: 136
http://www.kingestate.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] Flowable CSS Columns?
I'm geekin out over this!!! Using the javascript implementation, how widely is it supported? Trying to read flowed columns in a browser could be more of a usability liability than aything else. I shudder to see where CSS3 is attempting to take us. I don't want to editorialize the wrongheadedness of CSS, so suffice it to say that you should really do some usability testing before deploying flowable columns in a web browser - no matter which technique you use. Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ 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] multiple columns problems and Dreamweaver
I am trying to make a multiple column list in Dreamweaver. I am having several problems: 1. In Dreamweaver: instead of appearing on the top of the page, the multiple columns are appearing at the bottom of the page in staggered order. How do I fix this? http://www.derekholstein.com/1stop/1stopss.htm 2. How do I remove the bullets, underlines and create a hover state and text styling for just for that particular list? url : http://www.derekholstein.com/1stop/index_revised2.htmwww.d Thank you. - Sincerely, Stuart __ 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] Multipart hr styling
After posting I sat down and took the styling to pieces. This might
help someone else.
I started off with just the hr / tag inside a div that had a 'clear:
both' rule to stop it overwriting other elements.
Then I applied the styling rule of style and hide from [1]. A bit of
tweaking gave me a graphic from one side to the other with a gap for the
margin graphics. Nothing particularly special here. Time to add in the
left side. Wrapping that around the central div didn't cause any
problems so I added the right side graphic. Hey presto! - it worked.
Now I must of tried at least a dozen permutations to get this working
and this isn't particularly different from some of the others (I don't
have a history of attempts unfortunately) but I am glad it is working.
The CSS:
.content-pagesplitter {
clear: both; }
.content-pagesplitter-left {
background: transparent url(../images/left_middlebar.jpg) top left
no-repeat; }
.content-pagesplitter-right {
background: transparent url(../images/right_middlebar.jpg) top right
no-repeat; }
div.hr {
height: 22px;
margin-left: 54px;
margin-right: 55px;
background: transparent url(../images/center_middlebar.jpg) top
center repeat-x; }
div.hr hr {
display: none; }
and the source:
div class=content-pagesplitter
div class=content-pagesplitter-leftdiv
class=content-pagesplitter-right
div class=hrhr //div
/div/div
/div
[1] http://www.sovavsiti.cz/css/hr.html
Thanks, Graham Reeds.
__
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] Multipart hr styling
Actually, I ran some experimental styling on the hr element in my last design project, and found the following: Firefox (1.5beta) and Opera (9beta) allow full customization of the hr element. That's a good sign for the future, but I've yet to test it in earlier versions. IE (6, quirks mode) insists on having a border on an hr, no matter what you tell it. IE also refuses to paint borders on the top of an hr, and forcibly inserts a margin above it (I know this because when I replaced the hr with a div, the space disappeared). I still need to experiment with earlier browsers, though. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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/
[css-d] Kill textarea vertical scrollbar in FF
hey there,
I cant seem to kill the vertical scroll bar on a text area in firefox. The
only thing that does it is if I increase the height on the text area which I
dont really want to do as I have a set height for an area that I dont want
to increase. Ive tried also the proprietary moz overflow property, but 1)
its not working and 2) of course it doesnt validate (which is important to
me).
overflow: -moz-scrollbars-none;
the main target browser for this app is IE so thats ok for the most part
(overflow: hidden works fine in IE5-6 in my testing of this), but having
this clipped scrollbar in FF is a sore thumb to me and I'd really like to
take care of it proper.
also, Safari puts a border around the textarea which I would also want to
get rid of if possible (even tho I have the border set to none) Safari is
always a pain when it comes to form styling.
this textarea is required for the javascript timer they are using and I'm
stuck with using the textarea.
here is a test page:
http://aenonfiredesign.com/test/killscroll/
the css for it:
textarea#timeremain {
float: right;
width: 100px;
height: 20px;
background: #e4e3db;
color: #333;
font: bold 1.5em arial, helvetica, sans-serif;
margin:0;
padding:0;
border: none;
overflow: hidden;
}
TIA peeps!
-clint
--
iron sharpens iron
__
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] The nuances of CSS Positioning
Hi. I find CSS great, but, I really can't get the nuances of CSS Positioning. It's not that I can't read the specs or anythign - just I really have trouble figuring out how to do the floats and clears and the like properly to get what I have in my mind on to the screen. I think part of this might be due to some ambiguities in the official standards - I know that Opera shows some floats differently than other browsers, and this is due to a different interpretation of the standard, not a bug - but, regardless, I'm really having trouble with this (and, yes, I have already the popular tutorials - I guess I'm looking for something a little more complete...) Could someone help me out here? I'm really struggling with this... Also, please cc me on all responses - I appreciate it. __ 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] The nuances of CSS Positioning
I received a private message asking me to clarify the specifics of what's troubling me: I think the key problem I'm having is a precise definition of float and clear. __ 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] Background position discrepancies / bugs?
Are there any known issues/bugs with the background-position property between IE and Moz? Assays of the topic? __ Start your day with Yahoo! - Make it your home page! http://www.yahoo.com/r/hs __ 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] The nuances of CSS Positioning
Lst Recv wrote: I received a private message asking me to clarify the specifics of what's troubling me: I think the key problem I'm having is a precise definition of float and clear. The basics (is well known I guess): http://www.w3.org/TR/CSS21/visuren.html#floats Some not so basic: http://www.gunlaug.no/contents/wd_demo_float_03.html ...with links to external resources in the right column. Layering of floats: http://www.gunlaug.no/contents/wd_chaos_04.html Hope some of that is precise enough. 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/
Re: [css-d] The nuances of CSS Positioning
Subject: Re: [css-d] The nuances of CSS Positioning I received a private message asking me to clarify the specifics of what's troubling me: I think the key problem I'm having is a precise definition of float and clear. You could take a simple description to be the float works the same as align. Any element floated (left or right) allows other content to flow around it. Using clear can stop content wrapping around the floated element. I hope that is not too simple. __ 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 Lists
I'm trying to come to grips with using CSS with lists.
When using an image as a bullet point, is it possible to push
the image down so it doesn't project well above the text
associated with that bullet?
I'm using something like this:
ul#TickGreenSmall {
list-style-image: url(/images/Tick-green-small.gif);
margin-left: 40px;
padding-left: 0px;
margin-top: 5px;
}
li {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 20px;
}
The green check mark that is the bullet rides too high against
the text.
I can get the required effect easily enough with a table and
images, but...
TIA
- Bill H.
--
We take security very seriously. All outgoing mail is
certified Virus Free. To boost YOUR security visit
The Hacker's Nightmare: http://HackersNightmare.com.
Checked by AVG Free Edition.
Version: 7.1.362 / Virus Database: 267.13.0/167 - Release Date:
11/11/2005
__
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] removing IE border on linked images
Hi there, Anyone know how direct IE to remove the (default ?) border it places around images that serve as links? i.e. a href=dang.htmlimg src=images/about-hnav.jpg alt=hey, hey, hey //a In FF, I get what I want: just the image. In IE, image has border around it the color of a default text link (blue) This may be pretty simple but I've been screwing around with it for too long! Any help much appreciated. Bill Scheider __ 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] removing IE border on linked images
Hi
Have you tried a rule applied to the img tag?
img { border: 0; }
Hope that helps
-
Jonno
On 15/11/2005, at 3:32 PM, bill wrote:
Hi there,
Anyone know how direct IE to remove the (default ?) border it
places around
images that serve as links? i.e. a href=dang.htmlimg
src=images/about-hnav.jpg alt=hey, hey, hey //a
In FF, I get what I want: just the image. In IE, image has border
around it
the color of a default text link (blue)
This may be pretty simple but I've been screwing around with it for
too
long! Any help much appreciated.
Bill Scheider
__
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] removing IE border on linked images
On 11/14/05, bill [EMAIL PROTECTED] wrote:
Anyone know how direct IE to remove the (default ?) border it places around
images that serve as links? i.e. a href=dang.htmlimg
src=images/about-hnav.jpg alt=hey, hey, hey //a
a img { border: none; }
Translated, that means any img element which is a descendent of an
a element will have no border styling.
--
Craig, www.focalcurve.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] removing IE border on linked images
Hi Craig (and the others who responded so quickly)!
I probably should've done this in the first place but since the fixes you
sent -- they were all the same fix BTW: img a { border: none; } -- didn't
fix my problem, here's a link to the partial page:
http://www.first-encounter-design.com/test . The relevant CSS is here:
http://www.first-encounter-design.com/test/css/testmain.css
In FF, the image nav is the way I think it should look. In IE6, there's a
blue border around the navigation images, indicating, I think, that they are
links. I'd like to remove those puppies.
Thanks for your help.
Bill Scheider
Anyone know how direct IE to remove the (default ?) border it places
around
images that serve as links? i.e. a href=dang.htmlimg
src=images/about-hnav.jpg alt=hey, hey, hey //a
a img { border: none; }
Translated, that means any img element which is a descendent of an
a element will have no border styling.
--
Craig, www.focalcurve.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-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] CSS Lists
When using an image as a bullet point, is it possible to push
the image down so it doesn't project well above the text
associated with that bullet?
I'm using something like this:
ul#TickGreenSmall {
list-style-image: url(/images/Tick-green-small.gif);
margin-left: 40px;
padding-left: 0px;
margin-top: 5px;
}
li {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 20px;
}
The green check mark that is the bullet rides too high against
the text.
don't make the image the list bullet. Give the list items no bullet,
and then make the image the background of the list items. then you can
give the background a background-position:
li { background: url(bullet.png) 5px 0 no-repeat; }
I can get the required effect easily enough with a table and
images, but...
that would be a crying shame. :)
--
--
C Montoya
rdpdesign.com ... cssliquid.com ... montoya.rdpdesign.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] removing IE border on linked images
On Nov 14, 2005, at 9:31 PM, bill wrote:
I probably should've done this in the first place but since the fixes
you sent -- they were all the same fix BTW: img a { border: none; } --
didn't fix my problem
Hi Bill,
I know it is easy to mix things up, but did you happen to try reversing
the img and the a like this:
a img { border: none; }
Translated, that means any img element which is a descendent of an
a element will have no border styling.
Hth, Cheers, Micky
--
BCC for Privacy: http://www.cs.rutgers.edu/~watrous/bcc-for-privacy.html
--
My del.icio.us: http://del.icio.us/mhulse
__
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] CSS Lists
Thanks very much Seona. That works fine.
One small problem - which I can live with if necessary - is that
there is now a lot more work involved setting up the lists.
What I have now is this:
ul#NoBullet
{
list-style: none;
margin-left: 25px;
padding-left: 0px;
}
li#TickGreenSmall
{
padding-top: 2px;
padding-bottom: 2px;
padding-left: 40px;
background: transparent url(/images/Tick-green-small.gif)
3px left no-repeat;
}
The webpage is a long one with several different styles of lists.
So now, instead of defining a list with just the one ID= in the
UL, I also have to define every line.
Is there a more efficient way to combine [UL ID=NoBullet] and
[LI ID=SomeListStyleHere]
TIA
- Bill H.
-Original Message-
From: Seona Bellamy [mailto:[EMAIL PROTECTED]
Sent: Tuesday, November 15, 2005 2:47 PM
To: [EMAIL PROTECTED]
Subject: Re: [css-d] CSS Lists
On 15/11/05, Bill Hely [EMAIL PROTECTED] wrote:
I'm trying to come to grips with using CSS with lists.
When using an image as a bullet point, is it possible to
push
the image down so it doesn't project well above the text
associated with that bullet?
A better way than using list-style-image is to set the
list-style-type
to none and make your bullet a background image. Something
like:
ul#TickGreenSmall {
list-style-type: none;
margin-left: 40px;
padding-left: 0px;
margin-top: 5px;
}
li {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 20px;
background: transparent
url(/images/Tick-green-small.gif) 3px
left no-repeat;
}
Just tweak the top osition of the background until it's sitting
where
you want it, and play with your padding-left until the text has
cleared the image properly. Takes a bit of trial and error, but
it's a
lot easier than trying to tame a list-style-image.
I can get the required effect easily enough with a table and
images, but...
...that's a bad idea. :)
Cheers,
Seona.
--
We take security very seriously. All outgoing mail is
certified Virus Free. To boost YOUR security visit
The Hacker's Nightmare: http://HackersNightmare.com.
Checked by AVG Free Edition.
Version: 7.1.362 / Virus Database: 267.13.0/167 - Release Date:
11/11/2005
__
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] removing IE border on linked images
Thanks Mickey,
That did it. I just need to re-space those images in the container now. It
actually makes more sense your way since the image FOLLOWS the link. And the
browser thinks so, too :-} Thanks so much for the help.
Bill Scheider
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Michael Hulse
Sent: Monday, November 14, 2005 9:44 PM
To: 'CSS List'
Subject: Re: [css-d] removing IE border on linked images
On Nov 14, 2005, at 9:31 PM, bill wrote:
I probably should've done this in the first place but since the fixes
you sent -- they were all the same fix BTW: img a { border: none; } --
didn't fix my problem
Hi Bill,
I know it is easy to mix things up, but did you happen to try reversing
the img and the a like this:
a img { border: none; }
Translated, that means any img element which is a descendent of an
a element will have no border styling.
Hth, Cheers, Micky
--
BCC for Privacy: http://www.cs.rutgers.edu/~watrous/bcc-for-privacy.html
--
My del.icio.us: http://del.icio.us/mhulse
__
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] CSS Lists
So, I follow all the discuss about this. I probe this and I have a good works.
ul {
padding-left: 20px;
margin-left: 5px;
}
li {
list-style: url(../images/li.gif);
vertical-align: middle;
padding-left: 1px;
color: #3E4D57;
font: 11px Tahoma;
background: transparent;
}
Now I have a question. The text near to the li element, how I can align them to
appear align=absmiddle as a image property ??
Cheers
ReynierPM
Usuario registrado de Linux: 310201
No basta con alcanzar la sabiduría, es necesario saber utilizarla.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Bill Hely
Enviado el: martes, 15 de noviembre de 2005 1:57 am
Para: 'Seona Bellamy'; css-d@lists.css-discuss.org
Asunto: Re: [css-d] CSS Lists
Thanks very much Seona. That works fine.
One small problem - which I can live with if necessary - is that there is now a
lot more work involved setting up the lists.
What I have now is this:
ul#NoBullet
{
list-style: none;
margin-left: 25px;
padding-left: 0px;
}
li#TickGreenSmall
{
padding-top: 2px;
padding-bottom: 2px;
padding-left: 40px;
background: transparent url(/images/Tick-green-small.gif) 3px left
no-repeat;
}
The webpage is a long one with several different styles of lists.
So now, instead of defining a list with just the one ID= in the UL, I also have
to define every line.
Is there a more efficient way to combine [UL ID=NoBullet] and [LI
ID=SomeListStyleHere]
TIA
- Bill H.
-Original Message-
From: Seona Bellamy [mailto:[EMAIL PROTECTED]
Sent: Tuesday, November 15, 2005 2:47 PM
To: [EMAIL PROTECTED]
Subject: Re: [css-d] CSS Lists
On 15/11/05, Bill Hely [EMAIL PROTECTED] wrote:
I'm trying to come to grips with using CSS with lists.
When using an image as a bullet point, is it possible to
push
the image down so it doesn't project well above the text associated
with that bullet?
A better way than using list-style-image is to set the
list-style-type
to none and make your bullet a background image. Something
like:
ul#TickGreenSmall {
list-style-type: none;
margin-left: 40px;
padding-left: 0px;
margin-top: 5px;
}
li {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 20px;
background: transparent
url(/images/Tick-green-small.gif) 3px
left no-repeat;
}
Just tweak the top osition of the background until it's sitting
where
you want it, and play with your padding-left until the text has
cleared the image properly. Takes a bit of trial and error, but
it's a
lot easier than trying to tame a list-style-image.
I can get the required effect easily enough with a table and images,
but...
...that's a bad idea. :)
Cheers,
Seona.
--
We take security very seriously. All outgoing mail is certified Virus Free. To
boost YOUR security visit The Hacker's Nightmare: http://HackersNightmare.com.
Checked by AVG Free Edition.
Version: 7.1.362 / Virus Database: 267.13.0/167 - Release Date:
11/11/2005
__
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] removing IE border on linked images
On Nov 14, 2005, at 9:57 PM, bill wrote: Thanks Mickey, That did it. I just need to re-space those images in the container now. It actually makes more sense your way Glad it works for you now... don't forget to thank bill [EMAIL PROTECTED] too. :) I quoted his original response in my last response to you. Cheers, Micky. ;) __ 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] CSS Lists
ul#NoBullet
li#TickGreenSmall
3px left no-repeat;
}
The webpage is a long one with several different styles of lists.
So now, instead of defining a list with just the one ID= in the
UL, I also have to define every line.
Is there a more efficient way to combine [UL ID=NoBullet] and
[LI ID=SomeListStyleHere]
How about
li{ ... overall settings ...}
ul#greentick li{
... special settings...
}
That way you only apply the image to every LI inside the UL with the
ID greentick, and you can re-use all the settings of the others. The
only thing that probably changes is the padding on the left and the
background image.
Also, greentick is a bad choice for an ID. An ID should describe what
the element represents, not how it looks. Something like benefits
might be better.
--
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/
