IE the right column disappears

[kuau]

I have been struggling all day with one stupid little css anomaly that I cannot for the life of me figure out no matter what I try, and I can't move on to the gallery site until I get it. The page is fine in FF but in IE the right column disappears and there are phantom characters in 2 places. I'm ready to shoot myself. You can probably see the problem in 2 seconds flat... http://www.carrentalhawaii.com/index-aa.html

The css is pretty much in this one line:

#right-hm { width:205px; height:350px; position:absolute; top:202px; left:585px; text-align:left; }

Please can you put me out of my misery? Otherwise, just shoot. kuau

[jscheuer1]

There is an error in the css, but that's not the problem, a missing semicolon (inserted in red) here:

#mid-hm { width:375px; height:482px; float:left; }
#right-hm { width:205px; height:350px; position:absolute; top:202px; left:585px; text-align:left; }

That should mean (but perhaps doesn't) that #mid_hm is currently not floated. Perhaps it is better that way, but I couldn't tell any difference after correcting it.

Now, on to the problem, I'm not really sure why, but I was able to fix it. After trying a few standard things with no success, I thought, since the position is absolute, why not move the markup for it to the last thing in the source code:

 . . . vel - All rights reserved - <a href="/html/terms.html">Terms &amp; Conditions</a>
		
  <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
	<script type="text/javascript">
		_uacct = "UA-557319-1";
		urchinTracker();
	</script></div><!--end footer-->
  </div><!--end container-->
    <div id="right-hm">
      <a href="/html/rates.html#Alamo"><img src="/img/gr/logo_alamo.gif" alt="Click for Alamo Rates" width="31" height="19" /></a>
      <a href="/html/rates.html#Avis"><img src="/img/gr/logo_avis.gif" alt="Click for Avis rates" width="38" height="19" /></a>
      <a href="/html/rates.html#Budget"><img src="/img/gr/logo_budget.gif" alt="Click for Budget rates" width="34" height="19" /></a>
      <a href="/html/rates.html#Dollar"><img src="/img/gr/logo_dollar.gif" alt="Click for Dollar rates" width="42" height="19" /></a>
      <a href="/html/rates.html#Thrifty"><img src="/img/gr/logo_thrifty.gif" alt="Click for Thrifty rates" width="39" height="19" /></a>
        <ul>
          <li><a href="/html/faq.html#bargain"><b>Bargain rates</b></a> for late model cars through major rental car companies.</li>
          <li><a href="/html/faq.html#guaranteed"><b>Guaranteed</b></a> reservation, no credit card&nbsp;required.</li>
          <li><a href="/html/faq.html#reserve"><b>Reservations</b></a> are subject to availability of the chosen car type at the pick-up location.</li>
          <li><a href="/html/faq.html#airport"><b>Airport</b></a> pick up for all cars.</li>			
          <li><a href="/html/faq.html#Driver"><b>Additional</b></a> Driver is Free!!</li>
          <li>For 12-Pax Van &amp; <a href="/html/faq.html#suv"><b>Fullsize SUV</b></a> rates please inquire by 
          <a href="mailto:info@carrentalhawaii.com?subject=12PaxVan/FullsizeSUV%20Rental%20Inquiry">email</a>.</li>
          <li>For Molokai rates please inquire by <a style="font-weight: bold;" href="mailto:info@carrentalhawaii.com?subject=Molokai Rental Inquiry">email</a>.</li>
        </ul>
     </div><!--end of right-hm-->              
</body>
</html>

I did, and that seemed to take care of it. The logic in this is that absolutely positioned elements can be influence by both stacking order and containers. This move at least theoretically puts it both at the top of the stack and outside of all containers other than the body. I had tried adjusting its stacking with z-index to no avail, but that can be inherited from a container no matter how it is set for the element itself. But I suspect it was the something else about the container that was the problem, just not sure exactly what.

[kuau]

Dear John: Thank you!!! You are a miracle worker I swear! I would never have thought of that in a million years and have no idea why it worked, or why the other ways I tried did not. (the semi-colon was there about 200 tries ago).

Any idea about the phantom text (only in IE)? It is right under the "Free Price Check" button (est price) and also as the very last word on the page...

and Car Rental Hawaii will get you there!
ere!

or am I the only one who sees it? I need sleep desperately. Mahalo, kuau

[kuau]

I also wonder where the right column was when it had disappeared. Usually you can find things in some weird position, but it was just nowhere

(IE drives me nuts!)

[jscheuer1]

Once again, I'm not completely sure of why it works, but add to your conditional style block, here (additions red):

 . . . ited		{ font-family:tahoma,arial,verdana; font-size:11px; font-weight:bold; text-decoration:none; color:#000000; }
td.toplinks a:hover		{ font-family:tahoma,arial,verdana; font-size:11px; font-weight:bold; text-decoration:none; color:#1B65AF; }

</style>
<!--[if IE]>
<style type="text/css" media="screen">
body { behavior: url(csshover.htc); font-size: 100%; } 
#mid-hm {
overflow:hidden;
}
#island {
float:none;
}
</style>
<![endif]-->
</head>

<body>
<div id="container">
		<div id="pageheader"><!--#include file="/include/pageheader.html" -->  <div id="header1">
    <div id="discou . . .

I know that the overflow hidden works because it doesn't allow anything in mid-hm beyond its dimensions. I'm not sure why removing the float for island helps, or why it doesn't mess up the layout as it will in FF (that's why I put it in the conditional section). I put the overflow in conditional too because, although mid-hm may not change text-size in IE, it can in others, so in those browsers, if it's text became larger, overflow hidden would obscure parts of the text.

But, given all that, I am baffled as to why there was a problem in the first place.

[kuau]

Dear John:

Once again you saved the day! Thank you so much!!! I had never used overflow before so you taught me a new trick, and, thanks to you, I was able to use that page as a template and replace 5 whole live (crappy) pages that now load from a database using css, variables, and php. I am a happy camper and you are even moreso my hero!

Mahalo plenty from Maui!! kuau

[jscheuer1]

I also wonder where the right column was when it had disappeared. Usually you can find things in some weird position, but it was just nowhere

(IE drives me nuts!)

I just thought I'd add here that, most likely, so don't hold me to it, it is a stacking inheritance issue. That is, the container division stacks lower than the mid-hm needs to be in order to be visible. Taking mid-hm out of the container, and placing it after the container allows it to stack on top.

All that being true (if I'm right in this case), you cannot see it in "some weird position" because it is underneath something(s).

[kuau]

"I see," said the blind man! Would the z-index have helped?

In any case, it is working perfectly where you put it. Thanks again.

Aloha, kuau

[jscheuer1]

"I see," said the blind man! Would the z-index have helped?

I did try that at first. A feature of z-index though is that it is inherited. That means that if you have a parent element with a low z-index and place within it one with a high z-index, the result will be uneven across browsers. Given certain other layout/style conditions (like floats, positioning, and the actual order of the elements in the code), some will not give the child element any higher stacking than the parent, even within the parent. No browser should give the child any higher stacking than the parent relative to elements outside of the parent, but some may if the child is floated, etc (like mentioned before).

Placing the element outside of all other elements, and positioning it absolutely or relatively, and placing it at the end of the source code all but guarantees that it will stack higher than other elements on the page of equal or lesser z-index.

[kuau]

Dear John: Thank you for explaining that. I sure could have used that info when I was struggling with a drop-down menu last March.

So even if I had set the z-index higher, it wouldn't have made any difference while it was inside the container div. And placing it outside the container obviated changing the z-index... yes?

Mahalo plenty, kuau