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!
Related
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 {
...
}
I wrote a script that when certain buttons are clicked on the webpage, the entire page gets greyed out until the user clicks either 'yes' or 'no'. This seemed simple enough, but I'm running into conflicts with the menus that I am using from Superfish. The menus are still able to be accessed when the rest of the page is greyed out.
I troubleshot it down to the fact that the superfish css scripts use a series of
Position: relative
or
Position: absolute
So I figured that I will need to either figure out why my grey covering box isn't working or hard code locations for my navbar into the source. My concern is that if I do that, then won't the setup be only to my resolution?
Is there something that I missed on my grey box coding that would make this happen?
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
I don't have much experience with css. I looked for a few hours for a solution yesterday, but couldn't find anything related to the problem I am experiencing.
Thanks.
You need to set menu block z-index lower then overlay block z-index.
.someClass
{
position: relative;
z-index: 2;
}
I ran into problems trying to use the setting below.
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
z-index:100
}
I figured out that z-index has to be set immediately after position is declared, or else it won't work at all.
#cover {
display:none;
position:absolute;
z-index:100
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
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.
I don't know why this is happening.
I have this code here.
It works fine but "sometimes" (and many times in a row) for no apparent reason, this happens:
To all the .box class.
Sorry I have to share "all" my code but I have no idea why this is.
This is what it should look like:
I don't know if this is usual but id you want, you can download the two files from here (HTML and CSS + Images) because in jsfiddle seems to work all of the times,
I don't know whether it matters or not but I'm using chrome (latest) on a mac.
EDIT: I seems to work fine in safari every time.
Thanks in advance!! Please ask for any clarification needed!
By the way my title is absolutely horrible, sorry! but I have no idea what the problem is so I can't really describe it, feel free to edit or comment any suggestion.
On your style.css
Remove overflow:hidden on #container
Set overflow:hidden to the .box
Set float:left to the .box img
Set float:right to the .follow
new
#container {
height:100%;
width:520px;
position:relative;
left:50%;
margin:20px 0 0 -250px;
}
.box {
border:1px solid gray;
height:200px;
width:500px;
float:left;
margin:0px 0 20px 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
overflow:hidden;
}
.box img {
width:140px;
height:140px;
margin: 15px 0 0 15px;
float:left;
}
.follow {
/*outline:1px solid red;*/
height:80px;
width:260px;
float:right;
margin:25px 30px 0 0;
}
To make your css cleaner, when you state styles for .box:hover, you don't need to redeclare things that already apply to .box. All .box styles are inherited by .box:hover . (Example, how you have float:left on both).
That being said, this is almost certainly a float issue. Adjust both the float and clear properties of the two inner divs, the outer div, and the img to see if you learn anything from that. It's difficult to give help when the problem doesn't occur in the fiddle.