CSS Problem when printing Menu

Question

I had a Menu which is functionally doing well. But in the master page where I'm aligning my menu, It takes a line space for itself and also starts at the middle of page(not exactly middle of the page but 10 spaces from left.

This is my CSS:

.menu {
}
.menu ul {
    list-style:none;
}
.menu li {
    list-style:none;
    display:block;
    float:left;
    height:53px;
    line-height:53px;
}
.menu li a {
    display:block;
    float:left;
    color:#852917;
    font-size:11px;
    font-weight:bold;
    line-height:53px;
    text-decoration:none;
    padding:0 25px;
    background:#ebdbca url(menu_037_bg.jpg) no-repeat left;
    border-bottom:2px solid #d7a278;
}
.menu li a:hover {
    color:#fff;
    background:#a73e29 url(menu_037_h.jpg) no- repeat left;
    border-bottom:2px solid #b75542;
}
.menu li a.current {
    display:block;
    float:left;
    color:#fff;
    background:#a73e29 url(images/menu_037_h.jpg) no- repeat left;
    border-bottom:2px solid #b75542;
    font-size:11px;
    font-weight:bold;
    line-height:53px;
    text-decoration:none;
}
.menu li a:hover.current {
    color: #fff;
}

This is the menu:

<tr>
    <td colspan="5" style="background-color: #001A65; height: 7px;"></td>
</tr>
<tr>
    <td colspan="5" style="background-color: #CFB549; height: 10px; text-align: right;"></td>
</tr>
<tr>
    <td>
        <asp:menu onmenuitemclick="menu_navigate" id="Menu1" orientation="Horizontal" runat="Server" width="100%" cssclass="menu" includestyleblock="false" renderingmode="List" staticmenuitemstyle-itemspacing="10px">
        <staticmenuitemstyle bordercolor="Black" borderstyle="Solid" borderwidth="0px" horizontalpadding="20px"/>
        </asp:menu>
    </td>
</tr>

Can u guys help me out. I'm on this for almost an hour and not been able to figure it out..

You might want to include the rendered HTML, rather than the unprocessed/unrendered ASPX page, since the rendered HTML is what the CSS will be operating on. — mikemanne
– mikemanne, Commented Aug 17, 2011 at 21:33
Can you provide a screen shot of what you are describing? Having trouble picturing what you are trying to say. — CheckRaise
– CheckRaise, Commented Oct 13, 2011 at 18:33

PCasagrande · Accepted Answer · 2011-10-30 12:20:17Z

1

I usually hide my menus when they are printed as it is not as though any one can use them. In order to do so just put this in one of your head tags, using the proper class:

@media print {
    menu { display: none; }
}

If you want the menu to print you can use the media type of print to fix any errors that come up.

answered Oct 30, 2011 at 12:20

PCasagrande

5,4123 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Problem when printing Menu

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related