Develop Reference

Why does my HTML table become half it's size when I add 'display: block;' to it's CSS?

CSS:
.TFtable{
width:100%;
border-collapse:collapse;
overflow-y: scroll;
height: 500px;
display: block;
}
.TFtable td{
padding:7px;
}
/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr{
background: #242526;
}
/* Define the background color for all the ODD background rows */
.TFtable tr:nth-child(odd){
background: #242526;
}
/* Define the background color for all the EVEN background rows */
.TFtable tr:nth-child(even){
background: #343434;
}
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
}
Please note that my table is inside a container--wrap, which is inside another container--wrap.
My table, inside the container wrap, halfs itself on a desktop screen and there is just a black space on the right of it.
What's happening?
HTML
<div class="container--wrap">
<table class="TFtable">
...
</table>
</div>
However, when I remove the display: block;, the height:500px; and overflow-y: scroll does nothing.
What's wrong here?
Also: how can I check whether the user is using a mobile screen or not, and make it so the font in the table is smaller if they are?

Try adding a 100% width property in each container:
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
width: 100%;
}
About the mobile screen, you need to use media queries. It's a long topic, so I let you a link to some documentation about it:
https://developer.mozilla.org/es/docs/CSS/Media_queries

How to implement a scroll page arrow button with variable thickness?

I was wondering how I could change the thickness of the arrow on my website which is used as a scroll button. I would like something similar to this websites arrow in terms of thickness. example of arrow
Here is my codepen
.next {
position:absolute;
bottom:0;
left:50%;
margin-left:-40px;
transform:rotate(-90deg);
cursor:pointer;
}
Kind Regards,
Liam.

In the example you linked to an arrow is implemented differently than in your pen. Here's how it's done:
#arrow {
border: 3px solid black;
height: 50px;
width: 50px;
transform: rotate(45deg) translateY(-15px) translateX(5px);
border-top: none;
border-left: none;
}
<div id="arrow"></div>
Basically, you create a square, turn it 45 degrees and add a border on right and bottom sides. Now you can just change border thickness in the border property to change the arrow width.
P.S. you can use Chrome Developer Tools to inspect elements on websites. I.e. if you like how something looks on some website, you can just see how they implemented it.

You just need to set the font-size and perhaps font-weight properties since the arrow you are showing is a character

Those next elements on your codepen are text so the property you would have to use would be font-size: 10px;
I would also recommend using the html down triangle character: ▼

Test this:
<style>
body{ background-color: #DFBF90;}
#arrow {
height: 50px;
width: 112px;
color: white;
border-top: none;
border-left: none;
margin: 100px;
font-size: 74pt;
transform: rotateX(63deg) rotate(90deg);
}
</style>
<div id="arrow">></div>

Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

JSFiddle here
I'm trying to add tooltips to an existing page. We already use bootstrap 2.3 so it seemed like the obvious choice.
My html looks like this, say:
<script>
//initialize tooltips
$(document).ready(function(){
$('.my_button').tooltip();
});
<div class="my_button_row">
buttonnnnn
</div>
and my CSS looks like:
.my_button_row{
height: 100px;
border-bottom: 1px solid #E5E5E5;
width: 500px;
display: table;
border-collapse: separate;
border-spacing: 20px 5px;
}
.my_button {
background: linear-gradient(to bottom, #3FACF5, rgba(56, 101, 131, 0.76)) repeat scroll 0% 0% #3498DB; border-radius: 34px;
box-shadow: 4px 4px 4px #666;
color: #FFF;
font-size: 26px;
padding: 10px 10px;
text-decoration: none;
display: table-cell;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
text-align: center;
vertical-align: middle;
height: 100px;
max-width: 180px;
min-width: 15%;
line-height:26px
}
.my_button_green{
background: linear-gradient(to bottom, #63F53F, rgba(79, 131, 56, 0.76)) repeat scroll 0% 0% #61DB34
}
When I mouseover the button, the tooltip displayed just as I wanted first time, but the styling on the button itself also appears to change - as you can see from the jsfiddle - how can I stop this from happening?
Edit: I really would prefer a solution that doesn't involve totally changing the way the page is laid out (i.e. 'just remove 'display:block from the container element' is a much less straightforward solution than this simplified JSfiddle would make it appear ) - a solution that doesn't modifying the HTML would be ideal.

Delete display: table; from .my_button_row{ ... or add
data-container="body" to
buttonnnnn

You just have to give width: 500px; to my_button class and remove
// max-width: 180px;
// min-width: 15%;
Check out the fiddle
EDIT:
According to your requirement from the comments:
Adjusted the padding instead of giving width statically
Updated Fiddle

Add display: block to .my_button.
You'll have to fiddle around with the margins and padding to get the text in the center of the button, but this will fix your issue. Also keep in mind that with display: block, the button will be at most 180px wide due to yourmax-width style.

Thats happening because you have used display:table-cell css property for the button while the tooltip is being appended as display:block element.
Simply use display:block for .my_button(or remove the display:table property from .my_button_row) and you are good to go
Updated fiddle

CSS - displaying a dynamic height floated DIV - missing background image

My Goal:
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
Some pertinent CSS:
.sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
.sccontainer .parent { position: absolute; width: 270px; }
.sccontainer .image { margin: 5px; float: left; }
.sccontainer .image img { width: 48px; }
.sccontainer .icon { margin: 0; }
.sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
.sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
.sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
.sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
.sccontainer a:hover { text-decoration: underline; }
.sccontainer.hover { height: 250px; }
.sccontainer.hover .content { height: auto; }
.sccontainer.hover .content p { min-height: 135px; max-height: none; }
jsFiddle:
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
http://jsfiddle.net/ztMM5/1/
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(
What I've Tried/Researched:
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.

This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->
<div class="sccontainer"><!--position relative-->
<div class="inner"><!--position absolute-->
<div class="content"><!--position relative-->
<!-- my content here -->
</div>
</div>
</div>
<!-- more containers etc-->
</div><!--END wrapper-->
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
.cf:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
* html .cf {
zoom:1
}
/* IE6 */
*:first-child+html .cf {
zoom:1
}
Then the style for the .sccontainer container :
.sccontainer {
width: 280px; /* or whatever - could be % for responsiveness */
padding-bottom:200px; /* any value to give height without using height ;) */
position: relative;
float: left;
margin: 5px 10px; /* or whatever */
overflow: hidden; /* this is important to keep all same height and big content out of sight */
z-index: 1; /* this is important too, see later */
background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
.inner {
position: absolute; /* please don't move */
width: 100%; /* to fill the whole parent container */
height: 100%; /* same */
}
And the content :
.content {
position: relative;
background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
width: 100%; /* helps to fill the gaps with small content */
height: 100%; /* same, specially if using image backgrounds */
/* other styles, etc */
}
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
Now, what happens when we hover ?
.sccontainer:hover {
overflow: visible; /* show the full content */
z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}
.sccontainer:hover .content {
height: auto; /* as it really is, including background image */
}
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like
<div class="sccontainer withhover">
and apply the hover effects only if that class exist like
.sccontainer.withhover:hover {
overflow: visible;
z-index: 999;
}
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
jQuery(document).ready(function ($) {
$(".sccontainer").hover(function () {
var $contentHeight = $(this).find(".content").height();
if ($(this).innerHeight() > $contentHeight) {
$(this).removeClass("withhover");
}
});
});
See JSFIDDLE

How to change the color of scrollbars

I want to change the color of the scrollbars on my pages in Internet Explorer and Firefox.
This code creates scrollbars:
<div style="overflow: auto; width: 750px; height: 400px">
</div>
To change their color, I tried this code:
<STYLE TYPE="text/css">
BODY
{
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-DarkShadow-Color: blue;
}
</STYLE>
The above code is in my header, but it didn't change the scrollbars' color.
Can anyone help me?

For Chrome and Safari you can change the scrollbar style using this code:
/* Chrome, Safari */
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}

Just as others said, the CSS you posted won't work on modern browsers (IE8, Safari, Firefox, etc). Since you're trying to scroll a div, you do, however, have the option of making a custom scrollbar in Javascript/DHTML. A quick Google search reveals a few have done just that like this one: http://www.hesido.com/web.php?page=customscrollbar

Just copy and paste after head for
1.rounded corners style
<style type="text/css">
::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; }
</style>
2.square corners with border style
<style type="text/css">
::-webkit-scrollbar {width: 9px; height: 3px; background: #FFFFFF;}
::-webkit-scrollbar-thumb {background-color:#ffffff ; border: 1px solid black;}
</style>
you can change the color for code click here or here

That code only works in Internet Explorer. Are you testing in Firefox or Safari by chance?

It works in IE5 to 7. It has been discontinued in IE8. Safari recently gave support for it using different css properties I believe.
There are usability concerns with changing the scrollbar colour.

Create a class for the div, code the scrollbar colors in that class, then apply it to the div. You are not changing the scrollbar colors on the browser, only the div you are creating. Your div would be <div style="overflow: auto; width: 750px; height: 400px" class="className"> </div>
In your class you would create the scrollbar colors using the applicable scrollbar part names, i.e. scrollbar-face-color and so on. To find out which code applies to which area of the scroll check http://iebar.discoveryvip.com/, or you can search on the web, there are a number of places for that.

This code was easyer just paste after
< h e a d >
<style type="text/css">
::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; }
</style>

Try this
*, html {
scrollbar-face-color: #FF0000;
scrollbar-shadow-color: #0000FF;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #FF00FF;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-track-color: #FFFF00;
scrollbar-arrow-color: #000000;}

enter code here
html,body{
scrollbar-face-color: #414340;
scrollbar-shadow-color: #cccccc;
scrollbar-highlight-color: #cccccc;
scrollbar-3dlight-color: #cccccc;
scrollbar-darkshadow-color: #cccccc;
scrollbar-track-color: #cccccc;
scrollbar-arrow-color: #000000;
}

We can change color of scrollbar using javascript also. There are various components in scroll bar like base color, face color, arrow color etc that changes color of various parts of scroll bar. The following lines might help you.
document.body.style.scrollbarBaseColor = "colorname";
document.body.style.scrollbarArrowColor = "colorname";
document.body.style.scrollbarTrackColor = "colorname";
Apart from the above styles, you will have scrollbarShadowColor, scrollbarHighlightColor, scrollbar3dlightColor,scrollbarDarkshadowColor etc. So, choose your component of scroll bar and change the color of it.