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.
Related
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'm trying to rewrite a site in proper HTML. The site I'm trying to replace was a complete mess. I've run into a problem where I can't get a <table> to fill the height of the <td> it's contained in. I've tried setting height: 100% on the <table>, which based on google and stackoverflow research should work, but I must be missing something stupid. I had tried to do the same thing with <divs> before switching to tables, but I'm not opposed to going back to <divs> if someone can suggest how to do it.
The content I'm developing is currently here: http://96.0.22.228/
Due to project time constraints, I've had to use bad hacks to get the pages looking correctly. I'm not declaring a <doctype> and I'm forcing IE to use IE7-quirks mode. I'd love to have recommendations on how to do this layout in a proper manner using HTML5 and CSS. It does not have to support older browsers, but it does have to look the same in the latest versions of Chrome, Firefox and IE. I'd also like to to do away with the images for the menus and style everything in CSS for the border frames and the menu text.
Even though I've had to complete the site as is, I'm open to going back and fixing it later if there's a good answer to this problem.
100% height in a table cell is always a pain. Technically speaking a TD has no height (because that depends on its contents). What you are asking the browser to do is make the child 100% of its parent, which is 100% of its child, which is 100% of its parent ... You can see how that might be a problem.
You could try adding an explicit height to the TD and using table-layout:fixed on the table. At least that way the browser knows the height of the parent without needing the height of the child but that still may not work.
You might need to rethink how you go about this.
The best solution for this is to have the parent element of the button have a height of 100% as well, assuming you want your button to have a height of 100%.
td {
height: 100%;
}
.btn {
width: 100%;
height: 100%;
}
<tr>
<td><button class="btn" id="1">1</button></td>
<td><button class="btn" id="2">2</button></td>
<td><button class="btn" id="3">3</button></td>
<td><button class="btn" id="plus">+</button></td>
<td rowspan="2"><button class="btn btn-block" id="equals">=</button></td>
</tr>
i got a one solution if you need your desired results you can adjust the padding of your (td.navigation a class link) through this you will get your results.
apply this css:-
td.navigation a {
color: #837768;
display: block;
font-size: 1.2em;
padding: 14px 5px;
text-align: center;
text-decoration: none;
}
So it's done here with divs, absolute positioning in %, and here's the part you won't like, with a specific height set in pixels. The trouble is, if you use table cells (td) the td's don't have height, and so any element inside will calculate 0 for 100% height.
When we use div's the problem is different. We can make sure they retain their height property, but there's no way to tell the div on the left, "be the same height as the div in the center." At least no way I know of. That being said, it seems like your flash object is the tallest thing, and you could easily set the height of all three div's at a pretty pixel perfect amount. Then stretch the ul navigation list to the height to 100% of the div it's nested within.
There's one other way to do this, that might meet your needs better, I'll detail it at the very bottom.
body,
html {
background: black;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#left {
position: absolute;
top: 10%;
left: 0;
background: #eeeeee;
width: 20%;
padding: 2%;
margin: 0;
}
#right {
position: absolute;
top: 10%;
left: 76%;
background: #eeeeee;
width: 20%;
padding: 2%;
margin: 0;
}
#center {
position: absolute;
top: 10%;
left: 24%;
background: #dddddd;
width: 48%;
padding: 2%;
margin: 0;
}
#flash {
background: red;
width: 500px;
height: 500px;
padding: 0;
margin: 0;
}
ul {
height: 500px;
padding: 0;
margin: 0;
padding-left: 25px;
background: #4359ac;
color: #ffffff;
}
li {
height: 10%;
padding: 0;
margin: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TheDavidFactor's Layout</title>
</head>
<body>
<div id="left">
<ul>
<li>Spa</li>
<li>Hotel</li>
<li>Activities</li>
<li>Hobbies</li>
<li>Night Life</li>
<li>Food</li>
<li>Feedback</li>
<li>Contact</li>
<li>About Us</li>
<li>Copyright</li>
</ul>
</div>
<div id="center">
<div id="flash">Here's your flash Object</div>
</div>
<div id="right">
here's the right div
<br>
<p>Let's throw some random text in here to take up space for now.</p>
</div>
</body>
</html>
The other option you have is to wrap the three columns in a container div, and define a height for that div, then stretch each of the columns to 100% height within that container div.
Does anyone know how to yellow highlight a field in table and also have the yellow color print? This hightlights on the screen, but does not print the yellow:
<td style="background-color: yellow">Total:</td>
I found out that browsers, by design, do not print background colors. The only workaround I was able to find is that you can make a ultra-thick border of the cell or div:
<td style="border-left: 999px solid yellow">
Unfortunately, the cell contents won't overlay over the thick yellow border. I checked everywhere online and the closest answer I could find was on stack overflow:
Best Ways to Get Around CSS Backgrounds Not Printing
However, the answer was untested and I was unable to get it working on my computer. I tried toying around and experimenting with no luck.
Ok, I found a solution to my problem, but the solution is rather inelegant. Like I said in my above question, you have create a div tag with a big color border on it. The thing is is that colored borders can print correctly. Then, where the highlighted color is displayed, lay another div tag with the text on top. Inelegant, but it works.
It's best to set both the text div and the highlight div's within a third "outer" div for easy placement. the inner divs should be position "absolute" and the outer div should have position "relative". Sample code is below. This is tested code on both Chrome and Firefox:
<style type="text/css">
#outer_box {
position: relative;
border: 2px solid black;
width: 500px;
height:300px;
}
#yellow_highlight {
position: absolute;
width: 0px;
height: 30px;
border-left: 300px;
border-color: yellow;
border-style: solid;
top: 0;
left: 0px
}
#message_text {
position: absolute;
top: 0;
left: 0px;
}
</style>
<body>
<div id="outer_box">
<div id="yellow_highlight"> </div>
<div id="message_text">hello, world!</div>
</div>
</body>
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.