hello,
I've a menu that is made up with css and everything works/looks fine,
but when you change the lettertype size of the browser (IE).
Then i get a bigger/smaller spacing between my menuitems.
The problem is i can't figure out where the problem is.
the css:
ul#submenu { border: 0px; list-style-type: none; margin: 0px; padding: 0px; }
ul#submenu a{ display: block; margin-left: 2px; margin-bottom: 2px; margin-right: 0px; margin-top: 0px; width: 196px; padding-left: 2px; }
li#sub_titel a:link, li#sub_titel a:visited { background-color: #EEEEEE; color: #2461AA; line-height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; }
li#sub_titel a:hover, li#sub_titel a:active { background-color: #DCE1E8; color: #2461AA; }
li#sub_titel span { margin-left: 2px; }
.sub_titel_sel{font-size: 10px; font-weight: bold; background-color: #DCE1E8; color: #2461AA; cursor: default; display: block; line-height: 32px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_titel_sel span { margin-left: 4px; }
li#sub_normaal a:link, li#sub_normaal a:visited { background-color: #EEEEEE; color: #000000; line-height: 25px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; text-decoration: none; }
li#sub_normaal a:hover, li#sub_normaal a:active { background-color: #DCE1E8; color: #000000; }
li#sub_normaal span { margin-left: 5px; }
.sub_normaal_sel{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; background-color: #DCE1E8; color: #000000; cursor: default; display: block; line-height: 25px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_normaal_sel span { margin-left: 7px; }
li#sub_klein a:link, li#sub_klein a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #EEEEEE; color: #2461AA; line-height: 21px; font-size: 10px; font-weight: lighter; text-decoration: none; }
li#sub_klein a:hover, li#sub_klein a:active { background-color: #DCE1E8; color: #2461AA; }
li#sub_klein span { margin-left: 15px; }
.sub_klein_sel{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: lighter; background-color: #DCE1E8; color: #2461AA; cursor: default; display: block; line-height: 21px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_klein_sel span { margin-left: 17px;}
the code in the page:
<ul id="submenu">
<li id="sub_titel"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>normal item</span></a></li>
<li id="sub_normaal"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>normal item</span></a></li>
<li class="sub_klein_sel"><span>small item</span></li>
<li id="sub_normaal"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>normal item</span></a></li>
</ul>I think the problem is that you are using absolute values for widths and heights (e.g.: 100px), where in order to make the elements "elastic" with regard to the font size, you would need to use relative units such as em's (e.g.: width: 15em
.I've also known IE to do strange thing with paragraphs that cause rather strange behaviour.
I've a menu that is made up with css and everything works/looks fine,
but when you change the lettertype size of the browser (IE).
Then i get a bigger/smaller spacing between my menuitems.
The problem is i can't figure out where the problem is.
the css:
ul#submenu { border: 0px; list-style-type: none; margin: 0px; padding: 0px; }
ul#submenu a{ display: block; margin-left: 2px; margin-bottom: 2px; margin-right: 0px; margin-top: 0px; width: 196px; padding-left: 2px; }
li#sub_titel a:link, li#sub_titel a:visited { background-color: #EEEEEE; color: #2461AA; line-height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; }
li#sub_titel a:hover, li#sub_titel a:active { background-color: #DCE1E8; color: #2461AA; }
li#sub_titel span { margin-left: 2px; }
.sub_titel_sel{font-size: 10px; font-weight: bold; background-color: #DCE1E8; color: #2461AA; cursor: default; display: block; line-height: 32px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_titel_sel span { margin-left: 4px; }
li#sub_normaal a:link, li#sub_normaal a:visited { background-color: #EEEEEE; color: #000000; line-height: 25px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; text-decoration: none; }
li#sub_normaal a:hover, li#sub_normaal a:active { background-color: #DCE1E8; color: #000000; }
li#sub_normaal span { margin-left: 5px; }
.sub_normaal_sel{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; background-color: #DCE1E8; color: #000000; cursor: default; display: block; line-height: 25px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_normaal_sel span { margin-left: 7px; }
li#sub_klein a:link, li#sub_klein a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #EEEEEE; color: #2461AA; line-height: 21px; font-size: 10px; font-weight: lighter; text-decoration: none; }
li#sub_klein a:hover, li#sub_klein a:active { background-color: #DCE1E8; color: #2461AA; }
li#sub_klein span { margin-left: 15px; }
.sub_klein_sel{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: lighter; background-color: #DCE1E8; color: #2461AA; cursor: default; display: block; line-height: 21px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_klein_sel span { margin-left: 17px;}
the code in the page:
<ul id="submenu">
<li id="sub_titel"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>normal item</span></a></li>
<li id="sub_normaal"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>normal item</span></a></li>
<li class="sub_klein_sel"><span>small item</span></li>
<li id="sub_normaal"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>normal item</span></a></li>
</ul>I think the problem is that you are using absolute values for widths and heights (e.g.: 100px), where in order to make the elements "elastic" with regard to the font size, you would need to use relative units such as em's (e.g.: width: 15em
.I've also known IE to do strange thing with paragraphs that cause rather strange behaviour.