Scrollbar troubles in IE

**tmapm** · Nov 16, 2003 12:02

I accidentally posted a topic and I decided to make it useful. If anyone can rename the subject to something that tells what this thread is about that would be nice.

In Mozilla there is a vertical scrollbar. In IE, the STuff within the #header doesn't line up correctly. Any help is appreciated.

Page With Error: http://www.derelictstudios.net/Derelict/index.html
What it is supposed to look like: http://www.derelictstudios.net/Derel...s/Supposed.gif

Index

Code:

<html>
<head>
<title>Derelict Studios</title>
<link rel='stylesheet' type='text/css' href='styles.css'>
</head>
<body>
<div id='page'>
<div id='stripe'></div>
<div id='menutop'></div>
<div id='left'>
<a href='http://www.derelictstudios.net'>
<img border='0' src='images/ds-logo.gif'>
</a>
</div>
<div id='header'>
<div id='top'>News Forums About FAQ Feedback</div>
<div id='bot'></div>
</div>
<div id='right'></div>
<div id='stats'>STuff here</div>
<div id='content'></div>
<div id='footer'><div id='copy'>© Stuff</div></div>
</div>
</body>
</html>

CSS

Code:

/* Globals */
html, body, #page {
min-height: 100%;
width: 100%;
height: 100%;
}
BODY {
font-family : Verdana;
font-size : 10px;
color: #FFFFFF;
background-color: #2C2C2C;
scrollbar-face-color: #4C473E;
scrollbar-shadow-color: #333333;
scrollbar-highlight-color: #797979;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #3E4246;
scrollbar-track-color: #797979;
scrollbar-arrow-color: #C6AD69;
margin:0;
padding:0;
}
/*
* The "height" above is a hack for IE5+/Win. Below we adjust
* it using the child selector to hide from IE5+/Win
*/
html>body, html>body #page {
height: auto;
}
/*
* Without this, Moz1.0 adds a vertical scrollbar
*/
#page {
position: absolute;
top: 0;
left: 0;
}
#stripe {
height: 10px;
width: 100%;
background-image: url('images/stripe.gif');
}
#menutop {
height: 6px;
width: 100%;
background-color: #31302D;
}
#header {
height: 42px;
width: 100%;
margin-left: 186px;
margin-right: 188px;
background-color: #4C473E;
}
#left, #right {
top: 16px;
height: 42px;
position: absolute;
}
#left {
left: 0;
width: 186px;
}
#right {
right:0;
background-image: url('images/hex.gif');
width: 188px;
}
#top {
clear: both;
height: 18px;
background: #31302D;
}
#top table {
font-family : Verdana;
font-size : 10pt;
}
#bot {
clear: both;
height: 24px;
background: url('images/curve.gif') no-repeat top left;
}
#stats {
height: 22px;
width: 100%;
background-color: #363530;
border: #2C2C2C solid;
border-width: 1px 0px 1px 0px;
padding-top: 1px;
text-align: center;
}
#stats table {
font-family : Verdana;
font-size : 10px;
}
.orange {
color: #D39100;
}
#content {
width: 100%;
height: auto;
margin-top: 12px;
margin-bottom: 12px;
text-align: left;
}
#footer {
padding-top: 6px;
padding-bottom: 3px;
position:absolute;
bottom: 0;
width: 100%;
background-color: #4C473E;
text-align: center;
}
#footer #menu {
}
#footer #copy {
padding-bottom: 2px;
color: #31302D;
background-color: #797979;
}

**Paul O'B** · Nov 16, 2003 16:54

Hi,

The reason for the differences is that in IE you are working in quirks mode, which makes it harder to be consistent across browsers.

However if you want to use the coloured scrollbars then you will have to stay in quirks mode for them to display anyway. (Of course they won't validate though).

Try changing the two styles below as follows:

Code:

#menutop {
height: 4px;
width: 100%;
background-color: #31302D;
overflow:hidden;
}
html>body #menutop {height:6px}
#header {
height: 42px;
margin-left:186px;
background-color: #4C473E;
}

The reaon mozilla had a horizontal scrollbar was that you set a left and right margin of 186px and a width of 100%. This makes it too wide for the viewport.

Hope that helps.

Paul

**tmapm** · Nov 16, 2003 17:52

Yeah, I figured out the Mozilla Problem on a local copy. The only thing left is that the menutop bar is displaying only the 4 px in IE. It looks fine is mozilla though.

**tmapm** · Nov 17, 2003 18:08

Does anyone know of specific IE tags that will act the same as the html>body #menutop {height:6px} but not in any other browser?

**DeeBs** · Nov 17, 2003 20:50

Originally Posted by tmapm

Does anyone know of specific IE tags that will act the same as the html>body #menutop {height:6px} but not in any other browser?

I believe MS has some CSS attributes that work only in IE, but I'm not even close to positive about that. Your CSS wouldn't validate if you used them though, if you care about that.

~DB

**tmapm** · Nov 17, 2003 21:48

I just need something to fix the last remianing bug. I don't really care if it validates or not. If it works I am happy.

**Paul O'B** · Nov 18, 2003 04:11

Does anyone know of specific IE tags that will act the same as the html>body #menutop {height:6px} but not in any other browser?

HI,

The universal selector can be used to feed IE specific styles only, when coupled with the html element.
e.g.

Code:

*html .test {width:500px}

Only IE will get the above style due to it lack of understanding of the rules. Other browsers will ignore it.

http://www.info.com.ph/~etan/w3panth...arhtmlbug.html

http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

Hope that helps.

Paul

**tmapm** · Nov 18, 2003 05:08

It did help, but unfortunately it is not the fix to the problem. IN IE the #menutop still stays 4 pixels and the reminaing 2 are cut off from the top. After the second grey line, there shouldn't be any black. http://www.derelictstudios.net/Derelict/index.html

**Paul O'B** · Nov 18, 2003 08:13

Hi,

I'm not sure if I can see the problem you're talking about, but you could try changing these styles to make your browser consisten between IE6 and mozilla without a hack.

Code:

#stripe {
height: 10px;
overflow:hidden;
width: 100%;
background-image: url('images/stripe.gif');
}
#menutop {
height: 6px;
width: 100%;
background-color: #31302D;
overflow:hidden;
}

and then get rid of this altogether.

Code:

html>body #menutop {height:6px}

Hope that helps.

Paul

**tmapm** · Nov 18, 2003 10:46

I'll try it later in 5 hours after I get home from school and paino practice, thanks.

User Tag List

Thread: Scrollbar troubles in IE

Thread Tools

Display

DIV Alignment

Bookmarks

Bookmarks

Posting Permissions