Standardization of CSS (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

FlowerPower -> Standardization of CSS (5/18/2005 19:43:16)

I'm in the (neverending) process of learning CSS, but it's frustrating to spend so much time on finding little tricks to get a page that already works well in Netscape, Firefox and Opera to also work in IE (or any configuration of these and other browsers).

Will all the work on creating standards eventually bring about a time when using CSS will not be such a lengthy process of tweaking, headscratching and looking for hacks to deal with the quirks of the various major browsers? (Well, okay, the headscratching is probably just part of the deal if you want to do web design...)

Just my little sigh of frustration... Hopefully someone will tell me there's a light at the end of the tunnel (and that it's not just the proverbial jerk with a flashlight bringing you more work :-)...



c1sissy -> RE: Standardization of CSS (5/18/2005 22:46:31)

Hi Flowerpower, I hate to disappoint you, but I think it will be a long time before the light is on at the end of the tunel [;)]

There will always be some aspect of a browser that is not going to work with the standards like they should. The standards are great, if we could only get the creators of some browsers to follow along with them.

If you really study css, and learn the box model, and positioning as well as you can, I think you will find that you won't need as many hacks as you think you are going to need.

Here is an excellent book that i suggest that you get if you can
Stylin with css: A Designers Guide Author: Charles Wyke-Smith
This is an excellent book. I think that Charles does an excellent job of explaining positioning etc.

If you check out Amazon.com I think you will find it at a really decent price, and its a recent publish.

Go through the links that are provided in the css forum. There are lots of great pages within those links. And post away in here.

Also, remember that even the css guru's are still in a learning process with css. Some of them still shake their heads as they design pages and wonder why things don't work out as they think that they should. CSS can be, and is a powerful thing to learn. But patience is a must with it. And an open mind.

I hope that i Have managed to help you out just a bit?  good luck in your learning.



FlowerPower -> RE: Standardization of CSS (5/19/2005 4:45:40)

Thank you very much for the tip. I'll go check it out.

I find that I learn best when tinkering (as do most people), and as I'm about to completely redesign a site I have for work (for my computer students), I will have plenty of opportunity to learn. I'm afraid I made the site using frames [sm=icon_redface.gif] (out of pure laziness), but I intend to remake it with css over my summer break.

Thanks for the encouragement!



jaybee -> RE: Standardization of CSS (5/19/2005 5:17:18)

Hiya, well done for trying. Yes, it can be a pain especially with some of the more complex layouts but you'll get there eventually.

The good news is that Microsoft have promised that their next browser due to come out with Longhorn will be css compliant. The bad news is that they said that before. Even the documentation for IE6 doesn't agree with what it actually does. [&o]



womble -> RE: Standardization of CSS (5/19/2005 5:41:33)

Hi FlowerPower. If it's any consolation I'm going though the same thing (and unfortunately that light is the jerk with the flashlight). I'm trying to redo my site in xhtml/css and it took me ages just to get the logo in the right place with the heading, and get the nav set up (it was the nav that was causing me problems with menu items flying all over the page) but then I was being stubborn and refused to post here because I wanted to fix it myself and in the process the poor old computer nearly went out of the window and I pulled out most of my hair. At one point I had a great layout, but unfortunately it only worked properly in Netscape - great for the two Netscape users out there (the third was on holiday, so I understand), but not much use to everyone else. I'm certainly going to check out Amazon (may also have to get a bigger bookshelf as well!). In the meantime, I suppose I'd better get back to it...[:@]



c1sissy -> RE: Standardization of CSS (5/19/2005 6:00:48)

I can list the books that I have on hand with recomendations. IF you both wish.

I love this one by Charles. He discusses a term called positioning context. Its an interesting term.

Relative and absolute positioning can be mind bogglers for newbies to css as well as seasoned css'ers.

Floats, to me at least, were relatively easy.

One thing you need to decided for yourselves. Are you going to serve designs on the older browsers? Or are you going to design so that your layout is viewable even if your css doesn't show up on the page?

You can use the @import to hide styles from the older browsers. IF your layout is done properly, the older ones can view your page, just not with the presentation that newer browsers can see. If you can go by the stats that you have on who views your pages, and NN isn't very high in those stats,  then design as you see fit. Don't get so upset over the older browsers.

Learn and understand the box model. I can't stress this enough. And remember that in css, all elements are boxes. Even inline. The inline are just continuous boxes. A paragraph will be a box.

http://brainjar.com/css/positioning/
Check out the link above and print this out and read it. It shows what I am discussing above. Also remember that inline elements and block elements can be changed via the display property.

Start with building play pages. Check out the homework link that is in here. I posted things as I was learning them in the begining. LVS online learning site has great courses and they aren't expensive and the teacher Vikki is terrific and helpful. (BTW if you sign up for a course, let me know as I get credit towards a free course, but you need the email that I signed up with over there)

As important as the terms are in regards to positioning, try not to get to hung up on them as I have, lol or you will be forever trying to figure them out. Learn about the flow of the document. This is also important. Go to community Mx, they have great articles that you can purchase for only about 2 dollars each with files that go with each article for learning. Some of the things are even free in regards to css over there. One day, I'll sign up for the community, but not until I can afford to. Check out positioniseverything for bugs. John is one of the best bug hunters out there.

And post questions, no matter if you think they are stupid or not. What you post could help someone else during a search for answers.

Suzy (check out the link under my name) has a crib sheet that you can print out that has some great thing in it. Tanfa's web site.

Just keep on keeping. [;)]



jaybee -> RE: Standardization of CSS (5/19/2005 7:00:44)

My fave book and the one I use all the time is HTML 5th Edition with XHTML and CSS - Elizabeth Castro web site here



Tailslide -> RE: Standardization of CSS (5/19/2005 7:15:13)

Great link Jaybee!



c1sissy -> RE: Standardization of CSS (5/19/2005 7:20:33)

I also have that book and after reading that one and this new one, I have to say that Charles' book is better by far. He has a way of explaining things so that you get an understanding of things You can find it Here

I have about a dozen books on css, well maybe even a few more then that. In my quest to learn this the best that I could, I have purchased numerous books that have come out on css. And from all the books that I have read, I find that Charles Wyke-Smith is a terrific teacher. The working examples in the second part of his book are great.

Two other great ones are:

Integrated HTML and CSS: A Smarter Faster way to learn by Virgina Debolt
 
Web STandards Solutions: The Markup and Style Handbook by Dan Cederholm
 



womble -> RE: Standardization of CSS (5/19/2005 8:47:38)

Thanks for the tips, I’ll check them out.
 
The books I’m using at the moment are:
- Web Standards Solutions: the markup and style handbook (Dan Cederholm)
- HTML Utopia: Designing without tables using CSS (Dan Shafer)
- Cascading Style Sheets: the definitive guide (Eric Meyer)
 
I think I’ve got the hang of the box model, and I’m finding the developers toolbar in FF great for outlining stuff to remind me just where all the little boxes are. I’ve been struggling with absolute and relative positioning though. That said though, I’m getting there slowly. At least I’ve got columns now in the right place. I thought I’d got an idea of this positioning lark, and all 3 columns are where they’re supposed to be. All I need to do now is stop the footer from floating mid way up the page! My centre column is longer than either the left or right columns, and the footer just seems to put itself wherever it feels like, usually somewhere in the middle of the page. My latest idea was to position the footer absolutely as well, lined up with the left margin and 97% from the top of the page. With that too though it’s still floating off wherever it feels like. Any ideas?  



c1sissy -> RE: Standardization of CSS (5/19/2005 9:03:40)

Hi Womble, if you go Here I'm sure that you will find someting to help you out.

I know part of the answer, but I think if you search it, you'll understand it better (plus some of this I'm not too good at explaining yet. [;)])

I'm a firm believer in reading to help you find out what the problem and answers are. Then get help [;)] Go to that link and search for footer position. And take advantage of the list of links that you arrive at.

Here is another link for you. This should be the search page. Type in footer placement. This is what you get[;)]



Tailslide -> RE: Standardization of CSS (5/19/2005 9:20:05)

I'm presuming that you've got floated divs making up your 3 columns? If so then adding a clear: both rule to the footer should put it and the end of the columns.

Using Absolute positioning can be useful but it should be used sparingly as it can lead to problems especially with big important bits of your design. For instance if you position the footer absolutely at the "absolute bottom" of the page, then your text could end up running underneath it if the screen is re-sized or if you add new text. As you probably know, positioning something absolutely takes it out of the normal flow of the page and other elements in that page then ignore the absolute element. It could cause you massive headaches. Also - use the Relative positioning thingy carefully too as it can do weird stuff to IE.

Clearing the footer should solve the problem though.

Here's a useful article on Footers: http://www.alistapart.com/d/footers/
Check your DTD too as that could cause problems with how the page is rendered.




jaybee -> RE: Standardization of CSS (5/20/2005 6:40:34)

To plagiarise a famous saying:

CSS layout is like a box of chocolates, you're never completely sure what you're gonna get. [:D]



Tailslide -> RE: Standardization of CSS (5/20/2005 6:51:23)

quote:

ORIGINAL: jaybee

To plagiarise a famous saying:

CSS layout is like a box of chocolates, you're never completely sure what you're gonna get. [:D]

quote:

CSS layout is like a box of chocolates, you're never completely sure what you're gonna get.


Yeah but whatever flavour you get you can guarantee it won't work properly in Mac IE 5.0...



womble -> RE: Standardization of CSS (5/20/2005 7:24:45)

Thanks Deb and Tailslide for the links (and thanks for the email Deb). I spent last night reading Eric Meyer's 'Cascading Style Sheets: the definitive guide' again to try and make sense of all this positioning (not the easiest read though!) and when I read it, it seems to make sense. The trouble is, then I try it and everything goes crazy. The ALA article seemed to make perfect sense, and I thought I'd cracked it, then tried it and...[:@]

Tailslide - no I'm using absolute positioning, not floats. I've tried putting the left and right columns as 'float', thinking I could use 'clear' to keep the footer below the columns, and the footer does indeed go to the bottom of the centre column, but so does the right column as well. I've read somewhere about using js to check the length of the columns, but I really want to try and avoid using js unless I have to. I also found that the left column shifted out of place slightly in IE (should be able to solve that with the box model hack?).

Anyway, I've uploaded it to www.ddeaf.org.uk/test/index.html, which has also showed up another problem. Everything appears to be well with the columns in FF, and in IE too when I preview it on my machine in IE, but on the uploaded file, the centre column has gone totally crazy. My brain's now struggling to make sense of all this and I'm getting to the stage where the more I read, the more confused I seem to get so I think I'll call it a day for now and come back to it tomorrow when, hopefully, it'll all make more sense.



Tailslide -> RE: Standardization of CSS (5/20/2005 7:42:44)

Womble - take this bit out pronto <?xml version="1.0" encoding="UTF-8" ?>

It puts IE into "Quirks" mode. For Quirks read "stuff it up" mode.

It basically tries to interpret the code as HTML 4.01.

Then look and see what's still wrong if anything.



c1sissy -> RE: Standardization of CSS (5/20/2005 7:42:49)

Ok Womble, I think its the box model that you need to understand more.

Here is the thing ok, you have your content, then you decide hey, add borders and margins ok? BUT the thing is for EACH of those you add, its going to increase the size of your content.

say your content box is 400 pixels. Then you decide to add 10 px padding to the left and right of the box. Well your content is enlarged now. The content box is 420 pixels wide. the 10px from the left and the right. Now when you add margins, say 5px to each side left and right, This is going to add another 10pixels to the size of the box. So if you planned on a 400pixel column(which is really a box) fitting into your layout, and you add the rest of the padding and the margins to this, you are actually enlarging your content section. Which you don't realize you are doing. I think this could be part of the problem with your page. Decrease your content areas by the width of the paddings and margins and see how things layout in your page.

Also remove this!
<?xml version="1.0" encoding="UTF-8" ?>
It really isn't needed as this isn't recognized by all the browsers and will throw your browser into quirks mode. (I think I have that part right[;)])

For your strict xhtml use it like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />

Ok, now work on these things and then see what happens with your positioning.

Just remember, if soemthing goes wrong to trouble shoot first before you think you have something wrong in the style rules. Check your xhtml, validate your css and xhtml. Make sure your dtd's are correct.

After you do this, we will see how the positioning works out. I have to look better at your styles etc.. 



c1sissy -> RE: Standardization of CSS (5/20/2005 7:55:29)

Hi Womble, if you cut and past this into your page this is correct so far. FIRST, compare this to yours so that you can see where there were just a few coding errors. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[link=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/link]">
<html xmlns="[link=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/link]" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="ISO-8859-1" />
<title>Home Page - Ddeaf Equality Forward - working with Deaf, deaf, deafened, hard of hearing and deafblind people in Derbyshire and Nottinghamshire</title>
<meta name="description" content="This is the home page of Ddeaf Equality Forward: a voluntary organisation working in Derbyshire and Nottinghamshire to tackle issues surrounding deafness" />
<meta name="keywords" content="Ddeaf Equality Forward Derbyshire Nottinghamshire deaf discrimination sign language training courses discussion forum comic relief disability discrimination equal opportunities deaf hard of hearing deafblind deafened" />
<meta name="author" content="DdEF" />
<meta name="title" content="Ddeaf Equality Forward - Home Page" />



c1sissy -> RE: Standardization of CSS (5/20/2005 8:13:31)

Womble, here is another suggestion for you. THis helps you during your layout so that you can see how things are with your boxes/divs. If you put each one of the divs at a different background color, just until you get the layout accomplished, it helps you to see how each one of the boxes/divs are going for you while you are laying out your page.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125