Darstellungsproblem

Status
Nicht offen für weitere Antworten.
W

Webgau

Mitglied
Servus,

habe ein Menü erstellt welches sich allerdings im gesamt Abstand nach links unterscheidet (FF, IE)
Im IE wird das gesamte Menü zur mitte gerückt und im FF ist es so wie ich es brauch.

Hier mal der CSS Code
Code: 
#top_menu
{
	margin: 0px;
	padding: 0px;	
}

#top_menu ul
{
    text-align: center;
    border: none;
	padding-top: 90px;
}
#top_menu ul li 
{
    list-style: none;
    display: inline;
    margin: 0; padding: 0;
}

#top_menu ul a, ul#Navigation span 
{
    float: left;
	padding: 0px 10px;
    text-decoration: none;
	line-height: 37px;
    border: none;
	color: #FFFFFF;
	background: url(../images/trenner.gif) right no-repeat;
	font-size: 12px;
	font-weight: bold;
}

#top_menu ul a:hover, ul#Navigation span 
{
    color: #FFFF00;
}

#top_menu ul div 
{
     clear: left;
}

#top_menu a#active_menu-nav
{
	color: #FFFF00;
}

wo liegt der fehler

Grüße und Dank Mirko
 
Hi,

möglicherweise liegt es an der text-align:center-Deklaration für das ul-Listenelement.

Ansonsten kann ich da keine Einstellung entdecken, die zum Ausrichten zur Mitte hin dienen könnte.

mfg Maik
 
Setz mal die äußere und innere Polsterungseigenschaft des ul-Listenelements zurück, da sie in den Browsern unterschiedliche Initialwerte besitzen:

Code: 
#top_menu ul
{
    text-align: center;
    border: none;
    margin: 0px;
    padding: 0px;
    padding-top: 90px;
}
Ansonsten zeig mal bitte den dazugehörigen HTML-Code, damit ich es in den Browsern anschauen und vergleichen kann.

mfg Maik
 
des hab ich auch gehabt


unser Lehrer in der BS hat dann gemeint des is deshalb weil die Browser unterschiedliche Nullpunkte haben.

von Ihm kamen da keine Weiteren Erklärungen (so hies es für uns halt 2 css schreiben 1x FF 1xIE)

wenn ihr eine lösung habt wäre es nett. ich schau mal wieder rein
 
AIKler hat gesagt.:
(so hies es für uns halt 2 css schreiben 1x FF 1xIE)
Zum Vergrößern anklicken....
Das wäre mir neu, dass man wegen der unterschiedlichen Initialwerte zum Außen- und Innenabstand des Listenelements für jeden Browser ein individuelles Stylesheet schreiben muß :suspekt:

Code: 
ul {
margin:0;
padding:0;
}
in einem Stylesheet reicht da vollkommen aus.

Und wenn du auf Nummer sicher gehen, und diese Regel auch auf andere Blockelement-Typen innerhalb des HTML-Dokuments anwenden willst, greifst du zum Universalselektor, der gleich zu Beginn des Stylesheets notiert wird:

Code: 
* {
margin:0;
padding:0;
}
Damit bin ich in der Vergangenheit immer gut gefahren.

mfg Maik
 
Hi,

habe das Problem gefunden. Ich habe darüber noch einen fontsizer der ist das problem, hier mal der html code:

Code: 
<?php
defined('_JEXEC') or die('Restricted access');
echo '<?xml version="1.0" encoding="utf-8"?'.'>'; 
?>

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/feuerwehr/css/template.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/feuerwehr/css/general.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/feuerwehr/css/header.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/feuerwehr/css/content.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/feuerwehr/css/footer.css" type="text/css" />
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/beez/javascript/md_stylechanger.js"></script>
</head>
<body>
	<div id="all">
		<div id="header">
        	<div id="search"><jdoc:include type="modules" name="user4" style="xhtml"   /></div>
            <div id="fontsize">
            	<script type="text/javascript">
				//<![CDATA[
					document.write('<a href="index.php" title="Schrift vergr&ouml;&szlig;ern" onclick="changeFontSize(2); return false;"><img src="/templates/feuerwehr/images/gross.gif" alt="Schrift vergr&ouml;&szlig;ern" /></a>');
					document.write('<a href="index.php" title="Schrift zur&uuml;cksetzen" onclick="revertStyles(); return false;"><img src="/templates/feuerwehr/images/normal.gif" alt="Schrift zur&uuml;cksetzen" /></a>');
					document.write('<a href="index.php" title="Schrift verkleinern" onclick="changeFontSize(-2); return false;"><img src="/templates/feuerwehr/images/klein.gif" alt="Schrift verkleinern" /></a></p>');
				//]]>
				</script>
            </div>
            <div id="top_menu"><jdoc:include type="modules" name="user3" style="xhtml"   /></div>
        </div>
    	<div id="logo"></div>
    	<div id="hauptcontent">Test</div>
        <div id="footer"></div>
	</div>
</body>
</html>

und hier der css code:

Code: 
#header
{
	background: url(../images/header.gif) no-repeat;
	height: 135px;
	width: 806px;
}

#logo
{
	background: url(../images/logo.png) no-repeat;
	height: 130px;
	width: 806px;
	margin:0;
	padding:0;
}

#search
{
	float: right;
	padding-top: 40px;
	padding-right: 28px;
}

#search input
{
	border: #CCCCCC solid 1px;
	height: 18px;
	background: url(../images/lupe.jpg) left no-repeat #f4f4f4;
	padding-left: 20px;
}

#fontsize
{
	float: left;
	padding-top: 40px;
	padding-left: 28px;
	line-height: 40px;
}

#fontsize img
{
	border: none;
}

#top_menu
{
	margin: 0px;
	padding: 0px;
}

#top_menu ul
{
    text-align: center;
    border: none;
	padding-top: 90px;
}

#top_menu ul li 
{
    list-style: none;
    display: inline;
    margin: 0; padding: 0;
}

#top_menu ul a, ul#Navigation span 
{
    float: left;
	padding: 0px 10px;
    text-decoration: none;
	line-height: 37px;
    border: none;
	color: #FFFFFF;
	background: url(../images/trenner.gif) right no-repeat;
	font-size: 12px;
	font-weight: bold;
}

#top_menu ul a:hover, ul#Navigation span 
{
    color: #FFFF00;
}

#top_menu ul div 
{
     clear: left;
}

#top_menu a#active_menu-nav
{
	color: #FFFF00;
}

irgendwo ist der wurm :suspekt:

grüße
 
Wenn die Darstellung im FF stimmt, dann soll #fontsize an seiner rechten Flanke vom nachfolgenden Menü überhaupt nicht umflossen werden. Demnach musst du die Ausrichtung des Menüs unterhalb des Elements erzwingen, sprich die Floatumgebung aufheben - also:

Code: 
#top_menu
{
        margin: 0px;
        padding: 0px;
        clear:left;
}

mfg Maik
 
Bei mir verschwindet dadurch das Menü überhaupt nicht :p

Nenn mal den Link zu der Seite, oder lad hier die beiden Browser-Screenshots zu deinem gezeigten Quellcode hoch, damit ich überhaupt mal zu Gesicht bekomme, wo das Menü nun in der vollständigen Seite in ihnen sitzt.

Achja, ich war mal so frei, zum Testen diese Zeile

Code: 
<div id="top_menu"><jdoc:include type="modules" name="user3" style="xhtml"   /></div>

gegen diese hier zu tauschen

Code: 
<div id="top_menu">
     <ul>
         <li><a href="#">link 1</a></li>
         <li><a href="#">link 2</a></li>
         <li><a href="#">link 3</a></li>
     </ul>
</div>
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück