DIV, SPAN elements half visible

position: fixed relative to parent div
bootstrap
css position: fixed inside scrollable div
position: absolute outside of parent
position div below another div with position: absolute
multiple divs with fixed position and scrolling
make absolute positioned div expand parent div height
relative parent absolute child height

I'm using a wordpress theme which is all good but when I add sharethis buttons, they are half visible. I've tried everything but couldn't locate the exact issue.

Look at top of the page.

site URL: http://ccl5.com

.stButton .stButton_gradient {height: 16px}

This css cause the elements to take only half of its height. That css is generated by sharethis itself.

You can add this css to override.

.stButton .stButton_gradient, .stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {height: 22px !important}

Thanks

Flexible DIV to cover the rest of the page and divide the height in , Flexible DIV to cover the rest of the page and divide the height in half for children id="slider"><span>Some text</span> <button type="button">Bar</button> < button the height of the viewport or will the content be entirely visible in the window? Question on flexbox: if using flexbox and browsers don't know elements like� or style.visibility will actually make the div still be there, but be "all empty" or "all white" elem.style.visibility = 'hidden'; // hide, but lets the element keep its size elem.style.visibility = 'visible';

Here is the fix update heights for the containers as follows:


    .stButton .stButton_gradient
    {
        height:26px;
    }

    .stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices
    {

        height:26px;
    }

this fix will solve the problem

Display property � Bootstrap, <div class="d-inline p-2 bg-primary text-white">d-inline</div> <div <span class ="d-block p-2 bg-primary text-white">d-block</span> <span class="d-block p-2 bg-dark text-white">d-block</span> To hide elements simply use the .d-none class or one of the .d-{sm,md,lg Visible only on lg .d-none .d-lg-block .d-xl-none . Basically, visibility: hidden makes the element invisible to the browser, but it still remains in place and takes up the same space had you not hidden it. For example, if you place a DIV on your page and use CSS to give it the dimensions of 100 by 100 pixels, the visibility: hidden property will hide the DIV , but the text following it will act

Firstly please specify a ShareThis Publisher Key (For help, contact support@sharethis.com) on your site.

Secondly, to answer your question, the file buttons.css contains the following code (at line 139):

.stButton .stButton_gradient {
    background-repeat: repeat-x;
    border: 1px solid #bfbfbf;
    padding: 2px;
    font-family: serif;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
    height:  21px;
    background: #d5d5d5;
    background: -moz-linear-gradient(top, #d5d5d5 0, #efefef 48%, #fff 94%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d5d5d5), color-stop(48%, #efefef), color-stop(94%, #fff));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d5d5', endColorstr='#ffffff', GradientType=0);
}

Firstly remove the line:

height:  21px;

as it is causing you problems.

Thirdly please remove the line:

height: 16px;

from this passage (line 737):

.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {
    background-image: url(/images/facebook_counter.png);
    background-repeat: no-repeat;
    display: inline-block;
    white-space: nowrap;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 11px;
    height: 16px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 16px;
    width: auto;
    position: relative;
}

as this is also causing problems.

Hopefully this will solve your problem.

Advanced layouts with absolute and fixed positioning � WebPlatform , Elements with fixed positioning differ from this slightly—they always have the initial The #inner element's width is now half that of #outer , and its height is half the Since both span elements have an absolutely positioned div as a parent,� Center Text Element in div or span Inline HTML code. You can use the style attribute of the div or span tag, where ever you are defining the tag in the HTML. So, if you have a div element with text inside such as the example below then you can specify the text-align property as in the example below.

How To Make a DIV Full Height of the Browser Window, Learn how to stretch elements to fit the whole height of the browser window with CSS. Full Height Div. Example. html, body { height: 100%; } .full-height { height:� overflow-x and overflow-y. It’s also possible to manipulate the overflow of content horizontally or vertically with the overflow-x and overflow-y properties. For example in the demo below the horizontal overflow can be scrolled through whilst the text that extends beyond the height of the box is hidden:

.slice(), Given a jQuery object that represents a set of DOM elements, the .slice() method Turns divs yellow based on a random slice. <span>Click the button! In the CSS we will add two classes. One class, named .hidden, will hide the element and the other named .visible will display the element. Since we want to affect the div inside, we will be adding >div to the class. You can change it to whatever you want, for example >span. This will affect the span element inside the outer div.

Width, Add one of the .uk-width-* classes to an element to determine its size. Typically, you <div uk-grid> <div class="uk-width-1-2"></div> <div class="uk-width-1-2">< /div> </div>. Preview .uk-child-width-1-2, All elements take up half of their parent container. These classes can be combined with the Visibility component . In this case we identify the DIV element by its ID 'PopUp' and change its style display property to 'none' so that it becomes invisible. onmouseover="document.getElementById('PopUp').style.display = 'none' " Using JavaScript to control the DIV popup. As we saw above, we can use JavaScript to change the properties of a DIV or SPAN element.

Comments
  • I've added ur code to my css file. Now only G+ button is full visible, not all buttons. And I tried other DIVs in my posts and surprisingly they were half visible too. So I need something global declaration in my css but unable to locate exact class causing issue
  • i have edited the css, hope you took the full line, right ? initially i just added code for google plus only. Now its for all the elements..
  • yeah initially i just forgot to include full line :) now you got the full css right ?
  • I think I do not have access to buttons.css