STILL47DEATH

Newbie

View Profile See their activity

Posts
1
Joined
November 28, 2010
Last visited
November 30, 2010

STILL47DEATH's Achievements

Explorer (1/14)

Reputation

Проблемы шаблона с кроссбраузерностью

STILL47DEATH posted a question in HTML Coding

Доброго времени суток. Небольшая история: Как-то потребовалось шаблончик на игровую тематику для одного проекта. Ну с рисованием макетов у меня вообще туго, нашёл в паблике шаблончик, скачал, начал его резать. В итоге удалил всё, что мне было не нужно. Проверяю в ff - всё нормально, захожу через ie или chrome - там шаблон начинает съезжать. Сам я знаю неплохо html (начинающий, но всё же...), но знаю его в нормальной форме (как мне кажется) и шаманить не умею, поэтому понятия не имею, как сделать кроссбраузерность (разные браузеры и разрешения мониторов). Поэтому прошу помощи, как можно было бы понять, мне нужна стабильность шаблона. HTML-код: <html> <head> <title>ТЕСТ</title> <link href="my.css" rel="StyleSheet" type="text/css"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body class="indexbg">  <div><div id="shared_topnav" class="tn_forums"> <div class="topnav"> <div class="tn_interior"> <a href="/war3ft_stats/" target="_blank">Ссылка</a> <a href="/war3ft_stats/" target="_blank">Ссылка</a> <a href="/war3ft_stats/" target="_blank">Ссылка</a> <a href="/war3ft_stats/" target="_blank">Ссылка</a> <a href="/war3ft_stats/" target="_blank">Ссылка</a> </div> </div> <div class="tn_push"></div> </div> <div id="header"> <div class="logo-container"> <div class="logo-right"> <h1 class="wow-logo"></h1> <a class="ielink" href="/"></a> </div> </div> </div> <div class="gryph-container"> <div class="gryph-z"> <span class="left-gryphon"></span> <span class="right-gryphon"></span> </div> </div> <div style="margin: 0pt auto; position: relative; display: block; width: 720px; z-index: 6000;"> <div class="indexbg-extra"> <div></div> </div> </div> <div style="background: none repeat scroll 0% 0% transparent;"></div> <center> <div id="container" style="width: 775px; position: relative; text-align: right;">  <div class="border" style="width: 775px; margin: 0pt auto;"> <div class="im1"> <div class="im2"> <div class="im3"> <div class="im4"> <div class="im5"> <div class="im6"> <div class="im7"> <div class="im8"> <div style="background: none repeat scroll 0% 0% transparent; width: 100%; display: block;"> <div style="width: 700px; margin: 0pt auto;" class="index-page"> <div> <div class="border" style="width: 270px; margin: 0pt auto;"> <div class="im1"> <div class="im2"> <div class="im3"> <div class="im4"> <div class="im5"> <div class="im6"> <div class="im7"> <div class="im8"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> </div> <div style="width: 700px; margin: 0pt auto;">CONTENT<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> dsfcsdfsdfsd<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <div id="mkwrapper" style="width: 98%;"> </div> </div> </div></div></div></div></div></div></div></div></div></div></div></div></center></div> </body> </html> CSS: body { background: #000000 url('images/desing/theme-bg.jpg') repeat-x 100% 26px; } h1.wow-logo { background: url('images/desing/wowlogo.png') no-repeat 0 0; } .logo-container { background: url('images/desing/decor-left.gif') no-repeat left top !important; } .logo-right { background: url('images/desing/decor-right.gif') no-repeat right top !important; } #postbackground { background: #000 url('images/desing/forum-tile-left.jpg') repeat-y left top; } #postbackground .right { background: url('images/desing/forum-tile-right.jpg') repeat-y right top; } .bg-theme { background: url('images/desing/single-bg.jpg') no-repeat 100% 1px; } #header { background: url('images/desing/top-tile.gif') repeat-x top center; } .left-gryphon { background: url('images/desing/gryphon-left.gif') no-repeat; } .right-gryphon { background: url('images/desing/gryphon-right.gif') no-repeat; } #footerShell { background: url('images/desing/bottom-bg.gif') repeat-x; } .pbfooterlogo { background:url('images/desing/bottom-blizzlogo.gif') no-repeat; width:400px; height:46px; margin:auto; } #search {background:url('images/desing/forumliner-bg.gif') repeat-x; } #search div.forum-index { background:url('images/desing/footer-forumindex-right-top.gif') no-repeat right; } #search li.a { background:url('images/desing/forum-menu-left.gif') no-repeat; } #search li.b { background:url('images/desing/forum-menu-search-bg.gif') repeat-x; } #search li.c { background:url('images/desing/forum-menu-search-right.gif') no-repeat; } #search .pbsearch-left { background:url('images/desing/forum-menu-search-left.gif'); width:12px; height:39px; border:none; } #search .pbsearch-adv { background-image: url('{T_IMAGESET_LANG_PATH}/wrath/forum-menu-advanced-search.gif'); } #search .pbsearch-menumid { background:url('images/desing/forum-menu-mid.gif'); width:19px; height:39px; border:none; } #search #pbsearch-search { background:url('{T_IMAGESET_LANG_PATH}/wrath/forum-menu-search.gif'); width:74px; height:39px; border:none; cursor:pointer; } .tbottom,.forum-index {background:url('images/desing/forumliner-bg2.gif') repeat-x; } #topicheader { background: url('images/desing/topic-bg.gif') repeat-x; } .findex {background: url('images/desing/footer-forumindex-right-bot.gif') no-repeat;} .border .im1{ background: url('images/desing/border-left.gif') repeat-y 0 0; } .border .im2{ background: url('images/desing/border-right.gif') repeat-y 100% 0;} .border .im3{ background: url('images/desing/border-top.gif') repeat-x 0 0; } .border .im4{ background: url('images/desing/border-bot.gif') repeat-x 0 100%; } .border .im5{ background: url('images/desing/border-top-left.gif') no-repeat 0 0; } .border .im6{ background: url('images/desing/border-top-right.gif') no-repeat 100% 0; } .border .im7{ background: url('images/desing/border-bot-left.gif') no-repeat 0 100%; } .border .im8{ background: url('images/desing/border-bot-right.gif') no-repeat 100% 100%;position:relative;z-index:9 } .border .im8 li{ padding: 9px 0 0 15px; background: url('/square.gif') no-repeat 0 8px; } #user { background: url('images/desing/login-bg.gif') repeat-y; } #user div.top { background: url('images/desing/login-top.gif') no-repeat; } #login { background: url('images/desing/login-bg.gif') repeat-y; } #login div.top { background: url('images/desing/login-top.gif') no-repeat; } #logoutbuttons { background: url('images/desing/login-bot-tile.gif') repeat-x; } #logoutbuttons ul li.left { background: url('images/desing/login-bot-left.gif') no-repeat; } #logoutbuttons ul li.mid { background: url('images/desing/login-bot-mid.gif') no-repeat; } #logoutbuttons ul li.right { background: url('images/desing/login-bot-right.gif') no-repeat; } #logoutbuttons ul li .pblogout { background:url('{T_IMAGESET_LANG_PATH}/wrath/login-bot-logout.gif'); width:97px; height:42px; border:none; cursor:pointer; } #logoutbuttons ul li .pboptions { background:url('{T_IMAGESET_LANG_PATH}/wrath/login-bot-options.gif'); width:98px; height:42px; border:none; cursor:pointer; } #loginbuttons { background: url('images/desing/login-bot-tile.gif') repeat-x; } #loginbuttons ul li.left { background: url('images/desing/login-bot-left.gif') no-repeat; } #loginbuttons ul li.mid { background: url('images/desing/login-bot-mid.gif') no-repeat; } #loginbuttons ul li.right { background: url('images/desing/login-bot-right.gif') no-repeat; } #loginbuttons ul li .pblogin { background:url('{T_IMAGESET_LANG_PATH}/wrath/login-bot-login.gif') no-repeat; width:97px; height:42px; border:none; cursor:pointer; } #loginbuttons ul li .pbfaq { background:url('{T_IMAGESET_LANG_PATH}/wrath/login-bot-help.gif'); width:98px; height:42px; cursor:pointer; } #forumHead .list { background: url('{T_IMAGESET_LANG_PATH}/wrath/header-blank.gif') no-repeat; } /*#forumHead li.title a.index:active,#forumHead li.title a.index:visited,#forumHead li.title a.index { font:12px/18px Georgia, "Times New Roman", serif;color:#ffb019 } #forumHead li.title a.index:hover {color:white}*/ #login,#login div.top,#loginbuttons{ width: 235px; } #login,#user {background-repeat:no-repeat !important;background-position:0 15px !important;} #user {height:100px} #login div.textfields { margin: 0 0 0 25px;} #login span { font:14px/20px Georgia, "Times New Roman", Times, serif;color:#c3e0f9} #portrait div.shell {margin: 7px 0 0 25px;} #user div.body { width: 120px; } #logoutbuttons div.iconPosition {top: -23px; left: 69px; } .indexbg { background: #000000 url('images/desing/bg.jpg') no-repeat center 94px; } .indexbg-extra { background: url('images/desing/extra.gif') no-repeat; position:absolute; top:-76px; left:-28%; height:76px; width:150px; z-index:6010; } /* Top Nav Styling */ #shared_topnav { background: #072540 url('images/desing/topnav-bg.gif') 50% 0; } .topnav { background: url('images/desing/topnav-bg2.gif') no-repeat 50% 0; } /* Top Banner */ #shared_topnav { background: #072540 url<BR>('/bg.gif') 50% 0; border-bottom:1px solid black; } .topnav { width:100%; text-align:center; position:absolute; z-index:12; font: bold 11px Tahoma; background: url('/topbg2.gif') no-repeat 50% 0; border-bottom: 1px solid #143352; padding: 6px 0; } .tn_interior { width:916px; margin:0px auto; text-align:right; padding-right:40px; } .topnav a:link, .topnav a:visited { color:#D0A803; text-decoration:none; padding:2px; margin:0 15px; } .topnav a:hover { color: white; } .tn_push { height:26px;} /* Forums Specific Styles */ .tn_forums .tn_interior { width:auto; } /* Armory Specific Styles */ .tn_armory .tn_interior { width:1024px; padding:0;} /* Community Site Specific Styles */ .tn_wow { } #header, .logo-container, .logo-right, .gryph-container, .gryph-z, #main-nav { display: block; } #header { width: auto; min-width: 775px; height: 92px; } .logo-container, .logo-right { width: 732px; height: 92px; } .logo-container { margin: 0 auto; } .logo-right { position: relative; z-index: 20; } h1.wow-logo { position: absolute; top: 1px; left: 235px; margin: 0; padding: 0; width: 262px; height: 142px; } a.ielink { display:block;z-index:99999;width:262px;height:142px;top:0; left: 235px;position:absolute; } .gryph-container { position: relative; width: 100%; min-width: 775px; z-index: 4020; } .gryph-z { position: relative; z-index: 5020; } span.left-gryphon, span.right-gryphon { position: absolute; top: -92px; width: 115px; height: 92px;} span.left-gryphon { left: 0px;} span.right-gryphon { right: 0px;background-position:100% 0 !important } #main-nav { position: relative; width: 100%; height: 48px; min-width: 775px; background: none; margin-top: -1px; margin-bottom: 11px; display:none;} #main-nav div.left { position: relative; width: 100%; height: 65px; min-width: 775px; background: url('{T_IMAGESET_PATH}/subnav/navbar-left.gif') no-repeat 0 0; } #main-nav div.left div.right { position: relative; width: 100%; height: 65px; min-width: 775px; background: url('{T_IMAGESET_PATH}/subnav/navbar-right.gif') no-repeat right; } #main-nav div.left div.right div.nav { width: 100%; text-align: center; margin: 0 auto; padding: 16px 0 0 0; } #main-nav div.left div.right div.nav div.minwidth { width: 775px; min-width: 775px; text-align: center; margin: 0 auto; } #main-nav div.left div.right div.nav div.minwidth-search { width: 900px; min-width: 900px; text-align: center; margin: 0 auto; } #style-switcher { position: relative; width: 100%; min-width: 775px; z-index: 2020; } .switcher-container { position: absolute; top: -50px; right: 70px; } .language-switcher-container { position: absolute; top: -50px; right: 180px; } .language-selector {padding:0 0 0 15px;} h1.theme-title { height: 25px; width: 111px; margin: 0; padding: 0; } h1.language-title { height: 25px; width: 111px; margin: 0; padding: 0;} #style-switcher ul { display: block; list-style: none; margin: 0; padding: 0 0 0 20px; height: 25px; width: 108px; } li.alliance { display: block; float: left; background: url('{T_IMAGESET_PATH}/toggle-alliance0.gif') no-repeat; height: 25px; width: 32px; } li.horde { display: block; float: left; background: url('/toggle-horde0.gif') no-repeat; height: 25px; width: 31px; } li.bc { display: block; float: left; background: url('/toggle-bc0.gif') no-repeat 0 -1px; height: 25px; width: 28px; } /*li.xmas { display: block; float: left; background: url('/toggle-xmas1.gif') no-repeat 0 -1px; height: 25px; width: 28px; }*/ .bg-theme { height: 170px; } #postbackground { width: 100%; display: table; clear: left; } #postbackground .right { padding: 5px; } /* IMPORT body */ body, .importbody { background-color: #000000; background-image: url('http://laz.cc/600.jpg'); background-repeat: repeat-x; font-size: 10px; color: #659add; font-family: Verdana, Arial, Helvetica, sans-serif; } body { font-size: 10px; margin:0px; padding:0px; /* Opera 0 margin */ text-align: center; /* center in IE */ } /* IMPORT body background (used for SMF) */ .importbgbody { font-size: 10px; } /* portal wrapper */ #mkwrapper { text-align:left; /* left-align text in IE */ margin: 0px auto 0px auto; } /* IMPORT logostrip */ #mklogostrip, #importlogostrip { background-color: #8cb6e7; } /* logostrip */ #mklogostrip { text-align: left; } /* IMPORT global font formatting */ table, tr, td, .tdglobal, .importfont { font-size: 10px; color: #437893; font-family: Verdana, Arial, Helvetica, sans-serif; } /* global font formatting */ table, tr, td, .tdglobal { font-size: 10px; } /* IMPORT main portal table bg (if different than body bg) */ .tabmain, .importmain { font-size: 10px; } /* main portal table */ .tabmain { margin:0px; padding:0px; } /* images */ img { border: 0px; vertical-align: middle; /* Meo: Added in C1.2 */ } /*============================= M K IMPORT LIGHT BACKGROUND P =============================*/ .modulecell, .urlo2, .tabnews, .trattini, .trattini3, .tablemenu, .taburlo, .importlightback { background-color: #0a0c0d; color: #666666; } /*============================= M K IMPORT MEDIUM BACKGROUND P =============================*/ .navigatore, .tdblock, .moduleborder, .modulex, .mkpagecurrent, .importmediumback { background-color: #000000; color: #496c9f; } /*============================= M K IMPORT DARK BACKGROUND P =============================*/ .urlo, .sottotitolo, .importdarkback { background-color:#033675; color: #666666; } /*============================= M K border and divider styles P =============================*/ /* vertical spacer image used in portal skin */ /* .vspacer { background-image: url(./mkportal/templates/Forum/images/punto_vert.gif); background-repeat: repeat-y; background-color: transparent; } */ /* IMPORT border-color */ .tabmain, .tablemenu, /* block wrapper, chat button strip */ .taburlo, .urlo2, .tabnews, .trattini, .trattini2, .trattini3, .mkpagelink, .mkpagelinklast, .mkpagecurrent, .titadmin, .importborders { border: 1px solid #5c88c8; } .trattini { /*used only in tpl_main.php(deprecated), blog, ad_blocks.php*/ border-width: 1px 0 0 0; border-style: dashed; } /* blocks admin */ .trattini2 { border-width: 0 1px 0 0; border-style: dashed; } .trattini3 { /* used only in blog, quotes, urlobox, calendar*/ border-width: 0 0 1px 0; border-style: dashed; } /*============================= M K hyperlink styles P =============================*/ /* IMPORT global links */ a:link, a:active, a.uno:link, .importlink { font-family: Verdana, Arial, Helvetica, sans-serif; color: #496c9f; text-decoration: none; } a:visited, a.uno:visited, .importvisited { font-family: Verdana, Arial, Helvetica, sans-serif; color: #496c9f; text-decoration: none; } a:hover, a.uno:hover, .importhover { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; } /* a:active { font-family: Verdana, Arial, Helvetica, sans-serif; color: #496c9f; text-decoration: none; } */ /* bold navbar, block, module links */ a.uno:link { font-size: 10px; font-weight: bold; text-decoration: none } a.uno:visited { font-size: 10px; font-weight: bold; text-decoration: none } a.uno:hover { font-size: 10px; font-weight: bold; text-decoration: underline; } /* block text links */ /* .tablemenu a:link, a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; color: #496c9f; text-decoration: none; } .tablemenu a:hover { text-decoration: underline; } .tablemenu a:active { text-decoration: none; } */ /* global contrasting text and hyperlink color */ .mktxtcontr, a.mktxtcontr:link, a.mktxtcontr:visited { color: #ff0000; font-weight: bold; text-decoration: none; } a.mktxtcontr:hover { font-weight: bold; text-decoration: underline; } /* contrasting text and hyperlink color 2 (admin) */ .mktxtcontr2, a.mktxtcontr2:link, a.mktxtcontr2:visited { color: #0000ff; font-weight: bold; text-decoration: none; } a.mktxtcontr2:hover { font-weight: bold; text-decoration: underline; } /*============================= M K form styles P =============================*/ /* remove margin after closing "form" tag in MSIE */ form { margin: 0; padding: 0 } /* IMPORT form styles */ input, textarea, select, .bgselect, /* input fields */ .mkbutton, /* global submit buttons */ .mkblkinput, /* block input */ .mkradio, .importforms { background-color: #dfe6ef; /* border: 1px solid #4C77B6; */ /* margin: 0px; */ /* padding: 0px;*/ font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 10px; color: #496c9f; vertical-align: middle; } /* set form padding and margin */ /*.mkbutton,*/ /* global submit buttons */ /* textarea,*/ input, select, .bgselect, /* input fields */ .mkblkinput /* block input */ { margin: 0px; padding: 0px; font-size: 9px; font-weight: normal; /* needed for Mozilla */ } .mkbutton { /* Global submit buttons */ padding: 3px; } .mkbbbutton { /* MKP BBcode editor buttons */ margin: 0; padding: 0; } /* radio/checkbox buttons - remove background color and border in IE */ /* .mkradio { background-color: transparent; border-width: 0px; } */ /* configure blog textarea */ textarea.mkwrap1 { overflow: auto; /* width: 230px; */ width: 100%; } /* edit blog textarea */ textarea.mkwrap2 { overflow: auto; width: 500px ; } /*============================= M K navstrip styles P =============================*/ /* top navstrip */ .navigatore { vertical-align: bottom; text-align: right; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: 300; font-size: 9px; border: 0; } /*============================= M K block styles P =============================*/ /* used in functions.php (function main_page) */ .blocks { padding: 0px; } /* block td cell */ .tdblock { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; border: 0; margin: 2px; } /* block title bar */ .sottotitolo { vertical-align: bottom; text-align: left; font-size: 11px; font-weight: bold; } /* horizontal spacer between blocks */ .tdspacer { line-height: 3px; } /*============================= M K module global styles P =============================*/ /* IMPORT module table headings */ th.modulex, .importmodulex { background-color: #f1f5f8; height: 25px; } th.modulex { white-space: nowrap; } .modulex { border-width: 0 0 0 0; } /* Reviews description text */ .modulelite { font-size: 8pt; /* color:#a6bbcd;*/ } /* block padding (news, admin) */ .contents { padding: 10px; } /* module pagination links */ .mkpagelink { padding:1px 3px 1px 3px; font-weight: normal; } .mkpagelinklast { padding:1px 3px 1px 3px; font-weight:normal; } .mkpagecurrent { padding:1px 3px 1px 3px; font-weight:normal; } /* admin cp titles with top border - used in frontend and backend */ .titadmin { margin: 0px; font-size: 11px; font-weight: bold; border-width: 1px 0 0 0; border-style: dashed; } /*============================= M K shoutbox module styles P =============================*/ td.taburlo{ margin:5px; padding:5px; border: 0; } /* shouter and date cell */ .urlo { line-height: 18px; vertical-align: bottom; text-align: left; font-size: 11px; font-weight: bold; padding: 4px; } /* shout cell */ .urlo2 { padding: 4px; border-width: 0 0 1px 0; border-style: solid; text-align: left; font-size: 11px; font-weight: bold; } /* white shouter text */ /* .urlocontrast { color: #ffffff; } */ /*============================= M K news module styles P =============================*/ /* news table with border */ .tabnews { border-width: 1px; border-style: dashed; margin:0px; padding:0px; font-size: 10px; } /*============================= M K font styles P =============================*/ /* red error page text */ .mkerror { font-size: 12pt; color: #ff0000; font-weight:bold; } /* MKPQuote quotation text */ /* .mkquote { color: #0000ff; } */ /* MKPGallery module ecard, offline page */ .ecardtitle, .offlinetxt { font-size: 10pt; font-weight: bold; text-align: center; } /*============================= M K BBcode quote styles P =============================*/ .mkquoteball { font-size: 9px; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; background-color: #000000; padding: 0; } .mkquotetext { font-size: 10px; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; background-color: #000; margin: 0; padding: 0; } table .mkquotetable{ width: auto; /* IE */ text-align: left; } /* Added in C1.2 */ /* Table background highlight */ .bghighlight1 { background-color: #EAF8EB; } /* Table background highlight 2 */ .bghighlight2 { background-color: #EFCBCB; } /* mkportal footer copyright - Do not remove, modify or obscure the copyright text */ .mkcopyright { font-size: 10px; } .mkcopyright a { text-decoration: none; } /* Calendar block current day highlighting */ #mkcaltoday { border:2px; border-style:outset; background-color: #ffff00; } /* Table Cell Alignment ltr/rtl */ /* default is "left" */ .mkalign1 { text-align: left; } /* default is "right" */ .mkalign2 { text-align: right; } Ребят, тут css не чищеный, так что лишнего там много! Все файлы-картинки в архиве: http://zalil.ru/30046811 Там же и оригинальный (скаченный) шаблон, который воде как адаптирован под Ucoz, но говорю сразу, мне нужно не под юкоз подгонять (пишу это, так как работая с юкозом нужно знать свои уловки), а под обычных хостинг или сервер! В общем тут главная проблема с bg-картинками, они постоянно съезжают, не знаю как зафиксировать, чтобы во всех браузерах одинаково показывалось! Help me!
- November 29, 2010

Sign In

STILL47DEATH

Posts

Joined

Last visited

STILL47DEATH's Achievements

Explorer (1/14)

Reputation

Проблемы шаблона с кроссбраузерностью

Forums

Important Information