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

webkit appearance - textarea background: none

I have a webkit appearance issue. What I am trying to accomplish is to use a division as a contenteditable division with the webkit appearance of a textarea. This works wonderfully until I attempt to remove the background. I can change colors without issue but removing it is proving futile. I have tried using a transparent image for the background but the appearance of the text area seems to overwrite it to a specific color.
The question is, is it possible to set the css to background: none; when using appearance.
I put together a jsfiddle as a bit of further explanation.
.div1 {width: 350px;
height: 100px;
-webkit-appearance: textarea;
resize: both;
overflow: auto;}
jsfiddle
PS. I hope I did this right : )

Don't use -webkit-appearance.
WebKit is applying the default styling for a textarea to your div.
CSS
.div1 {
width: 350px;
height: 100px;
background: none;
resize: both;
overflow: auto;
font-family: monospace;
border: 1px solid #000;
}
textarea {
background: none;
width: 350px;
height: 100px;
}
JSFiddle: http://jsfiddle.net/howderek/eMkv3/5/

Just change the color of your background to
background-color: rgba(255, 255, 255, 0);
This will make the background transparent. If it's going to be zero alpha (opacity) you can make the RGB whatever color you want.
http://jsfiddle.net/eMkv3/7/
Here's a screenshot of what it looks like on my browser:

Google Chrome breaks HTML layout when hiding elements

I have created a HTML layout for footer-docked sticking-out windows:
<style>
#footer-dock {
position: fixed;
bottom: 0px;
right: 0px;
height: 1x;
}
#wnd-cont {
float:right;
/* width is controlled from JS */
height: 1px;
}
#wnds-area {
float:right;
height: 1px;
}
.wnd-placer {
width: 270px;
height: 1px;
margin: 0 5px;
float: right;
}
/* floats out of placer */
.wnd {
overflow: hidden;
width: 270px;
position: absolute;
bottom: 0px;
}
.hdr {
border:1px solid green;
height: 32px;
background-color: green;
position: relative;
}
.title {
color: gray;
}
.bdy {
background: white;
border: 1px solid green;
height: 400px;
}
</style>
<div id="footer-dock">
<div id="wnd-cont">
<div id="wnds-area">
<div class="wnd-placer">
<div class="wnd">
<div class="hdr">
</div>
<div class="bdy">
Something else here Something else here Something else here Something here Something else here
</div>
</div>
</div>
<!-- other dynamically added windows go here -->
</div>
</div>
</div>
I need those placeholders and footer dock to be no more than 1px high, so I can click through the footer when there are no windows. The windows ( with all ofits contents) are added and removed dynamically using Javascript.
Everything works fine in Firefox and even in IE7, but Chrome has some weird problems.
At first, there were problems because I did not put 1px height to the footer and window placers - Chrome stacked windows onto each other. After putting 1px height, it started behave normally when adding windows, but when I remove any window using Javascript, the other windows do not reflow (they have .wnd-placer class with float: right) until I do one of the following:
zoom-in the page and then zoom back to 100% - suddenly everything jumps where it should be;
open developer panel and tweak some CSS of the .wnd-placer - just enable/disable of any property is enough, and again all my windows jump where they should be.
This is just Chrome specific, it seems, Chrome has some problems recalculating the layout of those .wnd-placer DIVs after I remove some of them.
Is there any way to force Chrome to redraw my windows (just like it does when I zoom-in/zoom-out or enable/disable any CSS property) so they reflow to the right, as they do in other browsers?

While there was no better answer, I did a following quick&dirty workaround for Chrome:
// force redraw for Chrome
$('#footer-dock').hide();
setTimeout(function(){
$('#footer-dock').show();
}, 10);
It works. Of course I would like to get rid of it, but I cannot find the "magical CSS" which would solve this issue.