Problem with TAB

Hi,
Using these codes
    <style type="text/css">
        .body {background-color:#BBAEBF;font-family: 'Segoe UI';} 
        ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
        ul li { display: inline-block;  }
        ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_act
        {
        width: 36px;
        height: 30px;
        font-weight:bold;
        }    
        .lb_log{
        top: 30px;
        left: 1185px;
        width: 36px;
        height: 30px;
        font-size:large;
        font-weight:bold;
        }    
        .left {
         position:absolute;
         left:10px;
         border:Groove 1px #ccc;
         width:55px;
         right:10px;
        }

        .right {
         position:absolute;
         left:60px;
         border:none 1px #c00;
         width:65%;
        }
        .topnav{ margin: 102px auto;
        width: 70%;}
    </style> 
    ...
    <div style="background-color:green; position: fixed;left: 0;top: 0; width: 100%; height:100px">
        <div style="position: fixed; left: 0; right: 0; width: 91%; height:80px; margin:auto;">
            <div style="position:absolute; width: 100px; top:5px; height: 30px; background-color: green; right: 0%;">
            <table width="100%">
                    <tr>
                        <td align="right" >
                            <asp:LinkButton ID="lb_act" 
                               Text = "Test1"
                               CssClass="lb_act"
                               Font-Names="Times New Roman" 
                               Font-Bold="true"
                               Font-Size="10pt" 
                               ForeColor="White"
                               OnClick="lb_act_Click"
                               runat="server"/>
                               &nbsp;|&nbsp; 
                            <asp:LinkButton ID="lb_ite_acc" 
                                Text = "Test2"
                               CssClass="lb_log" 
                               Font-Names="Arial" 
                               Font-Bold="true"
                               Font-Size="10pt" 
                               ForeColor="White"
                               OnClick="lb_log_Click" 
                               runat="server"/>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="background-color:white; position: fixed; left: 0; right: 0; top: 10px; width: 63%; height:67px; margin:auto;">
            </div>
            <div class="topnav">
                <ul>
                    <li><a href="#" class="active">Test 1</a></li>
                    <li><a href="#">Test 2</a></li>
                    <li><a href="#">Test 3</a></li>
                    <li><a href="#">Test 4</a></li>
                </ul>    
            </div>
        </div>
    </div>

Open in new window

I don't know why nothing happens, when I click the TABs there, or when mouse is hovering the TABs.
LVL 11
HuaMin ChenSystem AnalystAsked:
Who is Participating?
 
David Johnson, CD, MVPOwnerCommented:
http://screencast.com/t/v3E4EvWl  The tabs change with mouse over for me
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Did you use my codes and have you got no problem at all in there? Thanks a lot.
0
 
David Johnson, CD, MVPOwnerCommented:
I copied and pasted your code into an empty webpage and the screencast is the results that I got
http://problemwithtab.azurewebsites.net/
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
HuaMin ChenSystem AnalystAuthor Commented:
Sorry, I don't know why nothing happens when the mouse is hovering the TAB, within Chrome and IE.
0
 
HuaMin ChenSystem AnalystAuthor Commented:
When running the page having the above codes.
0
 
leakim971PluritechnicianCommented:
please provide a link to your page
if your code work somewhere else, we need to see your page
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Thanks. I did not deploy it to outside yet and it has been deployed on the local server. Here is the whole project.

<%@ Page Title="Test" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="App5._Default" ValidateRequest="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Refresh" content="120" />
	<title>Test</title>
    <style type="text/css">
        .body {background-color:#BBAEBF;font-family: 'Segoe UI';} 
        ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
        ul li { display: inline-block;  }
        ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_act
        {
        width: 36px;
        height: 30px;
        font-weight:bold;
        }    
        .lb_log{
        top: 30px;
        left: 1185px;
        width: 36px;
        height: 30px;
        font-size:large;
        font-weight:bold;
        }    
        .left {
         position:absolute;
         left:10px;
         border:Groove 1px #ccc;
         width:55px;
         right:10px;
        }

        .right {
         position:absolute;
         left:60px;
         border:none 1px #c00;
         width:65%;
        }
        img.background {
            position: absolute;
            z-index: -1;
            width: 100%;
            top: 0;
            left: 0;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
         .shadow {
             -moz-box-shadow: 0 0 5px #888;
             -webkit-box-shadow: 0 0 5px#888;
             box-shadow: 0 0 5px #888;
         }
        .dia {
        display:none;
        }
        .content {
            position: relative;
            width: 1220px;
            height: 780px;
            color:  #fff; /* Text color for content div. */
        }
        #wrapper {width: 1180px; margin-left: auto; margin-right: auto;}
        .topnav{ margin: 102px auto;
        width: 70%;}
    </style> 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
        $('#first').hover(function () {
            // show the class first element
            $('.first').show();
        });

        $('#second').hover(function () {
            // show the class second element
            $('.second').show();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="background-color:#8E6ACC; position: fixed;left: 0;top: 0; width: 100%; height:100px">
        <div style="position: fixed; left: 0; right: 0; width: 91%; height:80px; margin:auto;">
            <div style="position:absolute; width: 100px; top:5px; height: 30px; background-color: #8E6ACC; right: 0%;">
            <table width="100%">
                    <tr>
                        <td align="right" >
                            <asp:LinkButton ID="lb_act" 
                               Text = "Test1"
                               CssClass="lb_act"
                               Font-Names="Times New Roman" 
                               Font-Bold="true"
                               Font-Size="10pt" 
                               ForeColor="White"
                               OnClick="lb_act_Click"
                               runat="server"/>
                               &nbsp;|&nbsp; 
                            <asp:LinkButton ID="lb_ite_acc" 
                                Text = "Test2"
                               CssClass="lb_log" 
                               Font-Names="Arial" 
                               Font-Bold="true"
                               Font-Size="10pt" 
                               ForeColor="White"
                               OnClick="lb_log_Click" 
                               runat="server"/>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="background-color:white; position: fixed; left: 0; right: 0; top: 10px; width: 63%; height:67px; margin:auto;">
            </div>
            <div class="topnav">
                <ul>
                    <li><a href="#" class="active">Test 1</a></li>
                    <li><a href="#">Test 2</a></li>
                    <li><a href="#">Test 3</a></li>
                    <li><a href="#">Test 4</a></li>
                </ul>    
            </div>
        </div>
    </div>
    <div class="content" id="wrapper" >
        <table width="100%">
            <tr>
                <td>
                    <asp:Image ID="img1" ImageUrl="~/../pict/ID-10028343.jpg" CssClass="background" Height="780px" Width="1220px" runat="server"/>
                </td>
            </tr>
        </table>
    </div>
    <br />
    </form>
</body>
</html>

using System;
using System.IO;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections.Generic;
using System.Globalization;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Data.OleDb;
using System.Xml;
using System.Windows;
using System.Drawing;
using System.Text;
using System.Security.Cryptography.X509Certificates;
using System.Net;
using System.Web.UI.HtmlControls;
using System.Net.Security;

namespace App5
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void lb_reg_Click(object sender, EventArgs e)
        {

        }
        protected void lb_log_Click(object sender, EventArgs e)
        {

        }
    }
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.