<div class="dd">
<div class="blue" style="WIDTH:$s%">$s%</div>
<div class="green" style="WIDTH:$v%">$v%</div>
<div class="red" style="WIDTH:$g%"><br>$g%</div>
</div>
In FF the three different elements are displayed on a single status bar, showing the accumulation of the quantities. However, in IE, it's all messed up. I get separate bars for each element and the colors and alignment are all off.
The CSS:
/*These are for multiple element types on same status bar */
div.dd {
/*position: relative; /* IE is dumb */
display: block;
float: left;
width: 500px;
height: 16px;
margin: 0 0 2px;
background: url("white3.gif");
margin-left:20%;
}
div.dd div.blue {
/*position: relative; */
background: url("blue.gif");
height: 16px;
width: 75%;
text-align:right;
display:block;
float: left;
}
div.dd div.red {
/*position: relative; */
background: url("red.gif");
height: 16px;
width: 75%;
text-align:right;
display:block;
float: left;
}
div.dd div.green {
/*position: relative; */
background: url("green.gif");
height: 16px;
width: 75%;
text-align:right;
display:block;
float: left;
}
What are $s, $v and $g doing in your HTML; and the <br>, for that matter?
If I remove the <br>, and replace those $ values by actual percentages that add up to 100% it works just fine for me in IE6, except for the left margin. But that's caused by the doubled float-margin bug.
The way to fix that margin, according to that article, is to set the display property on div.dd to inline.
Speaking of which, you can remove all those display: block properties you're using, because the display property is ignored for floats (except by IE, to some extent, as the above bugfix demonstrates).
Related
I want to place two pictures at the same place on the webpage - to overlay each other (later on I'll add some webkit animations for them to move in two different directions, but the startpoint should be the same). I have the following css layout (here's jsfiddle). The CSS here looks like this:
.intro{
background-color: #b0e0e6;
width: 100%;
margin: 0 auto;
font-size: 1.5em;
padding: 5px;
}
.intro:before,.intro:after {
content: " ";
display: table;
}
.intro:after {
clear: both;
}
.image{
width: 50%;
background-color: #aaaae6;
float: left;
}
img{
margin: 0 auto;
display: block;
}
.text{
width: 50%;
background-color: #cccccc;
float: left;
}
as you can see in the fiddle, now two pictures are one below the other, so I've decided to modify the css and add this:
img{
margin: 0 auto;
display: block;
position:absolute;
left: 10%;
top: 25%;
}
but that causes the not visible at all... How can I preserve the size of that div and just put two images directly in it?
As a starting point for consideration: in CSS3, a single element can have multiple, stacked background images. Example:
.my-container {
background:
url(grid.png),
url(building.jpg)
}
Here's a codepen.
In CSS2 and below, you can use z-index, absolute, width, and height etc.
I currently have this markup:
<h1 class="title" id="page-title">
<span id="page-title-inner">Home</span>
</h1>
And this CSS:
h1#page-title {
background: transparent url(../images/line.png) 0px 6px no-repeat;
overflow: hidden;
}
#page-title-inner {
width: auto;
float: left;
background: #fff;
padding: 0 15px;
position: relative;
left: 45%;
}
This CSS slightly accomplishes what I want given that the page title is short. But if the title is quite long, it fills the space from the center to the right.
What I really want to achieve is to center the page title wrapped inside the span (which is inside the h1 tag) regardless of its width.
I have tried to do something like:
#page-title-inner {
width: auto;
float: left;
background: #fff;
margin: 0 auto;
display: block;
}
where the margin 0 auto value is what would center the span but I wonder why it doesn't work.
Is there a better way and more efficient to achieve what I want to do?
remove float:left & left:45% property of span to make it center. Also set text-align:center for your H1 tag.
Unless you do something special with the span, you dont need it:
<h1 class="title" id="page-title">
Home
</h1>
h1#page-title {
background: transparent url(../images/line.png) 0px 6px no-repeat;
overflow: hidden;
text-align: center;
}
if you do need to do something with the span:
#page-title-inner {
/*width: auto; */
/*float: left; */
background: #fff;
padding: 0 15px;
/*position: relative; */
/* left: 45%; */
}
Float left makes it, well, float left. And the percentage for the left will never work, because the content of the span can be various sizes
You actually dont need to give the span an ID, you can simple do this:
h1#page-title span{ /* ... */ }
I have this small piece here - the text has text-indent So it will not be seen and then only thing that should be seen is the span with the image (size 24*27).
Firefox sees the <a> in the size of 24*27 (as I wanted)
but chrome calculates it to 58*24 (much wider).
Getting the text itself out solves the problem (but I want to leave the text there).
When I add to the text the display:none property then it works good but I wish not to do that.
What is the mistake? Why does it calculate it differently and how do I solve it?
I have this piece of HTML:
<li class="hideText">
<a id="create" href="#">
<span class="img"></span>
<span class="text">Create</span>
</a>
</li>
General CSS is:
a{
display: block;
height: 24px;
}
span.img {
background: none repeat scroll 0 0 red;
display: block;
float: left;
height: 24px;
width: 27px;
}
#main #sidebar #createNavigation ul li.hideText span.text {
display: block;
text-indent: -9999px;
}
I agree with #ptreik - it is the use of display: block that is causing your problems.
You can change your CSS to the following and it will work:
a{
/* display: block; remove this */
height: 24px;
}
span.img {
background: none repeat scroll 0 0 red;
/* display: block; remove this as `float: left` does this for you */
float: left;
height: 24px;
width: 27px;
}
#main #sidebar #createNavigation ul li.hideText span.text {
/* display: block; remove this */
float: left; /* add this */
text-indent: -9999px;
}
I have fixed height divs that contain text in them. I would like the text to be vertically aligned in the middle of the div, but the problem lies in the fact that some of the text is single-line, and some splits itself over onto two lines. For IE8, Chrome and Firefox, using display: table-cell and vertical-align: middle provides the solution I need:
JS Fiddle is here. Take the asterisk off the width: 300px to see the formatting when the text is on one line.
However, IE7 does not support the display: table-cell property. The only solutions I have found to this apply only to single lines, and not to text that may be 1 or 2 lines. How can I have it display in IE7 as it does in more modern browsers, without the use of any scripts?
How about an IE7 CSS call putting position:relative on the div, and absolute on the h6, and keep the code for vertical-align for modern browsers.
http://jsfiddle.net/yap59cn3/
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
ie7.css
div
{
/* Use inheritance, and override only the declarations needed. */
position:relative;
}
h6
{
height:auto; /* override inherited css */
position:absolute;
top:45%;
}
The goal is to make IE7 "presentable" -- no matter what you do, it will never look as pretty as a modern browser. To me, it's not worth the headache (not even a little).
Personally I've started to (ab)use padding to get vertical aligns. It's especially handy if you use fixed height, since you can offset the height with the value of the padding to get a perfect full-height element.
Note: This solution only works if you know what text will come in the <h6> in advance. If you dynamically add it, I'd suggest wordcounting to try to figure out if it's gonna wrap or not.
Solution:
HTML
<div>
<h6 class="OneLineVertCentered">Here is some text. Look at this lovely text. Isn't it nice?</h6>
</div>
<div style="margin-top: 1em;"> <!-- Margin only for displaying the boxes properly -->
<h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
lovely two-line text. Isn't it nice?</h6>
</div>
CSS
div {
background-color: yellow;
height: 30px;
width: 200px;
width: 300px;
}
h6.OneLineVertCentered,
h6.TwoLineVertCentered {
font-size: 12px;
line-height: 1em;
}
h6.OneLineVertCentered {
padding-top: 10px;
}
h6.TwoLineVertCentered {
padding-top: 3px;
}
Fiddle:
http://jsfiddle.net/Snorbuckle/CnmKN/
Snippet (same as fiddle):
div {
background-color: yellow;
height: 30px;
width: 200px;
width: 300px;
}
h6.OneLineVertCentered,
h6.TwoLineVertCentered {
font-size: 12px;
line-height: 1em;
}
h6.OneLineVertCentered {
padding-top: 10px;
}
h6.TwoLineVertCentered {
padding-top: 3px;
}
<div>
<h6 class="OneLineVertCentered">Here is some text.
Look at this lovely text. Isn't it nice?</h6>
</div>
<div style="margin-top: 1em;">
<h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
lovely two-line text. Isn't it nice?</h6>
</div>
You can use a helper span element to vertical align your text like the following example:
html
<div class="container">
<span class="aligner"></span>
<h3>Text to be aligned center in the beloved ie7</h3>
</div>
css
div.container {
background-color: #000;
color: #fff;
height: 300px;
width: 250px;
position:relative;
margin:12px auto;
text-align:center;
}
.aligner {
display: inline-block;
height: 100%;
content: ' ';
margin-right: -0.25em;
vertical-align: middle;
}
h3 {
display: inline-block;
vertical-align: middle;
}
Fiddle: http://jsfiddle.net/groumisg/dbx4rr0f/
Normally, we would use a pseudo element for this, but ie7 (what a surprise!) does not support :after, :before...etc. Also, note that ie7 does not support display: inline-block for elements that are not inline by default, like div. To use display: inline-block for a div you would have to use the following hack:
div {
display: inline-block;
*display: inline;
zoom: 1;
}
as suggested here Inline block doesn't work in internet explorer 7, 6
You should be able to accomplish this with line-height and vertical-align: middle;.
div {
background-color: yellow;
height: 30px;
line-height: 30px;
width: 200px;
*width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
vertical-align: middle;
}
check this out
http://jsfiddle.net/CnmKN/59/
CSS Code
div {
background-color: yellow;
height: 30px;
width: 200px;
*width: 300px;
display:table;
}
h6 {
font-size: 12px;
line-height: 1em;
display: table-cell;
vertical-align: middle;
height:90px;
}
I know two other methods to vertically center elements than with table-cell:
1) With line-height:
.element {
height: 60px;
line-height: 60px
}
This will only work if the text is in a single line.
2) position absolute/margin auto
.parentElement {
position: relative;
}
.element {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
You maybe will have to use height (auto or a value) and display inline/inline-block. Just try.
Key point is not to use pixels for alignment, use only %-s.
Works even on IE5 :)
here is Demo
.wrapper{
position: relative;
width: 100%;
height: 200px; /* change this value to see alignment*/
background-color: red;
margin: 0 auto;
}
.cell{
position: absolute;
display:block;
background-color: blue;
left:50%;
top:50%; /*this puches element half down*/
margin-left:-100px; /* this is the half size of cell width:200px;*/
margin-top: -.5em; /*this is the half size of font size*/
width: 200px;
color: #fff;
text-align:center;
}
<div class='wrapper'>
<div class='cell'>vertically aligned text</div>
</div>
div {
background-color: yellow;
height: 400px;
width: 200px;
display: table-cell;
vertical-align: middle;
width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
}
So, right to the point, here's what I want (minus the poor quality)...
http://www.hbperspective.com/alt3/site.jpg
And here's what I've got...
http://www.hbperspective.com/alt3/
I'm trying to get those two transparent columns to be centered as they are in the pic. With this CSS layout I'm having a heck of a time figuring out how to do that without causing all kinds of other problems. Here is my styling...
* {
padding: 0;
margin: 0;
}
body {
background: #000000 url('background_div.png') repeat-y center top;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
}
#wrapper {
background: url('background_header_transparent.png') no-repeat center top;
width: 100%;
display: table;
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #000000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.container {
float: left;
position: relative;
margin-top: 100px;
}
.content {
position: relative;
float: left;
}
#contentColumn{
width: 540px;
}
#sidebarColumn {
width: 190px;
margin-left: 20px;
float: left;
display: inline;
}
#contentColumn .content {
width: 500px;
padding: 10px;
}
#sidebarColumn .content {
width: 170px;
padding: 10px;
}
* html #contentColumn .overlay { height: expression(document.getElementById("contentColumn").offsetHeight); }
* html #sidebarColumn .overlay { height: expression(document.getElementById("sidebarColumn").offsetHeight); }
The markup is pretty simple, probably be just easier to look at it from the link provided. So, like I said I'm not really sure what to do at this point to get it working the way I want. Any ideas?
div#container {
width:500px; /* Same width as both columns */
margin:auto; /* Will center the container */
}
div#col1 {
float:left; /* allows side-by-side columns */
width:250px;
}
div#col2 {
float:left;
width:250px;
}
div.clear {
clear:both; /* Stops columns from extending past border of container */
}
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div class="clear"></div>
</div>
And for extra credit, avoid using expressions :) Instead, perform any needed logic like that with javascript, via a framework like jQuery.
There are so many gotchas creating CSS columns I would suggest using a framework instead of rolling your own. There are lots of gotchas which are browser defendant and that you may not see unless you check in IE, FF, Safari, Opera, etc.
A few good frameworks are:
YUI Grids
Blueprint CSS
Blocks (new experimental)
Rules for centering things in CSS:
The thing you're centering must be assigned a width
The margins on that block must be assigned to auto
I have it working on your site in FF3 and IE7 using
div#wrapper {
width:800px;
margin: auto;
}
div#contentColumn
{
margin-left: 20px;
}
If you want to fix up the logo (see top right) then add an extra container div immediately inside the wrapper, and apply the above width/margin to the container (as suggested by Jonathan Sampson.)