vb.org Archive - spaces in alt threadbit border

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=252)

- - spaces in alt threadbit border (https://vborg.vbsupport.ru/showthread.php?t=280675)

satlazone

03-26-2012 01:00 PM

spaces in alt threadbit border

1 Attachment(s)

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:

Code:

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):

Code:

.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.

Code:

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:

Code:

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

to border-top: 0px;

Thank you!

All times are GMT. The time now is 05:49 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01134 seconds Memory Usage 1,733KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (4)bbcode_code_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (11)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: