PDA

View Full Version : spaces in alt threadbit border


satlazone
03-26-2012, 01:00 PM
Hi,

I have added this css code to additional.css

.threadbit .alt {
border-left: 1px solid #92BAA7 !important;
border-right: 1px solid #92BAA7 !important;
}

I don't understand from where these spaces are coming from.
I did tried a lot of things to solve it but unfortunately I couldn't find a way to remove these spaces.

Do you have any ideas?

kh99
03-26-2012, 01:08 PM
Maybe try setting margin-top and margin-bottom to 0px?

satlazone
03-26-2012, 01:28 PM
not working

kh99
03-26-2012, 01:37 PM
OK, well, here's a page with a diagram of the different spaces: http://www.w3schools.com/css/css_boxmodel.asp . That site's good in general for simple html/CSS/JS stuff. Also, if you use the FireFox browser and an add-on like DOM Inspector or Firebug you can right-click on something on your page and see the html for it, along with the CSS that was used in formatting it (That's probably the answer to your question in the other thread, about how LifesGreatestGift knew about the fb_edge_widget_with_comment class).

If you post a link to your site we might be able to help you more.

satlazone
03-26-2012, 02:42 PM
I am using google chrome.

Link: http://www.satla-zone.co.il/forums/f108/

Are you seeing the reason for these spaces?

kh99
03-26-2012, 03:10 PM
It looks like the div that encloses it (class="rating5 sticky" ETA: for instance) has a top border with color #FFFFFF (the left, right, and bottom borders are #92BAA7). But to be honest I can't figure out where the CSS is for it. Maybe you can search your css templates or style variables to see if you can find it.


Edit: looks like maybe it's in threadlist.css, in a number of places there's something like this:

border-top: 1px solid {vb:stylevar body_background.backgroundColor};

satlazone
03-26-2012, 05:25 PM
I did change it to 0px in all places, unfortunately it didn't help too.

kh99
03-26-2012, 06:35 PM
OK, I think I was looking at a different gap - the one-pixel gap that's at the top, because in FireFox the gaps at the bottom aren't there. But I looked at it in Chrome and I see gaps at the bottom. It seems to be caused by this (also in the threadlist.css template):

.threadbit .threadstats {
font-size: {vb:stylevar mid_fontSize};
text-align: {vb:stylevar right};
padding: {vb:math {vb:math {vb:stylevar threadbit_iconsize.height}{vb:stylevar threadbit_iconsize.units} - {vb:math {vb:stylevar mid_fontSize}*{vb:stylevar line_height}*2} + {vb:stylevar padding}}/2} 0;
}


Apparently an attempt to calculate the correct padding to make everything look right. On your site it's coming up with 8.77...something or other pixels, and I found that if I manually changed it to 9px it looks better. Unfortunately, I don't really know why it's a problem only on Chrome or how to tell you to fix it.

satlazone
03-26-2012, 08:17 PM
Yeah I was looking at this too.
The reason I tried this is because of digitalpoint
If you will look at their forumdisplay page here: http://forums.digitalpoint.com/forumdisplay.php?f=21

You will see they have solved this issue.
I really can't understand how they did it.
I did check a lot of things but unfortunately I was not able to implement it on my website.

kh99
03-26-2012, 08:24 PM
Looking at that site I notice they have a min-height:39px just under the padding calculation we were looking at, and it looks like adding that to your site works to solve the issue.

satlazone
03-27-2012, 12:26 AM
Yes!
You were right.
I just had to change some more things to get it work exactly as digitalpoint.

padding: {vb:math {vb:math {vb:stylevar threadbit_iconsize.height}{vb:stylevar threadbit_iconsize.units} - {vb:math {vb:stylevar mid_fontSize}*{vb:stylevar line_height}*2} + {vb:stylevar padding}}/2} 0 0 0 !important;
and min-height:39px;

And change these:
border-top: 1px solid {vb:stylevar body_background.backgroundColor};
to border-top: 0px;

Thank you!