<div>My Cart (0 items)</div> and #cart do not overlap, but they have no pixels between them. The problem I'm running into is when I mouse over the My Cart #cart shows, which is correct given the :hover class, but the problem is when I move my mouse off of My Cart and onto #cart the :hover doesn't stick. Any ideas why? There is no space between these two elements, so I thought it would be seamless.
#hd .top-nav ul .tab:hover .content {
display: block;
}
<li class="tab my-cart"><div>My Cart (0 items)</div>
<div id="cart" style="display: block;">
<table>
<tbody><tr>
<td class="no-result faded" colspan="4">Your cart is empty</td>
</tr>
<tr class="empty-row hide">
<td class="remove"><img src="/images/s.gif"></td>
<td class="product">
<strong></strong>
</td>
<td class="quantity"></td>
<td class="quantity-options">
<div class="adjust">
<div class="increment"></div>
<div class="decrement"></div>
</div>
</td>
</tr>
</tbody></table>
<div class="yui-g">
<div class="yui-u first">
<div class="working faded hide">
Working...
</div>
</div>
<div class="yui-u">
<div class="review hide">
<div class="button">Review purchases</div>
</div>
</div>
</div>
</div></li>
Is your issue with IE6? IE6 has notoriously spotty support for pseudo classes (:anything). IE6 does support :hover, but only on anchor tags.
Check out this writeup.
Sorry, the problem was something stupid... the CSS wasn't doing the hover, it was javascript
Related
I need to create a list of divs as looking like below sample:
I'm using Bootstrap grid system and augularjs. I create divs dynamically, using angularjs ng-repeat directive.
What I want is an endless list of divs containing attribute 'class"col-md-2"' inside a div containing attribute 'class"col-md-12"'. Then I want to use a scrollbar to scroll all the divs in the outer div.
Example code:
<div class="col-md-12" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
This doesn't work and "off course" is creating new rows each time ng-repeat is creating a div.
How do I prevent that from happen?
I solved the problem like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-11" scrollablehorizontal>
<table class="borderless">
<tbody>
<tr>
<td ng-repeat="newviews in newviews" valign="top" class="shadowbox" scrollableverticall>
<p>
all the things...
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-1"></div>
</div>
</div>
in a col-md-12, there can be 6 x col-md-2 after that there is a linebreak.
try to change "col-md-12" to "row-fluid"
<div class="row-fluid" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
and add css:
.row-fluid{
white-space: nowrap;
}
.row-fluid .col-md-2{
display: inline-block;
margin-left:10px;
}
jsfiddle
I have this webpage:
It looks like this when I try to print it:
It's missing the last item (user management) intentionally so that's not a problem.
But I'd like to hide the "(/campaigns)" and "(/profanity)" from the print.
Is that possible using CSS?
--EDIT--
This is the HTML:
<div class="row">
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">Campaigns</div>
<a href="/campaigns" class="text-muted">
<i class="fa fa-bullhorn"></i>
</a>
<table class="table table-striped table-condensed">
<tbody><tr>
<th>Campaigns active</th>
<td>1/1</td>
</tr>
<tr>
<th>Total posts</th>
<td>149</td>
</tr>
</tbody></table>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">Profanity</div>
<a href="/profanity" class="text-muted">
<i class="fa fa-filter"></i>
</a>
<table class="table table-striped table-condensed">
<tbody><tr>
<th>Created profanity filters</th>
<td>0</td>
</tr>
<tr>
<th>Total words filtered</th>
<td>0</td>
</tr>
</tbody></table>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">User management</div>
<a href="/account" class="text-muted">
<i class="fa fa-users"></i>
</a>
</div>
</div>
The #media tag supports print.
So if you want your blocks not to be displayed when in print, use the following code:
#media print {
.noprint {
display: none !important;
} }
Just add "noprint" to any element you want.
I recognize the classes, this is a bootstrap issue, as you will find in bootstrap.css this rule
#media print {
...
a[href]:after {
content: " (" attr(href) ")";
}
...
}
overwrite this rule and you should be golden, eg content:none;
add a class to your CSS called noprint for paper:
#media print {.noprint{display:none;}}
and then append that class to your code
eg:
<div class="comment noprint"> ... </div>
When adding a dropdown to a table row, it is getting cut off as so:
Other questions have pointed me in the direction of a stacking problem, but I just can't work out how to fix it. I have tried adding z-index:1000 and position:relative style attributes to each of the parent DIV's but that hasn't fixed the issue. Not sure what to try next...
<div class="row-fluid">
<div class="span12">
<div class="grid simple ">
<div class="grid-body table_highlight>
<table class="table table-striped" id="example2">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<a class="btn btn-info dropdown-toggle btn-demo-space" data-toggle="dropdown" href="#"> Info <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Edit
I have changed the code to the following to make it clearer how it all fits together:
<div class="row-fluid" style=" border: 5px red solid;">
<div class="span12" style=" border: 5px green solid;">
<div class="grid simple " style=" border: 5px blue solid;">
<div class="grid-title">
...
</div>
<div class="grid-body table_highlight" style=" border: 5px yellow solid;">
This is how it now appears:
It looks like the problem is that the grid-body class has an overflow style set to hidden. When the dropdown is activated, its size is larger than the grid-body's size, so the dropdown gets clipped. You can see it fixed if you add overflow: visible to the style attribute on your div with the grid-body class: fiddle
As a permanent fix, you might want to explore modifying the HTML and/or CSS instead of just adding the style directly to the element, though.
How to make display:table-cell style works (or look-alike alternative) if divs with style table-row are inside table cells? (see the link)
http://jsfiddle.net/ELKQg/460/
I'd like the container1 div behave like the container2.
code: (if the link were to become unreachable)
html:
<div id="container1" class="container">
<table>
<tr>
<td>
<div class="row">
<div class="cell">aaaa</div>
<div class="cell expand">b</div>
<div class="cell">c</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="cell">d</div>
<div class="cell expand">eeeee</div>
<div class="cell">f</div>
</div>
</td>
</tr>
</table>
</div>
<div id="container2" class="container">
<div class="row">
<div class="cell">aaaa</div>
<div class="cell expand">b</div>
<div class="cell">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell expand">eeeee</div>
<div class="cell">f</div>
</div>
</div>
css:
.container{width: 500px;overflow:hidden; /* instead of clearfix div */}
div { border:1px solid;padding: 1px;}
.row {display:table-row;}
.cell {display:table-cell;}
.expand{overflow:hidden;width:100%;}
The extra <table> containing your <div>s in .container1 needs to have width: 100%
display: table-cell elements don't necessarily need a containing display: table-row as long as the parent is display: table. Set the .row to that (ideally you'd re-name it, seeing as the rule no longer makes sense)
Fixed and forked your demo:
http://jsfiddle.net/barney/ahMg8/
Use display: table for the parent table before using display:table-cell
Use td's instead of divs inside tr:
<div id="container1" class="container">
<table>
<tr>
<td class="cell">aaaa</td>
<td class="cell expand">b</td>
<td class="cell">c</td>
</tr>
<tr>
<td class="cell">d</div>
<td class="cell expand">eeeee</td>
<td class="cell">f</td>
</tr>
</table>
</div>
Working fiddle
I am working on a site and came across a problem. I have several divs with the same css class applied to them. I want to rotate every3rd,5th 8th etc with css transform to give the look of randomness. I have done this with nth-child in the past, but now my divs not direct siblings but are nested about 5 levels down from the common parent.
Here is a simplification of the code (too long to add all).
<tr>
<td valign="top" width="20%">
<form>
<div class="box fp-product-listing">
<div class="product-image">
<a href="">
<img class=" " />
</a>
</div>
<div class="product-description">
<div class="prices"> <- THIS IS THE DIV TO BE STYLED
</div>
</div>
</div>
</form>
</td>
<td valign="top" width="20%">
<form>
<div class="box fp-product-listing">
<div class="product-image">
<a href="">
<img class=" " />
</a>
</div>
<div class="product-description">
<div class="prices"> <- THIS IS THE DIV TO BE STYLED
</div>
</div>
</div>
</form>
</td>
</tr>
Any advice on how to do this with pure CSS? (no I'm not going to use jQuery just for this little effect :)
Thanks in advance.
From the HTML you've provided, it looks like each div.prices is in its own td, in that pattern. In that case you use td:nth-child(...) div.prices and not div.prices:nth-child(...), since the td elements are siblings of one another.