padding dissapears in CSS menu

[tanya68]

I built a website, but it has a problem that bothers the owner
http://tanyapreminger.com/work/brain...mage-Home.html
When changing the display size of the screen using the CONTROL button plus the mouse scroll, the CSS menu gets messed up.
The padding between the links dissapears and does not fix itself even when going back to the original size. THIS HAPPENS IN EXPLORER ONLY.
I tried changing the measurments from px to em but it didn't work.
Can anybody help me?
Here's the code-
HTML-

Code: Select all

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="../Brain_Damage-Home.html">HOME</a></li>
<li><a href="#" rel="dropmenu1">BACKGROUND</a></li>
<li><a href="../Brain_Damage-Team.html">TEAM</a></li>
<li><a href="../Brain_Damage-Technology.html">TECHNOLOGY</a></li> 
<li><a href="../Brain_Damage-Applications.html">APPLICATIONS</a></li>
<li><a href="../Brain_Damage-Contact.html">CONTACT</a></li>
<li><a href="../Brain_Damage-Download.html">DOWNLOAD</a></li>
</ul>
</div>

CSS-

Code: Select all

/* ######### Style for Menu ######### */
.chromestyle{
width: 100%;
height: 9px;
font-weight: bold;
color: #ffffff;
text-align: middle;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 40%; 
clear: both; 
visibility: hidden;
}
.chromestyle ul{
width: 97%;
background-color: #000000;
padding: 0px 8px;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold
text-align: center; /*set value to "left", "center", or "right"*/
height: 0; 
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #ffffff;
padding: 0px 8px;
margin: 0;
text-decoration: none; 
}
.chromestyle ul li a:hover{
background-color: #000000; /*THEME CHANGE HERE*/
}
 
#active a:link, #active a:visited, #active a:hover
{
color: #ffffff;
text-decoration: underline;
}
 
 
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute; 
width: 145px;
top: 5em;
left: 0em;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 11px Arial;
line-height:18px;
z-index:100;
background-color: #000000;
visibility: hidden;
}
 
.dropmenudiv a{
width: 145px;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #ffffff;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #000000;
width: 145px;
}

[karinne]

Originally Posted by tanya68

The padding between the links dissapears and does not fix itself even when going back to the original size. THIS HAPPENS IN EXPLORER ONLY.

No ... it happens in FF too ... well ... part of the menu disappears in FF. And there's line appearing that breaks your background.

There's not much that can be done. You're using tables to structure your layout which is a really bad idea. See the link in my sig or the sticky at the top for why you shouldn't be using tables and how to do it with CSS and DIV.

The other thing is, the design is not a very good "web" design because of just this problem ... font size that can be increased by the user.

I suggest maybe you should rethink the design otherwise ... there isn't much you can do.

[Ryan Fait]

I must agree with Karinne on this one. At least the text resizes, but I'm sure there's a way where you could have the entire layout expand with it.