✔ Padding in % wird vom IE ignoriert

jhonnybravo · 23. Oktober 2009

Hallo zusammen,

ich habe folgendes Problem. Die Topnavigation (td.topnav) soll wie das darunter liegende Datum einen Absatand nach Rechts von 2.8% haben. Funktioniert in FF, Safari, Chrome etc auch ohne Probleme. IE 6/7 scheint diese Angabe zu übergehen. Es wird ganz an den rechten Rand gepackt. IE5 hingegen stellt es ganz nach Links. Setze ich hingegen einen Wert in Pixel ein, funktioniert es. Damit ist mir aber leider nicht geholfen. Das Layout soll ja mit verschiedenen Auflösungen gleich aussehen.

Ich weiß, dass das erstellte Template nicht das beste ist, da es mit Tabellen arbeitet. Da ich diese Webseite aber als "Freundschaftsdienst" überarbeite und kein Geld dafür sehe, werde ich aber nicht das ganze Ding umschreiben.

Hier der Link zur Seite:
Webseite aufrufen
Nicht das Bundesland wechseln! Sonst greift ein anderes Template! Nur auf der Seite des Bundes wird momentan das zu überarbeitende verwendet.

Hier der entsprechende Teil der index.php:

Code:

<td  width="100%" align="center" class="topnav" valign="bottom">

                      <?php if($this->countModules('user3')) : ?>
                    <div class="topnavwrapper">
                      <div><jdoc:include type="modules" name="user3" /></div>
                    </div>
                      <?php endif; ?>

</td>

Hier der CSS-Teil der Topnavigation:

Code:

td.topnav {
  margin : 0px;
  padding:  0px;
  background     : url(../images/bg_top.gif) repeat-x top left;
  height         : 23px;
  text-align:right;
  color:#FFF;
  padding-bottom:3px;
  padding-right:2.8%;
  font-size:15px;
 }
 
td.topnav a , td.topnav a:visited{
  text-align:right;
  color:#FFF;
  margin-left:20px;
 }
 
td.topnav a:hover{
  text-align:right;
  color:#333;
 }

Ich stehe leider völlig auf dem Schlauch, warum hier dieser Fehler entsteht. Padding/Margin ist ja generell eine Sache, die die lieben Browser aus dem Hause Microsoft etwas anders interpretieren. Muss hier vielleicht auch ein CSS-Hack eingebaut werden Oder wie bekomme ich sonst dieses Problem in den Griff

Vorab vielen Dank für eure Bemühungen und Antworten!

Gruß Jhonny

Maik · 23. Oktober 2009

Hi,

der obige CSS-Code funktioniert im IE einwandfrei.

mfg Maik

Maik · 23. Oktober 2009

Nachtrag: Das liegt in der verlinkten Seite offensichtlich an den Nachfolgeelementen.

CSS:

td.topnav .topnavwrapper  { padding-right:2.8%; }

... führt im IE zum Erfolg.

mfg Maik

jhonnybravo · 23. Oktober 2009

Ja vielen Dank! Das hat geholfen.

Einzig der IE5 spinnt noch rum und packt das Topmenü auf die linke Seite. Warum auch immer. Aber ich denke, das werde ich einfach übergehen. IE6 aufwärts kompatibel sollte reichen. Sei denn du weißt auch hier auf Anhieb Rat

Tausend Dank aber schon für die bisherige Lösung!

Gruß Jhonny

Maik · 23. Oktober 2009

Jo, auch hierfür hab ich einen Lösungsansatz

CSS:

td.topnav .topnavwrapper td { text-align:right; }

mfg Maik

jhonnybravo · 23. Oktober 2009

ja, das setzt der 5er dann zwar nach rechts, allerdings wieder ganz nach rechts an den Außenrand. Noch ne andere Idee?

Was mir auch noch aufgefallen ist, dass nur im IE6 und IE5 der pathway und das Datum leicht nach innen gerückt sind. Ich würde schätzen um 2.8%

Ist ja eigentlich auch richtig. Allergins 2.8% vom Außenrand, sodass es mit dem linken und rechten Menü bündig ist. IE6/5 machen es allerdings anders.

Hier der Code von Datum und pathway

Code:

div.date {
  float:right;
  font-size        : 11px;
  font-weight      : bold;
  color            : #333333;
  width: 20%;
  text-align: right;
  margin-right: 2.8%;
}

div.pw {
  float:left;
  width: 70%;
  margin-left:2.8%;
}

Hast du hier noch mehr tolle Ideen? Und vielen Dank für deine Hilfe!!

Maik · 23. Oktober 2009

In meiner Testseite behält der IE5.x den rechten Innenabstand bei.

Der CSS-Schnipsel deutet auf The IE5/6 Doubled Float-Margin Bug hin.

mfg Maik

jhonnybravo · 23. Oktober 2009

Alle Probleme behoben!
Mal wieder vielen Dank für deine Hilfe

Schönes Wochenende

Gruß Jhonny

jhonnybravo · 23. Oktober 2009

Das war wohl zu früh gefreut. Im IE8 ist nun was neues aufgetaucht. Er bricht die Zeile der Topnavigation irgendwie um und packt einen Teil rechts neben die Seite ganz nach oben. Was zum Teufel ist da nun wieder los?

Webseite aufrufen

IE sollte echt verboten werden.

Kannst du mir sagen, was falsch ist?

Hier mal noch das ganze CSS:

Code:

body,html {
  padding          : 0;
  margin           : 0;
  margin-bottom    : 10px;
  
    }



#body_bg{
background     : url(../images/bg_top.gif) #ffffff repeat-x top left;

}

.main { 
  text-align       : left; 
  width            : 100%;
  margin           : 0; 
  padding          : 0;
}


.mod {
  background       : #FFFFFF;
  width            : 2px;
}

td, tr, p, div {
  font-family      : Arial, Verdana, Tahoma, Helvetica, sans-serif;
  font-size        : 97%;
  color            : #333333;
}
hr {
  color            : #333333;
  height           : 1px;
  width            : 100%;
}

form {
margin           : 0; 
padding          : 0;
}

img {

}

.leftrow {
  width            : 180px;
  height           : 100%;
  margin-right     : 0;
  background       : #fff;

}

.rightrow {
  height           : 100%;
  width            : 169px;
  margin-left      : 0;
  background       : #fff;

 }

.back_button {
  color            : #666666;
  font-family      : Tahoma, Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  font-weight      : normal;
  padding-bottom   : 3px;
  margin-right     : 4px;
  float            : right;
  line-height      : 20px;
  }

.button {
  font-size        : 11px;
  color            : #990000;
  border           : 1px solid #B4C1D1;
  margin           : 3px;
  background-color : #EAECEE;
  padding          : 2px !important;
  padding          : 1px;
  cursor           : pointer;
}

.inputbox {
 color        : #000000;
 background   : #ffffff;
 border       : 1px solid #B4C1D1;
 margin       : 3px;

}

h1 {font-size        : 90%;
    color            : #990000;
    margin           : 5px 0;
}

h2 {font-size        : 80%;
    color            : #990000;
    margin           : 5px 0;
}

h3 {font-size        : 75%;
    color            : #990000;
    margin           : 5px 0;
}

form#form-login{
	background: #F1F4F6;
	color: #fff;
	margin: 5px 0 15px 0;
	text-align:left
      }

 
form#form-login fieldset{
border: none;
}

form#form-login fieldset label {}
form#form-login ul a
{}



.contact_email  {
  width            : 100%;
}

.contact_email .inputbox {
  width            : 345px;

}

table.moduletable, table.moduletable_menu, table.moduletable_text {
	margin           : 0 0 8px 0;
	width            : 100%;
      padding-bottom   : 2px;
	}

table.moduletable th, table.moduletable_menu th, table.moduletable_text th{
      
    font-family          : Tahoma, Arial, Verdana,  Helvetica, sans-serif;
	font-size          : 12px;
	font-weight        : bold;
	text-align         : left;
	width              : 100%;
      background         : url(../images/mod.gif) #E7EAEC repeat-x top left; 
      color              : #666666;
	padding            : 2px;
      text-indent        : 10px;
	line-height        : 22px;
       border-bottom: 0px solid #999999;
	    
	}

table.moduletable td, table.moduletable_menu td{
    padding-top: 2px;
   
    	}

.lcol table.moduletable th, .lcol table.moduletable_menu th, .rcol table.moduletable th, .rcol table.moduletable_menu th{
      
      background         : url(../images/mod_lr.gif) #999999 repeat-x top left; 
      color              : #333333;
	
	    
	}

.sectiontableheader {
  font-size        : 12px;
  font-weight      : normal;
  text-transform   : uppercase;
  letter-spacing   : 1px;
  background         : url(../images/mod_lr.gif) #990000 repeat-x top left; 
  color              : #333333; 
  padding          : 3px;
}

td.sectiontableheader a {
color              : #333333;
}

.sectiontableentry1 {
  vertical-align   : top;
  padding          : 3px;
  background       : #F4F5F7;
  border-bottom    : 1px solid #ffffff;
  line-height      : 18px;

}

.sectiontableentry2 {
  vertical-align   : top;
  padding          : 3px;
  border-bottom    : 1px solid #ffffff;
  background       : #EFF1F4;
  line-height      : 18px;
  }

.sectiontableentry1 img{
 
padding-top: 3px !important;
padding-top: 1px;
}

.sectiontableentry2 img{
 padding-top: 3px !important;
 padding-top: 1px;

}

a:link, a:visited {
  
  color            : #666666;
  text-decoration  : none;
  font-weight      : bold;
}

a:hover {
  color            : #990000;
  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            : #666666;
  font-family      : Tahoma, Arial, Verdana, Helvetica, sans-serif;
  font-size        : 11px;
  background       : url(../images/readon.gif) no-repeat;
  white-space      : normal;
  font-weight      : normal;
  padding          : 1px 0 3px 18px;
  float            : right;
  line-height      : 10px;
  text-decoration  : underline;
}

a.readon:hover {
  color            : #990000;
  font-family      : Tahoma, Arial, Verdana, Helvetica, sans-serif;
  font-size        : 11px;
  background       : url(../images/readon.gif) no-repeat;
  white-space      : normal;
  font-weight      : normal;
  padding          : 1px 0 3px 18px;
  line-height      : 10px;
  text-decoration  : underline;
}

ul {
  margin           : 2px;
  padding-left     : 15px;
  list-style:square;
}

li {
  
  line-height      : 15px;
  padding-left     : 10px;
  padding-top      : 0;
  background-repeat: no-repeat;
  background-position: 0px 5px;
}

table.contenttoc {
  border           : 0px solid #dcdcdc;
  background       : #F1F1F1;
  padding          : 5px;
  margin-left      : 2px;
  margin-bottom    : 2px;
}

.pagenavcounter {
  font-size        : 10px;
  color            : #4B6B94;
}

.pagenavbar {
  border-top       : 1px solid #999999;
  padding          : 2px;
}

.pagination span { padding: 2px; }
.pagination a    { padding: 2px; } 

a.pagination:link, a.pagination:visited {
  font-size        : 11px;
  color            : #999999;
  text-decoration  : none;
}

a.pagination:hover {
  font-size        : 11px;
  color            : #990000;
  text-decoration  : none;
}

div.date {
  float:right;
  font-size        : 11px;
  font-weight      : bold;
  color            : #333333;
  width: 20%;
  text-align: right;
}

div.pw {
  float:left;
  width: 70%;
}

.small {
  font-size        : 10px;
  color            : #333333;
}

.smalldark {
  font-size        : 10px;
  color            : #333333;
}

.createdate, .modifydate {
  float            : left;
  font-size        : 10px;
  color            : #666666;
  font-weight      : bold;
}

.content_vote {
  font-size        : 80%;
  height           : 22px;
  padding-top      : 2px;
  padding-bottom   : 2px;
}

.content_rating {
  font-size        : 10px;
  color            : #999999;
}

.pathway {
  font-size        : 11px;
  color            : #333333;
  }

a.pathway:link, a.pathway:visited {
  font-size        : 11px;
  padding-left     : 0;
}

a.pathway:hover {
  font-size        : 11px;
  padding-left     : 0;
}

table.content{
  width            : 100%;
  padding          : 0;
  border-collapse  : collapse;
  border-spacing   : 0;
  margin-bottom    : 10px;
}

table.contentpane {
  width            : 100%;
  border-spacing   : 0;
  padding-left     : 5px;
  padding-right    : 5px;
  margin-bottom    : 5px;
}

table.contentpaneopen {
  width            : 100%;
  border-spacing   : 0;
  padding-left     : 5px;
  padding-right    : 5px;
  margin-bottom    : 5px;
}

.poll {
	color : #333333;
	line-height : 12px;
	font-weight: normal;
      
}

.pollstableborder{
  border-color     : #999999;
  text-align: left;
}

.contentheading, .componentheading {
  border-bottom    : 1px solid #3B5576;
  font-size        : 110%;
  font-weight      : bold;
  line-height      : 16px;
  text-align       : left;
  text-indent      : 0;
  color            : #990000;
  width            : 100%;
  padding          : 1px;
  margin: 3px 0px;
  margin-bottom:20px;
  }

td.article_column{
padding-right: 5px;
}

.footer {
  font-size        : 11px;
  font-weight      : normal;
  margin: 0;
  padding:  0;
  height: 28px !important;
  height: 25px;
  padding-top:  0px !important;
  padding-top:  3px;
  background		: url(../images/shadow.jpg) #ffffff repeat-x top;
  vertical-align:middle;
  width:100%;
 }

.lcol {
   vertical-align   : top;
   background       : #ffffff;
   padding-top: 5px;
   border-left       : 1px solid #cccccc;
   padding-left: 3px;

}

.rcol {
   vertical-align   : top;
   background       : #ffffff;
   padding-top: 5px;
   border-right       : 1px solid #cccccc;
   padding-right: 3px;

}

.foot {
  background       : none;
  vertical-align   : top;
  
}


.contentdescription { 
  width          : auto !important;
  margin         : 0;
  padding        :  0;
  padding-top    : 5px;
  text-align     : left;
}


td.top1{
margin: 0;
padding:  0;
height: 28px !important;
height: 25px;
padding-top:  0px !important;
padding-top:  3px;
background		: url(../images/shadow.jpg) #ffffff repeat-x top;
vertical-align:middle;
padding-left:2.8%;
padding-right:2.8%;
}

table.top2{
background : none;

}

#fontsize {
	text-align:right;
	padding-right:8px;
	font-size:11px;
	}

td.logoheader {
  margin : 0;
  padding:  0;
  background     : url(../images/header.gif)  #fff no-repeat bottom left;
  height         : 100px;
  width          : 100%;
 }

td.topnav {
  margin : 0px;
  padding:  0px;
  background     : url(../images/bg_top.gif) repeat-x top left;
  height         : 23px;
  text-align:right;
  color:#FFF;
  padding-bottom:3px;
  font-size:15px;
 }
 
td.topnav a , td.topnav a:visited{
  text-align:right;
  color:#FFF;
  margin-left:20px;
 }
 
td.topnav a:hover{
  text-align:right;
  color:#333;
 }

td.topnav .topnavwrapper  { padding-right:2.8%; }
td.topnav .topnavwrapper td {text-align:right; }
 
td.bgline {
  margin : 0px;
  padding:  0px;
  background     : url(../images/s.gif) repeat-y;
  width          : 0px;
 }


 #mainlevel-nav {
  font-size        : 14px;
  list-style       : none;
  padding          : 0;
  margin           : 0;
  margin-left      : 1px;
 
}

#mainlevel-nav li {
  float            : right;
  display          : block;
  list-style       : none;
  background-image : none;
  padding-left     : 2px;
  padding-right    : 2px;
  margin           : 0;
  width            : auto !important;
  font-size        : 11px;
  line-height      : 26px;
  white-space      : nowrap;
  border-left      : 1px solid #999999;

}
#mainlevel-nav li a {
  
  padding-left     : 10px;
  padding-right    : 10px;
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  
}

#mainlevel-nav li a:hover {
  font-size        : 12px;
  color            : #990000;
    
}

.blog_more {
margin   : 10px 0 7px 7px;
}

.buttonheading {
padding  : 0 2px;
}

span.article_separator {
display:block;
height:15px;
clear: both;
}

div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }

div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }

.caption {border: 1px solid #CCC; padding: 3px;}

/*  Main Menu */
table.moduletable_menu ul, table.moduletable_menu ul li
{
  background-image: none;
  list-style:none;
  display           : block;
  width             : auto;
  margin           : 0px 0px;
  padding          : 0;
  font-size        : 12px;
  background       : none;
}



table.moduletable_menu ul li a, table.moduletable_menu ul li a:link, table.moduletable_menu ul li a:visited
{
  display          : block;
  font-size        : 12px;
  border           : 0px solid #666666;
  background-color : #f1f1f1;
  font-weight      : bold;
  padding          : 2px 0;
  color            : #666666;
  padding-left     : 10px;
}

table.moduletable_menu ul li a:hover
{
  border           : 0px solid #f1f1f1;
  background-color : #f3f3f3;
  font-size        : 13px;
  font-weight      : bold;
  color            : #990000;
  text-decoration  : none;
  padding-left     : 5px;

}
table.moduletable_menu ul li.active a:link, table.moduletable_menu ul li.active  a:visited
{
  color            : #990000;
  border           : 0px solid #666666;
  text-decoration:underline;
}



table.moduletable_menu ul li ul li a:link, table.moduletable_menu ul li ul li a:visited, table.moduletable_menu ul li ul li ul li a:link, table.moduletable_menu ul li ul li ul li a:visited
{
   display          : block;
   font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size        : 11px;
   color            : #666666;
   padding    	  : 3px 1px 3px 5px;
   margin		  : 3px;
   padding-left     : 15px;
   border: none;
}

table.moduletable_menu ul li ul li a:hover, table.moduletable_menu ul li ul li ul li a:hover{
  font-size        : 11px;
  font-weight      : normal;
  color            : #990000;
  text-decoration:none;
  padding-left     : 15px;
}

table.moduletable_menu ul li.active ul li a:link, table.moduletable_menu ul li.active ul li a:visited, table.moduletable_menu ul li.active ul li ul li a:link, table.moduletable_menu ul li.active ul li ul li a:visited
{
   display          : block;
   font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size        : 11px;
   color            : #666666;
   padding    	  : 3px 1px 3px 5px;
   margin		  : 3px;
   text-decoration  : none;
   padding-left     : 14px;
   border: none;
}

table.moduletable_menu ul li.active ul li a:hover, table.moduletable_menu ul li.active ul li ul li a:hover{
  font-size        : 11px;
  font-weight      : bold;
  color            : #990000;
  text-decoration  : none;
  padding-left     : 14px;
}

table.moduletable_menu ul li.active ul li#current a{
  font-size        : 11px;
  color            : #990000;
  text-decoration:underline;
  padding-left     : 15px;
}

table.adminform textarea {
  width      : 450px;
  height     : 400px;
  color      : #000000;
}


/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #333333;
	padding: 5px;
	max-width: 200px;
}

.tool-title {
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
	font-size: 12px;
	margin: 0;
}


/* System Standard Messages */
#system-message dd.message ul { background: #dddddd url(../../images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}

th .rcol{
	font-size:14px;}
	
tr .rcol{
	font-size:13px;}

Maik · 23. Oktober 2009

Kann dir derzeit auch nicht sagen, was den IE8 dazu bewegt, die oberen Tabellen nach links in den nicht-sichtbaren Bereich seines Viewports zu verschieben.

mfg Maik

✔ Padding in % wird vom IE ignoriert

jhonnybravo

Mitglied

Maik

Maik

jhonnybravo

Mitglied

Maik

jhonnybravo

Mitglied

Maik

jhonnybravo

Mitglied

jhonnybravo

Mitglied

Maik

Neue Beiträge