Menu
Hi my code works correctly in Firefox, but in IE I'm getting the default vertical scrollbar. When I minimize the page I get the vertical and horizontal scrollbars I want, but in IE I get an additional vertical scrollbar. How can I get rid of it just in IE? I am using a CSS Reset. Here is my CSS:
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
outline:0;
/*font:inherit;*/
font-size:100%;
vertical-align:baseline;
text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1;
}
ol,ul{
/*list-style:none;*/
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:’’;
content:none;
}
/* remember to define visible focus styles!
:focus{
outline:?????;
} */
/* remember to highlight inserts somehow! */
ins{
text-decoration:none;
}
del{
text-decoration:line-through;
}
table{
border-collapse:collapse;
border-spacing:0;
}
/*CUSTOM*/
a {
/*color:#365C8C;*/
}
a:hover {
text-decoration:underline;
/*color:#365C8C;*/
}
p {
font:.85em arial,regular;
}
ul {
font:.85em arial,regular;
}
.bar {
background-color:#365C8C;
height:30px;
width:100%;
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
/*overflow-x:hidden;*/
min-width:1225px;
}
body {
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
overflow:auto;
height:100%;
width:100%;
background-color:#ADCCEB;
/*background-color:black;*/
/*background: url(background.png);*
/*background-size:100%;*/
}
.bold {
font-weight:bold;
}
.contentcontainer {
width:825px;
height:910px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
.extcontentcontainer {
width:825px;
height:645px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
img.fullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
min-width:1225px;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
img.extfullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
min-width:1225px;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
And here is some of the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pathfinder Outage Page</title>
<link rel="stylesheet" href="boilerplate.css">
</head>
<body class="fullbackground">
<img class="fullbackground" src="background.png" />
<div class="topbackground">
<div class="top">
<div class="topleft">
<img class="pf_logo" src="pathfinder_logo.png"/>
</div>
<div class="topmiddle">
<h1 class="title">Pathfinder is Temporarily Unavailable</h1>
</div>
<div class="topright" ></div>
</div>
</div>
<div class="bar"></div>
<div style="width:1225px; height:910px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;">
<div class="contentcontainer">
621
Remove:
overflow: auto;
From the body in the CSS.
That should fix it.
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
