All geek questions in one place

Problem with Opera Top rendering

HTML pages

The problem is that the page crashes correctly on mozilla, chrome and safari, but in the statement it is the space that is inserted after the tabs and before the "mainright3" section, which has all the content on the right side of the page.

Please help me here.

Also, if you know any tricks to make this work with ie 9, please comment.

Now it is incompatible with ie 9, but any inputs to make it more friendly with ie9 will be great! (the page is not intended to support earlier versions)

Thanks in Advance !!!!

<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 , please ignore the unwanted code as any script content in html or additional classes in 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; }
+4
source share
1 answer

hai i fix Opera browser problems, the following method.

1) delete # mainright3 first, because #mainright and # mainright3 styles are both. 2) you make minor adjustments in #mainright, as shown below, it is now easy to work in operating browsers.

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

}

0
source

Source: https://habr.com/ru/post/1402369/

More articles:


All Articles