You are invited to Log in or Register a free Frihost Account!

extra line from css in drop down menu

hi everyone,

i have a new css question, i have fixed the width issue i was talking about earlier but i now have a mystery line coming from the tables maybe in the drop down menu, i'm not really sure. they only appears in the first part so the rest shows up properly but with or without hover the line is there under the text but only the second part that wraps so it shouldnt be an underline.

this problem doesnt show up in ie6 but the for some reason the text is larger in the ie6 than in firefox. text size is set to medium so i dont think its like a simple issue. anyway any help from the css mastas would be great.

Not really sure where your problem is....would you mind clarifying what your problem is? Is it that little blue line below the home menu button?
haha well its cause i fixed it now! well at least the line problem seems there was a border that was being made for the table but i set that to invisible instead of none and now its fixed... the test is still larger in ie6 and this is messing up the way the menu and the links at the top look
If you give us part of css where you are solve problem in IE7 then we can say more about your new problem in IE6. Anyway, you can give two different infrormation for the same ul or li using
!important comand. IE6 don't recognize this command and ignore it. But, new browsers using this for their property what is great to solve problem browsers differences. Simple example:

ul ul {
  height : 1.5em;
  width : 8em;
  position: relative !important; /*For FF, IE7, etc.*/
  position: absolute;  /*For IE6*/

Note: !important must come before IE 6 command.

hi Sonam,

well here are some of the important parts of the css that affect the section we're talking about:

/* links above the logo / footer */
#links, #footer
{ margin-left: auto;
margin-right: auto;
padding: 14px 19px 0px 19px;
width: 720px;
height: 30px;
font-size: 0.79em;
line-height: 100%;

#links{text-align: right;}

#footer{text-align: center;
font-size: 79%;

#links a, #footer a{text-decoration: none;}

#links a:hover, #footer a:hover{text-decoration: underline;}

.menu {
height: 42px;
width: 760px;
margin-left: auto;
margin-right: auto;
background: #FFFFFF url(menu.png);
color: #D1D3D7;
border-color: #D7D7D7;
position: relative;
z-index: 10;
line-height: 100%;

/* get rid of the default padding - margin and bullets */
.menu ul {
margin: 0px auto;
list-style-type: none;
/* make menu horizontal */
.menu ul li {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 118px;

/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
height: 32px;
width: 115px;
text-decoration: none;
padding: 8px 5px 2px 3px;
color:#888; */
/*border-bottom:8px solid #888;*/
/*background:#fff; */

text-transform: uppercase;
background: #FFFFFF url(menu.png);
color: #D1D3D7;
border-color: #D7D7D7;
font-size: 97%;

i dont know if this helps but the full css is available here:
Sorry I cannot recognise where you must edit your css but the problem is in first child position and I think you are using position : relative; what IE6 reading different then other browsers. I am not sure but you can try to change margins or position in absolute

what do you mean by the problem is in the first child position? also how will changing the margins or putting the position to absolute make the text smaller in ie6?
When I was try your page in IE6 it have gap between first and second menu. If I try to go down the menu was close, and I am talking about this gap not about font size. If I good see, font size in your menu is defined in last part .menu ul li a, .menu ul li a:visited. If you want smaller size of font only for IE then you can use Conditional comments. It is comming after all external css.
<!--[if IE]>
<style type="text/css">
.menu ul li a, .menu ul li a:visited {
font-size : 90%;

Hope this will help,
I noticed the gap problem before but I was expecting that this problem was related to the larger text (I seem to remember having this problem before when I first setup the menu) and as expected after adding the <!--[if IE]> the problem is now fixed!

I added this fix also for the header links which is also now fixed. I also changed the <!--[if IE]> to <!--[if IE 6]>, I don't know if anyone out there has 5.5 to check but i could also put it to <!--[if lte IE 6]>.

One last thing I noticed is that the bottom and right borders for the drop down menu only show up after moving the mouse cursor on the drop down, so not sure what the problem is there... thanks so much for your help so far Sonam!
<!--[if lte IE 6]> is the best solution.

Related topics
Drop down menu things
drop down menus
help on a drop down menu!! Please Read!!
Drop down Menu
Looking for Drop Down and Tab Menu Effects
Having Trouble With Drop Down Menus
css Drop-Down menu issue
Do you lose PR when using a drop down menu?
help needed for coding a menu
Drop Down Menu
Drop down Menu
set selected value in drop down
CSS only dropdown menu--why isn't the menu icon show always?
drop right down menu
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

© 2005-2011 Frihost, forums powered by phpBB.