css ie scrollbars appear on load then disappear

Forum Moderators: not2easy

Message Too Old, No Replies

css ie scrollbars appear on load then disappear

and the links don't work

halfandhalf

11:53 pm on Dec 14, 2004 (gmt 0)

i'm very new to css. i read the display: inline-block thread by dr doc and thought it may be relevant here, but it doesn't seem that it is (and i'm using position: absolute, not position: relative)

any idea why my scrollbars appear onload in ie 5/mac but then quickly disappear? and my anchor tags don't work either...

.text {position: absolute;
top: 46px; width: 300px;
left: 278px; text-align: left;
overflow: auto;
height: 350px;
margin: 5px;
margin-right: 5px;
display: inline-block;
}

Blah text here (long)
</div>

Span

12:21 am on Dec 15, 2004 (gmt 0)

Mmm, the code you posted works for me. Mac/IE5.1.7, MacOs 9.2.2, XHTML Strict DTD. Could it be something else in your CSS?

halfandhalf

12:33 am on Dec 15, 2004 (gmt 0)

thanks for checking -- i'm not sure what it could be. seems weird that the links don't work either. i'm really nervous because i need this to work tonight.
more code:

.tiny {font-size:9px; color: #000000; font-family:verdana, arial, helvetica, sans-serif; }
.header {font-size:14px; color: #000000; font-family:verdana, arial, helvetica, sans-serif; font-weight: bold; }
blockquote, body, div, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, select, td, textarea, tr, ul {font-size:10px; color: #000000; font-family:verdana, arial, helvetica, sans-serif; }

body {font-size:10px; color: #000000; font-family:verdana, arial, helvetica, sans-serif;
margin:0px;
padding:0px;
}
.cola {position: absolute;
width:277px;
}
.colb1 {position: absolute;
top: 0px;
left: 277px;
}
.colb2 {position: absolute;
top: 45px;
left: 277px;
}
.text {position: absolute;
top: 46px; width: 300px;
left: 278px; text-align: left;
overflow: auto;
height: 350px;
margin: 5px;
margin-right: 5px;
display: inline-block;
}
.contact {position: absolute;
top: 445px;
left: 310px;
font-size:9px; color: #000000; font-family:verdana, arial, helvetica, sans-serif;
}

</style>
</head>
<body><a name="top"></a>
<div class="cola">
<img src="images/press-image.jpg" border="0" align="left" valign="top">
</div>
<div class="colb1">
<img src="images/press-nav.gif" border="0" align="left" usemap="#Map">
<map name="Map">
<area shape="rect" coords="59,33,85,45" href="index.html">
<area shape="rect" coords="136,34,230,45" href="film.html">
<area shape="rect" coords="234,34,305,45" href="aa.html">
</map>
</div>
<div class="colb2">
<img src="images/bodybg.jpg" border="0" align="left">
</div>
<div class="text"><br>

<a href="#synopsis">Brief Synopsis</a>   <a href="#statement">Statement</a>   <a href="#credits">Credit</a>

<br><a name="synopsis"></a><br><b>Brief Synopsis</b><br>
blah blah blah
blah blah blah
blah blah blah
blah blah blah
<br>
<a href="#top">Top</a><br><br>

</div>

<div class="contact">
contact info
</div>

Span

1:24 am on Dec 15, 2004 (gmt 0)

Hi,

Without widths and heights in your image tags it's hard to see the layout of your page. But I think your divs are overlapping each other in some places? That could be the reason your links aren't working. There's a div on top of it.
When you 'stack' absolute positioned divs you have to use the z-index property to tell the browser the stacking order. Divs with links should be on top.

.cola {
z-index:1;
}

.text {
z-index:10;
}

Also, the order of your links rules is wrong. Should be

a:link
a:visited
a:hover
a:active

Still no scrollbar problems..