CSS clashing

Place for questions and answers for all newcomers and new coders. This is a free for all forum, no question is too stupid and to noob.
Post Reply
User avatar
Kesstryl
Posts: 202
Joined: Sat Sep 22, 2012 5:27 am

CSS clashing

Post by Kesstryl »

I created some hover tooltips for the main page of my game to give a little extra direction and help for new players, and it works great. However, after inserting the tooltip CSS, I lost the padding on all my tables. I also have a border on my forum tables suddenly blown up to being 5 px wide even though they are 1 px. I just can't figure out what changed or got broken, or if the tooltip CSS is overriding the table CSS. I'm posting my CSS stylesheet to see if any CSS gurus can see something I'm not seeing.

Tables are supposed to have a padding of 5px, but now they have none. Some inline border styles on tables are supposed to have a 1 px border, they now have 5 px borders. This is on both my wamp server and the online game.

Code: Select all

<style type="text/css">
body {
    background: #e4e4b4 url(images/paper-background3.jpg);
    background-repeat: repeat;
    width: 100%;
    color: black;
    font: 12px verdana
}

div.wrapper {
    width: 100%;
    height: 100% border-style: none;
    padding: 0px
}

pre {
 white-space: pre-line;
 word-break: keep-all;
}

table {
    border-style: none;
    padding: 5px;
    font: 12px verdana
}

td {
    border-style: none;
    padding: 0px;
    vertical-align: top
}

td.top {
    border-bottom: solid 2px black
}

td.left {
    float: left;
    width: 20%;
    padding: 3px
}

td.middle {
    float: left;
    width: 56%;
    padding: 3px;
    border-left: solid 2px black;
    border-right: solid 2px black
}

td.right {
    float: left;
    width: 20%;
    padding: 3px
}

img {
    max-width: 500px;
    height: auto
}

.fixed {
    max-width: 100px;
    height: auto
}

.fixed2 {
    max-width: 220px;
    height: auto
}

.logo {
    max-width: 530px;
    height: auto
}

.icon {
    width: 15px;
    height: 15px
}

.smile {
    max-width: 13px;
    height: auto
}

.char {
    max-width: 175px;
    height: auto
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #e4e4a4;
    color: black;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.verify {
    max-width: 60px;
    height: auto
}

.scroll {
    overflow-y: auto;
    max-height: 100vh
}

.ads {
    background: #e4e4b4;
    width: 200px;
    height: 200px;
    border: solid 1px black;
    text-align: center
}

a.red {
    color: red;
    font-weight: normal;
    text-decoration: blink
}

a {
    color: #663300;
    text-decoration: none;
    font-weight: bold
}

a:hover {
    color: #330000
}

.small {
    font: 10px verdana
}

.highlight {
    color: red
}

.light {
    color: #663300
}

.title {
    border: solid 1px black;
    background-color: #e4e4b4;
    font: 12px Metamorphous;
    font-weight: bold;
    padding: 5px;
    margin: 3px
}

.copyright {
    border: solid 1px black;
    background-color: #eeeeee;
    font: 10px verdana
}

.clan {
    border: solid 1px black;
    background-color: #BABAA9;
    padding: 5px;
    margin: 3px
}

.clanmenu {
    border: solid 1px black;
    background-color: #bbbb99
}

.nimekiri {
    border: solid 1px black;
    background-color: #e4e4b4
}

@media screen and (max-width: 768px) {
    td {
        padding: 2px
    }
    td.left {
        width: 24%;
        float: left;
        padding: 1px
    }
    td.middle {
        width: 72%;
        border-right: none;
        float: right;
        overflow-y: auto;
        max-height: 100vh;
        padding: px
    }
    td.right {
        border-top: solid 2px black;
        width: 100%;
        clear: both;
        overflow-y: auto;
        max-height: 100vh;
        padding: 2px
    }
}

@media screen and (max-width: 310px) {
    td {
        padding: 2px
    }
    td.left {
        width: auto;
        float: left;
        overflow-y: auto;
        max-height: 100vh
    }
    td.middle {
        width: auto;
        border: none;
        float: left;
        overflow-y: auto;
        max-height: 100vh
    }
    td.right {
        width: auto;
        float: left;
        overflow-y: auto;
        max-height: 100vh
    }
}
</style>
User avatar
Kesstryl
Posts: 202
Joined: Sat Sep 22, 2012 5:27 am

Re: CSS clashing

Post by Kesstryl »

I figured out a fix for it and changed some of the inline styles on pages. I'm considering this fixed even though I still have no clue how I broke it in the first place. Sorry to waste forum space.
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: CSS clashing

Post by hallsofvallhalla »

Whats the fix? That might lead to the answer
Post Reply

Return to “Beginner Help and Support”