CSS clashing
Posted: Mon Oct 30, 2017 8: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.
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>