WordPress.org

1. kaiserthegreat
   Member
   Posted 9 months ago #

   I created a custom page for my site uses three style variables.

   .tbl-border {
           margin-left: auto;
           margin-right: auto;
           background-color:#333333;
   	border: 1px solid #000;
   }
   .tbl1 {
   	font-size: 11px;
           background-color:#f1f1f1;
           padding:4px;
   	border: 1px solid #000;
   }
   .tbl2 {
   	font-size: 11px;
           background-color:#dddddd;
           padding:4px;
   	border: 1px solid #000;
   }

   I originally used the Twenty Ten theme and didn't look exactly how I wanted. There was a lot of extra padding that I couldn't figure out how to get rid of.

   Recently I've been playing with Twenty Eleven, and I tried the custom page there, and it looks exactly how I want it. So something about Twenty Ten is inherently padding tables? That's all I can think of.

   http://batmanlegends.com/bat-appearances/
   vs
   http://batcave.batmanlegends.com/bat-appearances/

2. esmi
   Theme Diva & Forum Moderator
   Posted 9 months ago #

   Do not edit the Twenty Eleven or Twenty Ten themes. Twenty Eleven is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

   Create a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

3. peredur
   Member
   Posted 9 months ago #

   For when you have your child theme...

   Yes, there's some padding around each td element. Most important is the 24px to left and right. If you reduce this you will get most of your rows back to a single line. Depending on the values you choose (because you'll want a bit of separation), this may not work for every line in every browser in every operating system. Remember that fonts are rendered slightly differently between browsers/browser versions/operating systems etc.

   So, to recap, just reduce the left and right padding as much as you can, maybe change your font to a sans-serif type that is common to as many browsers/operating system combinations as possible and perhaps reduce the font size if you want to provide a margin of error to ensure the data renders on a single line.

   Sans-serif fonts are clearer on monitor screens than serif fonts, especially when the font size is small.

   HTH

   PAE

4. kaiserthegreat
   Member
   Posted 9 months ago #

   I am already using a child theme, thank you esmi.

   peredur, thanks for the tip. It was the fact that I put my custom code within #container, trying to match it to the rest of the site look. I killed #container after the text instead of after my table, and now it works grand. Thanks again!

Reply

You must log in to post.