I use this code to center absolutely positioned div
.class{
width: 10px;
height:10px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto
}
This is not working in IE 10 and lower versions, but I dont want to change this code as it's comfortable for all other browsers and devices.
I know that Conditional comments are not working in IE 10 too, so how can I solve this issue there?
You have besides those options mentioned above:
Calculated Padding + Width:
.container {
padding:5%;
}
.container .center{
width:90%;
height:90%;
display:block;
}
Or if you only need it to be horizontally centered:
.centered {
width:80%;
margin:0 auto;
}
But if you still aren't getting any results to work, then you may have malformed HTML. When internet explorer finds bad HTML or a meta tag expressing a specific version to emulate, it will and then newer features don't work. I recreated your style on JSFIDDLE and it worked for me even on internet explorer 8 (Although 7 did fail). Otherwise you may not be putting a position value on the CSS of the parent element if it is apearing out of place.
You should detect by JavaScript if the browser is IE10. If it is you can add a special class in the page body or in any html element you want.
JS
if (navigator.userAgent.indexOf("MSIE 10") > -1) {
document.body.classList.add("ie10");
}
CSS
.ie10 {
...
}
Related
I don't know how to ask/write this, so feel free to update the name or point me to the correct question/title.
I am designing a cross html5-css3 site, and trying to make it look the same for every (common) browser.
This is what I have:
http://www.pojotlan.com/example1/
It works fine with Firefox 14.0.1, Chrome 21.0.1180.6 and Safari 5.1.7, this, with (file:estilo.css) #contenido line height is used to make it fit in Safari and Chrome.
this is the short version of the included 3 css files...
html {height:100%;}
body {height:100%;}
div#Tabla {display:table; height:100%;}
div.row.main {display:table-row-group; height:auto; min-height:100%;}
div#main {display: table-cell; position: relative; height:auto; min-height:100%;}
div#contenido {display:inline-block; position: relative;
height:100%; min-height:100%; line-height:100%;}
section {height:auto; min-height:100%;}
if I change its position to absolute, i got the same look on Chrome 21.0.1180.6 and Safari 5.1.7, Opera 12.
as you can see, #contenedor wont fit 100% height on Opera and IE. How can I fix this?
I'm really new to css styling and stuff, so I don't get what is wrong.
Thank you in advance :)
ps. yes, maybe I am messing everything with css display:table and stuff, but thats where google sent me... haha xD so, yes, you can basically tell me to start again without tables. (I am trying that already, with less results.)
I couldn't make it as I were, so this is what I did.
CSS File:
body, html {border: 0px; margin: 0px; padding: 0px;
height:100%; position:relative; width:100%;}
#head
{
position:absolute;
background-color: #98a;
height: 100px;
width:100%;
top:0px;
}
#footer
{
position:absolute;
background-color: #e46;
width:100%;
height:20px;
bottom:0px;
}
#content
{
position:absolute;
background-color: #dee;
height:auto;
top:100px;
bottom:20px;
width:100%;
}
body:
<body>
<div id="head">#head</div>
<div id="footer">#footer</div>
<div id="content">#content</div>
</body>
The important part, was that content is absolute, and top/bottom.
so, this is all.
thank you :D
You may try to use the min-height IE hack :
body, html {
min-height:100%;
height:auto !important;
height:100%;
}
Hope this helps!
I have made 3 screenshots to explain it, please see all 3 and then click on my last link:
As you can see, Chrome is pushing element #4 (class=".newsline2") down.
Firefox & IE9 display this flawlessly.
How can I fix this issue?
Try adding this:
.newsline2 { position: absolute; right:0; top:0; }
instead of float:right that you're currently using.
When the element is absolute it needs proper width and height along with top-bottom-left-right positions. Add height: 16px instead of auto. It will work in Chrome too.
Add height to CSS rule ".contentContainer h2" as follows
.contentContainer h2 {
height: 16px;
...
...
}
Ok, so this is a problem that has been nagging me for a while and I've seen a few good and bad solutions to it. But what is the best solution, and what is the pitfalls, drawbacks and big "No, Nos".
What I want is to create dynamic, flexible DIV-blocks with a custom graphical border. For example a DIV-box with shadows, but not necessarily shadows.
UPDATED:
As, #Jeroen stated bellow in a comment, I am not only asking for "the best way to make shadows". Any crazy custom graphical border.
I know there are some solutions with CSS3 (box-shadow, border-image and border-radius), but it is not 100% cross-browser, specially not if you have to work with one or two versions old browsers.
Example image of what i want to achieve:
or
The example above is actually done with one method I use frequently. It does the job and it does meet all the requirements.
It adapts to different sized DIV-blocks.
It uses custom graphics.
It works cross-browser and versions.
It is pretty easy and fast to apply.
It is JavaScript free, 100% CSS/HTML.
...but of course there are a few cons:
It requires 8 images.
It requires 8 extra DIV-blocks with no real content.
Not very pretty in the source.
HTML DIV-block example:
<div class="flowBox">
<h1>Header 1</h1>
Vivamus tincidun...
<div class="border_t"></div>
<div class="border_b"></div>
<div class="border_l"></div>
<div class="border_r"></div>
<div class="border_br"></div>
<div class="border_bl"></div>
<div class="border_tr"></div>
<div class="border_tl"></div>
</div>
CSS example:
<style type="text/css">
<!--
.flowBox {
background:#FFFFFF;
margin:10px;
float:left;
padding:10px;
width:250px;
position:relative;
}
.border_t {
background:url(border_t.png) repeat-x;
position:absolute;
top:-2px; left:0;
width:100%;
height:2px;
}
.border_b {
background:url(border_b.png) repeat-x;
position:absolute;
bottom:-6px; left:0;
width:100%;
height:6px;
}
.border_l {
background:url(border_l.png) repeat-y;
position:absolute;
top:0; left:-3px;
width:3px;
height:100%;
}
.border_r {
background:url(border_r.png) repeat-y;
position:absolute;
top:0; right:-6px;
width:6px;
height:100%;
}
.border_br {
background:url(border_br.png);
position:absolute;
bottom:-6px; right:-6px;
width:6px;
height:6px;
}
.border_bl {
background:url(border_bl.png);
position:absolute;
bottom:-6px; left:-3px;
width:3px;
height:6px;
}
.border_tr {
background:url(border_tr.png);
position:absolute;
top:-2px; right:-5px;
width:5px;
height:2px;
}
.border_tl {
background:url(border_tl.png);
position:absolute;
top:-2px; left:-2px;
width:2px;
height:2px;
}
-->
</style>
As you can see, it perhaps isn't an optimal solution.
But is there a better way?
UPDATED: There is support for shadows in most browsers and versions, even if it is not one standard. Source using css-shadow: http://pastebin.com/LZHUQRW9
But my question relates not only to shadows.
Full source code: http://pastebin.com/wxFS2PHr
Have a look at http://css3pie.com
This will allow you to use CSS 3 elements in older browsers and should hopefully help to keep your markup cleaner.
You could also include some additional logic which will use CSS 3 for browsers that support it, and revert back to the CSS Pie functionality for other browsers.
You could try something like this: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
I think there are many more libraries - JavaScript, .htc things, whatever... - to achieve the same.
Edit: I think you won't get around using 8 different pictures. But you could write a javascript that adds the required DIVs on the fly e.g. for each DIV with class border.
That would clean up your HTML markup - but the DOM remains complex..
Perhaps this article on css-tricks using border-image is what you're looking for? The interactive demo it links to seems to do what you ask for.
Of course this solution is only available in browsers that support css3 border-image. The demo above did work for me in FF and Chrome, but not in IE9. According to the Modernizr documentation it can be used to add support for border-image, but I haven't tried that for myself. Should that work then this would give you a relatively clean solution.
css:
* {
margin:0;
padding:0;
}
.blue-button
{
width:auto;
display:inline-block;
}
.blue-button:before
{
/*background-image:url('blue-button.gif');*/
background:red;
width:5px;
height:21px;
display:block;
content:"\00a0";";
float:left;
}
.blue-button span
{
background:#00AEEF;
display:block;
height:100%;
text-align:center;
margin-left:5px;
padding:3px;
padding-left:8px;
padding-right:8px;
color:white;
}
body:
<div class="blue-button"><span>abcdef</span></div>
So basicly this is just a div with prepended div using before. I want span inside .blue-button to resize to the text. It works fine on Chrome but fails on IE/FF - in those browsers blue div is in the next row (it should be in the same row as red div). How I can fix it?
This is a problem due to IE being unable to recognize the attribute
display: inline-block;
IE explorer will display it inline, and to achieve the desired effect you need to give the content 'Layout' using
zoom: 1;
or similar.
This article was helpful to me, check it out to fully understand what I'm trying to say!
http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html
I just set up a jsfiddle with your code, and FF puts the red and blue parts on differnt rows too. There's an error in your CSS which, when I fixed it, fixed FF and also ran fine in IE8. Which version of IE are you having trouble with?
content:"\00a0";";
should be
content:"\00a0";
Can you confirm that this is just a typo, or does it fix it for you too?
I have created a stack of div tags and used z-indexes to make them appear behind each other.
They overlap enough for them all to be visible and mouse-overable. I then assigned a :hover to change the z-index and make the div tag which is being hovered over come to the top of the pile.
An example of what I have would be...
CSS
#red-box {
position:fixed;
width:170px;
height:210px;
margin-left:70px;
top:40px;
background-color:red;
z-index:3;
}
#red-box:hover {
z-index:5;
}
#blue-box{
position:fixed;
width:170px;
height:210px;
margin-left:150px;
top:70px;
background-color:blue;
z-index:2;
}
#blue-box:hover{
z-index:5;
}
HTML
<a id="red-box"></a>
<a id="blue-box"></a>
I have also created a jsFiddle to help highlight what's going on.
This works great in the latest versions of all the browsers but the div tags' z-indexes do not change in IE8.
Could anyone help me fix it?
This ought to fix it:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Basically, just set it to a ridiculously high number.
Edit: I just tested this in my version of IE on your JSFiddle, and it worked.