Horizontal scrollbars in IE 6 (with no FRAMESETs)

F

forms

Why does this code produce a horizontal scrollbar in IE 6 for Windows?

Is it related to the DOCTYPE? We want standards compliance in our
code, so we'd like to keep it.

The border is for debugging purposes.

<!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>Untitled</title>
<style type="text/css">
.testClass {
width: 100%;
border: 1px solid red;
}
</style>
</head>

<body>

<div class="testClass"></div>


</body>
</html>
 
G

Guest

Why does this code produce a horizontal scrollbar in IE 6 for Windows?
- The border exceeds the width of the viewport. (100%+border)

Is it related to the DOCTYPE? We want standards compliance in our
code, so we'd like to keep it.
- Yes. the !DOCTYPE declaration will change the behavior.

- Similar behavior is seen with other browsers.

- Possible Solution: Add a negative margin with relative positioning.
<style type="text/css">
.testClass {
width: 100%;
border: 1px solid red;
margin: -1px;
position: relative;
}

</style>

- This solution seems to be consistent among the most commonly used browsers.

Hope this helps.

Alex Scott [MSFT]

This posting is provided "AS IS" with no warranties, and confers no rights.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top