Im h1 im IE7 funktioniert padding und border-bottom nicht

**syra** · 20.06.2008 18:57

Hallo zusammen

Ich habe folgendes Problem, ich habe meinem H1 ein padding-left gegeben, weil ich im background ein Pfeil zugewiesen habe. FF akzeptiert das, der IE7 jedoch nicht, er ignoriert das padding komplett. Ebenfalls habe ich ein border-bottom gemacht und das zeigt der IE7 auch nicht.
Auf folgender Seite seht ihr es:
www.flywithandy.ch/neu

Ich habe zwei css, das zweit habe ich ins erste importiert.
Template_css.css:

Code:

/*
 /* ---------------------------------------------------
   Inhaltsbereich der Seite importieren
   =================================================== */

@import url("editor_content.css");


/* ---------------------------------------------------
   Global
	 evt. anstelle von * nur diese verwenden damit es
	 weniger komplikationen gibt:
	 html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input
   =================================================== */

html, body, div, ul, ol, li, dl, dt, dd, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input {
	padding: 0;
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

body {
	background: url(../images/design/background.jpg) top left repeat;
}

#webcontainer {
	margin: 0 auto 10px auto;
	width: 930px;
}

/* ---------------------------------------------------
   Header zuoberst auf der Seite
   =================================================== */
#header { 
	float: left;
	width: 930px;
	height: 133px;
}
#logo { 
	float: left;
	height: 90px;
	width: 314px;
	/*margin-top: 18px;*/
	background: url(../images/design/logo.jpg) no-repeat left center;
}
#suche { 
	float: right;
	height: 35px;
	width: 219px;
	background: url(../images/design/suche_bg.gif) top left no-repeat;
	padding: 14px 0 0 13px;
	/*margin-top: 18px;*/
}
#suche .inputbox {
	width: 144px;
	height: 14px;
	border: #221E1F 1px solid;
	padding: 2px;
	font-size: 12px;
}
#suche .button {
	width: 46px;
	height: 17px;
	border: #A09E9E 1px solid;	
	background: #C4C2C2;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	color: #231F20;
	margin-left: 7px;
	text-transform: lowercase;
}


/* ---------------------------------------------------
   Main
   =================================================== */
#main_start {
	float: left;
	width: 930px;
	height: 5px;
	background: url(../images/design/main_bg_start.gif) no-repeat top left;
}
#main {
	float: left;
	width: 918px;
	padding: 0 5px;
	background: #FFF;
	border-left: 1px solid #C2C4C7;
	border-right: 1px solid #C2C4C7;
}
#main_left {
	float: left;
	width: 202px;
}

/* ---------------------------------------------------
   Hauptnavigation
   =================================================== */
#mainnavi {
	float: left;
	margin-top: 5px;
	width: 202px;
	background: #221E1F url(../images/design/navi_bg_lo.gif) top left no-repeat;
}
.mainnavi_edge2 {
	background: url(../images/design/navi_bg_ro.gif) top right no-repeat;
}
.mainnavi_edge3 {
	background: url(../images/design/navi_bg_lu.gif) bottom left no-repeat ;
}
.mainnavi_edge4 {
	background: url(../images/design/navi_bg_ru.gif) bottom right no-repeat ;
	line-height: 20px;
	padding: 12px 6px 12px 5px;
}


a.mainlevel:link, a.mainlevel:visited {
	display: block;
	margin-bottom: 4px;
	width: 151px;
	font-size: 12px;
	font-weight: normal;
	color: #FFF;
	text-decoration: none;
	margin-top: 1px;
	padding-left: 39px;
	background: #2C2728 url(../images/design/navi.gif) no-repeat left top;
	border: 1px solid #484042;
	line-height: 165%;
}
a.mainlevel:hover, a.mainlevel#active_menu{
	color: #FFF;
	background: #F8931B url(../images/design/navi.gif) no-repeat left top;
	border: 1px solid #FBBD73;
}
a.sublevel:link, a.sublevel:visited {
	font-size: 11px;
	font-weight: normal;
	color: #FFF;
	text-decoration: none;
	padding-left: 42px;
	line-height: 25px;
	background: none;
}
a.sublevel:hover, a.sublevel#active_menu, #active_menu{
	color: #F8931B;
	text-decoration: none;
	background: none;
}


/* ---------------------------------------------------
   News
   =================================================== */
#news_start {
	float: left;
	margin-top: 9px;
	width: 202px;
	height: 5px;
	background: url(../images/design/news_bg_start.gif) no-repeat top left;
}
#news {
	float: left;
	width: 180px;
	padding: 12px 10px;
	background: #FFF;
	border-left: 1px solid #211D1E;
	border-right: 1px solid #211D1E;
}
h4 {
	background: url(../images/design/news_titel.gif) no-repeat top left;
	color: #F7921C;
	border-bottom: 1px solid #F7921C;
	height: 25px;
	font-size: 14px;
	padding-left: 14px;
	margin-bottom: 10px;
}
h5 {
	padding-bottom: 5px;
	color: #211E1F;
	font-size: 12px;
	font-weight: bold;
}
#news p {
	line-height: 150%;
	padding-bottom: 5px;
}
#news_end {
	float: left;
	width: 202px;
	height: 5px;
	background: url(../images/design/news_bg_end.gif) no-repeat top left;
}


/* ---------------------------------------------------------------

	Hauptinhalt
	
--------------------------------------------------------------- */
#main_right {
	float: left;
	width: 707px;
	padding-left: 9px;
}
#stimmungsbild {
	float: left;
	width: 707px;
	margin-top: 5px;
}
#content_start {
	float: left;
	margin-top: 9px;
	width: 707px;
	height: 5px;
	background: url(../images/design/content_bg_start.gif) no-repeat top left;
}
#content {
	float: left;
	width: 655px; /*730px*/
	padding: 35px 25px;
	text-align: left;
	background: #FFF;
	border-left: 1px solid #211D1E;
	border-right: 1px solid #211D1E;
	min-height: 250px;
	height: auto !important;
	height: 250px;
	line-height: 140%;
}
#content_end {
	float: left;
	width: 707px;
	height: 5px;
	background: url(../images/design/content_bg_end.gif) no-repeat top left;
}

/* ---------------------------------------------------
   Footer zuunterst auf der Seite
   =================================================== */
#footer_box {
	margin-top: 9px;
	margin-bottom: 5px;
	float: left;
	width: 707px;
	background: #221E1F url(../images/design/navi_bg_lo.gif) top left no-repeat;
}
.footer_edge2 {
	background: url(../images/design/navi_bg_ro.gif) top right no-repeat;
}
.footer_edge3 {
	background: url(../images/design/navi_bg_lu.gif) bottom left no-repeat ;
}
.footer_edge4 {
	background: url(../images/design/navi_bg_ru.gif) bottom right no-repeat ;
}

#footer {
	width: 657px;
	padding: 0 25px;
	height: 28px;
	color: #FFFFFF;
	line-height: 28px;
	font-size: 11px;
}
#footer_left {
	float: left;
	width: 219px;
	font-size: 11px;
	text-align: left;
	font-size: 11px;
	color: #FFFFFF;
}
#footer_middle {
	float: left;
	width: 219px;
	font-size: 11px;
	text-align: center;
	color: #FFFFFF;
}
#footer_right {
	float: left;
	width: 219px;
	font-size: 11px;
	text-align: right;
	color: #FFFFFF;
}
#footer a {
	text-decoration: underline;
	color: #FFFFFF;
	/*font-size: 11px;*/
}
#footer a:hover, #copyright a:active {
	text-decoration: underline;
	color: #FFFFFF;
}

#main_end {
	clear: both;
	width: 930px;
	height: 5px;
	margin-bottom: 10px;
	background: url(../images/design/main_bg_end.gif) no-repeat top right;
}

.inputbox {
	border: 1px solid #666;
	padding: 2px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
} 

/* Die Formatierung der Module */
table.moduletable	{
}

/* Überschrift der Module */
table.moduletable.th {
}

/* Inhalte der Module */
table.moduletable.td {
	color: #D1DBBC;
	font-size: 10px;
}
table.moduletable-loginform {
	width: 206px;
	margin: 20px 0 0 1px;
	padding-left: 16px;
	background: #3D606E;
	font-size: 11px;
	text-align: left;
	color: #D1DBBC;
	font-weight: bold;
} 
table.moduletable-loginform a, table.moduletable-loginform a:visited {
	color: #EDEEE8;
	text-decoration: none;
}
table.moduletable-loginform a:hover, table.moduletable-loginform a:active {
	color: #D1DBBC;
	text-decoration: none;
}

/* All internal headings, including the contact page 
.contentheading, .componentheading {
	font-weight: bold;
	font-size: 18px;
	color: #000000;
	line-height: 18px;
	padding-bottom: 10px;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}*/

Ich hoffe jemand kann mir helfen. Ich weiss nicht mehr weiter.

Gruss Bettina

**syra** · 20.06.2008 18:58

Hier noch das zweite css:

editor_content.css:

Code:

body { 
	color: #221E1F;
	background: #FFF;
	margin: 5px; 
	padding: 0;
}

/* ---------------------------------------------------
   H1
   =================================================== */
h1 {
	font-weight: bold;
	font-size: 18px;
	color: #F7921C;
	/*height: 20px;
	line-height: 20px;*/
	text-align: left;
	padding: 0 0 6px 14px;
	margin: 0 0 10px 0;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background: url(../images/design/news_titel.gif) no-repeat top left;
	page-break-after: always;
	border-bottom: 1px solid #F7921C;
	white-space: nowrap;
	width: 100%;
}

/* ---------------------------------------------------
   H2
   =================================================== */
h2 {
	font-weight: bold;
	font-size: 13px;
	color: #221E1F;
	line-height: 18px;
	padding-bottom: 15px;
}

/* ---------------------------------------------------
   H3
   =================================================== */
h3{
	font-weight: bold;
	font-size: 12px;
	color: #221E1F;
	line-height: 18px;
	padding-bottom: 25px;
}

/* ---------------------------------------------------
   P Standard
   =================================================== */
p{
	padding-bottom: 10px;
	line-height: 150%;
	text-align: left;
}

/* ---------------------------------------------------
   Bilder
   =================================================== */
.Rahmen {
	border: 1px solid #484042;
	padding-bottom: 10px;
}

/* ---------------------------------------------------
   Zelle Standard
   =================================================== */
.TabelleTermine {
	border-top: 1px solid #A09E9E;
	border-left: 1px solid #A09E9E;
	margin: 20px 0;
} 
.TabelleTermine th  {
	background: #C4C2C2;
	padding: 5px;
	width: 50px;
	vertical-align: top;
	text-align: center;
	border-right: 1px solid #A09E9E;
	border-bottom: 1px solid #A09E9E;
}
.TabelleTermine td{
	padding: 5px;
	vertical-align: top;
	text-align: center;
	border-right: 1px solid #A09E9E;
	border-bottom: 1px solid #A09E9E;
	background: #D8D8D8;
}
.TabelleTermine .farbe1{
	background: #FBC98D;
}
.TabelleTermine .farbe2{
	background: #F77F7F;
}

.TabelleZusammenfassung {
	border-top: 1px solid #A09E9E;
	border-left: 1px solid #A09E9E;
	margin: 20px 0;
} 
.TabelleZusammenfassung th  {
	background: #C4C2C2;
	padding: 5px;
	width: 130px;
	vertical-align: top;
	text-align: left;
	border-right: 1px solid #A09E9E;
	border-bottom: 1px solid #A09E9E;
}
.TabelleZusammenfassung td{
	padding: 5px;
	vertical-align: top;
	text-align: left;
	border-right: 1px solid #A09E9E;
	border-bottom: 1px solid #A09E9E;
	background: #D8D8D8;
}



/* ---------------------------------------------------
   Liste Punkte
   =================================================== */
ul { 
	padding-left: 40px;
	padding-bottom: 1em;
	margin-top: 0px;
	padding-top: 0px;
}
ul li { 
	margin-bottom: 2px;
	text-align: left;
	list-style-type: disc;
	line-height: 18px;
}
/* ---------------------------------------------------
   Liste Zahlen
   =================================================== */
ol{ 
	padding-left: 30px; 
	padding-bottom: 15px; 
	margin-top: 0px; 
	list-style-type:decimal;
}
ol li{
	margin-bottom: 2px;
	text-align: left;
	line-height: 18px;
}

/* ---------------------------------------------------
   Links Standard
   =================================================== */
a{
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover, a:active{
	text-decoration: underline;
	background: #E6B772;
}

/* ---------------------------------------------------
   Links Speziell: Intern
   =================================================== */
a.LinkIntern, a.LinkIntern:visited {
	background: url(../images/links/link_intern.gif) no-repeat left top;
	padding-left: 12px;
	color: #F8931B;
	text-decoration: underline;
}
a.LinkIntern:hover, a.LinkIntern:active {
	background: url(../images/links/link_intern_aktiv.gif) no-repeat left top;
	text-decoration: underline;
	color: #211E1F;
}

/* ---------------------------------------------------
   Links Speziell: Zurueck
   =================================================== */
a.LinkZurueck {
	background: url(../images/link_intern_back.gif) no-repeat left center;
	padding-left: 9px;
}
a.LinkZurueck:visited {
	
}
a.LinkZurueck:hover, a.LinkZurueck:active {
	background: url(../images/link_intern_back_aktiv.gif) no-repeat left center;
}

/* ---------------------------------------------------
   Links Speziell: Extern
   =================================================== */
a.LinkExtern {
	background: url(../images/link_extern.gif) no-repeat left center;
	padding-left: 11px;
}
a.LinkExtern:visited {
	color: #777;
}
a.LinkExtern:hover, a.LinkExtern:active{
	background: url(../images/link_extern_aktiv.gif) no-repeat left center;
}

/* ---------------------------------------------------
   Links Speziell: Nach Oben
   =================================================== */
a.LinkNachOben{
	font-size: 11px;
}
a.LinkNachOben:visited {
	
}
a.LinkNachOben:hover, a.LinkNachOben:active {

}

/* ---------------------------------------------------
   Links Speziell: Download
   =================================================== */
a.LinkDownload {
	background: url(../images/link_download.gif) no-repeat left center;
	padding-left: 11px;
}
a.LinkDownload:visited{
	
}
a.LinkDownload:hover, a.LinkDownload:active {
	background: url(../images/link_download_aktiv.gif) no-repeat left center;
}

/* ---------------------------------------------------
   Links Speziell: Mail
   =================================================== */
a.LinkMail {
	color: #333;
	text-decoration: none;
	font-size: 12px;
}
a.LinkMail:visited {
	color: #0151A5;
}
a.LinkMail:hover, a.LinkMail:active{
	color: #0151A5;
	text-decoration: underline;
}

**rnussholz** · 21.06.2008 09:43

Hi!

Entferne einmal die " in der Importregel @import url("editor_content.css");.

Es sollte so lauten: @import url(editor_content.css);

**syra** · 22.06.2008 22:09

Hallo

Leider hat die Anpassung mit dem import url nichts gebracht. Hast du sonst noch eine Idee?

Gruss Bettina

**rnussholz** · 26.06.2008 00:33

Was ich mir noch vorstellen kann ist, dass der IE die padding Anweisung mit der padding Anweisung im Body überschreibt. Gib mal folgendes in der editor_content.css an:

Code:

h1, componentheading {
.....
padding-top: 0px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 14px !important;
....
....
}

Dann sollte er die Anweisung behalten, auch wenn er danach einen anderen Wert zugeteilt bekommen sollte.

**syra** · 26.06.2008 08:24

Hallo rnussholz

Schade, dein Vorschlag war eine gute Idee, aber das hat leider nicht geplappt. Ich habe noch verschiedene Sachen ausprobiert, schlussendlich habe ich noch folgendes probiert:

Im File components/com_content/content.html.php (Zeile 613) habe ich ja mal die Erweiterung eingefügt, das die Titel ein h1 eins sind und nicht nur eine class=contentheading. Jetzt habe ich um den h1 eins einfach noch eine div id erstellt und dieser id einen padding: 0; zugewiesen.
Dann klappts... Es ist zwar nicht 100% sauber, aber hauptsache es wird richtig angezeigt und das ist mir wichtiger. Damit auch der Border-Bottom auf der ganzen breite angezeigt wird, habe ich die Breite noch in px angegeben (width: 640px

.

PHP-Code:


<div id="haupttitel"><h1<?php echo $params->get( 'pageclass_sfx' ); ?> >

        <?php echo $row->title;?>

        <?php HTML_content::EditIcon( $row, $params, $access ); ?>

        </h1></div>

Code:

#haupttitel {
	padding: 0;
	margin: 0;
}

Vielen Dank trotzdem für deine Hilfe. Ich bin immer froh wenn ich mir Hilfe holen kann.

Gruss Bettina

**rnussholz** · 18.07.2008 21:14

Hallo Syra!

Ich hatte jetzt genau das gleiche Problem mit dem IE und den Überschriften (h4 ist es bei mir).

Meine Lösung lag in der template.css:

Code:

.contentpaneopen h4 {
  background: url(../images/arrow-h.png) no-repeat bottom left;
  padding: 0px 25px !important;
  font-size: 100%;
  text-transform: uppercase;
}

Ich habe vor dem Eintrag h4 das Elternelement .contentpaneopen eingesetzt. Damit ist es jetzt bei allen Browsern wieder gleich.

Thema: Im h1 im IE7 funktioniert padding und border-bottom nicht

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Im h1 im IE7 funktioniert padding und border-bottom nicht

Leider nichts

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen