I.E. Must Die. CSS Help Needed.

[bvarvel]

I've got the following page, that looks beautiful in Firefox:

http://www.katycommunity.com/


Now, I open it up in IE. Uggh.. the folks at MS have messed with me again. You'll notice, the image is pushed WAAAAYYY down the page, and the bulleted lists at the right have been pushed to the right.

Anyone have any ideas why?

Update: OK, I got the image part fixed, but still have no idea why the bullets are pushing to the right.

[A_Brisson]

Glanced through your css and didn't see any obvious problem. I might point out that in Opera the ul's are still pushed to the right, which makes me suspect a default or conflicting property which needs to be overridden, versus just a IE bug.

[bvarvel]

I'll pull down Opera and take a looksie, but does anyone else have any ideas what would be causing this?

[Paul O'B]

Hi,

Yes the problem is that you are not targeting the ul correctly.

This code:

#discuss ul { margin: 5px 0px 5px 0px; padding: 0px; }
#event ul { margin: 5px 0px 5px 0px; padding: 0; }

Should be like this:

ul#discuss { margin: 5px 0px 5px 0px; padding: 0px; }
ul#event { margin: 5px 0px 5px 0px; padding: 0; }

because the html is like this:

<ul id="discuss">
<li>This is discussion 1.</li>

The ul wasn't being targetted but the li was. For your version to work the ul would have to be wrapped in another container whos id was discuss.

That should sort it all out for you

Paul

[bvarvel]

Thanks a ton! One more thing...

Can you explain what makes '#event ul' different from 'ul#event'?

[bvarvel]

And one more thing, now that I have a IE 5.0 browser, I noticed that everything that normally is positioned within the gradient bars on each side is now shifted well to the left in IE 5. Any ideas why?

[maxor]

Thanks a ton! One more thing...

Can you explain what makes '#event ul' different from 'ul#event'?

The hashmark '#' indicates the id attribute of an element.

/* The following style is for some div with the id 'event' */
div#event{...}
<div id="event">

/* The following style is for anything with the id 'event'*/
#event{...}

<p id="event">
<h1 id="event">
etc...

/* The following style is for any ul that is contained within
    an element with the id of 'event' */
#event ul{...}
<div id="event">
  <ul>
    <li>...