2

So people I seldom have trouble programming and implementing HTML templates with CSS for IE6 and all the other browsers. But this time this is breaking my head.

The issue is compatibility for IE6 (I'm using the YAML framework.)

So, lets get on with it. This is the culprit code:

HTML

<div class="info">
    <div>
       <div class="float_left">
           <img alt="aktuelles bild" src="images/dummy_aktuelles.gif" />
           <span>26.10 - 27.10.2010</span>
           <span>xxx xxx</span>
           <span>(Flughafen)</span>
       </div>
       <div class="lastObject">
           <span>09.09.2010 Offenes-Presseportal</span>
           <span class="lastObject">Global Connect 2010 - Globalisierung für den Mittelsand</span>
           <p>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam leo.
           </p>
       </div>
    </div>
</div>

CSS

#main .aktuelles .info {
    padding:15px;
    overflow:hidden;
    border-bottom: 1px #949494 dotted;
}
#main .aktuelles .info .float_left {
    width:35%;
}
#main .aktuelles .info .float_left span {
    padding-bottom: 5px;
    display: block;
    color: #333;
    font-size: 13px;
}
#main .aktuelles .info .float_left img {
    padding-bottom: 5px;
}
#main .aktuelles .info div .lastObject span {
    color:#2d2d2d;
    font-size: 12px;
    display: block;
    padding-bottom: 5px;
}
#main .aktuelles .info div.lastObject span.lastObject {
    color: #2d2d2d;
    font-size: 14px;
    display:block;
    padding: 0 0 5px 0 !important;
}
#main .aktuelles .info div lastObject p {
    font-size: 12px;
}

Now the first div that is floating to the left doesn't appear at all. It is underlying the background of lastObject. The parent container of the info div has no position whatsoever.

Any suggestions?

This is an image of what is wrong: The image is not there nor are the spans, the other content is ok

It seems the problem is not related to this code. but I dont have any other ideas. I also tried altering the z index but it evidently wont work since its not a background image it is the background color.

Wouter J
  • 41,455
  • 15
  • 107
  • 112
Jose Luis
  • 3,307
  • 3
  • 36
  • 53
  • 1
    @Joze, there os not enough code here to reproduce, we would likely need the CSS for `.lastObject` too, and your `.float_left` class is not floating though I presume it should be and that class CSS is also missing, please can you try and recreate an example from the full code – clairesuzy May 24 '11 at 08:45
  • @Claire lastObject is a helping class and Float_left is float:left; That's it. Nonetheless I posted the code that I made using the helping class. @sandeep I dont really understand what you mean with multiply classes. Can you explain? – Jose Luis May 24 '11 at 08:52
  • 1
    @Joze, in that case this fiddle is the code I've come up with and it's not reproducing the error : http://jsfiddle.net/clairesuzy/4rXtr/ - can you add to that CSS the actual properties for `.lastObject` and see if it's still happening? @sandeep I think you meant multiple classes and this code is not using them.. – clairesuzy May 24 '11 at 09:00
  • 1
    @sandeep; IE6 supports multiple class declarations, you run into problems when you try 'chaining' them, so: .aktuelles.float (
    X
    ). Regardless, Joze isn't using multiple classes in the posted example.     – danjah May 24 '11 at 09:03
  • @Joze: Can I quickly ask which specific YAML template you are using, if any? – s.d May 24 '11 at 09:05
  • @Joze: I'm not sure what you think this should do: `#main .aktuelles .info div lastObject span` - that's looking for a `` element. You probably meant `.lastObject` instead, like you've used elsewhere. – thirtydot May 24 '11 at 09:18
  • @Claire hey claire, I tried your fiddle but it doesn't work on IE6... I tried putting the .lastObject but it doesn't work... @thirtydot many thanks for pointing that out, that fixed some paddings, sometimes you don't notice the little things! @Baphomet yes I am using a YAML template I'm using a triple column template the 3-1-2 template. The content here is on the 1 column. – Jose Luis May 24 '11 at 09:19
  • @Joze I have updated [the fiddle](http://jsfiddle.net/clairesuzy/4rXtr/) to include the new `.lastObject` code though I have corrected the missing dots off the classnames in the CSS, and have tested in IE6 it appears to fine.. when you say not working how do you mean,. or is that OK now? – clairesuzy May 24 '11 at 09:35
  • @Claire I checked your fiddle on IE6 and it indeed works. So the problem is somewhere else. Somehow the elements are behind the div that has the background color Im posting an image so you can see what is wrong. – Jose Luis May 24 '11 at 09:45
  • @Joze.. well as we can't see it, try some favourite IE6 things! - first add `position: relative;` to `.float_left` if that doesn't do it on its own, as a test add `zoom: 1;` to `.info` (and/or `.lastObject`) IE6 still has bugs that were patched in 7 - let us know – clairesuzy May 24 '11 at 09:57
  • @Claire Position:relative was the issue!!! Thank you very much! Write it on an answer so I can check it as correct :) Only add position relative to the float_left statement – Jose Luis May 24 '11 at 10:28
  • @Joze, yippee!, it dusted off the cobwebs debugging blind, but glad we got there! - have put it in an answer – clairesuzy May 24 '11 at 10:36

2 Answers2

6

as per comments, it appears to be a typical hasLayout (disappearing content version) bug,

add: position: relative; to the left floated div .float_left

clairesuzy
  • 27,296
  • 8
  • 54
  • 52
0

Attached a screenshot of the IE6 fiddle page as I can see it, for your reference: enter image description here

danjah
  • 2,939
  • 2
  • 30
  • 47
  • thanks for the screenshot it confirmed I wasn't seeing things, I could have posted a pic direct from IE6 too but it looked the same as this. It is my guess, now that a fix has been found, that it's something further up in the code causing the disappearing content which is why the isolated version is fine. – clairesuzy May 24 '11 at 10:46