Develop Reference

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

Problems with position:fixed and responsive / adaptive Layout

First look at this website: http://irismediainfo2.lili.de/spip.php?article4924
On my screen it looks like on this screenshot: chrome - full window - desktop resolution: 1440x900
I think for most of you it will look diferent but thats part of the problem...
The main div with the gray border is inside an other div with id="page".
#page {
width: 560px;
margin: 50px auto 0px auto;
position:relative;
}
I created a new div with id="toolbar", that looks like it sticks to this #page-div, but it does not scroll with the page. On the website I linked above u can see the #toolbar as a dummy-box (grey with some Text).
At the moment the I use position:fixed in #toolbar.
When I position it at the side of #page so that it LOOKS like it is attached to it, and I resize the browser window... the two divs dont move the same way because the position of #page is calculated from the middle (by margin:auto) and the position of #toolbar is calculated from the side of the browser window (by position:fixed). So it is not attatched anymore in any other windowsizes.
I tried to make the #page float, to make the #toolbar appear at the side but that destroys the "margin:auto" of the #page so it is not centered anymore.
I also tried
#toolbar {
position: fixed;
center: 0px; }
Because I hoped there could be a way to calculate the position for position:fixed from the center.
Nothing worked, I hope you know a solution.
Actually everything I want is something like:
#page {
width: 560px;
margin: 50px auto 0px auto;
position:relative; }
#toolbar {
position: fixed;
center: 0px 280px 0px 0px; }
I would like to do this with minimal code and resources because I don't want to make the loading speed worse because of a little toolbar.
If you need more specific code from my css or html please tell me.
I hope the target and the problem is clear.

All you need is a wrapper-div that centers the whole block and algin the toolbar after that, since your #page has a fixed width in every viewport.
HTML:
<div class="wrapper">
<div id="toolbar">
content
</div>
</div>
CSS:
#toolbar {
height: auto;
padding: 10px 20px 10px 15px;
background-color: rgba(170, 170, 170, 0.5);
border: 1px solid #AAA;
border-radius: 0px 5px 5px 0px;
text-align: center;
margin: 0px auto 0px 279px;
}
.wrapper {
position: fixed;
top: 30%;
left: 50%;
}

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:

Having issue with css hover effect

Please take a look at this link. Hover cursor on any movie thumbnail. Have you noticed that, all li elements moving down? How can I fix that problem?
Also, click on any thumbnail, player div will slide down. there is no box shadow under #player_container even if I set it in css files
#player_container{
display:none;
height:510px;
width: 100%;
background-image: url(images/bg/bg_tile.jpg);
margin-top: -510px;
padding-top: 20px;
-moz-box-shadow: 0px 10px 5px #888;
-webkit-box-shadow: 0px 10px 5px #888;
box-shadow: 0px 10px 5px #888;
}

On video add a transparent border seems to fix it
.video {
border: 1px solid transparent;
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
There is a couple off different way to fix the next part off your question. One quick way is too add another container like
<div style="display: block;" class="gradient sh" id="player_container">
<div class="jquery-youtube-tubeplayer" id="player">
<div id="tubeplayer-player-container1324082555277"><iframe width="853" height="480" frameborder="0" src="http://www.youtube.com/embed/LxBGDijiii0?autoplay=1&autohide=1&controls=1&rel=0&fs=1&wmode=transparent&showinfo=0&modestbranding=0&start=0&theme=dark&color=red&enablejsapi=1&origin=http://tural.us" title="YouTube video player" allowfullscreen=""></iframe></div></div>.
<div class="bottomSpan"></div>
</div>
and put your box shadow on this
.bottomSpan {
box-shadow: 0 10px 5px #888888;
display: block;
height: 17px;
position: absolute;
width: 100%;
}

For me changing the margin on the corresponding < li > would make more sense.

That is because on hover you are adding a border which makes the container 2px bigger
the solution to give the initial class a border
.video {
border: 1px solid #fff
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
Second Problem:
To make z-index work you need to give it a position:relative property
#player_container {
display: none;
height: 510px;
width: 100%;
background-image: url(images/bg/bg_tile.jpg);
padding-top: 20px;
-moz-box-shadow: 0px 10px 5px #888;
-webkit-box-shadow: 0px 10px 5px #888;
box-shadow: 0px 10px 5px #888;
z-index: 2;
position: relative;
}

You're adding a border when the mouse hovers but not reducing the size of the element. The "height" and "width" of an element, in the W3C box model, describe the size of the contents of a block element. The padding and the border are added to that.
Some browsers allow you to switch back to the "border-box" box sizing model:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
However Internet Explorer wont, I don't think, understand that. Maybe IE9 or 10 would understand:
-ms-box-sizing: border-box;
(You'd put that on the ".video" style.)
edit — as to the problem with the shadow on the player: there's no shadow because there's no room for a shadow. If you make the player box "position: absolute", and correspondingly adjust the content somehow (maybe give the "wrapper" div a big top padding the same as the player size) then you'll see a shadow.
You really should be using something like Firebug to play with the CSS interactively.

I'm afraid your mixing things up a bit:
Your background-image is set on #player-container - if you want #player-container to have a shadow, you'll need an extra containing div for this background. Right now #player-containerdoes have shadow, but since it's 100% wide, and fills the vertical space, the shadow doesn't show.
Your player is exactly 853px x 480px, so you'll have to set #player-container to exactly these dimensions (no padding, no margin, they will be added to the width/height)
Add padding to the extra containing div, which also holds the background.
also (but not so important): #player-container has width:100% - that makes no sense - default is width:auto, so #player-container will automatically take 100% width

2 Minute question - HTML / CSS If div within div expands expand parent div

I have a setup lets say like follows:
<div id="nav">
<div id="innernav">
//With dynamic content here.
</div>
</div>
I am running a script that sizes #nav to the size of the browser window in height. But sometimes my dynamic content is now getting bigger than the height of the window.. Is there a way I can enforce that when #innernav exceeds #nav that #nav will increase in size?
Seen as someone asked for the script:
function resizeWindow(){var a=getWindowHeight();document.getElementById("content").style.height=(a-0)+"px";document.getElementById("nav").style.height=(a-0)+"px";document.getElementById("contentPanel").style.height=(a-10)+"px"}function getWindowHeight(){var a=0;if(typeof(window.innerHeight)=="number"){a=window.innerHeight}else{if(document.documentElement&&document.documentElement.clientHeight){a=document.documentElement.clientHeight}else{if(document.body&&document.body.clientHeight){a=document.body.clientHeight}}}return a};
Changed the script to refer to min-height works perfectly in FireFox. But not IE or Chrome.
CSS:
body {
margin: 0px;
text-align: left;
font-family: Verdana;
font-size: 11px;
background-color: #FFFFFF;
min-width: 980px;
min-height: 10px;
background-image: url('../Images/watermark.png');
background-position: 100% 100%;
background-repeat: no-repeat;
}
.nav {
width: 19%;
margin: 0px 0px 0px 0px;
background-color: #E0EFFF;
float: left;
vertical-align: bottom;
position: relative;
}
some minor changes to my script / using min height seems to work. And after running a CCLEAN IE sort of does what I wanted.

Instead of setting the "height", set the "min-height".

short solution is give height auto to both divs