页面的HTML
问题是页面在mozilla，chrome和safari上正确地重新排列，
但是在opera上是一个空格，它被插入到标签之后和“mainright3”div之前，它包含了页面右侧的所有内容。
请帮帮我..
此外，如果您知道任何使用此技巧的技巧，请发表评论..
它现在不兼容了，但是现在使用ie9使它更友好的任何输入都会很棒！（该页面并不打算支持早期的ie）
先谢谢!!!!
<html>
<head>
<title>Welcome to Sakoota Back Office - Admin Management</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../css/admin-500.css">
<script type="text/javascript" src="../js/design.js"></script>
<!-- ImageReady Styles (admin page pro.ai) -->
<!-- Added for Developing Purpose -->
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/validate.js"></script>
<link rel="stylesheet" type="text/css" href="../css/validate.css"/>
<!-- For Create and Edit menu tabs -->
</head>
<body>
<center>
<!-- TABLE_01 IS THE Main div containing the whole page -->
<!-- Table_01 Main Div covering the whole page-->
<div id="Table_01" style="font-family:customfont;">
<!-- FloatLog is the div containing "search box" "logout" and "Admin NAme"-->
<div id="floatlog">Hello <?php echo $_SESSION['AdminLogin']; ?>!
<a href="../logout.php?action=logout" style="font-size:14px"> Log Out</a>
<a href="../changePassword.php" style="font-size:14px">Change password</a>
</div>
<div class="logo"><img src="../images/logo.png"></div><!--logo div--><!--top navigation bar : "top nav"--><!--blue navbar in the main navigation bar--><!--tabname is the manage label div--><!--tabname1 is the label of the current tba in the right content div-->
<span id="createMenu">
<div id="topsecond"> <!--main tabs which are used to create and edit-->
<ul>
<li id="grey"><a onClick="createPageView();">Create</a></li>
<li id="blue"><a onClick="editPageView();" style="cursor:pointer;">Edit</a></li>
</ul>
</div>
</span>
<span id="editMenu" style="display:none;">
<div id="topsecond"> <!--main tabs which are used to create and edit-->
<ul>
<li id="blue"><a onClick="createPageView();" style="cursor:pointer;">Create</a></li>
<li id="grey"><a onClick="editPageView();">Edit</a></li>
</ul>
</div>
</span>
<!-- Start for Manage Menu -->
<div id="leftbarmain" class="greygradhor">
<div id="leftsec" class="bluegraddia">
<?php include "../leftManageMenu.php"; ?>
</div>
</div>
<!-- End for Manage Menu -->
<!-- Start for Body Right Menu-->
<div id="mainright">
<div id="labeltablelist" class="greygradhor" style="text-align:justify"></div>
<span id="acknowledgeMsgBoard" style="text-align:center; color:#fff;"></span>
<!-- Start for Create Page -->
<span id="createPageView">
<form name="log" method="post">
<input type="hidden" name="hdAction" id="hdAction">
<div id="righhidable">
<div id="mainsec" class="bluegraddia">
<div id="labeltablelist1" class="greygradhor" style="text-align:justify"><div id="tablelabels1"></div></div>
<div id="formn">
<!-- Success Message for Created User Start -->
<span id="successMsg" style="margin-left:200px;"></span>
<!-- Success Message for Created User End -->
<div id="leftaligntext">
<div style=" padding-top:10px;">
<div style="font-family:customfont;font-size:16px;color:#FFF">Full Name<span style="color:#900;">*</span></div>
<input type="text" class="textfield tfont" id="name" name="name" value="" style="width:200px; padding:3px; padding-left:10px;" ><br>
</div>
<span id="nameErrMsg" ></span>
<br><div style="font-family:customfont;font-size:16px;color:#FFF">Login Name<span style="color:#900;">*</span></div>
<div><input type="text" class="textfield tfont" id="loginname" name="loginname" value="" onBlur="checkName();" style="width:200px; padding:3px; padding-left:10px"><br></div>
<span id="loginnameErrMsg" ></span>
<br><div style="font-family:customfont;font-size:16px;color:#FFF">Email ID<span style="color:#900;">*</span></div>
<div><input type="text" class="textfield tfont" id="email" name="email" value="" onBlur="checkEmail();" style="width:200px; padding:3px; padding-left:10px"><br></div>
<span id="emailErrMsg" ></span>
<br><div style="font-family:customfont;font-size:16px;color:#FFF">Confirm Email ID<span style="color:#900;">*</span></div>
<div><input type="text" class="textfield tfont" id="cemail" name="cemail" value="" style="width:200px; padding:3px; padding-left:10px"><br></div>
<span id="cemailErrMsg" ></span>
<br><div style="font-family:customfont;font-size:16px;color:#FFF">Phone</div>
<div><input type="text" class="textfield tfont" id="phone" name="phone" value="" style="width:200px; padding:3px; padding-left:10px"><br></div>
<span id="phoneErrMsg" ></span>
</div>
<div id="rightaligntextad">
<br><span style="color:#900; font-size:13px; font-weight:bold; margin-right:10px;">* Fields are mandatory...</span>
<br><div style="font-family:customfont; font-size:16px; color:#FFF; padding-left:22px; text-align:left">Mobile<span style="color:#900;">*</span></div>
<input type="text" class="textfield tfont" id="mobile" name="mobile" value="" style="width:200px; padding:3px; padding-left:10px"><br>
<span id="mobileErrMsg" style="float:left; margin-left:20px"></span>
<br><div style="font-family:customfont; font-size:16px; color:#FFF; padding-left:22px; text-align:left">Location<span style="color:#900;">*</span></div>
<input type="text" class="textfield tfont" id="location" name="location" value="" style="width:200px; padding:3px; padding-left:10px"><br>
<span id="locationErrMsg" style="float:left; margin-left:20px"></span><br><br><br><br>
</div>
</div>
</div>
<div id="content" style="text-align:left;" class="greygradhor"><span id="accessErrMsg" style="text-align:center;width:200px;margin-left:205px;"></span>
<!--End For Message Display-->
<div id="lastbuttons" style="text-align:right">
<div>
<input type="submit" name="submit" id="submit" value="SUBMIT" class="bluegraddialabel" style="cursor:pointer; height:47px;">
<input type="reset" name="reset" id="reset" value="RESET" class="bluegraddialabelReset" style=" cursor:pointer; height:47px;">
</div>
</div>
</div>
</div>
</form>
</span>
<!-- End for Create Page -->
</div>
<!-- End for Body Right Menu-->
</div>
</div>
<!-- End ImageReady Slices -->
</center>
</body>
</html>
CSS 请以html中的任何脚本内容或css中的额外类格式忽略不需要的代码。
@charset "utf-8";
/* CSS Document */
#Table_01 {
position:relative;
left:0px;
top:0px;
width:1024px;
height:auto;
padding-bottom:300px;
}
#formn{
position:relative;
height:auto;
}
#topnav {
position:absolute;
left:280px;
top:44px;
width:744px;
height:65px;
}
.greygradhor{
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top, #ededed 0%, #cecece 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#cecece)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ededed 0%,#cecece 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ededed 0%,#cecece 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ededed 0%,#cecece 100%); /* IE10+ */
background: linear-gradient(top, #ededed 0%,#cecece 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#cecece',GradientType=0 ); /* IE6-9 */
box-shadow: 2px 2px 5px #888888;
font-family:customfont;
font-size:24px;
color:#666;
}
#navbar {
margin-top:0px;
position:absolute;
top:56px;
width:704px;
height:33px;
left: 299px;
}
.bluegradhor{
background: #4acbef; /* Old browsers */
background: -moz-linear-gradient(left, #4acbef 0%, #00a3de 51%, #008cc7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4acbef), color-stop(51%,#00a3de), color-stop(100%,#008cc7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* IE10+ */
background: linear-gradient(left, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4acbef', endColorstr='#008cc7',GradientType=1 ); /* IE6-9 */
box-shadow: 2px 2px 5px #888888;
}
#tabname {
}
#mainsec {
text-align:left;
position:relative;
padding:10px 10px 10px;
padding-top:48px;
height:auto;
background: #4acbef; /* Old browsers */
background: -moz-linear-gradient(-45deg, #4acbef 0%, #00a3de 51%, #008cc7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4acbef), color-stop(51%,#00a3de), color-stop(100%,#008cc7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* IE10+ */
background: linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4acbef', endColorstr='#008cc7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
box-shadow: 2px 2px 5px #888888;
}
#leftbarmain {
position:absolute;
left:16px;
top:100px;
width:243px;
height:601px;
}
#leftsec {
position:absolute;
left:6px;
top:8px;
width:231px;
height:579px;
z-index:1;
padding-top:15px;
}
.bluegraddia{
background: #4acbef; /* Old browsers */
background: -moz-linear-gradient(-45deg, #4acbef 0%, #00a3de 51%, #008cc7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4acbef), color-stop(51%,#00a3de), color-stop(100%,#008cc7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* IE10+ */
background: linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4acbef', endColorstr='#008cc7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
box-shadow: 2px 2px 5px #888888;
}
.bluegraddialabel{
background: #29ABE2;
box-shadow: 2px 2px 5px #888888;
padding-top:10px;
}
.bluegraddialabel1{
background: #29ABE2;
box-shadow: 2px 2px 5px #888888;
padding-top:10px;
}
.bluegraddialabelReset{
background: #29ABE2;
box-shadow: 2px 2px 5px #888888;
padding-top:10px;
}
#mainright {
position:relative;
left:145px;
top:100px;
width:740px;
height:auto;
padding:10px 10px 10px 10px;
padding-top:0px;
}
#mainright3 {
position:relative;
left:145px;
top:191px;
width:740px;
height:auto;
padding:10px 10px 10px 10px;
padding-top:0px;
}
#topsecond {
position:absolute;
left:311px;
top:41px;
width:410px;
height:47px;
}
#topsecond ul li#blue{
color:#ffff;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
#topsecond ul li#gray{
color:#06F;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
0
body{
text-align:center;
margin:auto;
}
#topsecond > ul{
font-size: 1em;
list-style:none;
}
#topsecond ul li{
margin:0 25px 0 0;
padding:10px 35px;
display:block;
float:left;
color:#FFF;
-webkit-user-select: text;
-moz-user-select: none;
user-select: none;
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top, #ededed 0%, #cecece 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#cecece)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ededed 0%,#cecece 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ededed 0%,#cecece 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ededed 0%,#cecece 100%); /* IE10+ */
background: linear-gradient(top, #ededed 0%,#cecece 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#cecece',GradientType=0 ); /* IE6-9 */
box-shadow: 2px 2px 5px #888888;
}
a{
text-decoration: none;
font-family:customfont;
color:#29abe1;
font-size:26px;
}
.buttons {
margin-top:25px;
z-index:1000;
float:left;
height:36px;
width:230px;
margin-left:-8px;
display:block;
margin-top:10px;
margin-bottom:5px;
}
#tabname{
position:absolute;
left:288px;
top:133px;
width:163px;
height:58px;
background: #4acbef; /* Old browsers */
background: -moz-linear-gradient(-45deg, #4acbef 0%, #00a3de 51%, #008cc7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4acbef), color-stop(51%,#00a3de), color-stop(100%,#008cc7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* IE10+ */
background: linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4acbef', endColorstr='#008cc7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
box-shadow: 2px 2px 5px #888888;
padding-top:15px;
}
#tabname1{
position:absolute;
left:53px;
top:134px;
width:162px;
height:54px;
background: #4acbef; /* Old browsers */
background: -moz-linear-gradient(-45deg, #4acbef 0%, #00a3de 51%, #008cc7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4acbef), color-stop(51%,#00a3de), color-stop(100%,#008cc7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* IE10+ */
background: linear-gradient(-45deg, #4acbef 0%,#00a3de 51%,#008cc7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4acbef', endColorstr='#008cc7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
box-shadow: 2px 2px 5px #888888;
padding-top:15px;
}
.tabname{
font-family:customfont;
color:#FFF;
font-size:26px
}
.textfield{
font-family:customfont;
text-align:left;
padding-top:25px;
height:25px;
color:#333;
}
#textfield1{
font-family:customfont;
padding-top:25px;
height:25px;
color:#333;
}
#leftaligntext{
text-align:left;
position:relative;
width:320px;
}
#leftaligntext2{
text-align:left;
float:left;
width:320px;
}
#rightaligntext{margin:0;padding:0}
#rightaligntext1{
text-align:right;
float:right;
width:284px;
height: 293px;
left: 14px;
bottom:400px;
}
#rightaligntextad{
text-align:right;
position:absolute;
width:224px;
height: 217px;
left: 490px;
top: -9px;
}
#rightaligntextsub{
text-align:right;
position:absolute;
width:359px;
height: 324px;
left: 355px;
top: -9px;
}
#rightaligntextsub1{
text-align:right;
position:absolute;
width:359px;
height: 348px;
left: 355px;
top: -9px;
}
#content{
left: 8px;
width: 700px;
height: auto;
padding:30px 10px 10px 10px;
margin-bottom:10px;
}
#labelbuttoncontent{
text-align:center;
margin-left:20px;
margin-top:40px;
width:244px;
height:42px;
font-family:customfont;
font-size:22px;
color:#FFF;
}
#submit{
width:110px;
height:38px;
font-family:customfont;
font-size:22px;
color:#FFF;
}
#reset{
position:relative;
width:110px;
height:38px;
font-family:customfont;
font-size:22px;
color:#FFF;
}
.dropshadow{
box-shadow: 2px 2px 5px #888888;
}
.logo{
position:absolute;
left: 14px;
top: 15px;
width: 143px;
height: 107px;
}
input.largerCheckbox
{
width: 20px;
height: 20px;
}
#labelcontent{
margin-left:-400px;
width: 257px;
}
#labelcontent2{
margin-top:-27px;
margin-left:400px;
width: 257px;
}
#labeltablelist{
position:absolute;
left: 1px;
width: 763px;
height: 45px;
top: -1px;
text-align:justify;
}
#labeltablelist1{
position:absolute;
left: -12px;
width: 764px;
height: 45px;
top: -1px;
text-align:justify;
}
#tablelabels{
position:relative;
left: 14px;
top: 6px;
width: 673px;
color:#29abe1;
height: 45px;
}
#tablelabels1{
position:absolute;
left: -1px;
top: 5px;
width: 744px;
height:36px;
color:#29abe1;
}
#floatlog{
position:relative;
float:right;
width: 400px;
height: 43px;
padding-top:5px;
margin-top:58px;
}
#leftaligntext1{
text-align:left;
position:relative;
width:227px;
left: 15px;
top: 29px;
height: 181px;
}
.radiobutton{
color:#ffff;
position:relative;
left: -1px;
top: 16px;
width: 239px;
}
#topsecond ul li{
/*cursor: pointer;*/
}
#topsecond ul li#blue:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
#topsecond ul li:active {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
#righhidable{
position:relative;
}
.tfont{
font-family:customfont;
font-size:16px;
}
#search{
padding-bottom:5px;
border-radius:6px;
}
#leftaligntext2sub{
text-align:left;
position:relative;
width:320px;
}
答案 0 :(得分：0)
1）首先删除#mainright3，因为#mainright和#mainright3样式都是。 2）你在#mainright中进行如下的小调整，现在很容易在Opera浏览器中工作。
#mainright {
position:relative;
width:740px;
height:auto;
padding:0px 10px 10px 10px;
margin:0px;
float:right;
}