spaces in alt threadbit border

[satlazone]

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]

Maybe try setting margin-top and margin-bottom to 0px?

[satlazone]

not working

[kh99]

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]

I am using google chrome.

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

Are you seeing the reason for these spaces?

[kh99]

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]

I did change it to 0px in all places, unfortunately it didn't help too.

[kh99]

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]

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]

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.