I can't seem to center my navigation or footer in IE8.
I had to float my navigation just to get the dimensions to show correctly in IE8.
I'm using divs for the footer and nav because I know this language isn't going to be translated in IE8 and I'm still having issues. Below is the CSS that I am using for my footer, which works fine in Firefox and Safari. Also, I need this to be stationary so it somehow needs to involve margin: 0 auto; my issue can be viewed at http:www.vslateart.com/index.html (homepage alignment)
.footer {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
Is there any sort of workaround so that this can translate to IE8?
Similar question: Using "margin: 0 auto;" in Internet Explorer 8
Your code looks perfectly valid.
Are you missing a doc type at the top of your page? Without the DOCTYPE, IE automatically goes into Quirks rendering mode.
<!DOCTYPE html>
Failing that - have you set the width of your parent to be greater than the width of .footer?
this code center a div to center (fiddle):
.footer {
display: block;
margin: 0 auto;
width: 200px;
}
I think you want to do this
.footer{
position: absolute;
display:block;
width: 200px;
margin-left: -100px;
left: 50%;
}
This should do the trick!
margin-left shoud be negativ and the width/2
so margin-left = (-1)*(width/2)
The position could be relative(may work better)
EDIT
I use this code to center my homepage
position: absolute;
width: 1000px;
min-height: 100%;
margin-left: -500px;
left: 50%;
This will make then window center until the window is 999px wide then it will missmatch.
Then use something like this
#media only screen and (min-width: 1000px){
div.screen-size-wrapper{
position: absolute;
width: 1000px;
min-height: 100%;
margin-left: -500px;
left: 50%;
}
}
#media only screen and (max-width: 999px){
div.screen-size-wrapper{
width: 100%;
min-height: 100%;
}
}
Tell me if this dosen't work :)
EDIT - This works for your webpage (i tried it)
Paste this in you container css
margin-right: auto;
width: 1200px;
margin-left: -600px;
left: 50%;
position: absolute;
Related
I'm fairly new to CSS and having trouble with scaling a picture.
I have a series of images (that I do not control) that are part of a slide show. Up until now, the images I received were all of a fairly standard size. I used a style on the image element to size these to 85% of the visible window's height.
.image{
top: 5vh;
height: 85vh;
width: auto;
margin: auto;
position: absolute;
left: 10px;
right: 10px;}
This is inside a div that just has:
margin-left: auto;
margin-right: auto;
this has worked fine. The problem is that I just received an image that is quite wide, causing it to overlap content that sits left and right of the image. I tried putting a max-width on the image style
max-width:85vw;
However, that caused the image to distort.
Is there a way that I can implement the following? "Size the picture at 85% of the height of the viewport but do not exceed 85% of either dimension and don't distort the picture."
Edit
As I noted below, hiding the overflow didn't appeal to me. I eventually got what I wanted with the following modifications to the code above.
.container
{
margin-left: auto;
margin-right: auto;
}
.image
{
top: 5vh;
max-height: 85vh; /* this */
max-width: 85vw; /* and this */
width: auto;
margin: auto;
position: absolute;
left: 10px;
right: 10px;
}
At this website, i make a full screen slider.
Website link
It works well on Chrome and IE, but on firefox, it shows only 50% of the screen.
This is the code i used:
.q_slider {
width: 100%;
overflow: hidden;
position: relative;
z-index: 10;
}
.carousel-inner .slider_content_outer {
position: relative;
height: 100%;
width: 1100px;
margin: 0 auto;
z-index: 12;
}
Did i do something wrong?
I think if you remove the following negative margin top values it will work...
I have found this vertical centring method which seems pretty common..
#container {
width: 960px;
height: 740px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -480px;
margin-top: -370px;
}
What I'm trying to center here is the entire site, and this code goes perfectly as expected when the screen preview is larger than the div height (larger than 740px). However, Once the browser window is minimized less than div's vertical size (740px) parts of the header disappear above the top of the page.
I can sort of understand why this is happening seeing that 50% becomes less than half the div's size which will be equalized with margin-top.
What I'm looking for is a fix for this issue? Or even a completely different method, I just need to center the site both vertically and horizontally.
try this:
#container {
height: 740px;
width: 960px;
position: absolute;
margin: auto;
top: 0; right: 0; bottom: 0; left: 0;
}
By the way, Smashing Magazine recently published a nice article about this.
You need to add a media query:
#media screen and (min-height:740px) {
#container {
top:0;
margin-top:0;
}
}
This will only apply the formatting where the screen is at least 740px tall. If you want to learn more about media queries, check http://www.w3.org/TR/css3-mediaqueries/
Absolute Centering like Lino Rosa mentioned is the best approach here for easy horizontal and vertical centering while allowing you to add some responsive touches, like fixing your height issue.
Ideally, you should be using percentages for the width and height declarations so that your content will vary with the viewport. Of course, sometimes you just need pixels :-)
Here's what I've done:
.Absolute-Center {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
#container {
width: 960px;
max-width: 90%;
height: 740px;
max-height: 90%;
overflow: auto;
}
By setting a max-height and max-width, the box will never be more than 90% of the container (in this case, the browser viewport) even if it's less than 960px wide or 740px tall, so even small screens see a nice centered box. overflow: auto ensures that if the content is longer than the box, the user can scroll in the box to see the rest.
View the demo
If you must have the box exactly 960px by 740px no matter the screen size (forcing the user to scroll around to see all of the content on a small window), then only apply the Absolute Centering styles to #container using a media query, like so:
#container {
width: 960px;
height: 740px;
overflow: auto;
margin: auto;
}
#media screen and (min-height:740px) and (min-width: 960px) {
#container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
}
View the demo
I encountered the same issue. As the height of my element is dynamically changed, I can't give it a fixed height.
Here is a demo below, hope it helps.
.wrapper {
display: table;
height: 100vh;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
background-color: lightblue;
}
.content {
width: 30%;
height: 30%;
background-color: red;
}
<html>
</html>
<body>
<div class="wrapper">
<div id="container">
<div class="content">
</div>
</div>
</div>
</body>
I have been building a website and mainly testing it in Chrome.
Recently I realised some of the CSS does not apply in Firefox.
I guess it's probably : main { min-height }
This jFiddle reproduces this error, where the main div doesn't have the height it's supposed to. http://jsfiddle.net/msW9m/
HTML :
<div id='main'></div>
<div id="container"></div>
<div id='footer'>
<div id='footerRelative'>Development by <a href='mailto:'>John Doe</a></div>
</div>
CSS :
#main {
min-height: 80%;
height: auto;
border: 1px solid #bbbbbb;
margin: 3% 5% 1%;
padding: 10px 10px;
}
#footer {
position: absolute;
left: 50%;
}
#footerRelative {
position: relative;
left: -50%;
font-size: 80%;
}
/*Probably Irrelevant*/
#container {
margin: 0 auto;
margin-top: -300px;
margin-left: -261px;
position: absolute;
top: 50%;
left: 50%;
width: 523px;
height: 600px;
background-image: url('../images/doctorSymbol.jpg');
background-repeat:no-repeat;
background-position:center;
opacity: 0.125;
overflow: hidden;
z-index: -1;
}
However, in Chrome everything works perfectly and the main div has a min-height of 80% . I was wondering if there is a workaround to this or If I am doing something wrong.
Thank you.
Have you tried making body and html 100%?
In some browsers, the body element doesn't keep 100% height until its content is full.
http://jsfiddle.net/HRKRN/
html, body {
height: 100%;
}
Also a possible solution that worked for me: set the div's display to table-cell.
use CSS3 to solve this issue
http://pastebin.com/Q8727Kvt
Align vertically using CSS 3
Why does this not work? It aligns horizontally correct, but not vertically in Opera. In IE it dosent work at all.
http://img834.imageshack.us/img834/340/86238198.png
#footer
{
position: absolute;
top: 905px;
width: 100%;
min-width: 800px;
height: 95px;
margin: 0px;
background-image: url('footerbg.png');
}
#center
{
position: relative;
width: 20%;
height: 70%;
margin: auto;
background-color: red;
}
In Transitional (quirks mode), IE maintains the behavior of its older browsers, so as to not break pre-existing websites that were constructed to look ok in IE 5. So in IE 6 and up, if you do not define a Strict doctype, then it will resort to its old incorrect behavior of not honoring margin:auto.