Browser compatibility issues with “old” css and HTML5
Question
i hope my second posting is ontopic. My HTML and CSS skills are hardly existent, so i tried to improve my skills a bit with a error page i made - or better said, i tried to make...
With up to date browsers, there are no problems. Issues starting with older browsers like Internet Explorer 8. I guess i have to include Conditional Comments for it? But i don't know what i have exactly to change only for this version of IE.
In IE8 it looks like the half of the border and height of the div container was cut out. My page looks like this:
<!DOCTYPE html>
<html lang="de-DE" dir="ltr">
<head>
<title>An error occured</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<style>
* {
margin: 0;
padding: 0;
}
html, body {
background: white;
color: black;
}
#box {
border: 1px solid red;
position: absolute;
width: 250px;
height: 42px;
top: 50%;
left: 50%;
margin-top: -21px;
margin-left: -125px;
}
#box p {
font-family: Montserrat;
font-size: 2em;
font-weight: 400;
color: #202020;
}
</style>
</head>
<body>
<div id="box">
<p>Page not found</p>
</div>
</body>
</html>
My problem: I want later extending this error page with an image or sort of. But for this the div container has to be fixed, that i can be sure that is everytime shown correct, even with Smartphone. So i want to include a viewport for this, too. But one step after step. ;)
Would appreciate your help/support! :-) Thank you.
1 answers
solution1
0 ACCPTED 2015-12-19 02:21:27
your problem are probably the negative margin values for #box in this rule:
#box {
border: 1px solid red;
position: absolute;
width: 250px;
height: 42px;
top: 50%;
left: 50%;
margin-top: -21px;
margin-left: -125px;
}
Why don't you just try it with more conventional settings instead? One thing that already does half of the job is to use margin: 0 auto; (without position: absolute; ) to center your div horizontally:
#box {
position: relative;
top: 45%;
width: 250px;
height: 42px;
margin 0 auto;
border: 1px solid red;
}
The top: 45% puts the div (which is only 42px high) approximately into the vertical middle. If you later add an image, you can adjust this setting. The additional requirement (for the horizontal alignment to work) is that the surrounding container (in this case <body> ) gets position: relative; :
body {
position: relative;
}
and also add this in order for the percentage height to have a height reference:
html, body {
height: 100%;
}
These settings work on the oldest of old browsers, and on the new ones too...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.