What theme are you using? Where did you download it from?
Sorry, should have said. I’m using TwentyTwelve as my theme. I’m not using a child theme because I’m developing pages for someone else’s site, and want to keep things as self contained as possile.
I’m using CSS Plugin with the following code to pull in a small CSS file to control the layout of the DIV’s and tables.
@import url(‘/loco_diary/timetable.css’);
I have as far as I can tell defined the border properties as far as I can tell, but my page just seems to have a single border on the bottom of the table. The bottom of the table is higher than the bottom of it’s containing DIV #ttNotes, and the line is exactly the same width as the table so I do not believe it to belong to another entity.
Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.
Hi Esmi,
I have already tried that but I cannot see where the property is being set. I’m guessing that it’s either the border-bottom of the table, or the border-bottom of the last TR but I cannot find it anywhere.
As I’m new to using anything more than the most simple CSS (I’m better at the back end than the UI) I was hoping someone with a better idea would know where I need to look.
I’m sorry but it is really beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as http://www.css-discuss.org/ instead.
Thanks for that Esmi, I will try that.
The reason I posted it here was because the problem only arises when my code is within a WP site. I therefore assumed the issue was being caused by WP or more likely the theme.
As I’m not used to WP I’m only finding my way round the structure slowly.
Having another go at Firebug I’ve found the code that’s causing the issue. This is now a straight-forward CSS question, but I’m hoping a simple one with a quick answer.
.entry-content table, .comment-content table {
border-bottom: 1px solid #EDEDED;
color: #757575;
font-size: 0.857143rem;
line-height: 2;
margin: 0 0 1.71429rem;
width: 100%;
}
This is in http://nymr-net.stainburn.com/wp-content/themes/twentytwelve/style.css?ver=3.8.1 line 933.
However, I’ve then got my CSS file which has the following:
table .notesTable, .notesTable td, .notesTable th {
margin: 0;
border: 0px solid red;
border-top: 0px solid black;
border-bottom: 1px solid black; <!-- set to test -->
padding: 0;
text-align: left;
color: #000;
line-height: 140%;
border-collapse: seperate;
}
.notesTable td, .notesTable th {
padding: 0 5px 0 5px;
border-top: 0;
border-bottom: 0;
line-height: 110%;
}
The rest of the style applies to the table but the border-bottom still inherits from .entry-content. Anyone got a clue why?
