2012-03-20 12 views
4

HTML

問題は、ページがモジラ、クロムやサファリに適切にrederingされていることである が、オペラオンザは、タブの後と前に挿入された空間でありますあなたはすなわち9と、この作業をするためにすべてのトリックを知っていれば オペラトップポジションのレンダリング問題

はここに私を助けてくださいページの右側にあるすべてのコンテンツを持っている「mainright3」のdiv ..

もコメントしてください。 。

その今すなわち9上の互換性が、IE9とより優しい作り上の任意の入力は素晴らしいことでしょう!(ページはすなわち年代以前をサポートするものではありません)事前に

感謝!!!!ません

<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"> &nbsp;&nbsp;Log Out</a>&nbsp;&nbsp; 
    <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

私は私が位置値上部を除去し、オペラdoesntのすぐ上部値-100 – aravind

+1

と適切DIVを表示するように..「mainright3」DIV上記クリア使用---それを解決ブラウザそのHTML5パーサーを使用している場合、HTML5パーサーを使用しているすべてのHTMLエラーを同じにする必要があります。しかし古いバージョン(とIE9)では、古いエラーレンダリングを使用していますが、これは異なるものです。たとえば、インラインスパンはブロックdivをラップできません。 – stommepoes

+1

@aravindあなたの問題を解決した場合 - 質問を閉じてください。 – biphobe

答えて

0

ハイiはOperaブラウザの問題を解決する、技術が次のです。

1)最初のものを削除#mainright3、#mainrightと#mainright3スタイルが両方であるためです。 2)次のように#mainrightの小さな調整を行います。これでオペラブラウザで簡単に作業できます。

#mainright { 
position:relative; 
width:740px; 
height:auto; 
padding:0px 10px 10px 10px; 
margin:0px; 
float:right; 

}