Div in IE
March 8, 2004 7:41 AM
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.
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.
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
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
posted by twine42 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
posted by adamrice at 8:52 AM on March 8, 2004
okay... trimmed as much as possible. The basics are still there...
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
<!-- 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
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
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
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
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
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
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
This thread is closed to new comments.
posted by dobbs at 8:37 AM on March 8, 2004