IE hat andere Margins?

rftc

Hallo allerseits!

Ich hab mir den A**** für mein neues WP-Design aufgerissen, und nun stelle ich mit Erschrecken fest, dass der (Anm. des Verf.: dämliche!!!) Internet Explorer die Margins anders interpretiert?! Kann sich jemand mal diese beiden Screenshots ansehen bitte?

:: Korrekte Anzeige
:: Falsche Anzeige

Ich kenn mich in CSS zuwenig aus, um da was zu basteln. Kann mir hier jemand einen Tipp geben? Ich würde mich riesig freuen!!

Vielen Dank im Voraus und Gruss

Livio

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

telekommander

Das ist bekannt und macht ein IE besonders gern bei bei floatenden [FONT="Courier New"]<div> [/FONT]Containern.
Du könntest im Style Angaben extra für einen IE definieren:
[FONT="Courier New"]
* html #dein_container {
margin: 0px;
}
[/FONT]
Soweit mir bekannt, liest das nur ein IE , andere Browser ignorieren das.

rftc

hi telekommander!

danke vielmals für deinen Hinweis!!! Bin schon froh, dass es eine Lösung zu geben scheint :-)

Als CSS Noob muss ich jetzt aber leider nachhaken:

was muss genau in "mein_container" rein? kapier ich nicht genau...

Danke vielmals!!

telekommander

Zitat

was muss genau in "mein_container" rein?

Eigentlich nur die ID deines <div> Containers der dir "Kopfschmerzen" bereitet.
z.B.:
[FONT="Courier New"]* html #header { ...[/FONT]
Oder eine Klasse:
[FONT="Courier New"]* html .header { ...[/FONT]
Oder...

Das funktioniert natürlich mit sämtlichen anderen HTML-Elementen auch.

Olafb

Na ja, so ist das doch ein ziemliches stochern im Dunkeln. Ein bisserl Code oder ein Link würde viel aufhellen ;)

rftc

Hi...!

es ist mir fast peinlich, aber könntest du mir dabei helfen? Ich hab noch nie von Container gehört (ich kenne die header.php, page.php etc., kenne background images usw.)...daher begreif ich nicht, was ich mit container bezeichnen muss...kann ich dir nicht einen code reinhängen, und du sagst mir, welchen Begriff ich dabei modifizieren muss oder ist das sehr aufwendig? Sorry...aber ich kenn mich zuwenig aus, um neue Classes etc. zu definieren :-((

rftc

@ olaf:

sorry, im Screenshot oben ist's ersichtlich...

home.newlandsolution.ch

Code: welchen? CSS oder Header.php?

Source: CSS
Source: Header

telekommander

Ok, Ok.

Setzte dieses mal bitte in die style.css, und dann wirf mal einen Blick mit einem IE auf die Seite.
[FONT="Courier New"]
* html #page {
margin-top: 11px;
}
[/FONT]
Btw.:
Entsorge diesen [FONT="Courier New"]<hp>[/FONT] Tag, den gibt es nicht.
Verschiebe die Inline-Styleanweisung [FONT="Courier New"]<style type="text/css" media="screen">[/FONT] in den [FONT="Courier New"]<head>[/FONT] (-er).
Eventuell erholt sich ein IE wieder und du brauchst das oben genannte nicht machen, denn ein IE ist bei Fehlern ziemlich kleinlich.

( Container = [FONT="Courier New"]<div>[/FONT] Element )

Olafb

Wenn ich nen Link hab komm ich selber an den Code....

Gut, ich würd hiermit spielen bis es passt:

HTML

* html #page{ margin-top: 6px;}

wobei der Wert durchaus negativ sen kann (-5px)

NB, wobei man überlegen sollte das nich einzubauen, da krigste ja ne Macke ;)

rftc

@telecommander:

in welchen head soll ichs verschieben? von der header.php, index.php oder in welchem file genau?

Olaf:

probier ich gleich, ihr scheint da ja den selben "ansatz" zu wählen :-)

danke schon mal euch beiden!!

rftc

Götter des CSS...!

telekommander und olaf:

Ihr seid meine CSS-Götter!!! Vielen lieben Dank!!!

der *html tag hat mein Problem gelöst. -5px war genau gut :-)

telekommander:

der <hp> und <hps> tag gibts schon, und zwar bei mir :-)) ich brauch die beiden zur Vereinfachten Formatierung des Textes...aber danke für den Tipp...

Das mit dem <head> würde micht trotzdem interessieren...

Danke ihr zwei, ihr habt mir meinen Feierabend versüsst!!!

telekommander

Gern geschehen.

Zum [FONT="Courier New"]<head>[/FONT] :
Deine Inline-Style Anweisung sitzt ausserhalb des <head>- Tags und gehört innerhalb dieses Tags, die [FONT="Courier New"]header.php[/FONT] ist der richtige Platz.

HTML

<!DOCTYPE ... >
<html>
<head>
  <title>Title</title>
  <style type="text/css" media="screen">
  #supernav { ... }
  </style>
</head>
<body>
  Dein Content
</body>
</html>

Alles anzeigen

[SIZE="1"]Und jetzt " ... in den Staub ... " ( ach nee, das war'n anderer )[/SIZE] ;)

rftc

aha...hab das nie geändert...hmm...war schon immer so...

ist's jetzt besser? --> Header.php

Danke für den Tipp!

telekommander

Nein, niemals. Das geht definitiv schief !
Du hast nur den Enddtag [FONT="Courier New"]</head>[/FONT] nach unten gesetzt.
Dieser Tag kommt vor den [FONT="Courier New"]<body>[/FONT] Tag !
Setzte diesen und die Inline-Style Anweisung nach dieser Zeile:
[FONT="Courier New"]<LINK REL="SHORTCUT ICON" ... />[/FONT]

Dann passt das wieder.

( Fasse doch die Styleanweisung mit den bereits vorhanden zusammen. )

HTML

<style type="text/css" media="screen">
	
		/* BEGIN IMAGE CSS */
			/*	To accomodate differin ....
...

header.php,
Copy 'n Paste:

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />


<?php wp_head(); ?>


	<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
	
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->


	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


	<style type="text/css" media="screen">
	
		/* BEGIN IMAGE CSS */
			/*	To accomodate differing install paths of WordPress, images are referred only here,
				and not in the wp-layout.css file. If you prefer to use only CSS for colors and what
				not, then go right ahead and delete the following lines, and the image files. */
			
		body	 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor.jpg"); }	<?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single()) && (! is_page())) { ?>
			#page		{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; } <?php } else { // No sidebar ?>
			#page		{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; } <?php } ?>
			#header 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }
			#footer 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}
			
			
			/*	Because the template is slightly different, size-wise, with images, this needs to be set here
				If you don't want to use the template's images, you can also delete the following two lines. */
			
			#header 	{ margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 150px; width: 758px; }
			#headerimg 	{ margin: 7px 9px 0; height: 140px; width: 740px; } 
		/* END IMAGE CSS */
		
	
		/* 	To ease the insertion of a personal header image, I have done it in such a way,
			that you simply drop in an image called 'personalheader.jpg' into your /images/
			directory. Dimensions should be at least 760px x 200px. Anything above that will
			get cropped off of the image. */
		
		/*
		#headerimg 	{ background: url('<?php bloginfo('stylesheet_directory'); ?>/images/personalheader.jpg') no-repeat top;}
		*/
		
#supernav {
	font: bold 11px/11px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
	position: relative;
	top: 15px;
	left: 80%;
	width: 450px;
	margin: 0 0 0 -240px;
	padding: 2px 10px; /* duplicate the tab size */
	text-align: left;
	display: block;
	}
#supernav li {
	margin: 0;
	padding: 0;
	text-transform: lowercase;
	display: inline;
	}


#supernav a {
	color: #000000;
	background: none;
	font-weight: bold;
	height: 0px;
	padding: 2px 10px;
	/* round corner tab - not for IE */
	/*-moz-border-radius-topright: 6px; 
	-moz-border-radius-topleft: 6px;	*/
	}
	
#supernav a:hover {
	color: #8BFE1B;
	background: none;
	text-decoration: none;
	/* round corner tab - not for IE */
	/*-moz-border-radius-topright: 6px;  
	-moz-border-radius-topleft: 6px;	*/
	}


#supernav .current_page_item a {
	color: #8BFE1B;
	background: none;
	text-decoration: none;
	/* round corner tab - not for IE */
	/*-moz-border-radius-topright: 6px;
	-moz-border-radius-topleft: 6px;       */
}




	</style>


	<?php wp_get_archives('type=monthly&format=link'); ?>


<LINK REL="SHORTCUT ICON" HREF="http://home.newlandsolution.ch/favicon.ico">


</head>


<body>


<div id="page">


<div id="header">
	<div id="headerimg">
		
	</div>
</div>


<hr />


<?php //highlight 'Blog' if not Page
if (is_page()) {
	$highlight = "page_item";	
} else {
	$highlight = "page_item current_page_item";
}
?>


<div>  
	<ul id="supernav">  
		<?php wp_list_pages('sort_column=menu_order&exclude=7,8,9,10,11,12,13,14,15&title_li='); ?>
       <li class="<?php echo $highlight; ?>"><a href="<?php echo get_settings('home'); ?>/blog">Blog</a></li>
	</ul>  
</div>

Alles anzeigen

rftc

ah soo...ja, macht Sinn :-)

erstaunlicherweise hats trotzdem funktioniert...
Danke für Deine Hilfe Commander, hab's grad in meine header.php gepfeffert :-)

Schönen Abend noch und danke nochmals!!!

Gruss Livio

Willkommen! Melden Sie sich an oder registrieren Sie sich.

IE hat andere Margins?

Jetzt mitmachen!