6 replies [Last post]
thedooropens
Offline
Enthusiast
Last seen: 11 years 5 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Hello,

Been tweaking a site http://www.students.signalflare.ca/bjolin/1850/timetoeat/, and I have 2 problems in IE, I can't find answers anywhere. I could probably work around them, but am curious to know what is the cause?

1. In right floated ol, numbers don't display.

2. Image replaced h3 - using negative z-index still showing text. I'm sure I've used the same trick, but put the image in the span with a positive z-index and it worked...

I'd appreciate any pointers!

Thanks

#rightmain
 
{
 
float:right;
 
width:200px;
 
margin:5px 10px 0 0;
 
display:inline;
 
}
 
 
 
#rightmain h3
 
{
 
background:url(../images/how_03.jpg) no-repeat left top;
 
position:relative;
 
width:173px;
 
height:43px;
 
margin:10px 0 0 0;
 
padding:0;
 
border:0;
 
}
 
 
 
#rightmain h3 span
 
{
 
position:absolute;
 
z-index:-1;
 
width:173px;
 
height:43px;
 
}
 
 
 
#rightmain ol
 
{
 
padding:5px 0 0 18px;
 
margin:0;
 
}
 
 
 
#rightmain li
 
{
 
padding:5px;
 
color:#fff;
 
}
 
 
 
#rightmain img
 
{
 
padding:10px 0 0 0;
 
border:0;
 
}

Triumph (not verified)
Anonymous's picture
Guru

For IE I believe you have to

For IE I believe you have to set the margin instead of the padding on the OL list items or maybe on the OL itself. (Same for UL).

For the h3 span why not try

#rightmain h3 span
{
display: none;
}

thedooropens
Offline
Enthusiast
Last seen: 11 years 5 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

You might be on to something

I know in IE the double margin bug is caused when using the margin to push off the same side as the float, which is why I added display:inline to fix, but the ul and li's are in that floated container... they shoudn't be affected - to be safe (and for fun) I'll test anyhow.

I don't want to display:none the span because I want the h3 to show in images off.

PS - RE: Your avatar - My favourite 80's video moment was when Warren deMartini (guitarist of RATT) fell through the attic floor on to the table of rich folks eating dinner downstairs!

Triumph (not verified)
Anonymous's picture
Guru

thedooropens wrote:... PS -

thedooropens wrote:

... PS - RE: Your avatar - My favourite 80's video moment was when Warren deMartini (guitarist of RATT) fell through the attic floor on to the table of rich folks eating dinner downstairs!

Round and Round! :woot:

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

IE and lists: two

IE and lists:

two things:

one is a quote from someone else I know:

Quote:

The default position for the bullet is outside, so when it is floated left, the bullets are actually outside the edge of the container the list is floated inside. Under certain conditions, IE will not display anything that falls outside the container. Using list-style-position:inside will move the bullets into view, but if a word wrap occurs, the wrap will line up with the bullet, not the text above. A cross-browser method (as IE and other browsers use different methods of providing li indent) is to zero both margins and padding on the

    or
      and assign a left padding to the
        or
          sufficient to move the bullets into view.

When I ran into this, at the time I was forced to wrap my (ul not ol but doesn't matter) in another box-- because I was centering the list and so needed automargins. Centering the box (a div) instead of the list itself and then using left padding on the ul itself to move it over to make room for the bullets did the trick... but I was so totally not happy with having an extra box. Made my code look like it was written by a back-alley quick-fix "CSS expurt" : (

Another related problem is if you ever have floated li's. In IE, having a bullet is a display state. So the li's display state with bullets is "display: list-item" which to IE also has the properties of a block (because actually also the li is display: block by default). If you ever change the display state (and floating the li will do this) then IE thinks, it isn't display: list-item anymore, it's float: whatever, and also doesn't show the bullets. (and this was also mentioned where I got my above quote from).
There's actually a lot of stuff about IE and lists on teh googles.

I don't understand what's going on with the span. Why would you give it a - z-index? Do you want it under the h3? If so, why not just a background image instead then?

Round and round is the only ratt song I've ever heard.

I'm no expert, but I fake one on teh Internets

thedooropens
Offline
Enthusiast
Last seen: 11 years 5 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Good Start

Thanks, I just wasn't sure what the problem with the list was (if it was even a problem with the list itself). I will investigate further.

The span element contains the text and is given a negative z-index to put it behind the relatively positioned div with a background image. Just can't figure out why IE hates it.

The more common (and apparently functional) method seems to be the opposite where the background image is in the span, which is z-index positioned absolutely over the text. I was just trying the other way for my own enjoyment.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yeah I use the common way,

Yeah I use the common way, thanks for clarifying. I'm also surprised IE has issues rather than FF (FF2 and under can't handle - z-indeces, thinks they must go below the body) but then it may be somehow related to IE's regular z-index bug regarding absolutely positioned thingies but that's with other box setups so I'm thinking not.

I'm no expert, but I fake one on teh Internets