I have two problems with my page, first is that one unordered list is displaying all on one line in IE6 (possibly IE7 too, but IE8 seems okay) but looks fine in FF, Opera and Safari. http://foto-mach.cz/kontakt.html

.content ul{
    margin: 0;
    padding: 0;
    padding-top: 4em;
    list-style: none;
    text-align: center !important;
}
.content li img{
    padding-right: 1em;
    width: 25px;
}
.content li.xspc{
    padding-bottom: 1em;
}

Second problem is some text is spilling over onto an absolutely positioned image. I have some jquery javascript which is moving the image based on the window size, this doesn't seem to work in IE6, but the problem happens whatever the window size. http://foto-mach.cz/o_mne.html

.content {
    width: 49%;
    margin: auto auto;
    float: left;
    text-align: left;
}

.content p:first-child {
    margin: 0;
}

.rside img {
    position: absolute;
    top: 3em;
    left: 57%;
    border: none;
}

I've pasted in what I think is all the relevant css, I don't expect to be able to get something which looks exactly the same across all browsers and screen sizes, just looking for some happy medium.

Appreciate any help/advice.

2 answers

o.k.w 2355
1
point

I suspect the first problem is due to the notorious IE6 float bug. I do not have IE6 to test with but perhaps you can try adding this CSS definition:

.content li {
    display: block;
    float: none;
    clear: both;
}

It looks fine on IE7 though. See the litmus test result here.

As for your second problem, I took one of your site pages http://foto-mach.cz/o_mne.html to test (IE6 result here). Should be due to the jQuery auto-resize not working in IE6 together with the float bug that caused the overlapping.

Likewise, I don't have IE6 to test with, I suggest the following CSS for the "content" class:

div.content {
  clear: right;
}

Will be good if you can share your finding. :)

Good luck!

Answered almost 7 years ago by o.k.w
  • Thanks for the quick response, didn't get a chance to play with this until now. Thanks also for the links to litmus test, I'll have to sign up for that. You're right with the first one, it's fixed very easily just with .content li{ float: none; } Didn't need the other styles, do you think I should them in anyway? The paragraph problem is little bit more weird, but I'll put it as an answer. aland almost 7 years ago
aland 0
0
points

So it seems that IE6 is ignoring widths as percentages, but it will apply styles even with // comments in front. So what I've done is like this

.content {
    width: 49%;
    //width: 25em; /* IE6 is ignoring %s for width */
    //text-align: center;
}

Seems pretty hacky but it's difficult to argue with results :D Is there a neater way to get this done?

Answered almost 7 years ago by aland