CODEWITHSUNDEEP
htmlcssinternet-explorer-8
rgin
rgin

Reputation: 2311

IE8 not rendering borders

I made a simple test page.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

    <div id='test'>
        BORDER TEST!
    </div>

</body>
</html>

CSS:

body,
html{
    margin:0;
    padding:0;
}
div#test{
    border:1px solid #bbb;
    height:200px;
    width:500px;
    margin:10px auto;
}

This doesn't work. And I've got this problem all over a site that I'm currently developing. Borders not rendering properly or simply just not showing up at all. This is happening on IE8, by the way.

A point in the right direction would be really nice.

PS: I've tried changing doctypes, but on my site other DTDs still don't fix the problem and, in fact, causes more.

Upvotes: 3

Views: 3332

Answers (2)

Pradip R.
Pradip R.

Reputation: 450

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style>
    body,
html{
    margin:0;
    padding:0;
}
div#test{
    border:1px solid #bbb;
    height:200px;
    width:500px;
    margin:10px auto;
}

</style>
</head>
<body>

    <div id='test'>
            BORDER TEST!
    </div>

</body>
</html>

This is my example. this should run.

Upvotes: 1

Pradip R.
Pradip R.

Reputation: 450

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

change your doctype to above one. i have verified with IE 7 To IE 9. So definately This will help you. :)

Upvotes: 1

Related Questions