I'm setting zoom:1; on some elements. When I subsequently check the CSS using the developer tools in IE 6.0.29, I see that zoom:100% is there, but hasLayout is still -1. Why isn't hasLayout being forced?
.album_thumbnail_outer_container {
position: relative;
height: 200px;
width: 150px;
border: solid black 1px;
float:left;
color: #628FDB;
font-weight: bold;
margin: 20px;
background: #262626;
text-align: center;
*zoom:1;
}
Here's a screenshot of the properties:
http://www.zumodrive.com/share/COhNDQ2OT
Setting position relative can work but can also have other consequences so make sure you're aware of that. Also, only block elements can have layout so if you're trying this on an inline element it's not going to work.
Related
I think I am missing something but I can't find a solution to the following problem.
I am using custom checkboxes on a list of sentences. At first it looks good but once you check the first checkbox, it moves.
I can't find out why the checkboxes move once you check them?
Here is a fiddle: https://jsfiddle.net/Hodor_/vhhj7huv/
I have noticed that by changing content: "/2714"; to content: "";
the checkbox doesn't move on click.
Can't understand how the content affects the position of the checkbox.
In other questions I saw recommendations to use vertical-align:middle, it doesn't work for me.
Any ideas?
The issue is with your usage of display: flex in conjuncture with position: absolute. It doesn't always work well.
To fix this you need to make 3 simple changes:
1) Remove position: absolute from your label:before
2) Remove padding: 0 0 0 50px; from your label
3) Add a margin-right: 20px(or any you want) to the label:before.
Simple.. So your final code looks like - Fiddle here
label{
display: flex;
align-items: center;
font-size: 14px;
font-weight: 400;
line-height: 30px;
cursor:pointer;
color black;
}
label:before{
/* position:absolute; */
content:"";
display:flex;
justify-content: center;
align-items: center;
height: 30px;
width: 30px;
left: 25px;
text-align:center;
font-size: 20px;
color: white;
border: 1px solid #9b9b9b;
border-radius: 4px;
transition: all 0.5s ease;
margin-right: 20px;
}
Remember: flexbox allows you to have a "flexible" or flow like control over your elements, it gives a more flexible nature to your elements positioning elements on its own based on your requirements.
position: absolute on the other hand does the exact opposite. It takes the element out of the document and lets you place it where you want via directions(left, right, top, bottom), its more like a "rigid" or stubborn way of controlling your elements.
I used text-indent to hide the content, so basically the content is always there and the checkbox now is not moving.
Here the working fiddle.
My website gets completely messed up in < ie8. Specifically my header just disappears, any ideas?
header{
width: 100%;
height: 140px;
background: #FFFFFF;
margin: 0px;
float: left;
}
h1{
color: #FFFFFF;
font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif
}
.headerInner{
width: 96%;
height: 88%;
background: #00AA4F;
margin: 10px 2%;
text-align: center;
}
IE8 and older versions don't support HTML5, so it doesn't know about the existence of a header element, therefore it doesn't render it. You can use a div instead of the header element or you can add this script here, which adds HTML5 support for IE8: https://github.com/afarkas/html5shiv. But for IE7 and older I don't think it will help you. I you need to support IE7 and older don't use HTML5 elements.
I am trying to get my nav element to center but it won't work for the older versions of Internet Explorer or Chrome. It also won't change style. How can I get this to center and change? Here is the code:
The nav:
<nav id="Nav">
Library |
Contact |
About
</nav>
The CSS
#Nav {
margin:0 auto;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
There are many ways to centre elements:
Margin way:
With a set width or display: inline-block; you can use:
margin-left: auto;
margin-right: auto;
text-align way:
With a set width or display: inline-block; you can add this to the parent:
text-align: center;
Absolute way:
position: absolute;
left: 50%;
margin-left: width/2;
or
position: absolute;
left: 50%;
transform: translate(0, -50%);
Also don't worry too much about ie7 and below as the the majority of people use higher versions of ie or a different browser though this should work up until ie6
Another thing to watch out for is that you want to use a ul for your navbar. I know, from experience, that it works fine though if you ever want to add a drop-down to the navbar then it is much harder.
Use the below:
text-align: center;
instead of
margin 0 auto;
Sample Fiddle
Note: My assumption was that you did not want to specify a width. Otherwise, you can just use the margin as already stated in the other answers.
EDIT: To use the <nav> and other HTML5 tags with lower version of IE, you can use the HTML5shiv.js (by including the below script).
<script src='http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js' type='text/javascript'></script>
margin: 0 auto; has no meaning without specifying the width.
Since it is a block element it will spread 100% across the page, try giving it a width
#Nav {
display:Block;
width:500px;
margin:0 auto;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
Use:
#Nav
{
margin-left:auto;
margin-right:auto;
width: 12em;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
I have this CSS code:
#tweet-container{
width: 290px;
height: 272px;
border: 1px solid #CCC;
color: #CCC;
font-size: 28px;
text-align: center;
letter-spacing: -2px;
min-height: 10px;
display: table-cell;
vertical-align: middle;
padding: 15px;
}
But firefox doesn't seem to recognize the top and bottom padding. Safari and Chrome both show it normally, and even in Firebug when I add padding-top: it doesn't work. Its like its not a valid statement or something. Is there something I'm missing?
Humm, this is a bit interesting. You've set the width as 272px, but its actually displayed as 270px. You've set the height as 290px, with the 30px total of padding, the real displayed height should be 320px, but its actually 318px.
Had a little play and taking out display: table-cell; seems to sort the issue. Although the padding isn't spread equally for some reaosn, it all appears at the bottom. Putting the text in a p tag, and giving that a 15px top margin has done the job though I think.
did you try adding padding:15px!important; ?
I need to make following code stretchable with predefined height
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
But since span is inline element, "height" property won't work.
I tried using div instead, but it will expand up to the width of upper element. And the width should be flexible.
What's a good solution for this?
Give it a display:inline-block in CSS - that should let it do what you want.
In terms of compatibility: IE6/7 will work with this, as quirks mode suggests:
IE 6/7 accepts the value only on elements with a natural display: inline.
Use
.title{
display: inline-block;
height: 25px;
}
The only trick is browser support. Check if your list of supported browsers handles inline-block here.
this is to make display:inline-block work in all browsers:
Quirkly enough, in IE (6/7) , if you trigger hasLayout with "zoom:1" and then set the display to inline, it behaves as an inline block.
.inline-block {
display: inline-block;
zoom: 1;
*display: inline;
}
Assuming you don't want to make it a block element, then you might try:
.title {
display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
line-height: 2em; /* or */
padding-top: 1em;
padding-bottom: 1em;
}
But the easiest solution is to simply treat the .title as a block-level element, and using the appropriate heading tags <h1> through <h6>.
span { display: table-cell; height: (your-height + px); vertical-align: middle; }
For spans to work like a table-cell (or any other element, for that matter), height must be specified. I've given spans a height, and they work just fine--but you must add height to get them to do what you want.
Another option of course is to use Javascript (Jquery here):
$('.box1,.box2').each(function(){
$(this).height($(this).parent().height());
})
In some case you may want to adjust a SPAN height without changing display : inline.
To solve this, you can add a top and/or bottom border property, setting the required width parameter to your needs, and a transparent color to hide that border :
.myspan {
border-top : solid 3px transparent;
border-bottom : solid 3px transparent;
}
.my-span {
border: solid 1px;
border-color: gray;
border-radius: 6px;
padding-left: 5px;
padding-right: 5px;
height: 17px;
padding-top: 6px;
display: inline-block;
line-height: 0px;
}
Why do you need a span in this case? If you want to style the height could you just use a div? You might try a div with display: inline, although that might have the same issue since you'd in effect be doing the same thing as a span.