Inna przeglądarka – inny wygląd strony

fahofiec · 25 Listopada 2005

Mam pewien problem z moim serwisem. Chodzi o to, że pewne jego elementy wyglądają inaczej pod każdą przeglądarką internetową. Kilka osób już próbowało pomóc, ale nie udało się wszystkiego poprawić.

Pierwszą rzeczą jest nagłówek strony:

pod FireFoxem wygląda poprawnie

pod Operą pierwsze słowo jest za bardzo oddalone od początku linii

pod IE całkiem się "sypie" - zajmuje jedną linię zamiast dwóch i jest napisany małymi literami (a nie wersalikami) i mniejszą czcionką niż powinien

Kolejną rzeczą jest pole "Szukaj"

pod FireFoxem jest w porządku

pod Operą tekst "Szukaj" jest poza polem tekstowym

Plik CSS wygląda nstępująco:

body {
 color            : #000000;
 margin-top       : 20px;
 margin-bottom    : 20px;
 padding          : 0px;
 background-color : #FFFFFF;
 font-family      : arial, sans-serif;
 font-size        : 12px;

}
td, tr, p, div {
 font-family      : Arial, Helvetica, sans-serif;
 font-size        : 12px;
 color            : #996600;
}
hr {
 color            : #BCB778;
 height           : 1px;
 width            : 100%;
}
.mod {
 background       : #FFFFFF;
 width            : 2px;
}
.main { 
 float            : left; 
 width            : 100%;
 margin           : 0px; 
 padding          : 0px;
}
.contentdescription { 
 width            : auto !important;
 display          : block;
} 
#buttons {
 float            : right;
 margin           : 0px;
 padding          : 0px;
 width            : 50%;
}
ul#mainlevel-nav {
 font-size        : 11px;
 list-style       : none;
 padding          : 0;
 margin           : 0;
 font-size        : 0.8em;
}
ul#mainlevel-nav li {
 display          : block;
 background-image : none;
 padding-left     : 1px;
 padding-right    : 1px;
 float            : right;
 margin           : 0;
 width            : auto !important;
 font-size        : 11px;
 line-height      : 22px;
 white-space      : nowrap;
 border-left      : 1px solid #cccccc;
}
ul#mainlevel-nav li a {
 font-size        : 11px;
 display          : block;
 padding-left     : 16px;
 padding-right    : 15px;
 text-decoration  : none;
 color            : #999999;
 background       : transparent;
}
ul#mainlevel-nav li a:hover {
 font-size        : 11px;
 color            : #666666;
}
.sublevel {
 padding-left     : 10px;
}
.leftrow {
 background-color : #ECEBD9; 
 width            : 168px;
 height           : 100%;
 margin-right     : 5px;
}
.rightrow {
 background-color : #ECEBD9;
 height           : 100%;
 width            : 168px;
 align            : right;
 margin-left      : 5px;
}
table.moduletable {
 width      : 100%;
 table-layout    : auto;
 border-top       : 1px solid #FFFFFF;
 border-bottom    : 1px solid #BCB778;
}
table.moduletable th {
 font-size        : 11px;
 font-weight      : bold;
 text-transform   : uppercase;
 text-align       : left;
 height           : 21px;
 line-height      : 21px;
 text-indent      : 8px;
 letter-spacing   : 1px;
 color            : #FFF;
 background-image : url(../images/modul.jpg);  
}
table.moduletable td {
 padding-left     : 0px;
 padding-right    : 0px;
}
#search {
 float            : left;
 margin-top       : 5px;
 border           : 1px solid #cccccc;
 padding          : 0px;
 width´           : 123px !important;
 width            : 125px;
 height           : 16px !important;
 height           : 16px;
 overflow         : hidden;
}
#search .inputbox {
 border           : 0px;
 margin-top       : 0px;
 padding          : 2px 3px 2px 6px !important;
 padding          : 0px 3px 2px 6px;
 font-family      : arial, helvetica, sans-serif;
 font-size        : 10px;
 height           : 12px !important;
 height           : 12px;
 width            : 123px !important;
 width            : 125px;
 color            : #666666;
 background       : #FFFFFF;
}
.back_button {
 color            : #996600;
 font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
 font-size        : 11px;
 background       : url(../images/bb.gif);
 background-repeat: no-repeat;
 white-space      : normal;
 font-weight      : normal;
 border           : 1px solid #BCB778;
 padding-bottom   : 4px;
 padding-left     : 20px;
 padding-right    : 2px;
 padding-top      : 1px;
 margin-right     : 4px;
 float            : right;
 font-weight      : normal;
 line-height      : 10px;
 text-decoration  : none; 
}
.button {
 font-size        : 11px;
 color            : #996600;
 border           : 1px solid #BCB778;
 margin-bottom    : 5px;
 background-color : #E3E1C6;
 padding          : 1px;
}
.inputbox {
 border           : 1px solid #BCB778;
 background    : transparent url(../images/back.gif);
 background-color : #ECEAD8;
 margin-bottom    : 5px;
 color      : #660000;
}
.sectiontableheader {
 font-size        : 11px;
 font-weight      : normal;
 text-transform   : uppercase;
 letter-spacing   : 1px;
 color            : #660000;
 background       : #E3E1C6;
 padding          : 1px;
}
.sectiontableentry1 {
 vertical-align   : top;
 padding          : 3px;
 background       : #ECEAD8;
 border-top       : 1px solid #FFFFFF;
 border-bottom    : 1px solid #BCB778;
}
.sectiontableentry2 {
 vertical-align   : top;
 padding          : 3px;
 border-top       : 1px solid #FFFFFF;
 border-bottom    : 1px solid #BCB778;
}
a.mainlevel: {
 margin           : 0px;
 padding          : 0px;
 font-size        : 12px;
 width            : 168px;
 background-color : #ECEAD8;
 text-indent      : 10px;
}
a.mainlevel: link {
 padding          : 0px 0px 0px 0px;
 font-size        : 12px;
 width            : 168px;
 background-color : #ECEAD8;
 text-indent      : 10px;
}
a.mainlevel:link, a.mainlevel:visited {
 display          : block;
 font-size        : 12px;
 border-top       : 1px solid #ffffff;
 border-bottom    : 1px solid #BCB778;
 background-color : #ECEAD8;
 font-weight      : normal;
 padding          : 2px 0px 2px 0px;
 color            : #996600;
 width            : 168px;
 text-indent      : 10px;
}
a.mainlevel:hover {
 background-color : #E3E1C6;
 font-size        : 12px;
 font-weight      : normal;
 text-decoration  : none;
 text-indent      : 10px;
}
#active_menu {
 color            : #996600;
 background-color : #E3E1C6;
 font-weight      : bold;
}
a#active_menu:hover {
 color            : #333333;
}
a:link, a:visited {
 font-size        : 11px;
 color            : #CC9900;
 text-decoration  : none;
 font-weight      : bold;
}
a:hover {
 font-size        : 11px;
 color            : #996600;
 text-decoration  : none;
 font-weight      : bold;
}
a.category:link, a.category:visited {
 font-size        : 11px;
 font-weight      : bold;
}
a.readon:link, a.readon:visited {
 color            : #CC9900;
 font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
 font-size        : 11px;
 background       : url(../images/read.gif);
 background-repeat: no-repeat;
 white-space      : normal;
 font-weight      : bold;
 border           : 1px solid #BCB778;
 padding-bottom   : 3px;
 padding-left     : 21px;
 padding-right    : 2px;
 padding-top      : 1px;
 float            : left;
 line-height      : 10px;
 text-decoration  : none; 
}
a.readon:hover {
 color            : #996600;
 font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
 font-size        : 11px;
 background       : url(../images/read.gif);
 background-repeat: no-repeat;
 white-space      : normal;
 font-weight      : bold;
 border           : 1px solid #BCB778;
 padding-bottom   : 3px;
 padding-left     : 21px;
 padding-right    : 2px;
 padding-top      : 1px;
 float            : left;
 line-height      : 10px;
 text-decoration  : none; 
}
ul {float          : left;
 margin           : 2px;
 padding-left     : 10px;
 list-style       : none;
}
li {
 
 line-height      : 15px;
 padding-left     : 15px;
 padding-top      : 0px;
 background-image : url(../images/bullet.png);
 background-repeat: no-repeat;
 background-position: 0px 3px;
}
table.contenttoc {
 border           : 1px solid #FFFFFF;
 background       : #ECEAD8;
 padding          : 5px;
 margin-left      : 2px;
 margin-bottom    : 2px;
}
.pagenavcounter {
 font-size        : 10px;
 color            : #CC0000;
}
.pagenavbar {
 border-top       : 1px solid #BCB778;
 padding          : 2px;
}
.pagenav {
 font-weight      : bold;
 color            : #DBD8B7;
}
a.pagenav:link, a.pagenav:visited {
 text-decoration  : none;
}
a.pagenav:hover {
 text-decoration  : none;
}
.date {
 font-size        : 10px;
 color            : #996600;
 padding-right    : 10px;
}
.small {
 font-size        : 10px;
 color            : #996600;
}
.smalldark {
 font-size        : 10px;
 color            : #996600;
}
.createdate, .modifydate {
 font-size        : 10px;
 color            : #CC9900;
}
.content_vote {
 font-size        : 10px;
 height           : 22px;
 padding-top      : 2px;
 padding-bottom   : 2px;
}
.content_rating {
 font-size        : 10px;
 color            : #CC9900;
}
.pathway {
 font-size        : 10px;
 color            : #996600;
 padding-left     : 8px;
}
a.pathway:link, a.pathway:visited {
 font-size        : 10px;
 padding-left     : 0px;
}
a.pathway:hover {
 font-size        : 10px;
 padding-left     : 0px;
}
table.content{
 width            : 100%;
 padding          : 0px;
 border-collapse  : collapse;
 border-spacing   : 0px;
 margin-bottom    : 10px;
}
table.contentpane {
 width            : 100%;
 padding-left     : 5px;
 padding-right    : 5px;
 border-spacing   : 0px;
 margin-bottom    : 5px;
}
table.contentpaneopen {
 width            : 100%;
 padding-left     : 5px;
 padding-right    : 5px;
 border-spacing   : 0px;
 margin-bottom    : 5px;
}
.pollstableborder{
 border-color     : #666666;
}
.contentheading, .componentheading {
 background       : url(../images/header.gif) repeat;
 font-size        : 14px;
 font-weight      : bold;
 line-height      : 24px;
 text-transform   : uppercase;
 text-align       : left;
 color            : #996600;
 width            : 100%;
}
.title {
 font-family      : Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-weight      : bold;
 text-transform   : uppercase;
 text-indent      : 8px;
 font-size        : 20px;
 text-align       : left;
 color            : #FFFFFF;
}
.title a:link, .title a:visited {
 font-size        : 20px;
 color            : #FFFFFF;
 text-decoration  : none;
 font-weight      : bold;
}
.title a:hover {
 font-size        : 20px;
 color            : #FFFFFF;
 text-decoration  : none;
 font-weight      : bold;
}
.ontab {
 border-left      : 1px solid #404040;
 text-align       : center;
 font-weight      : bold;
 color            : #333333;
 padding          : 5px;
 cursor           : hand;
 line-height      : 40px;
}
.offtab {
 border-left      : 1px solid #404040;
 text-align       : center;
 color            : #666666;
 font-weight      : normal;
 padding          : 5px;
 cursor           : hand;
  line-height     : 40px;
}
.tabpadding {
border-left       : 1px solid #404040;
}
.pagetext {
 visibility       : hidden;
 position         : relative;
 top              : -10;
 background-color : #FFFFFF;
 display          : none;
}
.footer {
 font-family      : Verdana, Geneva, Arial, Helvetica, sans-serif;
 color            : #FFFFFF;
 font-size        : 10px;
 color            : #FFFFFF;
 font-weight      : normal;
}
.footer a:link, .footer a:visited {
 font-size        : 11px;
 color            : #FFFFFF;
 text-decoration  : none;
 font-weight      : bold;
}
.footer a:hover {
 font-size        : 11px;
 color            : #996600;
 text-decoration  : none;
 font-weight      : bold;
}
.contact_email  {
 width            : 100%;
}
.contact_email .inputbox {
 width            : 380px;
}

Plik lay'a wygląda tak:

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php if ( $my->id ) { initEditor(); } ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>"; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/templates/247portal/favicon.ico\" />"; ?>
<link rel="alternate" title="<?php echo $mosConfig_sitename; ?>" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/index2.php?option=com_rss&no_html=1" type="application/rss+xml" />
<script language="JavaScript" type="text/javascript">
   <!--
   function MM_reloadPage(init) {  //reloads the window if Nav4 resized
     if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
       document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
     else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
   }
   MM_reloadPage(true);
   //-->
 </script>
</head>

<body>
<div>
 <a name="up" id="up"></a>
 <table width="770"  border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
   <td><img src="<?php echo $mosConfig_live_site;?>/templates/247portal/images/space.gif" width="770" height="1" /></td>
 </tr>
 <tr>
     <td><div class="background">
       <table width="100%"  border="0" cellpadding="0" cellspacing="0" background="<?php echo $mosConfig_live_site;?>/templates/247portal/images/center.jpg">
         <tr>
           <td width="26"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal/images/left.jpg" width="26" /></td>
           <td class="title">              <table width="100%"  border="0" cellspacing="0" cellpadding="0">
             <tr>
               <td height="100" colspan="2" class="title" style="padding-top:14px;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                   <tr>
                     <td width="100%" style="padding-left:10px;"><a href="<?php echo $mosConfig_live_site;?>" title="<?php echo $mosConfig_sitename; ?>"><?php echo $mosConfig_sitename; ?></a></td>
                     <td>                          <?php mosLoadComponent( "banners" ); ?>                        </td>
                   </tr>
               </table></td>
             </tr>
             <tr>
               <td width="400" height="29"><div id="search">
                   <?php mosLoadModules ( 'user4', -1 ); ?>
               </div></td>
               <td width="100%" height="29" valign="bottom" class="mainlevel-nav"><?php mosLoadModules ( 'user3' ); ?></td>
             </tr>
           </table></td>
           <td width="26"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal/images/right.jpg" width="26" /></td>
         </tr>
       </table>
       <table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
         <tr>
           <td width="11" height="25" background="<?php echo $mosConfig_live_site;?>/templates/247portal/images/shadowl.jpg"><div>
           </div></td>
           <td height="25" bgcolor="#ECEAD8" style="border-bottom: 1px solid #BCB778; border-top: 5px solid #FFFFFF;"><?php mosPathWay(); ?></td>
           <td height="25" align="right" bgcolor="#ECEAD8" style="border-bottom: 1px solid #BCB778; border-top: 5px solid #FFFFFF;"><div class="date"><?php echo mosCurrentDate(); ?></div></td>
           <td width="11" height="25" align="right" background="<?php echo $mosConfig_live_site;?>/templates/247portal/images/shadowr.jpg"> </td>
         </tr>
       </table>
       <table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
         <tr>
           <td valign="top" style="padding-left:8px; background-repeat: repeat-y;" background="<?php echo $mosConfig_live_site;?>/templates/247portal/images/shadowl.jpg"> </td>
           <td valign="top" style="background-repeat: repeat-y;"background="<?php echo $mosConfig_live_site;?>/templates/247portal/images/lb.gif"><?php if (mosCountModules('left')) { ?>
             <div class="leftrow">
               <?php mosLoadModules ( 'left' ); ?>
             </div>
             <?php } ?></td>
           <td valign="top" bgcolor="#F2F1E6" width="100%"><div class"main">
             <table width="100%"  border="0" cellspacing="0" cellpadding="0">
               <tr valign="top" bgcolor="#ECEAD8">
                 <?php if (mosCountModules('top')) { ?><td colspan="3" style="border-top: 3px solid #FFFFFF;">
                     <div>
                       <?php mosLoadModules ( 'top' ); ?>
                     </div>
                     </td><?php } ?>
               </tr>
               <tr>
                 <?php if (mosCountModules('user1')) { ?><td valign="top" bgcolor="#ECEAD8" style="border-top: 3px solid #FFFFFF;"><div>
                     <?php mosLoadModules ( 'user1' ); ?>
                 </div></td>
                 <td width="4" class="mod" valign="top" bgcolor="#FFFFFF" style="border-top: 3px solid #FFFFFF;"><div class="mod"> <?php } ?><?php if (mosCountModules('user2')) { ?> </div></td> 
                 
                 <td valign="top" bgcolor="#ECEAD8" style="border-top: 3px solid #FFFFFF;"><div>
                   <?php mosLoadModules ( 'user2' ); ?>
</div></td><?php } ?>
               </tr>
               <tr align="left" valign="top">
                 <td colspan="3" style=" border-top: 4px solid #FFFFFF; padding: 5px;"><div class="main">
                     <?php mosMainBody(); ?>
                     </div></td>
               </tr>
               <tr bgcolor="#ECEAD8">
                 <td colspan="3" valign="top" style="border-top: 3px solid #FFFFFF;"><?php if (mosCountModules('bottom')) { ?>
                   <div>
                     <?php mosLoadModules ( 'bottom' ); ?>
                 </div>
                   <?php } ?></td>
                 </tr>
             </table>
            </td>
           <td valign="top" style="background-repeat: repeat-y; "background="<?php echo $mosConfig_live_site;?>/templates/247portal/images/rb.gif"><?php if (mosCountModules('right')) { ?>
               <div class="rightrow">
                 <?php mosLoadModules ( 'right' ); ?>
               </div>                
             <?php } ?></td>
           <td valign="top" style="padding-right: 8px; background-repeat: repeat-y;" background="<?php echo $mosConfig_live_site;?>/templates/247portal/images/shadowr.jpg"> </td>
         </tr>
       </table>
       <table width="100%"  border="0" cellpadding="0" cellspacing="0" background="<?php echo $mosConfig_live_site;?>/templates/247portal/images/center2.jpg">
         <tr>
           <td width="26"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal/images/left2.jpg" /></td>
           <td>
             <table width="100%"  border="0" cellspacing="0" cellpadding="0">
               <tr>
                 <td width="30" align="left"><a href="<?php echo sefRelToAbs($_SERVER['REQUEST_URI'])."#up"; ?>"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal/images/ltop.gif" alt="Top!" border="0" /></a> </td>
                 <td align="center"><div class="footer"><?php include_once('includes/footer.php'); ?>
                   </div>
                   </td>
                 <td width="30" align="right"><a href="<?php echo sefRelToAbs($_SERVER['REQUEST_URI'])."#up"; ?>"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal/images/rtop.gif" alt="Top!" border="0" /></a></td>
               </tr>
           </table></td>
           <td width="26"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal/images/right2.jpg" /></td>
         </tr>
       </table>
     </div></td>
   </tr>
 </table>
</div>
</body>
</html>

Jak ktoś chciałby się sprawdzić i potrafi jakoś pomóc (albo chociaż spróbować) to proszę o pomoc.

Beerbant · 25 Listopada 2005

fahowiec od tego masz forum mambo to raz a dwa nie w css a w kodach templejtki czyli w indexie, zobacz że wsadziłeś sobie adsens.

fahofiec · 25 Listopada 2005

fahowiec od tego masz forum mambo to raz a dwa nie w css a w kodach templejtki czyli w indexie, zobacz że wsadziłeś sobie adsens.

107152[/snapback]

Osoba, która wcześniej próbowała pomóc modyfikowała tylko CSS i co nie co udało się poprawić, ale nie tak jak trzeba, więc raczej wina jest w CSS'ie.

mrtn · 26 Listopada 2005

dlaczego wygląda źle ??

dlatego:

https://validator.w3.org/check?uri=http%3A%...oner.xorg.pl%2F

https://jigsaw.w3.org/css-validator/validat...&usermedium=all

oczywiście usunięcie tych błędów nie gwarantuje poprawnego działania ale przynajmniej bedzie łatwiej znależć błąd. A tak błędy się nakłądają i nie wiadomo o co chodzi :-(

Beerbant · 26 Listopada 2005

mrtn nie patrz na validatory jeszcze nie spotkałem żadnego mambo bez błedów tutaj jest tylko i wyłacznie sprawa właściwego ustawienia templejtki

zero3 · 26 Listopada 2005

jeszcze nie spotkałem żadnego mambo bez błedów

no ale jesli zrobie wlasny template div,css zgodny z w3c i wrzuce w mambo, to bedzie sie krzaczyl mimo, ze bylo ok?

Zaloguj się

Inna przeglądarka – inny wygląd strony

Rekomendowane odpowiedzi

fahofiec

Odnośnik do komentarza

Udostępnij na innych stronach

Beerbant

Odnośnik do komentarza

Udostępnij na innych stronach

fahofiec

Odnośnik do komentarza

Udostępnij na innych stronach

mrtn

Odnośnik do komentarza

Udostępnij na innych stronach

Beerbant

Odnośnik do komentarza

Udostępnij na innych stronach

zero3

Odnośnik do komentarza

Udostępnij na innych stronach

Zarchiwizowany

Ostatnio przeglądający 0 użytkowników

Polecamy

Senuto

netBOMB.pl
dariuszjurek.pl
noclegi.biz.pl
www.zgred.pl

Współpracują z nami

SEOsklep24.pl
Zdalny Admin

Przeglądaj

Cała aktywność

Twoje kanały aktywności

Powiadomienie o plikach cookie