is it normal?

[ivyholly]

Hey y`all,

Um, is it normal to have a significant difference between how a site (done in css) looks in one browser as compared to another? I mean, I think I`ve tweaked my site to the best of my abilities, but in one browser the text is kinda scrunched, but if I alter it, it`s too spaced in the other browser. Is this as good as it can get? Anyone have any tips or suggestions to share?

http://pyxnet.ath.cx/robin

[herkalees]

It is actually not normal for things to be extremely different. Although I cannot pin-point the exact cause of your problems, I can only suggest one thing that comes to mind; starting your CSS file off with this:
* {margin:0; padding:0;}
It helps to put everything in check and make sure all browsers start with the same foundation of margin and padding.
In fact, while I'm at it, here is my default style sheet I use on every site I make:

Code: Select all

/*====================
Global Styles
======================*/
* {
margin: 0;
padding: 0;
}
body, html {
background-color: #fff;
color: #000;
padding: 0;
margin: 0;
}
body {
font: 85%/1.3em Tahoma, Arial, Helvetica, sans-serif;
}
/*====================
Link Styles
======================*/
a:link {
color: #00c;
}
a:visited {
color: #90c;
}
a:focus {
color: #06c;
}
a:hover {
color: #9c3;
}
a:active {
color: #f90;
}
/*====================
Heading Styles
======================*/
h1,h2,h3,h4,h5,h6 {
color: #000;
font-family: Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;
}
h1 {
font-size: 1.8em;
margin: 0 0 .9em;
}
h2 {
font-size: 1.6em;
margin: 0 0 .8em;
}
h3 {
font-size: 1.4em;
margin: 0 0 0.7em;
}
h4 {
font-size: 1.2em;
margin: 0 0 .6em;
}
h5 {
font-size: 1em;
margin: 0 0 .5em;
}
/*====================
Image Styles
======================*/
img {
border: 0;
}
/*====================
List Styles
======================*/
dl, ol, ul {
margin: 0 0 1em;
}
dt {
font-weight: bold;
}
dd {
margin: 0 0 0 3em;
}
ul {
padding:0 0 0 3em;
}
ol {
padding: 0 0 0 3em;
}
li {
margin: 0 0 0.5em;
}
/*====================
Quote Styles
======================*/
blockquote {
margin: 1em 0;
padding-left: 20px;
}
/*====================
General Styles
======================*/
code, kbd, pre {
font-family: Courier, "Courier New", Tahoma;
}
ins, del {
font-style: italic;
}
p {
margin: 1em 0;
}
abbr, acronym, dfn {
cursor: help;
}
/*====================
Site Styles
======================*/

[drd]

Originally Posted by herkalees

* {margin:0; padding:0;}

I'll second that. I always add those global styles and it really helps.

The default stylesheet is a good idea too.

[ivyholly]

Ok, thanks a lot herkalees (and drd), I`ll be sure to add that to my css and see what happens...

Btw, what does it do when you put things into categories thusly (thusly?):
/*====================
Global Styles
======================*/

And what is a: focus?

[herkalees]

Originally Posted by ivyholly

Ok, thanks a lot herkalees (and drd), I`ll be sure to add that to my css and see what happens...

Btw, what does it do when you put things into categories thusly (thusly?):
/*====================
Global Styles
======================*/

And what is a: focus?

The "category" is nothing but a convenience visually. It helps me when I'm looking through the style sheet.

a:focus is when your tabbing through all links on a page (with keyboard), the link will change to the declared properties when you've tabbed onto it.

[ivyholly]

Ok, I get it, thanks.

Your tips helped immensely, herkalees; what do you think- is this ok? Any other suggestions?

http://pyxnet.ath.cx/robin