As ed pointed out, separating properties can actually lead to cross browser issues.
For Example:
Code:
padding-bottom: 10px;
padding-left: 5px;
padding-right: 2px;
padding-top: 8px;
Should always be written as:
Code:
padding: 8px 2px 5px 10px;
(My browser of choice: Firefox, Resolution: 1680 x 1050)
I checked in Google Chrome, IE, Opera, Safari and Firefox
No issues in Firefox or IE, but I did see an issue in Google, Opera and Safari
Instead of using a break (< br >) I would try using
display: block; on everything that needs to be stacked ontop of something else, and maybe even specify a margin-bottom if you need a little extra space between spans. Also keep in mind that header tags are easier to use and style for titles. (all those Orange classes could easily be headers
Code:
h1, h2, h3, h4, h5, h6 {
font: Arial, Helvetica, sans-serif #f26722;
letter-spacing: 1px;
}
h1 { font-size: 24px; } // whatever sizes you want here, em's or px's
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }
Also, you're naming your sections as separate classes, but they have identical properties (for the most part). Unless you plan on making each < p > look different from the other, I would just have one MainPT. I like to use a combination of class and id. For every section on my webpage that shares the same properties, I name one class and change the id where needed. (These colors are ugly combos, I know)
For Example:
Code:
...
.section {
display: block;
padding: 5px;
}
#Superman {
border: 1px solid blue;
background-color: red;
}
#Batman {
border: 1px solid yellow;
background-color: black;
}
</style>
<div class=section id=Superman><h2>Title</h2>blah blah blah</div>
<div class=section id=Batman><h2>Title</h2>blah blah blah</div>
My last piece of cross browser advice is to reset all your CSS and then style it.
Code:
/* ====================================================
STYLE RESET
==================================================== */
html, body, div, span, applet, objects, iframe, h1, h2, h3, h4, h5, h6, blockquote, p, pre, a, abbr, acronyn, address, big, caption, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td {
background: none repeat scroll 0 0 transparent;
margin: 0;
padding: 0;
outline: 0 none;
font-size: 100%;
vertical-align: baseline;
}
ol, ul {
list-style: none outside none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0 none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ====================================================
MY STYLE
==================================================== */
BODY {
...
}
...
