Hi there everyone.
Today, I`m gonna show you how you can make your page, which have a fixed width, to be centered properly in Internet Explorer too, with simple CSS tricks.
Lets just make a dummy page with a background so we can see what we are actually doing...
Here is a simple HTML page:
What do we have here?
Nothing much... Just a title for the page and a simple text.
Note that we need a "wrapper" to make this work. In our case, it is named "pagewrap".
We need to add the CSS for the elements too:
What do we have in the CSS?
We are using only 2 id`s now. One for the text and one to wrap the page to the center.
Add this CSS to the HTML from above and see it in any other browser than IE. You will see that it is displaying in the center of the browser.
Now try viewing it in Internet Explorer... Right. It`s stuck on the left side. Why? Because IE is not using the "margin: 0px auto;" due to its poor CSS support. However, with only 2 extra line in our CSS, we can make it centering properly in IE too...
What did we do?
We added a line to the "html, body". That line is "text-align: center;". Yes, that makes the page to appear in the center of IE. But it also makes everything inside the page (text, piture, etc.) to be centered. How to fix that?
We add another line to our "pagewrap", which is "text-align: left;". That line basically reverse the centering but only inside the wrapper (and that`s exactly what we need).
And that`s it. Try viewing it in IE and see for yourself. It is centered.
If you have any further question about this, feel free to ask me.
Today, I`m gonna show you how you can make your page, which have a fixed width, to be centered properly in Internet Explorer too, with simple CSS tricks.
Lets just make a dummy page with a background so we can see what we are actually doing...
Here is a simple HTML page:
Code:
<html>
<head>
<title>Centering in IE</title>
</head>
<body>
<div id="pagewrap">
<div id="bigtext">
<b>Welcome!</b><br>
<font size="2"><b><br>In this tutorial, you will learn how to make your page centered in IE, with simple CSS. </b></font>
</div>
</div>
</body>
</html>Nothing much... Just a title for the page and a simple text.
Note that we need a "wrapper" to make this work. In our case, it is named "pagewrap".
We need to add the CSS for the elements too:
Code:
#pagewrap {
margin: 0px auto;
width: 754px;
position: relative;
}
#bigtext {
visibility: visible;
position: absolute;
left: 30px;
top: 260px;
z-index: 4;
width: 700px;
height: 150px;
padding: 15px;
color: black;
font-size: 140%;
background-color: grey;
}
html, body {
background-color: black;
}We are using only 2 id`s now. One for the text and one to wrap the page to the center.
Add this CSS to the HTML from above and see it in any other browser than IE. You will see that it is displaying in the center of the browser.
Now try viewing it in Internet Explorer... Right. It`s stuck on the left side. Why? Because IE is not using the "margin: 0px auto;" due to its poor CSS support. However, with only 2 extra line in our CSS, we can make it centering properly in IE too...
Code:
#pagewrap {
margin: 0px auto;
width: 754px;
position: relative;
text-align: left;
}
#bigtext {
visibility: visible;
position: absolute;
left: 30px;
top: 260px;
z-index: 4;
width: 700px;
height: 150px;
padding: 15px;
color: black;
font-size: 140%;
background-color: grey;
}
html, body {
background-color: black;
text-align: center;
}We added a line to the "html, body". That line is "text-align: center;". Yes, that makes the page to appear in the center of IE. But it also makes everything inside the page (text, piture, etc.) to be centered. How to fix that?
We add another line to our "pagewrap", which is "text-align: left;". That line basically reverse the centering but only inside the wrapper (and that`s exactly what we need).
And that`s it. Try viewing it in IE and see for yourself. It is centered.
If you have any further question about this, feel free to ask me.
