|
|
Posted by Giuseppe Turitto on 09/11/07 13:11
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
Navigation:
[Reply to this message]
|