IE it's driving me crazy, I need some help

[Giuseppe Turitto]

Hi everybody, after been for more than three years away of the web-
development. Last month I had to take some time off from work, and I
decided to help a friend with the website for one of his clients. Well
at the beginning I say to my self how hard it can be, I used to do
that for almost 7 years. Little do I know that the way to create
layouts with table it was completely De-mode, and I had to learn the
new way using CSS and XHTML. Well I bought couple books, and with the
help of few websites, and those books I grasp to mange my self and do
almost the entire website.

But the client wants a new page where the designer decided to add a
vertical menu where the background will be a rounded image. It did it
seems hard to do. But IE it's making it extremely challenging.

It work's on any browser besides IE, on every browser that I tested
work's flawless, I can see the rounded top and the rounded bottom all
aligned. But when I open IE I see the bottom all shifted to the right
and it never aligns with the top, making the entire thing looks like a
piece of ...ap.

Well here is the copy of my HTML and the CSS attached. In case some
one can point me to the right direction, or tell me what I am doing
wrong.

<ul id="verticalMenu">
<li id="star_100"><a href="#"
onclick="_selectOption(this);"><div><div>Open perimeter</div></div></
a></li>
<li id="star_110"><a href="#"
onclick="_selectOption(this);"><div><div>Open perimeter with concealed
ventilated trim</div></div></a></li>
<li id="star_120"><a href="#"
onclick="_selectOption(this);"><div><div>Open perimeter with crown
moulding</div></div></a></li>
<li id="star_210"><a href="#"
onclick="_selectOption(this);"><div><div>Enclosed expansion joint</
div></div></a></li>
</ul>

And the CSS is:

#verticalMenu {
list-style-type: none;
list-style-image: none;
width: 185px;
text-align: left;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -8px;
margin-top: -15px;
list-style-position: inside;

}
#verticalMenu li {
margin-bottom: 20px;
display: block;
margin-top: -15px;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#verticalMenu li a {
font-weight: lighter;
color: #333333;
text-decoration: none;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
background-image: url(../images/orangeBottom.gif);
background-repeat: no-repeat;
background-position: center bottom;
display: block;

}
#verticalMenu div {
list-style-position: inside;
list-style-image: none;
list-style-type: none;
margin-top: 2px;
margin-bottom: 2px;
background-image: url(../images/orangeTop.gif);
background-position: center top;
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
display: block;
}
#verticalMenu div div {
width: 170px;
padding: 5px;
display: block;
}

You can see better this if you go to http://www.starsilent.us/Details/index.html

Thank you in advance for your help.

Giuseppe Turitto

 

[John Hosking]

Giuseppe Turitto wrote:
....

Little do I know that the way to create layouts with table it was
completely De-mode, and I had to learn the new way using CSS and XHTML.

Whether you really need XHTML (rather than HTML) is an open question.
Leaving the tables out of layout for non-tabular content is indeed a
good idea, though.

It work's on any browser besides IE, on every browser that I tested
work's flawless, I can see the rounded top and the rounded bottom all
aligned. But when I open IE I see the bottom all shifted to the right
and it never aligns with the top, making the entire thing looks like a
piece of ...ap.

This description does not exactly match what I see in IE6. I only see
either the top or the bottom, never both together.

Well here is the copy of my HTML and the CSS attached. In case some
one can point me to the right direction, or tell me what I am doing
wrong.

[bunch of bogus code snipped because, as usual, we only need the URL]

You can see better this if you go to http://www.starsilent.us/Details/index.html

That's correct. It's true. So why did you paste all that code?

Some of it's not even on the page you gave the URL for.

Advice:
1. Make sure both your markup (http://validator.w3.org/ ) and CSS
(http://jigsaw.w3.org/css-validator/ ) validate (or you understand why
it doesn't).
2. Check that the problem isn't because IE doesn't recognize :hover for
elements other than <a>. #verticalMenu li:hover gets (I think) ignored
by IE6 and under.

 

[Jim Moe]

It works on any browser besides IE, on every browser that I tested
works flawless, I can see the rounded top and the rounded bottom all
aligned. But when I open IE I see the bottom all shifted to the right
and it never aligns with the top, making the entire thing looks like a
piece of ...ap.

You can see better this if you go to http://www.starsilent.us/Details/index.html

You have a lot of cruft in your CSS. For instance, list-style-position
is unnecessary since you also have "list-style-type: none"; any list-style
in "#verticalMenu li a" is irrelevant.
Your widths do not add up; you are not accounting for the additional
padding in #verticalMenu, so the <li>'s are wider than their container.
Your IE problems look like:
1. The background color for the vertical menu is not transparent, it hides
the background image
2. The widths add to more than 100%. IE is very particular about this and
wraps floats at the slightest excuse.
3. Use of negative margins can be quite tricky.

Try adding borders to the different elements so you can see where the
edges are.
Also look into some of the development tools available for Firefox browsers.