8749236 8749236 - 3 months ago 13
CSS Question

CSS Padding param is not loading

enter image description here

This is a table (tag)
Where first column holds username
second column holds content for this particular topic

I've made a css for the table and definition within should set the padding to 0.
However, I noticed 'padding: 0px 0px;' has no effect

Browser: Chorme

CSS for the topic

.TOPIC_STYLE {
border-collapse: collapse;
border:0px solid black;
padding:0px 0px;

font-family: '华康少女文字 - Kelvin';
font-size: 18px;
color: #819FF7;
}


Here is the code for table:
<table class=TOPIC_STYLE align=left>


2016-08-13 - Complete set of code is lost along with my old laptop.

Goal: Eliminate the white space in the red circle.

Other CSS i have for table:

.TOP_LEFT {
background-image: url(top_Left.png);
background-repeat: no-repeat;
}
.TOP_RIGHT {
background-image: url(top_Right.png);
background-repeat: no-repeat;
}
.VERTICAL_LEFT {
width: 150px;
height: 30px;

text-align: center;

background-image: url(vertical_Left.png);
background-repeat: repeat-y;
}
.VERTICAL_RIGHT {
width: 700px;
height: 30px;

background-image: url(vertical_Right.png);
background-repeat: repeat-y;
}
.BOTTOM_LEFT {
width: 150px;
height: 40px;

background-image: url(bottom_Left.png);
background-repeat: no-repeat;
}
.BOTTOM_RIGHT {
width: 700px;
height: 40px;

text-align: center;

background-image: url(bottom_Right.png);
background-repeat: no-repeat;
}


Solution:

Pictures was indeed used to create the border, which was unnecessary since CSS already provided border property for that purpose.
Therefore all related pictures can be shelved and use border property instead.
Similarly, border-left, right, top, bottom can also be used.

table {
border: 2px solid red;
}

Answer

Your background image isn't wide enough to cover all the space without repeating. For .TOP_LEFT, change background-repeat: to repeat-x; and edit a new image to be much taller and wider.

But if I were in your shoes, I'd just handle that effect as a border. Take off all of the background images and add these rules:

table { border: 2px solid blue; border-collapse: collapse; }
tr { border: 2px solid blue; }
Comments