CSS structure

Hi there

I am well aware that CSS using <DIV> tags instead of tables is the best way for layouts.

I got this book about CSS, learning so much but still slowly putting the puzzle together. Im having problems trying to make it look consistent in all browsers however, it seems slightly different for some reason.

So I was suggesting and probably a big ask but what would be the best way to structure a css file for cross browsers and layouts when building a website and are you able to show me an example please?

Many thanks in advance

CHEERS

 

their some diff. between firefox, ie6, ie7, opera...

First, use CSS RESET.
then, some CSS HACK

you must test on diff. browsers and corr the mistake.

 

Thanks for the info but whats CSS RESET?

 

google : CSS RESET

YUI Reset CSS (YAHOO!)

 

There are many resets out there. Most people (including myself) use the easy one:

* {
margin: 0;
padding: 0;
}

The * means Everything. This is apparently a no-no with forms (tho I'm still using it with my forms, and have already started running into the problems with it).

There are other resets many people use, because some browser defaults are (almost) never used.

Here's Eric's newest version: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

I find it much longer than useful, but it really depends on what's on your site.

I usually have
* {
margin: 0;
padding: 0;
}
img, fieldset {
boder: none;
}

table {
border-collapse: collapse;
}

ul {
list-style-type: none;
}

Each browser has a different "default" with padding and margins-- like in lists, where (I forget which) FF/Gecko browsers use (padding?) and IE uses (margin?) or other way around-- so no matter what you set in your CSS, one browser always looks fvckd up while the other is okay. The reset starts everything at 0 so you can style better.

 

I don't use the universal selector anymore, and just about ALL of the reset.css files out there are bloated wastes of space. Here's what I use at the very top of my stylesheet.

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var {
	margin: 0;
	padding: 0;
}

body {
	background: #FFF;
	color: #000;
	font: normal 85%/140% "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
	letter-spacing: 1px;
	margin: 0 auto;
	max-width: 1150px;
	min-width: 750px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, garamond, "times new roman", times, serif;
	font-weight: bold;
}

h1 {
	font-size: 1.75em;
	line-height: 1.8em;
}

h2 {
	font-size: 1.5em;
	line-height: 1.55em;
}

h3 {
	font-size: 1.05em;
	line-height: 1.1em;
}

h4 {
	font-size: 0.95em;
	line-height: 1em;
}

h5 {
	font-size: 0.85em;
	line-height: 0.9em;
}

h6 {
	font-size: 0.75em;
	line-height: 0.8em;
}

img {
	border: 0;																/* this squashes a Firefox bug */
	display: block;
}

Code (markup):

From there, I use EM for the widths of my containers (menu, content, sidebars, stuff like that), put my pages in source code order (header, menu, content, sidebar, footer) and follow that up with a combination of floats and negative margins to layout the page as I see fit. And when I'm done with the site, I remove the Lucida Console font from the stylesheet, but leave the measurements for the containers alone (this ensures that just about any font that gets used on the page will fit inside their containers and not break the layout).

 

Test more than once if you test at all.

 

WOW!! This has helped me alot, I did google search on the CSS REST and HACKS just too much learn though. No matter the cost, its the result that counts

thank you all for your help hoepfully in time I can show my future status in CSS

CHEERS

 

Don't worry so much about hacks. Chances are 99% of the time you won't even need them.

 

True!! So that means I should be focusing on the CSS RESET.

 

No, you should avoid CSS reset. If you're going to reset your properties (which you should), the stylesheet I gave you will be all you need. And it uses a LOT less code than the others while doing the same thing since mine only resets those properties that NEED to be reset.

 

See, I would argue the opposite because frankly, that's a LOT of code on a number of tags I never use in the first place, and let's face it, the ONLY thing the universal reset really causes problems on are form elements - and once you learn that IE treats line-height as height on said elements, you rarely have any problems styling those EITHER. With a little practice you can use the universal reset with forms without the headaches... assuming that like me you consider fieldsets and legends to be nonfunctional rubbish (entirely because of the lack of cross browser consistancy) that aren't worth the pain in the ass.

In fact, I've been finding it EASIER to style forms with the universal reset than without. Line-height and vertical-align greatly ease any problems. The only place I see issues is Safari, and given that webkit/khtml developers have their heads firmly wedged up their backsides on that subject - who gives a ****.

 

Uh Jason, I was talking about things like the bloated wastes of space such as Eric Meyer's reset.css file, not the universal selector or my own reset.

 

Im bit confuse now
I do like what you said about using the universal reset (even though I dont know completely what that is ) because I wont using it for forms so Im willing to use what ever stylesheet that will make my website look fine in other browsers, then Im happy with that . I will probably need it a stylesheet in the future for forms but by then, I can make a new topic on it. Im guessing that I will come across with some trials and errors again.

Here's where Im at now, with the stylesheet that Dan-da-man gave me, along with Stomme and EIx input.

At the moment, it works fine in IE, different in other browers but not by much though. I just need my container to align in the center with the other browsers, IE is perfectly fine.

Here is the test link
www.css-example.digitalprodusa.net

Much help is appreciated

P.S I wanted to say an early MERRY CHRISTMAS TO YOU ALL OR SHOULD I SAY TO DIGITAL POINT and that I truly love you guys for your input, how much of a smile you give me when I manage to take on a challenge like this and how this has given me a drive to go further into learning so much more until the next best thing comes out.

CHEERS

 

False alarm yall, I manage to get this working (not me of course) but from the help of another forum and now I am so overwhelmed by the look of seeing my website work in different browsers.

Thanks again yall, problem solved. Now I will see if I can help someone else in the forum.

CHEERS