I'm trying to put a progress bar inside td of my table. Here's the code:
<td style="width: 150px;">
<div style="height: 16px; max-height: 16px; overflow: hidden; border: 1px solid #80C622;">
<div style="height: 16px; width: 10%; background-color: #bbea7d;"></div>
<div style="margin-top: -16px; text-align: center;">
1470/14166
</div>
</div>
</td>
Chrome, Firefox, Safari and (!) IE displays it correctly, whereas Opera extends the row so there is some extra space above.
Here's how it's supposed to look like: http://ipicture.ru/uploads/100616/16el6B3lB1.png
Here's how it looks in Opera: http://ipicture.ru/uploads/100616/fE4Ad63N1l.png
How do I fix this?
UPD. Oh yeah, I use Opera 10.53.
Try giving the float to divs and fix width to the outer div (this would be required once you give the float). this is just my guess.
Related
I'm finishing up work on http://www.mimicmuziek.nl. I used the bootstrap .sticky-top class on the navbar, however when I use Chrome there appears to be a tiny 1px gap above the navbar, that I can see the content through. Doesn't happen when using Safari. Any ideas on how to fix this would be appreciated!
Edit: I just tried it on my girlfriend's computer and it works fine there
UPDATE:
I found this: https://bugs.chromium.org/p/chromium/issues/detail?id=810352&q=sticky&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
Not only Bootstrap.
https://codepen.io/anon/pen/vdgzdb
.heading{
background: #ccc;
height: 50px;
line-height: 50px;
margin-top: 10px;
font-size: 30px;
padding-left: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px;
}
.content {
height: 50px;
}
<h1>Animals by Alphabet</h1>
<div class="container">
<div class="heading">A</div>
<div class="content">American Buffalo</div>
<div class="content">Aardvark</div>
<div class="content">Alligator</div>
<div class="content">Antelope</div>
<div class="heading">B</div>
<div class="content">Baboon</div>
<div class="content">Bat</div>
<div class="content">Blue Bird</div>
<div class="heading">C</div>
<div class="content">Cat</div>
<div class="content">Camel</div>
<div class="content">Chicken</div>
<div class="content">Chipmunk</div>
<div class="heading">D</div>
<div>Dog</div>
<div>Donkey</div>
<div>Dave</div>
<div>Duck</div>
</div>
It can be reproduced when the sticky-ed element is below other divs.
When I delete the h1 element, it performs well.
But you know, sometimes an element has to be there. I put a sticky-ed element below an img tag, the 1px gap appears. When I set the img a certain height, it works.
I think there is something wrong with Chrome-like browsers. Due to it performs perfectly on wkwebview on iOS and Safari on iOS/macOS. And 1px gap on Android webview which supports blink.
I noticed that it only happens when the navbar is sticky and the Bootstrap Carousel is sliding underneath the navbar. Hope this will help people debugging this issues.
I'm using ::after to create shadow to decorate a element (say A).
In order to do this, I set the overflow: hidden for A to hide undesired part of the shadow.
It looks perfect, but there is a problem after I added a input box to A. If I click in the input and drag, the A layer will scroll, and the rest part of shadow will show up.
Here is the demo and the simplified code:
<div style="width: 200px; height: 30px; overflow: hidden; border: 1px black dotted;">
<div style="height: 30px; border-bottom: red 10px solid;">
<input style="width: 200px" placeholder="click and drag me downward" />
</div>
</div>
I'm looking for a pure CSS solution to fix this problem. Thanks ahead.
This isn't an ideal solution, but I don't think a pure CSS solution exists to this problem (unfortunately), it makes me wonder whether this has been logged as a bug with the Chrome team.
jQuery should be as follows:
$('input').on('mousedown', function(e){
$(e.target).focus();
e.preventDefault();
});
(I know I shouldn't assume you're using jQuery, if needed I can provide you a pure JS solution, it'll just be more complicated).
Fiddle: http://jsfiddle.net/jzb5a/
EDIT: Apparently this is a known bug (https://bugs.webkit.org/show_bug.cgi?id=114384) it's dissapointing that four months on there still hasn't been a fix though.
Finally come to an solution, which is not that perfect but fixed the problem anyway.
As the background overflows, and the input on the same layer would cause the problem. So just move the input to another layer which doesn't overflow. demo
<div style="position: relative; width: 200px; height: 30px; border: 1px black dotted;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden;">
<div style="height: 30px; border-bottom: red 10px solid;"></div>
</div>
<input style="width: 160px" placeholder="click and drag me downward" />
</div>
I am with some problems to print background-color in Firefox and IE. For Google Chrome I found the follow hack and it works well, but for Firefox and IE I can't find anything.
//Hack for Google Chrome
-webkit-print-color-adjust:exact;
I am glad if someone can help me with this.
For Firefox on the Print dialog there is an Advanced or Show Details button, if you click that , under Appearance there are two checkboxes. One for Print Background Colors and Print Background Images.
* {
-webkit-print-color-adjust: exact;
printer-colors: exact;
color-adjust: exact;}
Browsers: Chrome, Safari, FireFox
More: https://wiki.csswg.org/ideas/print-backgrounds
If you are OK with having your element being a fixed height/width, you can set its size, put a 1px coloured image into it (of whatever colour you want the background to be) and make it fill the space. Then you can absolutely position your content on top.
<div style="position: relative; width: 100px; height: 100px;">
<img src="/images/blue.png" style="width: 100px; height: 100px;">
<div style="position: absolute; top: 0px; left: 0px;">
Hello world
</div>
</div>
Or you could do the same thing with a border instead of an image:
<div style="position: relative; width: 100px; height: 100px;">
<div style="width: 0; height: 0; border: 50px solid black;">
<div style="position: absolute; top: 0px; left: 0px;">
Hello world
</div>
</div>
(Original idea from here: https://defuse.ca/force-print-background.htm)
For Firefox
color-adjust:exact;
will work same as -webkit-print-color-adjust:exact;
Seems impossible, as Spark says, but you can sometime use wide borders as workaround (e.g. div with 0 height and 100px border).
I got a question on the below html code for the chrome and firefox.
<div id="div1" align="left" style="width: 500px; height: 40px; color: grey; background-image: url("bgmageurl"); font-size: 20px; font-style: italic;"> <
div id="divContent" align="left" style="width: 100%; height: 100%; color: grey; background-image: inherit;"> </div>
<div id="divButton" align="right" style="background-image: inherit; "> </div>
</div>
I am trying to have same bg image displayed over to the child . That is why I tried using the inherit. But inherit just reshow the image all again, which I dont want. I want the same parent image to be stretched to the child div tag as well. I am not able to find a way .any thoughts? Thanks in advance for the help
The height on div1 (40px) seems to be the problem, divContent lies outside since the first child is allready 38px high. If you set height to auto, divContent also gets the background.
http://jsfiddle.net/willemvb/QMkfW/2/
I'm using the jQuery qTip to show individual users and their votes when an average rating is mousedover.
qTip calls a PHP file which grabs all the users and votes for the item from the MySQL database and builds a 3 column table, which appears as the tooltip.
In Firefox, the tooltip displays properly.
In IE7 (haven't tested on IE8 yet), the tooltip is the proper height, but the width is only 2 or 3 characters - not the entire table.
If I set the width of the div to a fixed number, say width: 300px; I can coax IE into displaying it properly.
However, the length of my users' names varies considerably, and I'd rather not nail down the div to its maximum possible width and then have a crapload of whitespace when you look at an item voted on only by "Joe".
Using width: auto; has no effect in IE7.
Are there alternatives?
Sorry if I've overlooked a similar question. I searched for a bit before posting but didn't find anything suitable.
EDIT TO ADD CODE:
<div
style="-moz-border-radius: 0pt 0pt 0pt 0pt;
position: absolute;
width: 358px;
display: none;
top: 384.617px;
left: 463.5px;
z-index: 6000;"
class="qtip qtip-defaults" qtip="0">
<div style="position: relative;
overflow: hidden;
text-align: left;"
class="qtip-wrapper">
<div style="overflow: hidden;
background: none repeat scroll 0% 0% white;
border: 1px solid rgb(211, 211, 211);"
class="qtip-contentWrapper">
<div class="qtip-content qtip-content"
style="background: none repeat scroll 0% 0% white;
color: rgb(17, 17, 17);
overflow: hidden;
text-align: left;
padding: 5px 9px;">
<div id="WhoResults">
<table>
<tbody>
<tr>
<td>guy1</td>
<td>guy2</td>
<td>guy3</td>
</tr>
<tr>
<td>guy4</td>
<td>guy5</td>
<td>guy6</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I have applied no CSS styling. That's all been handled by qTip. I tried to format it as best I could. Thanks for any help you can provide.
Try using min-width:300px instead of width
It turned out to be a bug in the way qTip was calculating the proper tooltip width for IE. I overrode that line in the qTip code and posted a note to the developer's forum.