Tags:
html
div
IE

March 8, 2004
7:41 AM Subscribe

An html/mac/ie/div question thats driving me mad...

Basically, I have a div with scrollbars on top of an image. In a mac (possibly only IE) when you try and grab the scrollbar and scroll down it instead grabs the background image and trys to drag it away. Any thoughts? Sorry - the nature of the site means I can't give you an example URL.
posted by twine42 to computers & internet (13 comments total)

I had a similar problem the other day. Two element stacked (4 px between) vertically. Grab the bottom one's scrollbar and the top content moved. My divs were nested improperly. Have you tried running the code through a css validator?
posted by dobbs at 8:37 AM on March 8, 2004

I'm not sure I'm that brave. ;) I'll give it a go. Did you get yours solved?
posted by twine42 at 8:45 AM on March 8, 2004

Nope... it just passed w3c's one with flying colours. Well, it complained I used font-family without a generic, but close enough.
posted by twine42 at 8:50 AM on March 8, 2004

How about some example code?
posted by bcwinters at 8:50 AM on March 8, 2004

Yeah, if you could post a simple dummy version, that'd help.
posted by adamrice at 8:52 AM on March 8, 2004

okay... trimmed as much as possible. The basics are still there...



<!-- html, head, body, etc... -->

<style type="text/css">

.tncs_outer		{ position: relative; width: 995px; height: 468px;padding: 0; margin:5 0 0 0; border:0px; text-align: left; vertical-align: top; }

.tncs_blue		{ position: absolute; top:  0px; left:  10px; width: 973px; height:468px; background-color: #010080; text-align: left; vertical-align: top; }	

#tncs_internal	{ position: absolute; top:  15px; left:  16px; width: 946px; height:445px; background-color: transparent; text-align: left; vertical-align: top; z-index: 4; }

.tncs_lightblue	{ position: absolute; top:  64px; left:  35px; width: 900px; height:352px; background-color: #339; text-align: left; vertical-align: top; }	

#tncs_text		{ position: absolute; top:  78px; left:  20px; width: 880px; height:265px; background-color: #339; text-align: justify; vertical-align: top; font-family: Charcoal, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: white; overflow: auto; z-index: 10; padding: 10px; }

</style>

<body>

<tmpl_include name="includes_std_header.html">

<!-- Content Area -->

<div class="tncs_outer">

   <div class="tncs_blue">

      <IMG id="tncs_internal" SRC="/Images/tncs_frame.png" />

      <div class="tncs_lightblue">

         <!-- cropped for MeFi - just text. -->

         

            Lots of text goes here

         </div>

      </div>

   </div>

</div>

<!-- /Content Area -->

<tmpl_include name="includes_std_footer.html">

</body>

</html>

Sorry to post it like that, but it's really the only way to show you. AskMeFi really hates the pre tag btw. ;)

The problem is when the lots of text bit gets to big and scrolls (which it always does) it grabs the background/background div as it goes. win32 is fine in all browsers.
posted by twine42 at 9:06 AM on March 8, 2004

Instead of using a separate div and an <img> tag for the background image, why not just use a background: url('foo.gif') on the text div itself?

The other thing I would try, if you've got a reason not to change the structure, is to explicitly set the text div to a higher z-index; I've run into a lot of IE/Mac problems where stacked divs didn't catch mouse clicks in the right order, and sometimes setting the z-index helped.
posted by ook at 9:51 AM on March 8, 2004

(er, that'd be background-image, of course, not background.)
posted by ook at 9:54 AM on March 8, 2004

What ook said. Using a background-image in CSS would be the smart thing to do--cleaner structure and code, better control, yadda yadda. If you want to go crazy, I think there are even ways to scale the background-image with the text (make the height and width 100%).
posted by adamrice at 10:24 AM on March 8, 2004

that'd be background-image, of course, not background

No, you were right the first time. background-image has been deprecated.
posted by yerfatma at 3:10 PM on March 8, 2004

background-image has been deprecated.

In CSS? This is the first I've heard. What's your source for that?
posted by adamrice at 3:59 PM on March 8, 2004

Who's deprecating what, now? It still appears in the CSS3 working draft, anyway...

You had me worried for a minute there -- no sooner did I break myself of my old deprecated html tag habits, than they'd start deprecating my new css habits...?
posted by ook at 4:03 PM on March 8, 2004

The reason it's like that it because of sizing and reuse across the site. Oh, and I cropped out some text in there too.

I wish I could work out why it's picking up a layer witha lower z-index though. Hmmm... Oh well. Time for a rebuild for a stupid system no-one uses. *duck*
posted by twine42 at 1:20 AM on March 9, 2004

« Older Geese w/ research collars! I s... | Are there any location based r... Newer »

You are not logged in, either login or create an account to post comments

March 8, 2004 7:41 AM Subscribe

March 8, 2004
7:41 AM Subscribe