last night I went to my website and found that the css property width: auto in Chrome in not functioning... meaning it has no effect on my css style. Is there a fix that make the width auto fill to a text or image like what used to be in the general css property width?
I was trying many solutions such as adding a fixed width instead, but that causes other styling issues...
any idea what to do?
Update:
.userinfo_extra dl dt {
float: right;
display: block;
margin-right: 5px;
}
.userstats dt {
margin-left: 6px;
}
.userstats dd {
border: 1px dotted #EDEDED;
margin-left: 3px;
}
.userinfo_extra dl {
margin-right: 8px;
margin-left: 8px;
float: left;
min-width: 180px;
width: auto;
background: none repeat scroll 0 0 #FDFDFD;
}
<div class="userinfo_extra fwidth">
<dl class="userstats"> <dt>Join Date</dt>
<dd>Apr 2015</dd> <dt>Posts</dt>
<dd>210</dd> <dt>eval level</dt>
<dd id="reppower">10</dd>
<dd></dd>
</dl>
</div>
This is the screenshot of what I'm trying to do. I want to make the whole code RTL instead of LTR direction as well.
You don't need to left float position your dl element, and need make sure your dd element rtl direction.
.userinfo_extra dt { /*don't need to left float dl element */
float: left;
display: block;
margin-right: 5px;
}
.userstats dt {
margin-left: 6px;
}
.userstats dd {
border: 1px dotted #EDEDED;
margin-left: 3px;
direction: rtl; /*make dd element right to left direction */
}
.userinfo_extra dl { /*don't need to left float dl element */
margin-right: 8px;
margin-left: 8px;
min-width: 180px;
width: auto;
background: none repeat scroll 0 0 #FDFDFD;
}
<div class="userinfo_extra fwidth">
<dl class="userstats">
<dt>Join Date</dt>
<dd>Apr 2015</dd>
<dt>Posts</dt>
<dd>210</dd>
<dt>eval level</dt>
<dd id="reppower">10</dd>
</dl>
</div>
Related
I want to create a side navigation, which should be full height of the browser window. Each menu item (DT) has additional element (DD) where I will put some filters later on. When I click a menu item, its additional element opens, and pushes all other closed items to bottom of the menu. The problem is that once it's opened the size of the parent DL exceeds the screen instead of staying full height.
Could you please suggest a solution to resolve the issue.
HTML
<dl>
<dt>Item</dt>
<dd class="active">Filters</dd>
<dt>Item</dt>
<dd>Filters</dd>
</dl>
CSS
body, html{
height: 100%;
padding: 0;
margin: 0;
}
dl{
display: block;
margin: 0;
width: 200px;
background: grey;
height: 100% !important;
}
dt{
background: #ccc;
padding: 5px 10px;
}
dd{
display: none;
margin: 10px;
}
dd.active{
display: block;
height: 100%;
}
JSFIDDLE
Please do remove dd.active { height: 100% } and check it...
Think this will help you.
The !important declaration is unnecessary. If you know the number of menu items (e.g. 2) and their height (e.g. 40px), maybe this could help:
dd.active {
height: calc(100% - 80px);
}
An alternative (and equally inelegant) solution would be to use tables. Setting the table height to 100% will automatically stretch the rows with unspecified height to fill the remaining space (so only the rows that correspond to the menu items should have their height specified).
My solution:
<dl>
<dt>Item</dt>
<dd class="active">Filters</dd>
<dt>Item</dt>
<dd>Filters</dd>
</dl>
body, html{
height: 100%;
padding: 0;
margin: 0;
}
dl{
display: table; /*changed*/
margin: 0;
width: 200px;
background: grey;
height: 100% !important;
}
dt{
background: #ccc;
padding: 5px 10px;
}
dd{
display: none;
margin: 10px;
}
dd.active{
display: table-row; /*changed*/
height: 100%;
}
UPDATED JSFIDDLE
I have a bunch of divs inside a container that is equally spaced from the right as well as from the bottom. (i.e margin-right and margin-bottom are the same)
Here is my jsfiddle below:
http://jsfiddle.net/wYCzJ/1/
Here is my css code:
.container {
width: 100%;
height: auto;
display: inline-block;
}
.wrapper {
position: relative;
float: left;
width: 25%;
}
.box {
margin-bottom: 0.5em;
margin-right: 0.5em;
border: 1px solid;
border-color:#DDD;
padding: 0.5em;
height: 150px;
}
.name{
width: 95%;
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.result {
text-align: right;
margin-top: 0.5em;
font-weight: bold;
margin-right: 0.75em;
}
.result-type {
float:left;
display:inline;
font-size: 1.1em;
display: inline;
}
.result-value {
font-size: 1.5em;
display: inline;
}
.no_data {
font-size: 1.2em;
color: darkgray;
}
.date {
position: absolute;
bottom: 1em;
color: gray;
}
Everything works fine as expected, except that the last div box has extra some extra spacing towards the right ( Test 5 box and Test 7 box in this case)
I kinda need the same spacing all around. Is there a workaround for this?
if you add:
body {
margin: 0;
padding: 0;
}
you will have only 5px from the right
it's up to you to make div container to margin 5px from left and top
i managed to twick it:
body {
padding: 0;
margin: 0;
margin-top: 0.5em;
margin-left: 0.5em;
}
tested it in Chrome and FF - http://jsfiddle.net/elen/wYCzJ/3/
found and adopted this version - jsfiddle.net/elen/5CJ5e/131 - see if it works for you
please notice combination of text-align: justify;, font-size: 0; and heights for both outer and inner boxes. also use of <span class="stretch"></span> for 100% width
Your probleme is simple, the body have a natural margin.
body{margin-right:0px}
That solve your probleme, but it's a bit wierd to have a bodywith only the margin-right at 0...
The overall container has spacing for its top, bottom, left, and right. Your individual boxes only have spacing on the bottom and right. The reason you are seeing "extra" spacing on the right is because the spacing for the individual box and the overall container are being added together.
A possible sollution with nth-child. This removes the margin of every 4th .box element.
.wrapper:nth-child(4n) .box{
margin-right: 0;
}
http://jsfiddle.net/wYCzJ/5/
Have a look at browser support of nth-child at caniuse.
I having difficulties setting my footer properly. I have a Bottom navigation bar as part of my footer which is working fine(color:#7A7A7A). The issue is with the copy right information that follows. It has an address and phone number. I am wanting that this side of the footer to have a black bakcground(#000). This part is labeled in the css under copyRight which i am not get any results. Any Ideas of what may be wrong?
Here is my Live EXAMPLE.
Thank you
CSS
html, body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#333333;
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
font-size:small;
color:#5e5e5e;
line-height: 130%;
}
/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper in the background. ******/
#colorblock {
position: absolute;
top: 60px;
left: 0px;
background: #c69a55;
z-index: 0;
height: 65px;
width: 100%;
padding: 0px;
margin: 0px;
}
/**************************************************/
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:925px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
border-right: 15px solid #000000;
border-left: 15px solid #000000;
}
div#contentArea {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#contentArea p {
text-align:justify;
padding:0 1em;
}
#content {
margin-left: 240px;
margin-right: 0 auto;
background: #ebebeb;
padding: 5px;
width:635px;
height: 400px;
}
/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
div#header {
/*padding:1em;*/
height: 175px;
border-top:15px solid #000000;
}
div#header p {
margin:0;
}
/****** LEFT COLUMN: This is the left gray column next to the content. Features the styling for the log-in form and the location links. ******/
#left2 {
float: left;
width: 200px;
background: #dddddd;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
padding: 5px;
height: 400px;
}
/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#7A7A7A;
border-bottom:15px solid #000000;
}
div#footer p {
padding:1em;
margin:0;
}
a.footer {
color: #c7c7c7;
font-size: 80%;
padding-right: 20px;
letter-spacing: 1px;
}
p {
margin:0 0 1em;
}
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
}
.left{float:left;}
.right{float:right;}
</style>
You're floating the contents of #copyRight so it needs to be floated in order to contain them properly. Add this to #copyRight:
float: left;
width: 100%;
Read Brilliand detailed explanation below
Add overflow:hidden in #copyRight
So your CSS should look like this:
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
overflow:hidden
}
The problem you are having is that most elements, including divs, do not by default expand to contain floating elements. Since everything within copyRight is floating, it behaves as though it were empty, and shrinks to nothing.
There are many ways to make an element expand to contain floating elements. My personal favorite is to set overflow to just about anything - hidden being the most common.
#copyRight{
overflow: hidden;
}
Another way is to make the containing element float too, though it's then liable to cause the same problem with the element trying to contain it. Also, floating causes shrinkwrapping, so you have to set an explicit width:
#copyRight{
float: left;
width: 100%;
}
A similar result can be achieved using various display declarations, such as display: inline-block. This avoids propagating the problem to the parent element:
#copyRight{
display: inline-block;
width: 100%;
}
Apparently back in 2004 it was considered a wonderful new idea to solve such a problem by inserting a clearing element with the :after pseudo-class instead of the older method of adding a <div style="clear:both;"></div>. Those tricks would also solve your problem, though clearing floats and containing them are not quite the same thing.
I've coded my website for all browsers but of course IE has issues. Specifically only IE 7. I'm hoping to find a resolution to why it's behaving the way it is with two issues and what I can add so IE will display it properly.
My submit buttons are aligning to the bottom of their containing divs.
CSS for the SUBMIT button for the SEARCH field
#searchform { /*container widget */ position: relative; left: 15px; width: 97%; height: 30px; background-color: #f3f3f3; border: 2px solid #742222;}
#searchform label { display: none; }
#searchform input#s { width: 75%; height: 20px;}
input[type=text],input#s { margin: 0 10px 0 0; width: 60%; }
#searchsubmit{ position: relative; float: right; width: 30px; height: 30px; text-indent: -999px; background: url(http://averylawoffice.ca/img/SEARCH-submit.jpg) center; border: 0px;}
This CSS works in all browsers but IE version 7. Is there a way to make it top align without having to position absolute?
I've managed to move the SUBMIT button up (to the correct position) by left-floating the text-box.
.subscription_email {
...
float: left;
}
Same goes for the search text-box:
#s {
...
float: left;
}
By making those changes, the resulting presentation will be exactly the same as in Firefox.
This code works for IE7 and 8 but not for 6. How can I get it to work for 6. Or is there a better way to do it?
#contentLoading {
width:90px;
height: 90px;
position: fixed;
top: 50%;
left: 50%;
background:url(_img/ajax-loader4.gif) no-repeat center #fff;
text-align:center;
padding:10px;
font:normal 16px Tahoma, Geneva, sans-serif;
border:2px solid #666;
margin-left: -50px;
margin-top: -50px;
z-index:2;
overflow: auto;
}
Did you know that IE6 does not support position: fixed;? It will be rendered as a static element.
I usually use something like:
#contentLoading {
width: 90px;
margin-left: auto;
margin-right: auto;
}
If you'd like to center the #contentLoading div within a container you can do it like so:
#contentLoading {
width: 500px; /* whatever width you want */
margin: 0px auto; /* top and bottom margin of zero, left and right are automatically calculated based on the space available in the enclosing container */
}
For Ie6, you need to text-align:center the body in your CSS, and then style the main wrapping div with text-align:left, to re-align the text toe the left.
Here is a example.
body{
text-align: center; /*This alligns all content to the center for IE6*/
}
#mainWrapper{
width: 900px;
margin: 0 auto;
text-align: left; /*This re aligns all content within this id to the left*/
}