I'm trying to add box-shadow to the first row of the table (header),
which works fine in Firefox, but unfortunately doesn't work in Chrome.
I have tried using different display property values (e.g "display: block"),
which adds the shadow in Chrome, but moves the whole header into the first cell of the first column. Any solutions on how to add box-shadow in my case?
Below is my CSS/HTML example (box-shadow is used with selector "tr:first-child"):
body,
html {
height: 100%;
background-color: #E0E0E0;
}
table {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 25px;
background: linear-gradient(to bottom, #E0E0E0 0%, #E1E1E1 10%, #E5E5E5 47%, #E7E7E7 100%);
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
box-sizing: border-box;
}
table,
th,
td {
border-collapse: collapse;
}
tr:hover {
background-color: #E0E0E0;
}
tr:first-child {
background-color: #E0E0E0;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-box-shadow: 3px 5px 10px grey;
-moz-box-shadow: 3px 5px 10px grey;
box-shadow: 3px 5px 10px grey;
}
th {
background-color: #404040;
color: #FFFFFF;
}
th,
td {
padding: 3px;
max-width: 600px;
}
td {
border-bottom: 1px solid #909090;
}
td.last_row {
border-bottom: none;
}
td:first-child {
text-align: center;
width: 25px;
}
td:last-child {
text-align: center;
width: 50px;
}
#column_1 {
-webkit-border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;
}
#column_2 {
-webkit-border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
border-radius: 0px 10px 10px 0px;
}
.outer_col {
border: none;
}
<body>
<table>
<tr>
<th id="column_1">ID</th>
<th id="column_2" colspan="2">DESCRIPTION</th>
</tr>
<tr>
<td class="outer_col">1</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td class="outer_col">Link
</td>
</tr>
<tr>
<td class="outer_col">2</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td class="outer_col">Link
</td>
</tr>
<tr>
<td class="outer_col">3</td>
<td class="last_row">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td class="outer_col">Link
</td>
</tr>
</table>
</body>
Move you box-shadow effect to th:
th {
background-color: #404040;
color: #FFFFFF;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-box-shadow: 3px 5px 10px grey;
-moz-box-shadow: 3px 5px 10px grey;
box-shadow: 3px 5px 10px grey;
}
tr:first-child is the same as th in your case, so you don't need it.
To make it work in recent versions of IE you will need to add to th:
border-collapse:separate;
Chrome has issues in general to use box-shadow on a row. Just rewrite your "tr:firstchild" to the "th"-Element and it works in Chrome. "box-shadow property works only with elements, which have display: block or display:inline-block attribute."
So if you use display: block or display: inline-block it applies your shadow, but also breaks the full layout of your table. So I'd advice to just rebuild your shadow on th... :)
Related
I have this page which is a page for showing a product and what I'm trying to do is to have the image of the product on the right side and on the left side having the name, price and add to cart button. I use vertical align on img so the text goes to top but doing this means I have to use display inline-block so I can't use block to make the texts go one every line. I also tried to use <br> but it makes the text go under the image.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product</div><br>
<div class="price">$59.99</div>
</article>
</body>
And this is what I'm trying to make:
.image{
margin: 0 50px;
float: right;
border: 1px solid black;
width: 100px;
height: 100px;
}
.text{
float: right;
}
<body>
<span class="image">IMAGE</span>
<span class="text">text</span><br>
<span class="text">text</span>
</body>
instead of adding outside div , add it inside.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product<br><div class="price">$59.99</div></div><br>
</article>
just style it
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
font-size: 15px;
font-weight: normal;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name"><h2>name of product</h2><h3 class="price">$59.99</h3></div>
</article>
</body>
I have the following HTML & CSS
HTML
<table class="StandardTable">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">A</td>
<td style="width: 25%">B</td>
<td style="width: 25%">C</td>
<td style="width: 25%">D</td>
</tr>
</tbody>
</table>
CSS
.StandardTable {
border: 1px solid #656565;
border-radius: 10px;
-moz-border-radius: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 10px 10px 5px #888888;
width: 300px;
margin-bottom: 15px;
border-spacing: 0;
}
.StandardTable thead {
border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 5px;
background-color: lightgray;
}
I have created the jsFiddle for this too. The background in the THEAD always bleeds / runs out of the border and does not round.
I tested in IE, FF, and chrome. It is most apparent in chrome because the bleed happens above the border where in IE and FF the bleed happens under.
Any help in fixing the issue (make the background stop correctly around the edges), is greatly appreciated. I did try to add Border-Radius on TH element, but that did not work.
You need to apply the rounded corners to the first and last table cell in the thead. Set the background for thead to transparent, and add this:
.StandardTable thead th{
background: lightgray;
}
.StandardTable thead th:first-of-type{
border-top-left-radius: 10px;
}
.StandardTable thead th:last-of-type{
border-top-right-radius: 10px;
}
Demo JsFiddle
try this (worked for me in FF)
.StandardTable {
border: 1px solid #656565;
border-radius: 10px;
-moz-border-radius: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 10px 10px 5px #888888;
width: 300px;
margin-bottom: 15px;
border-spacing: 0;
}
.StandardTable thead tr th {
background-color: lightgray;
}
.StandardTable thead tr th:first-child {
z-index:-1;
border-radius: 10px 0 0 0;
-moz-border-radius: 10px 0 0 0;
border-radius: 10px 0 0 0;
}
.StandardTable thead tr th:last-child {
z-index:-1;
border-radius: 0 10px 0 0;
-moz-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
}
Another workaround is to do the following
.StandardTable {
border: 1px solid #656565;
border-radius: 10px;
-moz-border-radius: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 10px 10px 5px #888888;
width: 300px;
margin-bottom: 15px;
border-spacing: 0;
background-color: lightgray;
}
.StandardTable tbody tr td {
background-color: white;
}
.StandardTable tbody tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
.StandardTable tbody tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
I currently have a row of buttons that are all next to each other in an inline-block under the class "member actions". I would like to rearrange the order of these buttons. Also I would like to add a small icon to the left of these. Any ideas on how to accomplish this? Here's the code:
.member_actions {
padding: 0px 0px 0px 96px;
}
.member_actions .send_gift a{
display: inline-block;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #6c829b;
line-height: 21px;
height: 22px;
padding: 0px 8px 0px 8px;
margin: 0px 2px 0px 0px;
background: image(btn_bg_red_big.png) repeat-x top left #c62800;
color: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.member_actions .block_profile a{
position: absolute;
float: left;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #6c829b;
line-height: 21px;
height: 22px;
padding: 0px 8px 0px 8px;
margin: 0px 2px 0px 0px;
background: image(btn_small_red.jpg) repeat-x top left #8ea3be;
color: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.member_actions .send_message a{
display: inline-block;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #6c829b;
line-height: 21px;
height: 22px;
padding: 0px 8px 0px 8px;
margin: 0px 2px 0px 0px;
background: image(btn_bg_red_big.png) repeat-x top left #c62800;
color: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.member_actions .send_friend_request a, .member_actions .send_profile a, .member_actions .bookmark a {
display: inline-block;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #6c829b;
line-height: 21px;
height: 22px;
padding: 0px 8px 0px 8px;
margin: 0px 2px 0px 0px;
background: image(btn_small_red.jpg) repeat-x top left #8ea3be;
color: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
Also a screenshot so that you can visualize it. Thanks!
If you want to rearrange the .member_actions buttons you can add position: absolute to the class, then use .member_actions:nth-child(1), .member_actions:nth-child(2) and so on and add left: -50px to position element 50 pixels to the left, or left: 50px to position element 50 pixels to the right. See sample jsfiddle
To add a small icon, again use .member_actions:nth-child(n) , where n is 1, 2, 3 etc. to target specific element, add background: url("path_to_img.png") 0 0 no-repeat; --> 0 pixels from the left, 0 from the top, and add padding-left: 40px assuming 40px is the width of your image, if not change the value accordingly. This will drop the background image left from the text and add padding to the text, so it doesn't overlap the image.
I downloaded a website template to use for a small project but for some reason the sidebar used for navigation gets cut short when the content DIV isn't at least the height of the page. I've been tinkering with the CSS and inspecting it through Firefox Web Developer but aside from having the "min-height" set to something very large, I am not sure how to fix this issue.
Any suggestions as to what to look at in the CSS would be greatly appreciated.
http://brutalservers.com/dp/index.html
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Device Portal</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/hideshow.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.equalHeight.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".tablesorter").tablesorter();
}
);
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>
<script type="text/javascript">
$(function(){
$('.column').equalHeight();
});
</script>
</head>
<body>
<header id="header">
<hgroup>
<h1 class="site_title">Device Portal</h1>
<h2 class="section_title">Dashboard</h2><div class="btn_view_site">View Site</div>
</hgroup>
</header> <!-- end of header bar -->
<section id="secondary_bar">
<div class="user">
<p>Brett Powell (3 Messages)</p>
<!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
</div>
<div class="breadcrumbs_container">
<article class="breadcrumbs">Website Admin <div class="breadcrumb_divider"></div> <a class="current">Dashboard</a></article>
</div>
</section><!-- end of secondary bar -->
<aside id="sidebar" class="column">
<form class="quick_search">
<input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
</form>
<hr/>
<h3>Devices</h3>
<ul class="toggle">
<li class="icn_new_article">New Article</li>
<li class="icn_edit_article">Edit Articles</li>
<li class="icn_categories">Categories</li>
<li class="icn_tags">Tags</li>
</ul>
<h3>Datacenters</h3>
<ul class="toggle">
<li class="icn_add_user">Add New User</li>
<li class="icn_view_users">View Users</li>
<li class="icn_profile">Your Profile</li>
</ul>
<h3>IP Allocations</h3>
<ul class="toggle">
<li class="icn_folder">File Manager</li>
<li class="icn_photo">Gallery</li>
<li class="icn_audio">Audio</li>
<li class="icn_video">Video</li>
</ul>
<h3>Inventory</h3>
<ul class="toggle">
<li class="icn_settings">Options</li>
<li class="icn_security">Security</li>
<li class="icn_jump_back">Logout</li>
</ul>
</aside><!-- end of sidebar -->
<section id="main" class="column">
<article class="module width_3_quarter">
<header><h3 class="tabs_involved">Content Manager</h3>
<ul class="tabs">
<li>Posts</li>
<li>Comments</li>
</ul>
</header>
<div class="tab_container">
<div id="tab1" class="tab_content">
<table class="tablesorter" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Entry Name</th>
<th>Category</th>
<th>Created On</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Lorem Ipsum Dolor Sit Amet</td>
<td>Articles</td>
<td>5th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Ipsum Lorem Dolor Sit Amet</td>
<td>Freebies</td>
<td>6th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Sit Amet Dolor Ipsum</td>
<td>Tutorials</td>
<td>10th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Articles</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Articles</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
</tbody>
</table>
</div><!-- end of #tab1 -->
<div id="tab2" class="tab_content">
<table class="tablesorter" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Comment</th>
<th>Posted by</th>
<th>Posted On</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Lorem Ipsum Dolor Sit Amet</td>
<td>Mark Corrigan</td>
<td>5th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Ipsum Lorem Dolor Sit Amet</td>
<td>Jeremy Usbourne</td>
<td>6th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Sit Amet Dolor Ipsum</td>
<td>Super Hans</td>
<td>10th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Alan Johnson</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Dobby</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
</tbody>
</table>
</div><!-- end of #tab2 -->
</div><!-- end of .tab_container -->
</article><!-- end of content manager article -->
<article class="module width_quarter">
<header><h3>Messages</h3></header>
<div class="message_list">
<div class="module_content">
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
</div>
</div>
<footer>
<form class="post_message">
<input type="text" value="Message" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
<input type="submit" class="btn_post_message" value=""/>
</form>
</footer>
</article><!-- end of messages article -->
<div class="clear"></div>
</section>
</body>
</html>
CSS:
/* Essentials */
html, div, map, dt, isindex, form, header, aside, section, section, article, footer {
display: block;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
background: #F8F8F8;
font-size: 12px;
}
.clear {
clear: both;
}
.spacer {
height: 20px;
}
a:link, a:visited {
color: #77BACE;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Header */
header#header {
height: 55px;
width: 100%;
background: #222222 url(../images/header_bg.png) repeat-x;
}
header#header h1.site_title, header#header h2.section_title {
float: left;
margin: 0;
font-size: 22px;
display: block;
width: 23%;
height: 55px;
font-weight: normal;
text-align: left;
text-indent: 1.8%;
line-height: 55px;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
header#header h1.site_title a {
color: #fff;
text-decoration: none;
}
header#header h2.section_title {
text-align: center;
text-indent: 4.5%;
width: 68%;
background: url(../images/header_shadow.png) no-repeat left top;
}
.btn_view_site {
float: left;
width: 9%;
}
.btn_view_site a {
display: block;
margin-top: 12px;
width: 91px;
height: 27px;
background: url(../images/btn_view_site.png) no-repeat;
text-align: center;
line-height: 29px;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 0 #000;}
.btn_view_site a:hover {
background-position: 0 -27px;
}
/* Secondary Header Bar */
section#secondary_bar {
height: 38px;
width: 100%;
background: #F1F1F4 url(../images/secondary_bar.png) repeat-x;
}
section#secondary_bar .user {
float: left;
width: 23%;
height: 38px;
}
.user p {
margin: 0;
padding: 0;
color: #666666;
font-weight: bold;
display: block;
float: left;
width: 85%;
height: 35px;
line-height: 35px;
text-indent: 25px;
text-shadow: 0 1px 0 #fff;
background: url(../images/icn_user.png) no-repeat center left;
margin-left: 6%;
}
.user a {
text-decoration: none;
color: #666666}
.user a:hover {
color: #77BACE;
}
.user a.logout_user {
float: left;
display: block;
width: 16px;
height: 35px;
text-indent: -5000px;
background: url(../images/icn_logout.png) center no-repeat;
}
/* Breadcrumbs */
section#secondary_bar .breadcrumbs_container {
float: left;
width: 77%;
background: url(../images/secondary_bar_shadow.png) no-repeat left top;
height: 38px;
}
article.breadcrumbs {
float: left;
padding: 0 10px;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
height: 23px;
margin: 4px 3%;
}
.breadcrumbs a {
display: inline-block;
float: left;
height: 24px;
line-height: 23px;
}
.breadcrumbs a.current, .breadcrumbs a.current:hover {
color: #9E9E9E;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
}
.breadcrumbs a:link, .breadcrumbs a:visited {
color: #44474F;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
font-weight: bold;}
.breadcrumbs a:hover {
color: #222222;
}
.breadcrumb_divider {
display: inline-block;
width: 12px;
height: 24px;
background: url(../images/breadcrumb_divider.png) no-repeat;
float: left;
margin: 0 5px;
}
/* Sidebar */
aside#sidebar {
width: 23%;
background: #E0E0E3 url(../images/sidebar.png) repeat;
float: left;
min-height: 500px;
margin-top: -4px;
}
#sidebar hr {
border: none;
outline: none;
background: url(../images/sidebar_divider.png) repeat-x;
display: block;
width: 100%;
height: 2px;}
/* Search */
.quick_search {
text-align: center;
padding: 14px 0 10px 0;
}
.quick_search input[type=text] {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #bbb;
height: 26px;
width: 90%;
color: #ccc;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
text-indent: 30px;
background: #fff url(../images/icn_search.png) no-repeat;
background-position: 10px 6px;
}
.quick_search input[type=text]:focus {
outline: none;
color: #666666;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}
/* Sidebar Menu */
#sidebar h3 {
color: #1F1F20;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 10px 0 10px 6%;
display: block;
float: left;
width: 90%;
}
.toggleLink {
color: #999999;
font-size: 10px;
text-decoration: none;
display: block;
float: right;
margin-right: 2%
}
#sidebar .toggleLink:hover {
color: #77BACE;
text-decoration: none;
}
#sidebar ul {
clear: both;
margin: 0; padding: 0;
}
#sidebar li {
list-style: none;
margin: 0 0 0 12%; padding: 0;
}
#sidebar li a {
color: #666666;
padding-left: 25px;
text-decoration: none;
display: inline-block;
height: 17px;
line-height: 17px;
text-shadow: 0 1px 0 #fff;
margin: 2px 0;
}
#sidebar li a:hover {
color: #444444;
}
/* Sidebar Icons */
#sidebar li.icn_new_article a {
background: url(../images/icn_new_article.png) no-repeat center left;
}
#sidebar li.icn_edit_article a {
background: url(../images/icn_edit_article.png) no-repeat center left;
}
#sidebar li.icn_categories a {
background: url(../images/icn_categories.png) no-repeat center left;
}
#sidebar li.icn_tags a {
background: url(../images/icn_tags.png) no-repeat center left;
}
#sidebar li.icn_add_user a {
background: url(../images/icn_add_user.png) no-repeat center left;
}
#sidebar li.icn_view_users a {
background: url(../images/icn_view_users.png) no-repeat center left;
}
#sidebar li.icn_profile a {
background: url(../images/icn_profile.png) no-repeat center left;
}
#sidebar li.icn_folder a {
background: url(../images/icn_folder.png) no-repeat center left;
}
#sidebar li.icn_photo a {
background: url(../images/icn_photo.png) no-repeat center left;
}
#sidebar li.icn_audio a {
background: url(../images/icn_audio.png) no-repeat center left;
}
#sidebar li.icn_video a {
background: url(../images/icn_video.png) no-repeat center left;
}
#sidebar li.icn_settings a {
background: url(../images/icn_settings.png) no-repeat center left;
}
#sidebar li.icn_security a {
background: url(../images/icn_security.png) no-repeat center left;
}
#sidebar li.icn_jump_back a {
background: url(../images/icn_jump_back.png) no-repeat center left;
}
#sidebar p {
color: #666666;
padding-left: 6%;
text-shadow: 0 1px 0 #fff;
margin: 10px 0 0 0;}
#sidebar a {
color: #666666;
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
#sidebar footer {
margin-top: 20%;
}
/* Main Content */
section#main {
width: 77%;
min-height: 500px;
background: url(../images/sidebar_shadow.png) repeat-y left top;
float: left;
margin-top: -2px;
}
#main h3 {
color: #1F1F20;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 8px 20px;
}
/* Modules */
.module {
border: 1px solid #9BA0AF;
width: 100%;
margin: 20px 3% 0 3%;
margin-top: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ffffff;
}
#main .module header h3 {
display: block;
width: 90%;
float: left;
}
.module header {
height: 38px;
width: 100%;
background: #F1F1F4 url(../images/secondary_bar.png) repeat-x;
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
border-top-left-radius: 5px; border-top-right-radius: 5px;
}
.module footer {
height: 32px;
width: 100%;
border-top: 1px solid #9CA1B0;
background: #F1F1F4 url(../images/module_footer_bg.png) repeat-x;
-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;
}
.module_content {
margin: 10px 20px;
color: #666;}
/* Module Widths */
.width_full {
width: 95%;
}
.width_half {
width: 46%;
margin-right: 0;
float: left;
}
.width_quarter {
width: 26%;
margin-right: 0;
float: left;
}
.width_3_quarter {
width: 66%;
margin-right: 0;
float: left;
}
/* Stats Module */
.stats_graph {
width: 64%;
float: left;
}
.stats_overview {
background: #F6F6F6;
border: 1px solid #ccc;
float: right;
width: 26%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.overview_today, .overview_previous {
width: 50%;
float: left;}
.stats_overview p {
margin: 0; padding: 0;
text-align: center;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}
.stats_overview p.overview_day {
font-size: 12px;
font-weight: bold;
margin: 6px 0;
}
.stats_overview p.overview_count {
font-size: 26px;
font-weight: bold;
color: #333333;}
.stats_overview p.overview_type {
font-size: 10px;
color: #999999;
margin-bottom: 8px}
/* Content Manager */
.tablesorter {
width: 100%;
margin: -5px 0 0 0;
}
.tablesorter td{
margin: 0;
padding: 0;
border-bottom: 1px dotted #ccc;
}
.tablesorter thead tr {
height: 34px;
background: url(../images/table_sorter_header.png) repeat-x;
text-align: left;
text-indent: 10px;
cursor: pointer;
}
.tablesorter td {
padding: 15px 10px;
}
.tablesorter input[type=image] {
margin-right: 10px;}
ul.tabs {
margin: 3px 10px 0 0;
padding: 0;
float: right;
list-style: none;
height: 24px; /*--Set height of tabs--*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
border: 1px solid #ccc;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
line-height: 24px;
}
ul.tabs li a {
text-decoration: none;
color: #999;
display: block;
padding: 0 10px;
height: 24px;
}
ul.tabs li a:hover {
color: #44474F;
}
html ul.tabs li.active a {
color: #44474F;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #F1F2F4;
-webkit-box-shadow: inset 0 2px 3px #818181;
-moz-box-shadow: inset 0 2px 3px #818181;
box-shadow: inset 0 2px 3px #818181;
}
html ul.tabs li:first-child, html ul.tabs li:first-child a {
-webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px; border-bottom-left-radius: 5px;
}
html ul.tabs li:last-child, html ul.tabs li:last-child a {
-webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px; border-bottom-right-radius: 5px;
}
#main .module header h3.tabs_involved {
display: block;
width: 60%;
float: left;
}
/* Messages */
.message {
border-bottom: 1px dotted #cccccc;
}
input[type=submit] {
background: #D0D1D4 url(../images/btn_submit.png) repeat-x;
border: 1px solid #A8A9A8;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
font-weight: bold;
height: 22px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 10px;
color: #666;
text-shadow: 0 1px 0 #fff;
cursor: pointer;
}
input[type=submit]:hover {
color: #333333;
}
input[type=submit].alt_btn {
background: #D0D1D4 url(../images/btn_submit_2.png) repeat-x;
border: 1px solid#30B0C8;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
font-weight: bold;
height: 22px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 10px;
color: #003E49;
text-shadow: 0 1px 0 #6CDCF9;
cursor: pointer;
}
input[type=submit].alt_btn:hover {
color: #001217;
}
input[type=submit].btn_post_message {
background: #D0D1D4 url(../images/post_message.png) no-repeat;
display: block;
width: 37px;
border: none;
height: 24px;
cursor: pointer;
text-indent: -5000px;
}
input[type=submit].btn_post_message:hover {
background-position: 0 -24px;
}
.post_message {
text-align: left;
padding: 5px 0;
}
.post_message input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #bbb;
height: 20px;
width: 70%;
color: #ccc;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
text-indent: 10px;
background-position: 10px 6px;
float: left;
margin: 0 3.5%;
}
.post_message input[type=text]:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
color: #666666;
}
.post_message input[type=image] {
float: left;
}
.message_list {
height: 250px;
overflow-x:hidden;
overflow-y: scroll;
}
/* New/Edit Article Module */
fieldset {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #F6F6F6;
border: 1px solid #ccc;
padding: 1% 0%;
margin: 10px 0;
}
fieldset label {
display: block;
float: left;
width: 200px;
height: 25px;
line-height: 25px;
text-shadow: 0 1px 0 #fff;
font-weight: bold;
padding-left: 10px;
/*margin: -5px 0 5px 0;*/
text-transform: uppercase;
vertical-align: middle;
}
fieldset input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
height: 20px;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 10px;
background-position: 10px 6px;
margin: 0;
display: block;
float: left;
width: 96%;
margin: 0 10px;
}
fieldset input[type=text]:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}
fieldset select {
width: 96%;
margin: 0 10px;
border: 1px solid #bbb;
height: 20px;
color: #666666;
}
fieldset textarea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 10px;
background-position: 10px 6px;
margin: 0 0.5%;
display: block;
float: left;
width: 96%;
margin: 0 10px;
}
fieldset textarea:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}
.submit_link {
float: right;
margin-right: 3%;
padding: 5px 0;
}
.submit_link select {
width: 150px;
border: 1px solid #bbb;
height: 20px;
color: #666666;
}
#main .module_content h1 {
color: #333333;
text-transform: none;
text-shadow: 0 1px 0 #fff;
font-size: 22px;
margin: 8px 0px;
}
#main .module_content h2 {
color: #444444;
text-transform: none;
text-shadow: 0 1px 0 #fff;
font-size: 18px;
margin: 8px 0px;
}
#main .module_content h3 {
color: #666666;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 8px 0px;
}
#main .module_content h4 {
color: #666666;
text-transform: none;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 8px 0px;
}
#main .module_content li {
line-height: 150%;
}
Set the height of these two elements two 100%
<aside id="sidebar" class="column" style="height: 100%;">
<section id="main" class="column" style="height: 100%;">
the style is also inline
Set the height of your sidebar 100% and it will work
<aside id="sidebar" class="column" style="height: 100%;">
I would like my ".tag" div to only be as wide as the text inside it. But, for some reason the paragraph element spans the whole width of the parent element. How can I stop this from happening? So that the ".tag" divs are only as wide as the text inside them?
JSFIDDLE: http://jsfiddle.net/X77e7/
My HTML:
<div class="tag">
<p> Hiking </p>
</div>
My CSS:
.tag {
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
.tag p {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #444;
}
Add display:inline-block
It is stretching now because div is by default block element which occupies the whole space.
.tag {
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4; display:inline-block
}
DEMO
Both div and p are block elements.
So you should consider setting the display at inline.
.tag {
display: inline;
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
.tag p {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #444;
}
http://jsfiddle.net/X77e7/2/
just float your .tag and your problem is solved
.tag {
float:left;
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
demo