Forum Moderators: not2easy
I`m new here. ;)
The CSS is not shown correctly in my portal <Sorry, no URLs. See TOS [webmasterworld.com]> with IE 5.0 and 5.5. How to solve it?
Is there any program or website to test or view my website in any browser for free?
CSS--------------------------------------------
body
{
color: black;
background: #97B7AF;
font-family: Verdana,Arial;
margin: 0px;
}
table
{
width: 100%;
margin: 5;
padding: 5;
font-size: small;
}
table td
{
padding: 0;
border-width: 0;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a
{
color: #3D7A7A;
text-decoration: none;
font-weight: bold;
background-color: transparent;
font-size: 11px;
}
a:hover
{
color: #ff6600;
}
ul
{
margin: 2px;
padding: 2px;
list-style: decimal inside;
text-align: left;
}
li
{
margin-left: 2px;
list-style: square inside;
color: #2F5376;
}
.itemHead
{
padding: 3px;
background-color: #D1E9E9;
color: #366969;
}
.itemInfo
{
text-align: right;
padding: 3px;
background-color: #F1F8F8;
}
.itemTitle a
{
font-size: 130%;
font-weight: bold;
font-variant: small-caps;
color: #2D5757;
background-color: transparent;
font-style: italic;
}
.itemPoster
{
font-size: 90%;
font-style: italic;
}
.itemPostDate
{
font-size: 90%;
font-style: italic;
}
.itemStats
{
font-size: 90%;
font-style: italic;
}
.itemBody
{
padding-left: 5px;
}
.itemText
{
margin-top: 5px;
margin-bottom: 5px;
line-height: 1.5em;
}
.itemText:first-letter
{
font-size: 133%;
font-weight: bold;
}
.itemFoot
{
text-align: right;
padding: 3px;
background-color: #E2F1F1;
}
.itemAdminLink
{
font-size: 90%;
}
.itemPermaLink
{
font-size: 90%;
}
th
{
background-color: #A5C5C0;
color: #FFFFFF;
padding: 2px;
vertical-align: middle;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td#headerbanner
{
width: 100%;
background-color: #537477;
vertical-align: middle;
height: 80px;
padding-right: 5px;
}
td#headerlogo
{
background-color: #537477;
text-indent: 5px;
}
td#headerbar
{
height: 25px;
text-align: left;
vertical-align: middle;
line-height: 22px;
font-size: 10px;
border-bottom: 1px solid #000000;
padding-bottom: 1px;
background-color: #275050;
color: #FFFFFF;
border-top: 1px solid #000000;
}
td#headerbar a
{
color: #FFFFFF;
}
td#leftcolumn
{
font-size: 11px;
background-color: #E4F1F1;
border-right: 1px solid #4E6B6D;
}
td#leftcolumn th
{
background-color: #9BBFB9;
color: #FFFFFF;
vertical-align: middle;
}
td#leftcolumn div.blockTitle
{
font-weight: bold;
color: #FFFFFF;
background-color: #84A5A8;
padding: 5px;
}
td#leftcolumn div.blockContent
{
padding: 3px;
}
td#centercolumn
{
font-size: 11px;
width: 100%;
padding-right: 4px;
}
td#centercolumn th
{
background-color: #9BBFB9;
color: #455A56;
vertical-align: middle;
}
td#centerCcolumn
{
padding: 3px;
}
td#centerCcolumn div.blockTitle
{
padding: 3px;
color: #FFFFFF;
font-weight: bold;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
background-color: #4E6B6D;
}
td#centerCcolumn div.blockContent
{
border-bottom: 1px solid #dddddd;
padding: 2px;
margin-bottom: 2px;
}
td#centerLcolumn
{
width: 50%;
padding: 0px 3px 0px 0px;
}
td#centerLcolumn div.blockTitle
{
padding: 3px;
color: #FFFFFF;
font-weight: bold;
margin-top: 0px;
background-color: #4E6B6D;
margin-left: 2px;
}
td#centerLcolumn div.blockContent
{
border-bottom: 1px solid #dddddd;
padding: 3px;
margin-left: 3px;
margin-right: 2px;
margin-bottom: 2px;
}
td#centerRcolumn
{
width: 50%;
padding: 0px 3px 0px 0px;
}
td#centerRcolumn div.blockTitle
{
padding: 3px;
color: #FFFFFF;
font-weight: bold;
margin-top: 0px;
background-color: #4E6B6D;
}
td#centerRcolumn div.blockContent
{
border-bottom: 1px solid #dddddd;
padding: 3px;
margin-left: 2px;
margin-right: 3px;
margin-bottom: 2px;
line-height: 120%;
}
div#content
{
text-align: left;
padding: 2px;
width: 100%;
}
td#rightcolumn
{
font-size: 11px;
background-color: #E4F1F1;
border-left: 1px solid #4E6B6D;
}
td#rightcolumn th
{
background-color: #B1CDC8;
color: #373737;
vertical-align: middle;
}
td#rightcolumn div.blockTitle
{
font-weight: bold;
color: #FFFFFF;
background-color: #84A5A8;
padding: 5px;
}
td#rightcolumn div.blockContent
{
padding: 3px;
}
tr#footerbar
{
text-align: center;
background-image: url(hbar.gif);
}
td#mainmenu a
{
display: block;
margin: 0;
padding: 4px;
}
td#mainmenu a:hover
{
color: #FF8040;
}
td#mainmenu a.menuTop
{
padding-left: 3px;
}
td#mainmenu a.menuMain
{
padding-left: 3px;
}
td#mainmenu a.menuSub
{
padding-left: 18px;
background-image: url('strela.png');
background-repeat: no-repeat;
background-position: left;
}
td#usermenu a
{
display: block;
margin: 0;
padding: 3px;
font-weight: normal;
font-size: 10px;
}
td#usermenu a:hover
{
background-color: #ffffff;
}
td#usermenu a.highlight
{
background-color: #fcc;
}
.head
{
background-color: #D5E1DE;
padding: 5px;
font-weight: bold;
}
.even
{
background-color: #F0F2F4;
padding: 5px;
}
.odd
{
background-color: #E7EBEA;
padding: 5px;
}
.foot
{
background-color: #E1ECEC;
padding: 5px;
font-weight: bold;
}
tr.even td
{
background-color: #F0F2F4;
padding: 5px;
}
tr.odd td
{
background-color: #E1F0F0;
padding: 5px;
}
div.errorMsg
{
background-color: #FFCCCC;
text-align: center;
border-top: 1px solid #DDDDFF;
border-bottom: 1px solid #AAAAAA;
font-weight: bold;
padding: 10px;
}
div.confirmMsg
{
background-color: #E9F3ED;
color: #136C99;
text-align: center;
border-top: 1px solid #DDDDFF;
border-bottom: 1px solid #AAAAAA;
font-weight: bold;
padding: 10px;
}
div.resultMsg
{
background-color: #E1E1E1;
color: #333333;
text-align: center;
border-top: 1px solid silver;
font-weight: bold;
border-bottom: 1px solid #666666;
padding: 5px;
}
div.xoopsCode
{
background: #FFFFFF;
border: 1px inset #000080;
font-family: "Courier New",Courier,monospace;
padding: 0px 6px 6px 6px;
}
div.xoopsQuote
{
background: #FFFFFF;
border: 1px inset #000080;
font-family: "Courier New",Courier,monospace;
padding: 0px 6px 6px 6px;
}
.comTitle
{
font-weight: bold;
margin-bottom: 2px;
}
.comText
{
padding: 2px;
}
.comUserStat
{
font-size: 10px;
color: #2F5376;
font-weight: bold;
border: 1px solid silver;
background-color: #ffffff;
margin: 2px;
padding: 2px;
}
.comUserStatCaption
{
font-weight: normal;
}
.comUserStatus
{
margin-left: 2px;
margin-top: 10px;
color: #2F5376;
font-weight: bold;
font-size: 10px;
}
.comUserRank
{
margin: 2px;
}
.comUserRankText
{
font-size: 10px;
font-weight: bold;
}
.comUserRankImg
{
border: 0;
}
.comUserImg
{
margin: 2px;
}
.comDate
{
font-weight: normal;
font-style: italic;
font-size: smaller;
}
.comDateCaption
{
font-weight: bold;
font-style: normal;
}
.zaja
{
width: 750px;
background-color: #EFF8F8;
border-left-width: 1px;
border-top-width: 0px;
border-bottom-width: 0px;
border-right-width: 1px;
border-color: #285151;
border-style: solid;
}
form
{
display: inline;
font-family: Verdana;
font-size: 11px;
}
.button
{
font-family: Verdana;
color: #275050;
font-size: 10px;
margin-top: 2px;
margin-right: 4px;
}
.input
{
font-family: Verdana;
background-color: #E9F3F3;
color: #2C5656;
font-size: 10px;
border-width: 1px;
border-color: #FCFEFE;
margin-top: 1px;
border-bottom: 1px solid #999999;
}
input
{
font-size: 10px;
}
.sadrzaj
{
margin-bottom: 20px;
}
.blok
{
margin-bottom: 6px;
}
.forum
{
background-color: #E2E2E2;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
padding: 6px;
background-image: url('menu4_bar.gif');
}
.forumprvi
{
background-color: #F7F9FB;
padding: 3px;
color: #004080;
}
.forumdrugi
{
background-color: #EFF3F8;
padding: 3px;
color: #004080;
}
.navigacijaforum
{
background-color: #E3ECF2;
padding: 5px;
color: #004080;
border-top: 1px dashed #333333;
border-bottom: 1px dashed #333333;
font-size: 12px;
text-align: center;
font-weight: bold;
}
.gumb
{
border: 1px outset #ffffff;
color: #2E2E2E;
background-color: #E8E8E8;
border-top: 1px solid #FFFFFF;
}
.border
{
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding: 3px;
}
.borderdesno
{
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 3px;
}
.forum a
{
color: #FFFFFF;
}
.download
{
padding: 2px;
}
.downhead
{
color: #FFFFFF;
padding: 2px;
background-color: #84A5A8;
}
.downloadsvaki
{
width: 100%;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
padding: 2px;
}
------------------------------------------------
Thanks,
Jaume S.
[edited by: tedster at 5:18 pm (utc) on Feb. 12, 2004]
You know what? (and please read the whole thing I have to say ;)) I have no clue how to help you. This is not because I don't know CSS, or because I can't figure out how to fix it in IE5.x... It's just that looking at that large amount of style rules (most of which are irrelevant) gives me no clue where to start looking for a problem. Also, it would be much more helpful if you could explain what exactly is not shown correctly :) Then post the most relevant CSS rule (and only that one to start with).
I hope my bluntness don't turn you off from posting. We're all about helping everyone... But posting a question the right way is going to make all the difference :)
Again, Welcome!
It's hard to know where to start. I would redo this page completely. It's far too complex for the effect you are trying to achieve, it's declared as xhtml but it isn't even close to xhtml, that won't have much affect on most browsers, and doesn't as far as I can see, but it's still not a good idea to use these doctype declarations if you don't know what they actually do or are for.
Why on earth are you using javascript to create CSS? That's one of the weirdest things I've ever seen, makes no sense at all, why not just make the classes have CSS in the first place, are you using some kind of weird page generating thing? XOOPS? That's a very bad idea, I'd get rid of all that as soon as possible.
There's a few main problem areas I see, first is a margin /padding thing. I would go back in, zero out all the td and div margins at the beginning of the css, then start adding it more consistently, decide if you want padding in your table cells created by padding in the cell or margins in their div containers, don't mix the two because results will be unreliable, as you are seeing. Don't use divs to fake what should be <h2, h3 etc> [ like <div class="blockTitle">Temes</div>, use <h3, h2, h1... whatever.
Whatever you do, dont' mix things like cellpadding="2"
and CSS equivalents, the results will be very unstable, since some browsers will force an override of the CSS by the cellpadding, some won't.
Eliminate all cellpadding=x, border=x, cellspacing=x and use only CSS for this [to achieve the css equivalent of cellspacing=0 use border-collapse:collapse; on the table class or id, or better yet, just set the first style rule as table {border-collapse:collapse;border:0;padding:0;} ] then explicitly go on declaring padding and borders from there. Once you actually are sure what is creating the padding and margins since there are no longer any overrides like that happening, I think you'll see a lot of the display issues getting solved.
