Problem with TAB
Hi,
Using these codes
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"/>
|
<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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I copied and pasted your code into an empty webpage and the screencast is the results that I got
http://problemwithtab.azurewebsites.net/
http://problemwithtab.azurewebsites.net/
ASKER
Sorry, I don't know why nothing happens when the mouse is hovering the TAB, within Chrome and IE.
ASKER
When running the page having the above codes.
please provide a link to your page
if your code work somewhere else, we need to see your page
if your code work somewhere else, we need to see your page
ASKER
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"/>
|
<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)
{
}
}
}
ASKER