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.

CSS clashing

Postby Kesstryl » Mon Oct 30, 2017 3:56 pm

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>
Looking for Alpha Testers for my text based RPG Dragon Lord at http://rpg.sonyaireland.com

Image
User avatar
Kesstryl
 
Posts: 195
Joined: Sat Sep 22, 2012 12:27 am
Location: Gallifrey
Has thanked: 36 times
Been thanked: 3 times

Re: CSS clashing

Postby Kesstryl » Mon Oct 30, 2017 5:16 pm

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.
Looking for Alpha Testers for my text based RPG Dragon Lord at http://rpg.sonyaireland.com

Image
User avatar
Kesstryl
 
Posts: 195
Joined: Sat Sep 22, 2012 12:27 am
Location: Gallifrey
Has thanked: 36 times
Been thanked: 3 times

Re: CSS clashing

Postby hallsofvallhalla » Tue Oct 31, 2017 10:21 am

Whats the fix? That might lead to the answer
User avatar
hallsofvallhalla
Site Admin
 
Posts: 11749
Images: 13
Joined: Wed Apr 22, 2009 6:29 pm
Location: mobile, al
Has thanked: 11 times
Been thanked: 141 times
Blog: View Blog (3)


Return to Beginner Help and Support

Who is online

Users browsing this forum: No registered users and 1 guest

x