[DrP]

Hi
If you check out the site I'm building: http://www.cliveportman.co.uk/2nd_sc...te/index3.html
you'll see that it looks fine in Firefox, but the buttons are all over the place in IE.
I've put the CSS in the html file so you can see it.
Does anyone have any ideas? I'm baffled as to what it could be.
Please help!

Solved it! needed to change width of sidebar to 190px

[Shadow2531]

Increasing the width of the navcontainer to ~200px should fix things at least partially. The links are wrapping to the next line in IE because there's not enough room for them to stay on the same line. You may have to explicitly set both padding and margin for everything to whip IE in shape.

After where you define the navcontainer style, add this:

* html #navcontainer { /* for ie only */
    width: 200px;
}

Then, adjust the width from 200px till it looks how you want it in IE.

[DrP]

Thanks for that. I managed to get it down to 192px, but it seems to work without the addition of your CSS. What is the asterisk (in ur CSS) for btw?

[Shadow2531]

The * is a selector. It matches all elements. It's called the "universal selector".

* {
    bakckground: #ccc;
}

That makes all elements have a gray background.

Opera and Firefox for example support this well.

Now, IE supports something screwy.

* html {
    background: #ccc;
}

That says to make the background gray for any html element that's a descendant of any other element. That won't work in compliant browsers because html is the root element and isn't the descendant of any other element. It only works in IE.

Since it only works in IE, you can use it to override stuff just for IE.

For example,

* html > div.classname {
  
}

would match any divs with a class="classname" that are the child of the html element in IE only.