Basically the title says it all. I have this code:
<html>
<head>
<style>
body
{
-webkit-perspective: 500px;
perspective: 500px;
}
#mydiv
{
transform:rotateY(45deg);
-webkit-transform:rotateY(45deg);
-o-transform:rotateY(45deg);
position:absolute;
left: 50%;
top: 50%;
width:720px;
height:360px;
margin:-180px 0px 0px -360px;
background-color:#000000;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="mydiv">
this is my div.
</div>
</body>
</html>
Now this works fine in Chrome and IE. I have problems with this in Firefox. The div is rotated, but not as it is in Chrome and IE. Does anyone know the cause of this, and how to solve the problem? adding -moz-perspective doesn't work either.
Firefox appears to render the line top: 50% differently than the other browsers. The rotation is processed the same way, but since the top line is visible in FF, it looks like a different transform. Removing top:50% from the CSS in my fork of Oriol's fiddle caused the same appearance on FF28, IE11, and Chrome 34.
Related
I have a div with a background-color, and a 3 pixel white border.
When I set the html element to direction:rtl and overflow-y: scroll, I get a pixel of the background to the right of the border - only in IE9:
I'm pasting my code here, because on JsFiddle I can't replicate the bug.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html {
overflow-y: scroll;
direction:rtl;
}
.main {
margin: 0 auto;
width: 960px;
}
.sld-menu-item {
height: 85px;
border: 3px solid #fff;
background-color: #d25188;
}
</style>
</head>
<body>
<div class="main" role="main">
<div class="sld-menu-item sld-menu-item-2">
</div>
</div>
</body>
Has anyone run into this problem, and/or can someone suggest a solution? I can't give up the scroll and rtl rules...
I was only able to fix it by setting overflow: hidden on containing element and doing a negative margin hack:
.main {
overflow: hidden;
}
.sld-menu-item {
margin-right: -1px;
}
You might also want to set width of sld-menu-item to 961px then. Can probably put this in an IE9 conditional statement. I hope there's a better way of solving this though.
I banged my head against the wall for several hours, at the end I solved it in a very strange way...
Change the width of .main to 961px, it seems that Microsoft does not know how to find the "middle" of an even range.
I'm trying to accomplish something like this with CSS3:
Where the purple circle is the image and the less purple thing is the div background.
My first guess was negative padding but a quick search told me this isn't allowed. Normal overflow doesn't work because I want it to start above background as well as end below it. I'm pretty new to CSS so I don't really know how this might be done.
Use relative positioning, top, and possibly left.
position: relative;
top: -25px;
left: -15px;
Relative Positioning was defined in CSS 2.0. Which means no CSS3 required and it will work on almost every browser, including mobile.
You will also have to set the height and top margin for the div.
Here is my test file and output.
<html>
<head>
<style type="text/css">
.purpleRectangle{
background: #b93b8f;
height: 200px;
margin-top: 30px;
}
img{
position: relative;
top: -25px;
left: 15px;
}
</style>
</head>
<body>
<div class="purpleRectangle">
<img src="circle.png" />
</div>
</body>
</html>
I have a site that has the following structure:
<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
<div id="footer"></div>
</div>
Now I have set html, body and page_wrapper to 100% in CSS. The goal here is to get the footer to be at either the bottom of the content or the bottom of the window -- whichever is visually lower. I've read a lot of things about how to do it, but I can't seem to get it to work correctly.
html, body, #page_wrapper { height: 100%; }
#page_wrapper {
width: 864px;
margin: 0 auto;
min-height: 100%;
background: url('path/to/image') repeat-y;
}
#content-wrapper {
position: relative;
width: 824px;
min-height: 100%;
margin: 0 auto;
}
#footer, #header {width: 824px; margin: 0 auto; }
#footer {
border-top: 4px solid #000;
position: relative;
margin-top: -7.5em;
}
It sorta seems to work. But problem I am seeing is, that if I zoom out my page_wrapper seems to almost reset its height to 100% but as I zoom in, it gets shorter and shorter and shorter causing overlap in the footer and content text instead of pushing the footer down.
Any idea how to repair something like that? I'm at my wits end with it trying to google up an answer...
Updated my answer with a test html, works quite fine in chrome 13. I tried zooming in and out and the footer stays put.
You should put your footer outside of the page-wrapper. Then give it a negative margin equal to the height of the footer. You can change the height of either the header or the content-wrapper to see the footer stick to the bottom of the page-wrapper instead of the browser window. If you open the html as is you will see the blue footer sticking to the bottom of the page and the page-wrapper taking up 100% of the window.
Please note that this is broken without a fix in Firefox 4 and 5. Also it doesnt work in IE 5.5 and earlier.
To make this work properly in IE6 add height: 100%; to #page_wrapper
<html>
<head>
<style type="text/css">
body, html {height: 100%;margin:0;padding:0;}
#page_wrapper {min-height: 100%; background-color: red;}
#header{height: 200px; background-color: green;}
#content-wrapper{height: 200px; background-color: yellow;}
#footer {height: 7.5em;margin-top: -7.5em; background-color: blue; position:relative;}
</style>
</head>
<body>
<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
</div>
<div id="footer"></div>
</body>
<html>
live example of this can be found on:
https://www.effacts.com/effacts/public?context=107
a proper sheet and html can be found here:
http://www.cssstickyfooter.com/
Does this help:
css sticky footer in an asp.net page
absolute position the footer div...
In #footer css try adding clear:both;
or
add in footer CSS right after position: relative; bottom:5px;
With position: relative you can actually use, top, right, bottom and left.
If you always want it at bottom you can put in as bottom:5px; If you want it at the bottom center then you can put in bottom: 5px; and right or left ...
5px above is just an example you can change pixel to as many as you want.
Furthermore, you can also have clear:both with it there as that clear make sure there is no other content that would override it.
everything works fine in chrome, firefox, etc, even in ie (using pie), but in opera it's not working at all. comarison between opera and chrome: http://dl.dropbox.com/u/5011224/opera-chrome.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
background: #1C1C1C;
}
div {
margin: 50px auto;
width: 200px;
height: 200px;
}
.test {
background: #fff;
-webkit-border-radius: 20px;
-khtml-border-radiust: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="test"></div>
<div><img class="test" src="lena.jpg" width="200" height="200"/></div>
</body>
</html>
Which version of Firefox are you testing with? This is a leading question, because I suspect you're using FF4, because Firefox 3 had the same problem that you're reporting here with Opera.
The problem is that the image in the <img> tag is being rendered in front of the element's border. This means that although it is doing the rounded corners, you're not seeing them because the image is in front of them.
If you specify border: solid black 1px; as well, you'll get a better visual clue as to what's happening because the border will visibly disappear behind the image at the points where the rounded corners begin.
There isn't a direct fix for this, but there are a couple of work-arounds:
Use a wrapper <div> element around the <img>, and put the rounded corners on the <div> instead.
Display the image as a background-image instead of a foreground one.
Hope that helps.
It seems like overkill, but have you tried rounding the image's container div and setting it to overflow: hidden? (I don't have Opera, or I'd test it myself)
I'm trying to put a footer bar at the bottom of the browser no matter what the length of the content is. The footer bar should always be visible to the user and should be on the top layer. Following is my code:
<html>
<head>
<style type="text/css">
#wrapper {
width: 910px;
margin: 0 auto;
padding: 0px 20px 50px 20px;
text-align: left;
}
#footer-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
bottom:0;
clear:both;
font-size:11px !important;
left:0;
position:fixed;
white-space:nowrap;
width:100%;
z-index:8000;
}
</style>
<script>
var counter = 0;
function addContent(ctr)
{
document.getElementById(ctr).innerHTML=document.getElementById
(ctr).innerHTML+"
dynaContent"+counter; counter++;
}
</script>
</head>
<body>
<div>
<div><input type="button" onclick="addContent('wrapper')" value="Add dynaContent" /></div>
<div id="wrapper" style="color:#FFFFFF; background-color: #111111;"> STATIC TEXT - HEADER-WRAPPER </div>
<div style="color:#FFFFFF;background-color: #555555;">STATIC TEXT - FOOTER-WRAPPER</div>
</div>
</body>
</html>
It's working fine in Mozilla Firefox and giving the intended results, but, in IE, the footer bar always sticks just under the header.
Please help.
Thanks in advance,
Shailesh.
First of all, your footer wrapper is missing the id attribute: <div id="footer-wrapper" ...>
Then it depends on which version of IE you're using:
It won't work with IE6 at all (doesn't understand position: fixed)
For IE7 and IE8, position: fixed works only, if you put it in standards mode. The easiest way to do this, is to
insert <!doctype html> as the first line (it must be the very first line, no comments or anything in front of it)
There are, however, other techniques to create a footer, see e.g. How do you get the footer to stay at the bottom of a Web page?