CSS is not a disease!'s topics - tribe.net

Cellspacing -- ARGHHHH

furtographer — Sun, 20 Apr 2008 07:03:24 GMT

By the book, the CSS equivalent for table cellpadding and cellspacing is:

td [ padding: 0;]
table [border-spacing: 0;]

But... you guessed it; the border-spacing property isn't supported by IE6 or even IE7.

I'm guessing I have to hard-code all my tables to cellspacing="0" in the HTML.

Any secrets? Javascript or anything that can force the property without resorting to antiquated attributes in the HTML?

posted in CSS is not a disease! - 4 replies

IE6 bug...er, REQUIREMENT for Submit button

furtographer — Wed, 20 Aug 2008 06:06:38 GMT

In order to add a background to an input button <input type="submit">, you must add a border to the element or the background will be ignored.

Strange but true.

posted in CSS is not a disease! - 0 replies

two background images, one across top, other down side

Nightwind — Wed, 12 Apr 2006 10:22:35 GMT

Trying the changeover from tables.

Wondering if I can have a repeating image or color bar going across the top of the browser window, and another color band going down the left side.

In tables I used to have the left side be the background image for the page, and across the top be in a table with a width of 100%

Hope this is possible in CSS

Help please.

posted in CSS is not a disease! - 8 replies

firebug for ie?

magicspark — Thu, 03 Apr 2008 20:31:07 GMT

Firebug has become a 'must have' for my work designing and developing websites, has anyone used something similar for IE?

I am checking out http://www.debugbar.com

posted in CSS is not a disease! - 2 replies

Override Myspace vomit

furtographer — Tue, 25 Sep 2007 20:33:27 GMT

I need to participate in MySpace to promote my business. Is there a way to install a user CSS in my own browser that will override all the epileptic backgrounds, the Pepto-Bismol fonts and set a default to NEVER EVER play music?

posted in CSS is not a disease! - 10 replies

em

nutbucket — Mon, 11 Feb 2008 07:10:08 GMT

Why should I use "em" for font size rather than points?

its very unintuitive for me.

Is there some good explanation for how best to utilize and understand that tag?

Thx
J

posted in CSS is not a disease! - 2 replies

seeking graphic resources: Old West stuff

furtographer — Mon, 07 Jan 2008 05:55:50 GMT

I have a lot of free Circus, Mad Magazine, and Wanted Poster fonts. But what I need is the victorian scrolls that wrap around the text; like the S-curve scrolls at the bottom of this image http://www.waldenfont.com/features/Feb242007_sm.jpg

clues?

clip-art?

posted in CSS is not a disease! - 2 replies

CSS Tutoring

nutbucket — Thu, 04 Oct 2007 01:22:12 GMT

Hi
are there any of you CSS gurus that would be interested in coming to my house and consulting/teaching me some fundamental CSS layout?
I live in Santa Rosa
I could even come to you.

I have a project going right now, and I need to quickly learn more CSS than I currently know.

I am not green
I am an extremely quick learner, and learn best by interactive, real world projects.

What would you charge?
How soon could you do it?

PM me if you are interested

Thanks,
Jake

posted in CSS is not a disease! - 0 replies

breakin it down...

magicspark — Thu, 26 Apr 2007 22:20:57 GMT

http://www.danielmall.com/archives/2007/04/20/soft_serve.php

nice read

posted in CSS is not a disease! - 7 replies

specific order for selectors/properties in CSS doc?

msdynomite — Thu, 26 Jul 2007 17:14:38 GMT

(cross-post)

I've searched and can't find this info. Is there a specific order that should be used for selectors, or for properties within selectors to create a proper, clean document? For example, I've read that in order for text rollovers to work the selectors must appear in the following order: link, visited, hover, active.

but what about other elements?

Does it matter if you write....

color: #715A53;
font-family: Verdana, Arial, Geneva, Helvetica;
font-size: 19px;
line-height: 24px;
font-weight: bold;

...as opposed to reordering them:

font-weight: bold;
font-family: Verdana, Arial, Geneva, Helvetica;
line-height: 24px;
font-size: 19px;
color: #715A53;

Does it matter if you write...

background-color: #D6CCC4;
padding-top: 20;
padding-right: 10;
padding-bottom: 30;
padding-left: 20;
color: #53504d;
font-family: Arial, Verdana, Geneva, Helvetica;
font-size: 9px;
line-height: 13px;
font-weight: bold;
text-align: left;

...putting the background and padding first, as opposed to:

color: #53504d;
font-family: Arial, Verdana, Geneva, Helvetica;
font-size: 9px;
line-height: 13px;
font-weight: bold;
text-align: left;
background-color: #D6CCC4;
padding-top: 20;
padding-right: 10;
padding-bottom: 30;
padding-left: 20;

...which does the opposite?

posted in CSS is not a disease! - 5 replies

getting burnt on fighting the fight?

magicspark — Thu, 26 Apr 2007 20:34:43 GMT

http://www.mikeindustries.com/sifr/

http://www.sephiroth.it/test/unserializer/

http://labs.adobe.com/wiki/index.php/Apollo

posted in CSS is not a disease! - 0 replies

Need front end Guru - CSS, Javascript etc

tristram — Tue, 10 Apr 2007 17:22:26 GMT

I am looking for someone to work on a project with me that includes coding front end using CSS, Javascript, XHTML etc to work seamlessly with dynamically generated content from a .NET architecture.

Please no beginners or novice skills.

The overview of tasks include;

Cutting up PS file and building it using XHTML/HTML/CSS
Working directly with Designer to adhere to established look and feel
Optimizing CSS style implementation utilizing global CSS files as well as custom isolated CSS files - whichever works best.
Making sure front end is rendering .NET content properly and playing nice.
Some SEO skills would be really great as well.

please send email to tris@strategybase.com

Thanks,

Tris

posted in CSS is not a disease! - 0 replies

globally set your margin/padding

magicspark — Mon, 12 Mar 2007 21:43:25 GMT

*{margin:0;padding:0; /*would you like fries with that?*/}

if you place that in the top of you first loading css file you can further refine typography with more css following.

* {} means everything, that is p,h4,body etc. will no longer have padding or a margin unless if you specify.

html {min-height: 100%;height: auto;} is useful if you need to bottom align a background image in the body

adjacent selectors are pretty cool too: h4 + p{} means that if you have a p that follows an h4, it should have these additional properties / overrides. http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors

posted in CSS is not a disease! - 4 replies

CSS working ONLY in IE? !

aimee_danger — Mon, 12 Mar 2007 16:28:13 GMT

I'm sorry, first off, that I don't have a site to post these live.
I'm having a problem with the content box not growing to include the content. Amazingly enough, it works in IE, but not in any other browser. if anyone has a suggestion for how this can work I would be eternally grateful. I've come a long way with CSS in the past year, but obviously not that far.

CSS:
body {
color: #FFFFF0;
background-color: #31699C;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: .9em;
text-align: left;
margin: 0;
padding: 0;
}

a {
color: #FFFFF0;
text-decoration: none;
}

a:hover {
color: #FFFFF0;
text-decoration: underline;
}
h1 {
font-size: 1.2em;
font-weight: bold;
line-height: 1.3em;
border-bottom: 1.5px solid #FFFFF0;
width: 100%;
}
h1 a {
background-image: url(../images/plus.gif);
background-repeat: no-repeat;
background-position: left;
text-decoration: none;
padding-left: 22px;
}

h1 a:hover {
background-image: url(../images/minus.gif);
background-repeat: no-repeat;
background-position: left;
text-decoration: none;
padding-left: 22px;
}

h2 {
font-size: 2em;
font-weight: bold;
padding: 0;
margin: 0;
}

p {
padding-top: 2px;
padding-left: 2px;
}

div.header {
margin: 40px 0 0 0;
clear: both;
font: Arial, sans-serif;
font-size: .9em;
height: 36px;
vertical-align: text-bottom;
}

div.frame {
position: inherit;
padding: 0;
width: 100%;
border-top: 3px solid #FFFFF0;
border-bottom: 3px solid #FFFFF0;
background-color: #A0BCD7;
height: 350px;
}

div.frame2 {
position: inherit;
padding: 0;
width: 100%;
border-top: 3px solid #FFFFF0;
border-bottom: 3px solid #FFFFF0;
background-color: #F8A35F;
height: 100%;
}

div.frame3 {
position: inherit;
padding: 0;
width: 100%;
border-top: 3px solid #FFFFF0;
border-bottom: 3px solid #FFFFF0;
background-color: #BFC585;
height: 500px;
}

div#content {
margin: 0 20% 0 15%;
padding: 0;
width: 750px;
min-height: 350px;
height: auto;
position: relative;
}

div#pic {
margin: 0;
padding: 0;
width: 350px;
height: 350px;
float: left;
}

div#pic img { display: block;}

div#bodytext {
width: 380px;
height: 350px;
overflow: visible;
float: right;
padding: 5px 10px 0 0;
margin: 0;
}

div.footer {
font-size: .9em;
font: Arial, sans-serif;
}

#left {
margin-left: 15%;
padding: 0;
position: relative;
clear: both;
vertical-align: text-bottom;
}

#right {
margin-right: 15%;
padding: 0;
float: right;
position: relative;
top: -15px;
display: inline;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Venture Vault</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div class="header">
<div id="left">

</div>
</div>
<div class="frame2">
<div id="content">
<div id="pic">
<img id="createProfile" src="images/profile.jpg" alt="createProfile" name="createProfile" />
</div>
<div id="bodytext">
<h1><a href="../index.html">Create Your Profile Now</a></h1>
<p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p>

<h1><a href="../entrepreneurs.html">For Our Entrepreneurs</a></h1>
<p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p>
<p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p><p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p><p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p>
</div>
</div>
</div>
<div class="footer">
<div id="left">a division of <a href="http://www.masterplans.com" target="_blank">Masterplans, Inc.</a></div>
<div id="right"><a href="../sitemap.php">site map</a> | <a href="../privacy.php">privacy policy</a> | © 2007</div>
</div>
</body>

</html>

posted in CSS is not a disease! - 1 reply

suggest a good way to learn CSS

aimee_danger — Fri, 02 Jun 2006 18:35:10 GMT

Would you suggest books or class? If books, which ones?

posted in CSS is not a disease! - 10 replies

saying goodbye to text-transform:capitalize

furtographer — Sat, 04 Mar 2006 18:20:01 GMT

"In The Realm Of The Senses"

It was so fun while it lasted, but now I have to throw it out. After 8 months of succesfully defining my (h4) headlines as {text-transform: capitalize;}, I finally ran into the biggest bug for the first time; Apostrophe.

1) it only has the capacity to force a capital on the first letter of a word, but not un-capitalize when your copy people use all-caps in their typing.

2) The first letter of a word is defined slightly differently among the browsers. Safari, for example, like to begin a word at any alpha character that follows any non-alpha character--even apostrophe!

So you are stuck with all-caps if they typed it that way, and you could end up with mostrosities like:
"Jason'S Revenge"
"Can'T Take It With You"
"I'Ll Be Home For Xmas" (or "X-Mas", if you use a hyphen).

I tried an entity instead of keyboard apostrophe, but it treats it the same way.

Now I must go an hand-type all of my {capitalized} headlines and turn-off the style because it really doesn't function in a useful way. Can you believe it took me several months before I ever typed an apostrophe?

Summary:
Avoid {text-transform: capitalize} It seems like a good idea, but it doesn't stand up to the full test. You must force your copy people to never type headlines in all-caps.

However: Uppercase and Lowercase attributes DO force 'all-caps' or 'no-caps' properly. So you can change "In the Realm of the Senses" to "IN THE REALM OF THE SENSES" on a whim with CSS, just not the other way around.

posted in CSS is not a disease! - 2 replies

IE hacks

aimee_danger — Thu, 15 Dec 2005 20:19:06 GMT

Can someone tell me if there is a hack way to get this site http://www.dervishgirl.com/products.html (click on the individual products to get the popup windows) to load in IE the same way it loads in other browsers?
IE doesn't read the CSS that is the layout for these popups, so I had to add a scroll bar and resize function to them so that people can read the text. In IE the text falls below the image, but it's supposed to be to the right. Also, the 'more images' link is supposed to be right below the image, with the price to the right of that. As always, looks fine in all other browsers but IE (who do these people think they are, anyways?)
I apologize if the CSS file is sloppy. It was my first project.

posted in CSS is not a disease! - 8 replies

CSS Zen Design

Nightwind — Wed, 07 Dec 2005 22:54:05 GMT

I dont know much about CSS. I thought a good way to learn was to make my own Zen of CSS Design layout.

http://beyondmidnight.net/css/washinghair/

So I am having a problem with the content and getting padding to work, so the text does not go all the way to the edge.

Is there any way to get it to work, or did I build this wrong?

http://beyondmidnight.net/css/washinghair/sample.css

posted in CSS is not a disease! - 1 reply

New Tribe

s00zy66 — Sun, 15 Jan 2006 06:38:07 GMT

I created a new tribe to display my graphic work. If you like, come by for a visit and join, too.

http://tribes.tribe.net/graphicsbys00zy66

posted in CSS is not a disease! - 0 replies

CSS for the masses

Robert — Wed, 17 Aug 2005 15:53:35 GMT

First off, I'm a graphic designer with thirty years in the business and enough design awards that I'm not looking for validation at that level; I LIKE what my work looks like. Also, design is my C job as I've earned most of my money as a photographer and filmmaker. That means that my skill set is already filled to overflowing, so I'm not desperate to be something I'm not. What I'm NOT is a coder. That's not a knock on coders, but Jesus, I don't have time to learn everything!

That said, I currently design web sites for large, i.e. multimillion dollar, ecommerce companies. I've learned, and then forgotten the CSS basics several times over now and here's why:

My clients are in this for the money, not to impress programmers. This means that whatever I build, it MUST work on IE on PCs. Any attributes that are not supported by this combination are out of the mix. This is not a statement of a philosophical position, just a statement of my working realities.

Every book I've read on CSS lays out all kinds of grand possibilities and then, usually in the last chapter, quenches my interest by pointing out that most of the cool stuff is not supported by browsers (if it doesn't include IE then it desn't really count).

I've yet to find a book/tutorial that clearly explains how to use CSS to accomplish all the various aspects of visual design as oppossed to text management.

I'd really like to have the option of using CSS when it becomes more supported, but I can't afford (literally) to give up the control over the visual presentation that I'm currently getting with tables.

I'm not looking for a lot of smarty pants derogatory comments from programmer geeks, but if you have something helpful to suggest, I'd love to hear it.

posted in CSS is not a disease! - 4 replies

why is this happening??

aimee_danger — Wed, 21 Sep 2005 08:08:32 GMT

I have a site I'm working on (http://www.rabbitfootdesign.com/lisa ... the holding location)
My issue is that there should not be any underlines under any linking text but there are - in IE on a PC and randomly on Firefox. Is this an IE issue or have I made the css file improperly?

posted in CSS is not a disease! - 6 replies

Not a disease, but maybe a drug!

MamaLoca — Tue, 23 Aug 2005 13:09:46 GMT

I new and not new to CSS, I have to admit I tend towards the lazy way out and use other's templates and tweak the heck out of them, My bad.

So I'm having a problem with a container type ID that won't stay put.

Code:
#rightcontent {
position: fixed;
right:0px;
top:0px;
min-width:200px;
overflow:hidden;
z-index:0;
}

I have my color css seperated from my display css
I also have a genaric a link tag in the body as a default
#rightcontent a{
color: #fff;
}

I use it on a page that I have some ad content within the body tages on the left, then there is a double Header, and a Content container (actually the container is a double container, yeah, it's someone elses code), with three display elements within it.

If I put the rightcontent container outside the Content container code and put text in it it displays to the right of the header, right were I want it. BUT, I want to use a function that generates random links in the rightcontent container but when I place the function call in it displays (this is wierd) inside the Content container AND it's using the background color so is invisible. I'm providing a link and the generated links are at the botom of the page between the white content box and the site menu.

I've tried different things and nothing works.

http://www.chosenspotdesign.com/mycanandaigua/about.test.php

posted in CSS is not a disease! - 4 replies

At least one CSS question from a relative newbie...

darin — Wed, 17 Aug 2005 05:38:17 GMT

So, I managed to eventually get 20 out of 20 on the W3C schools 20-question CSS exam after about 4 runs through it but I'm still a noodnick when it comes to CSS and how it actually looks on the page.

I have a test web page that will eventually replace my currently ugly home page but I have a question about the CSS that is in place at this URL:

http://www.belief-systems.com/test/index.html

What I want to do is position the container and the other divs that include the green bars and the text at the bottom of the page regardless of the page size. I know I am using absolute for this test page but what would I have to change in the CSS of the page to get container and the rest of the text contained within it to be liquid to the bottom of the page with some padding or bottom margin?

Your assistance is greatly appreciated!

posted in CSS is not a disease! - 11 replies

what the... ??

aimee_danger — Thu, 23 Jun 2005 06:32:24 GMT

I'm just learning CSS - teaching myself as I have all web design that I know.

Can someone explain to me why my client's test page is doing this weird thing that it's doing? (not ending a line at the end of the table).

Is it something in my CSS?

Here's the link:
http://www.aimeewhatley.com/dale/index02.html

posted in CSS is not a disease! - 5 replies

CSS is ready!

furtographer — Fri, 01 Jul 2005 21:41:38 GMT

...if only we could get 90% of the web population to stop using a 5-yr old Explorer browser [no updates in 5 years?!] and download a free Gecko browser. And these are the people who couldn't set the clock on their VCR's.

What browser is AOL based on? I haven't been QA-ing in AOL because I don't allow it on any of my machines.

I keep thinking I have it all worked out. But then I go in the next room and try my site on a Explorer for Windows to find that nothing positions right and all these nifty features aren't supported.

Then I have to scour the web to find the work-arounds for the particular inconsistancies.

posted in CSS is not a disease! - 1 reply

Giving up on Float

furtographer — Fri, 14 Jan 2005 10:21:59 GMT

Tuesday, I sat down to a stack of 3 books on CSS and in the end, I still can't use the Float concept satifactorily.

I'm gonna join the CSS revolution by filling in one of those 3-column-plus-header-and-footer templates, and just poop out template sites for a while. It really doesn't go beyond that. You could spend weeks playing with code and still not do better than these boilerplate, cross-concious, script laden hacks.

They should just code a default layout into the browser and have web jockeys merely <xml> their pages without any time spent on layout: <header> <leftmenu> <content><rightmenu> <footer>. Save time and just use CSS for colorizing.

Maybe CSS 4 will include a set of predictable positioning instructions for any browsers still developing.

This could be a box-based layout system. Here I've introduced Attach, Overlap, Fixed-stretch, Content reference, and Box-Type.

///Example///

box name=leftnav {
content: .leftmenu
box-type: rect;
corner: round 20px;
border: 7px;
color: #fdf;
width: fixed 200px;
attach: left window, right box(.content), top box(.header), bottom no;
height: auto;
margin: 5px 5px auto 20px;
padding: auto;
overlap: (.bg)
}

styles [box1] :
p {font: 12pt sans-serif; }
a {color: blue}
ul {type: linkmenu vert; font: 12pt allcaps;}

... etc.

In this system, you don't have to make the width of the body be 87% to avoid the horizontal scroll bar.

I have time to fantasize.

posted in CSS is not a disease! - 1 reply

Browser Support

furtographer — Sun, 09 Jan 2005 20:27:51 GMT

I've been developing with Current Safari, Current FireFox, and the Final MSIE for Mac. I've been playing with MSIE just because it there are prolly plenty of iMac people that are still running it.

On the Windows side, I'll be doing QC with just the current MSIE and Mozilla.

How much importance would you put on setting fonts to be friendly for the browsers of *NIX?

Do you know any non-nerds that use Opera or other rare browsers primarily?

posted in CSS is not a disease! - 0 replies

Learning Positioning

furtographer — Sun, 09 Jan 2005 20:21:12 GMT

My current kludgy workflow is to edit just the text of HTML and CSS in DreamWeaver 6.0 on my Mac (because it colorizes the tags). And I have 3 browsers open on the other screen. I edit some code, then I hit save and refresh the browsers to see what happened. This is because DreamWeaver 6 doesn't support CSS layout in any predictable way, and the DreamWeaver 2004 that I'm running in Windows doesn't do much better.

Positioning tags and their properties are all described in detail in various reference sites, but there's little to find regarding how the 'boxes' react to each other on a page. All the descriptions tell you how a 'box' will behave alone on a page, but it's always a surprize when you use a Float.

I've been working with the open source layouts that are offered and seeing what happens when I make various adjustments.

posted in CSS is not a disease! - 0 replies