 Help with Div layer problems in IE? |
  |
| Emor |
 Dec 20 2010, 12:09 PM
Post
#1
|
|
Newbie  Group: Members Posts: 15 Joined: 20-December 10 Member No.: 13,429  |
I'm trying to create a functional page containing two separate elements that stay in a percentage-based height relationship. There are three design criteria I'm aiming for, but I can't seem to achieve more than one of these in any coding approach that works in Internet Explorer!
I've reduced these elements in a couple simple display pages, each showing different coding techniques. The first goal is to have the two elements (here a div containing a white circle image, and a black base div) remain in vertical lock for all browser resolutions, using height percentages for each element. The second goal is to maintain an <auto> proportion on the image element. This page's coding style achieves those two things, and all browsers accept the code except IE, which displays the divs collapsed to 1-px lines! A different coding style - seen in this page - permits the divs to be displayed in all browsers including IE, but loses the auto-proportioning on the image element. Any attempt to introduce that auto-proportioning causes failure to display again! The third goal, if possible, would be to center the image element L<->R on the page. Can anyone please advise this HTML newbie where I'm messing up?  This post has been edited by Emor: Dec 20 2010, 12:39 PM |
  |
 
|
| pandy |
Dec 20 2010, 04:07 PM
Post
#2
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Doesn't look that newbie to me.
 I think the problem with blackdot will go away if you remove 'height: auto'. |
|
|
|
| Emor |
Dec 20 2010, 06:24 PM
Post
#3
|
|
Newbie Group: Members Posts: 15 Joined: 20-December 10 Member No.: 13,429 |
Thanks for the reply, Pandy!
Since there is no height: "auto" in the first example (WhiteDot2, the one that works kinda-properly except in IE), I assume you must be suggesting removing that tag property from the second example. That was version 3, the one that works in all browsers but does not maintain the image's height/width format. I can see why you seized on this: I had mistakenly uploaded the wrong version of that file, with a vestige of some earlier editing. Here's the same code, without the height: "auto" property. As you can see, it still fails to maintain the white dot's circular form. But the next thing I tried was to remove any width property from the image at all. That actually seems to have worked, and I now have the dot remaining properly formatted, and in any browser! NOW, what would you suggest as the best way to center that dot on the page width?  |
|
|
|
| pandy |
Dec 20 2010, 06:55 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
No, I only looked at the first example. I'm afraid I wrote CSS out of habit, it was height="auto" in the image tag for blackdot I was referring to.
Also, 'auto' is a CSS value, it isn't legit in HTML. The validators don't flag it, but they won't flag height="bleh" either. Don't know why that is.  |
|
|
|
| Emor |
Dec 20 2010, 09:31 PM
Post
#5
|
|
Newbie Group: Members Posts: 15 Joined: 20-December 10 Member No.: 13,429 |
pandy, you're right in some way.
 Though the Dot is White, and that was the element I was having trouble with, the Black Base did have a height: "auto" property. In any case, I removed that, and using what I learned in the other example of coding, I also removed the width property from the White Dot image. This gives me a page for that first approach that works under IE ......so now either example is working! WhiteDot2b.html: CODE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>WhiteDot2</title> <style type="text/css"> <!-- body { background-repeat: no-repeat; background-color: #440000; } #blackbase { position: absolute; width: 100%; top: 70%; bottom: 0px; left: 0px; z-index: 1; } #WhiteDot { position:absolute; top: 10%; left: 20%; width:auto; height:60%; z-index:3; } </style></head> <body> <div id="blackbase"><img src="Black.gif" width="100%"></div> <div id="WhiteDot"><img src="WhiteDot.png" height="100%"></div> </body> </html> Thanks for the nudges, helps to have someone to talk with! NOW - do you have any suggestions for the best way to center that White Dot on the page width? |
|
|
|
| pandy |
Dec 20 2010, 10:44 PM
Post
#6
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Sorry again. I meant blackbase, not blackdot. Oh my.
 |
|
|
|
| Emor |
Dec 21 2010, 11:58 AM
Post
#7
|
|
Newbie Group: Members Posts: 15 Joined: 20-December 10 Member No.: 13,429 |
Pandy, no apologies necessary: I understood what you meant, and you've helped me understand this key point that I had not grasped before:
Image dimensions do not require BOTH a height and width property. I had mistakenly assumed that if you wanted to maintain an image's original format while resizing your browser window, one of the two dimensions had to be set as pixels or percentage, and the other had be set at "auto". Now, the last goal I'm trying to achieve on this page is to center the White Dot in the page width. Can anyone suggest an elegant means of accomplishing this without negating the working features achieved so far? This post has been edited by Emor: Dec 21 2010, 11:58 AM |
|
|
|
| pandy |
Dec 21 2010, 01:28 PM
Post
#8
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Well, auto had probably worked if you had done it with CSS. Haven't tried that though, just guessing.
Traditionally browsers scale the image proportionally if you use only 'width' and leave 'height' out. It seems some browsers can do it the other way around too now, but I wouldn't trust that. |
|
|
|
| Emor |
Dec 21 2010, 01:43 PM
Post
#9
|
|
Newbie Group: Members Posts: 15 Joined: 20-December 10 Member No.: 13,429 |
Now, the last goal I'm trying to achieve on this page is to center the White Dot in the page width.
Please, can anyone suggest an elegant means of accomplishing this without negating the working features achieved so far? |
|
|
|
| Darin McGrew |
Dec 21 2010, 03:37 PM
Post
#10
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
|
|
|
|
| Emor |
Dec 22 2010, 09:41 PM
Post
#11
|
|
Newbie Group: Members Posts: 15 Joined: 20-December 10 Member No.: 13,429 |
Thanks very much, Darin.
I've gone through each of those pages and tried to apply the tips to each of my two working structures, to no avail. I really am new enough to all this that I feel like I'm just throwing ideas in the mix, without a clue as to what will or should work. At this point, it's probably time for me to cut my losses and settle for a workaround design that doesn't require the art to be centered. I appreciate everyone's kind help here very much. |
|
|
|
| pandy |
Dec 22 2010, 10:28 PM
Post
#12
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Auto margins don't work on AP boxes. AP boxes also shrink wrap, so no use centering the image since the AP box isn't wider than the image, so no leeway. But if you let the AP box be 100% wide you can easily center the image inside it.
Try these changes to the #WhiteDot rule. CODE #WhiteDot { position:absolute; top: 10%; /* left: 20%; */ /* width:auto; */ width:100%; height:60%; z-index:3; text-align: center } |
|
|
|
| pandy |
Dec 23 2010, 12:17 AM
Post
#13
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Hey, I forgot to say that you only have half a comment inside the CSS block. You've forgotten the closing part.
CODE <style type="text/css"> <!-- ... </style> Should be like so. CODE <style type="text/css"> <!-- ... --> </style> There isn't any need for "hide from old browsers" stuff any more really, but if you do it you'd better do it right. I do it too. It's the only way to make my somewhat outdated text editor color the block differently.  |
|
|
|
| Emor |
Dec 23 2010, 11:56 AM
Post
#14
|
|
Newbie Group: Members Posts: 15 Joined: 20-December 10 Member No.: 13,429 |
Oh, that is a beautiful thing.
Clean code, too. Made me look up the meaning of an "AP box"! (Absolute Positioning) ...and the best part was when the little light bulb lit up in my head! This was a good learning experience. Thanks for the education, and a very Happy Holidays to you! |
|
|
|
| pandy |
Dec 23 2010, 01:02 PM
Post
#15
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
So I managed to get something right at last? Lucky me!
Sorry about the wording with the AP box. I actually dislike that somewhat sloppy use of words, but still find myself using it. CSS use so many long words that are tedious to type. A merry Christmas from the land of Santa. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 26th April 2024 - 05:34 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC