4 replies [Last post]
cjgraphix
Offline
newbie
Long Beach
Last seen: 16 years 19 weeks ago
Long Beach
Timezone: GMT-8
Joined: 2004-07-23
Posts: 5
Points: 0

Okay... here goes.

I have the following css structure

 
<div id="container"> 
  <div id="content"> 
	<p> ...CONTENT...</p> 
        <p> ...CONTENT...</p> 
  </div> 
</div> 
<div id="scrollArea"> 
  <div id="scroller"></div> 
</div> 


Then I have the following CSS styles applied
 
#container { 
    float: left; 
    clear: left; 
    margin: 0 17px 0 24px; 
    width: 465px; 
    height: 121px; 
    overflow: hidden; 
} 
 
#content { 
	position: relative; 
	width: 460px; 
	left: 5px; 
	text-align: justify; 
} 
 
#scrollArea { 
    margin-top: 5px; 
    height: 121px; 
	width: 10px; 
	background: #9DC0C7; 
	overflow: hidden; 
} 
 
#scroller { 
	position: relative; 
	top: 5px; 
	width: 10px; 
	background: #EEEAC2; 
} 


The testing file can be found here. http://www.cjgraphix.com/cdm/beta.html

So, now the problem.
The scrollbar used is DHTML / DOM scripting and using some standard math sets the height of #content. Unfortunately, IE PC does not read it correctly, and when a height is applied directly to the CSS the extra content is hidden, but there is no actual scrolling. In Firefox the scrollbar works fine, of course, but the client is not interesting in Firefox as 90%+ of his visitors are on IE PC.... I have offered to use the scrollbar atrributes to style the IE PC scrollbar, but they want that custom looking scrollbar.

What am I looking for?
I need a way for IE to read the height of the text inside #content, but only display what is inside the height of #container. As it does in firefox. The DHTML stuff is on the page, except for an included file that creates the on drag scroll effect. I might need to alter the DHTML / DOM as opposed to altering the CSS... which is okay as well.

Thanks for any help one can give.

[/url]

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

#element overflow issue due to DHTML / DOM scrollbar

It works fine for me in both IE and Firefox. I think you should have something matching the arrows at the top and bottom of a normal scrollbar.

cjgraphix
Offline
newbie
Long Beach
Last seen: 16 years 19 weeks ago
Long Beach
Timezone: GMT-8
Joined: 2004-07-23
Posts: 5
Points: 0

Positioning issue

Thanks... good to know it works okay. I actaully fixed it just a bit ago. It ended up being a postion: relative vs absolute issue.

As for the arrows, this was a pre-approved layout from the client. So, the closer I am to what they want the better, and they did not want any arrows.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: Positioning issue

cjgraphix wrote:
and they did not want any arrows.

Doesn't mean they're always right, though. If some people (even if it's only a small percentage) can't figure out how to access the extra content because they don't realise the coloured bar is a scroller, they're likely to leave rather than stay, thus reducing the site's effectiveness.
Also, the top of your layout seems to be getting cut off.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

cjgraphix
Offline
newbie
Long Beach
Last seen: 16 years 19 weeks ago
Long Beach
Timezone: GMT-8
Joined: 2004-07-23
Posts: 5
Points: 0

#element overflow issue due to DHTML / DOM scrollbar

All valid points... however mute in this case. Those decisions were made long before I was brought into the project.

I am aware of the top cutting off. But that is a separate issue that does not deserve a post as it is well documented. The box needs to be aligned horizontally, and vertically.