mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 21.01.2020 10:28 Benutzername: Passwort: Auto-Login

Thema: css homepage --> abweichungen in browsern vom 28.05.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> css homepage --> abweichungen in browsern
Autor Nachricht
JAAHZ
Threadersteller

Dabei seit: 31.01.2005
Ort: Münster
Alter: 36
Geschlecht: Männlich
Verfasst Do 28.05.2009 09:11
Titel

css homepage --> abweichungen in browsern

Antworten mit Zitat Zum Seitenanfang

hi leute,

ich sitze gerade an einer relativ schlichten homepage und bin prinzipiell im bei den letzten 90% der basisseite. bin soweit auch ganz zufrieden. aber eins macht mir zu schaffen: im firefox und im internet explorer gibts es abweichungen in der höhe des contents. hatte dieses problem schon öfter, hab es meinstes auch in den griff gekriegt. aber diesmal ists irgendwie anders. wäre super wenn jemand da mal drüber schauen könnte. hier einmal der link: *zur testseite*

der html code:


Zitat:
<!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>
<title>Allendorf Media</title>
<link rel="stylesheet" media="screen" href="../template_css.css" />
<link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<div id="content">

<div id="navcontainer">
<ul id="navlist">
<li id="aqua"><a href="../aqua/index.htm">Aqua Verlag</a></li>
<li id="mattscheibe"><a href="../mattscheibe/index.htm">Mattscheibe Media</a></li>
<li id="allendorf"><a href="#" id="current">Allendorf Media</a></li>
<li id="riehl"><a href="http://www.allendorf-riehl.de/" target="_blank">Allendorf Riehl</a></li>
</ul>

</div>
<div id="header">
<a href="index.htm" title="Home"><p><div id="logo"><h1><span>Allendorf Media</span></h1></p></div></a>
</div>
<div id="spacer">&nbsp;</div>
<div id="hauptmenu">
<div id="MainMenu">
<div id="tab">

<ul>
<li class="item_active"><a href="index.htm"><span>Allendorf Media</span></a></li>
<li><a href="leistungen.htm"><span>Leistungen</span></a></li>
<li><a href="kunden.htm"><span>Kunden</span></a></li>
<li><a href="kampagnen.htm"><span>Kampagnenbeispiele</span></a></li>
<li><a href="team.htm"><span>Team</span></a></li>

<li><a href="csr.htm"><span>CSR</span></a></li>
<li><a href="kontakt.htm"><span>Kontakt</span></a></li>
</ul>
</div>
</div>
</div>
<div id="inhalt">
<h1>Herzlich Willkommen bei Allendorf Media</h1>

<div id="inhaltbild"><img src="../images/rubrik_allendorf.jpg" /></div>
<p>Ja, wir finden auch, dass man &uuml;ber die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man &uuml;ber die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man &uuml;ber die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man &uuml;ber die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man &uuml;ber die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein.</p>
<p>Ja, wir finden auch, dass man &uuml;ber die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man &uuml;ber die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man &uuml;ber die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man &uuml;ber die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man &uuml;ber die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. <a href="#">Testlink</a></p>

</div>
<div id="footer">&nbsp;</div>
<div id="naviunten"><a href="impressum.html" target="_blank">Impressum</a>&nbsp;<a href="../index.htm">Startseite</a></div>
</div>
</body>
</html>


und hier einmal der css-code:

Zitat:

body {
background-color: #d4d4d4;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#333333;
padding:0px;
margin:0px;
text-align: center;
}


#content {
text-align: left;
margin: 30px auto;
padding: 0 0 0px 0;
width: 981px;
background-color: #ffffff;
}


p {
margin: 0px;
padding: 8px 10px;
}

h1 {
margin: 0px;
padding: 0px 0px;
}

h2 {
font-size: 11px;
color: #ffffff;
background-color: #000000;
}

a {
color: #3a509b;
font-size: 11px;
font-weight: bold;
background-color:transparent;
text-decoration: underlined;
}

#header {
text-align: left;
margin: 0px;
padding: 0px;
width: 981px;
height: 226px;
background-color: #ffffff;
background-image: url(images/bg_allendorf.jpg);
background-repeat: no-repeat;
z-index: 1;
clear: both;
}


#spacer {
width: 981px;
height: 15px;
background-color: #d4d4d4;
margin: 0px 0 15px 0;
}
#logo {
margin: 0 0 0px 20px;
padding: 0px 0 20px 0px;
width: 107px;
height: 48px;
background-image: url(images/logo.gif);
background-repeat: no-repeat;
z-index: 2;
}

#logo h1 {
display: none;
}

#logo h1 span {
display: none;
}






#navcontainer
{
text-align: right;
padding-top: 20px;
padding-right: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
background-image: url(images/bg_top.jpg);
height: 57px;

}

#navlist li
{
display: inline;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
border-right: 0px;
border-left: 1px;
border-top: 0px;
border-bottom: 0px;
border-style: solid;
border-color: #c0c0c0;
}

#navlist a
{
padding-left: 20px;
padding-bottom: 14px;
font-weight: bold;
text-decoration: none;

}

#navlist a:link, #navlist a:visited
{
padding-left: 35px;
color: #3f3f3f;
background: url(images/allendorf_klein.gif);
background-position: 0 -6px;
background-repeat: no-repeat;}

#navlist a:hover
{
color: #3f3f3f;
text-decoration: underlined;
padding-left: 35px;
background: url(images/allendorf_klein.gif);
background-repeat: no-repeat;
background-position: 0 -6px;}


#aqua li
{
display: inline;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
border-right: 0px;
border-left: 1px;
border-top: 0px;
border-bottom: 0px;
border-style: solid;
border-color: #c0c0c0;
}

#aqua
{
padding-left: 20px;
padding-bottom: 14px;
font-weight: bold;
text-decoration: none;

}

#aqua a:link, #aqua a:visited
{
padding-left: 35px;
color: #3f3f3f;
background: url(images/aqua_klein.gif);
background-position: 0 -6px;
background-repeat: no-repeat;}

#aqua a:hover
{
color: #3f3f3f;
text-decoration: underlined;
padding-left: 35px;
background: url(images/aqua_klein.gif);
background-repeat: no-repeat;
background-position: 0 -6px;}





#mattscheibe li
{
display: inline;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
border-right: 0px;
border-left: 1px;
border-top: 0px;
border-bottom: 0px;
border-style: solid;
border-color: #c0c0c0;
}

#mattscheibe
{
padding-left: 20px;
padding-bottom: 14px;
font-weight: bold;
text-decoration: none;

}

#mattscheibe a:link, #mattscheibe a:visited
{
padding-left: 35px;
color: #3f3f3f;
background: url(images/mattscheibe_klein.gif);
background-position: 0 -6px;
background-repeat: no-repeat;}

#mattscheibe a:hover
{
color: #3f3f3f;
text-decoration: underlined;
padding-left: 35px;
background: url(images/mattscheibe_klein.gif);
background-repeat: no-repeat;
background-position: 0 -6px;}


#allendorf li
{
display: inline;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
border-right: 0px;
border-left: 1px;
border-top: 0px;
border-bottom: 0px;
border-style: solid;
border-color: #c0c0c0;
}

#allendorf
{
padding-left: 20px;
padding-bottom: 14px;
font-weight: bold;
text-decoration: none;

}

#allendorf a:link, #allendorf a:visited
{
padding-left: 35px;
color: #3f3f3f;
background: url(images/allendorf_klein.gif);
background-position: 0 -6px;
background-repeat: no-repeat;}

#allendorf a:hover
{
color: #3f3f3f;
text-decoration: underlined;
padding-left: 35px;
background: url(images/allendorf_klein.gif);
background-repeat: no-repeat;
background-position: 0 -6px;}


#riehl li
{
display: inline;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
border-right: 0px;
border-left: 1px;
border-top: 0px;
border-bottom: 0px;
border-style: solid;
border-color: #c0c0c0;
}

#riehl
{
padding-left: 20px;
padding-bottom: 14px;
font-weight: bold;
text-decoration: none;

}

#riehl a:link, #riehl a:visited
{
padding-left: 35px;
color: #3f3f3f;
background: url(images/riehl_klein.gif);
background-position: 0 -6px;
background-repeat: no-repeat;}

#riehl a:hover
{
color: #3f3f3f;
text-decoration: underlined;
padding-left: 35px;
background: url(images/riehl_klein.gif);
background-repeat: no-repeat;
background-position: 0 -6px;}



#footer {
text-align: left;
background-color: #ffffff;
margin: 20px 0 0px 0;
padding: 0px 0 0px 0;
width: 981px;
height: 47px;
background-color: transparent;
background-image: url(images/footer.gif);
background-repeat: no-repeat;
clear: both;
}

#naviunten {
text-align: right;
background-color: #d4d4d4;
margin: 0px 0 0px 0;
padding: 0px 0 40px 0;
width: 981px;
}

#naviunten a {
color: #404040;
padding: 0px 20px 0px 0px;
margin: 5px 0 0px 0;
font-size: 11px;
font-weight: bold;
background-color:transparent;
text-decoration: underlined;
}

#inhalt {
background-color: #ffffff;
margin: 8px 0 20px 15px;
padding: 0 15px 0 0;
width: 646px;
float: right;
position: relativ;
left: 305px;
top: 0px;

}

#inhalt h1 {
font-size: 12px;
font-weight: bold;
color: #3f3f3f;
margin: 0px 0 10px 0px;
}

#inhaltbild {
width: 628px;
border-width: 7px;
border-style: solid;
border-color: #e4e3e1;
margin: 0 0 15px 0;
}


<!-- Hauptmenü -->

#hauptmenu {
background-color: #ffffff;
margin: 20px 15px 50px 0;
padding: 0px 0 0px 0;
width: 305px;
float: left;
}

#MainMenu
{
width:305px;
background:url(images/bmid_046.gif);
border:0;
margin:0;
}
#tab
{
top:0;
height:0;
margin:0;
}
#tab ul
{
list-style:none;
float:left;
margin:0;
padding:0;
}
#tab li
{
float:left;
clear:both;
margin:0;
padding:0;
}
#tab a
{
background:#000 url(images/bright_046.gif) no-repeat right top;
text-decoration:none;
width:305px;
border:0;
display:block;
float:left;
margin:0;
padding:0;
}
#tab a span
{
display:block;
background:url(images/bleft_046.gif) no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000;
font-weight:700;
line-height:29px;
padding:0 15px 0 18px;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
border-color:#FF9300;
}
#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#FFF;
font-weight:700;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0 #000;
background:url(images/bmid_046.gif);
color:#000;
z-index:100;
text-decoration:none;
padding:0;
}
.dropmenudiv ul
{
list-style:none;
margin:0;
padding:0;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link,.dropmenudiv a:visited
{
width:180px;
display:block;
border:0 #FF9300;
color:#000;
background:url(images/bleft_046.gif) no-repeat left top;
font-weight:700;
font-style:normal;
text-decoration:none;
margin:0;
padding:0;
}
.dropmenudiv a span
{
display:block;
line-height:29px;
background:url(images/bright_046.gif) no-repeat right top;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000;
float:none;
padding:0 15px 0 18px;
}
.dropmenudiv a:hover
{
border:0 #FF9300;
background-position:left bottom;
font-weight:700;
font-style:normal;
text-decoration:none;
color:#FFF;
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#FFF;
font-weight:700;
}
<!-- Ende Hauptmenü -->


wäre echt nett wenn mir jemand helfen könnte oder einen tipp parat hat. komm im moment nicht weiter! danke im voraus!

gruß.
j.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 37
Geschlecht: Männlich
Verfasst Do 28.05.2009 09:36
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
* {
  margin:0;
  padding:0;
}

body {
  margin:0;
  padding:0;
}
  View user's profile Private Nachricht senden
Anzeige
Anzeige
JAAHZ
Threadersteller

Dabei seit: 31.01.2005
Ort: Münster
Alter: 36
Geschlecht: Männlich
Verfasst Do 28.05.2009 09:55
Titel

Antworten mit Zitat Zum Seitenanfang

oke ich hab jetzt mal alle überflüssigen margins und paddings rausgehauen. leider ändert sich noch nicht wirklich was! *Schnief*
kannst du evtl ein wenig konkreter werden? wäre nett Lächel danke schonmal
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 37
Geschlecht: Männlich
Verfasst Do 28.05.2009 09:57
Titel

Antworten mit Zitat Zum Seitenanfang

du mußt allen browsern die standardwerte entziehen.

CSS Reset

das fehlt bei dir.
  View user's profile Private Nachricht senden
JAAHZ
Threadersteller

Dabei seit: 31.01.2005
Ort: Münster
Alter: 36
Geschlecht: Männlich
Verfasst Do 28.05.2009 10:14
Titel

Antworten mit Zitat Zum Seitenanfang

mh damit muss man sich ja erstmal richtig auseinandersetzen. das braucht ein wenig zeit...die habe ich jedoch im moment nicht für dieses projekt! danach führe ich mir das gerne zu gemüte. gibts vll ne dreckige schummellösung? Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 54
Geschlecht: Männlich
Verfasst Do 28.05.2009 10:43
Titel

Antworten mit Zitat Zum Seitenanfang

yep - developer-toolbar fürn firefox könnt helfen

1)
Code:
text-decoration: underlined;

durch
Code:
text-decoration: underline;

ersetzen (hat zwar nix mit deinem prob zu tun - ist aber falsch)

2)
developertoolbar hat geschrieben:
Warnung: Fehler beim Verarbeiten des Wertes für Eigenschaft 'position'. Deklaration ignoriert.
Quelldatei: http://60-jahre-bundesrepublik.com/test/template_css.css
Zeile: 353

Code:
#inhalt {
background-color: #ffffff;
margin: 8px 0 20px 15px;
padding: 0 15px 0 0;
width: 646px;
float: right;
position: relativ;
left: 305px;
top: 0px;

}

float + positioning wird nix

3)
developertoolbar hat geschrieben:
Warnung: ',' oder '{' erwartet, aber '-->' gefunden. Regelsatz wegen ungültigem Selektor ignoriert.
Quelldatei: http://60-jahre-bundesrepublik.com/test/template_css.css
Zeile: 375


kommentare im css
Code:
/*Hauptmenü*/
  View user's profile Private Nachricht senden
JAAHZ
Threadersteller

Dabei seit: 31.01.2005
Ort: Münster
Alter: 36
Geschlecht: Männlich
Verfasst Do 28.05.2009 11:17
Titel

Antworten mit Zitat Zum Seitenanfang

danke euch beiden. hat mir beides sehr geholfen. einmal fürs "überbrücken" und einmal fürs besser machen beim nächsten mal. jetzt kann es weitergehen Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen homepage elemente verschwinden in versch. browsern
css positionierung in versch. browsern
CSS layout funktioniert nicht mit Mac Browsern ?
CSS-Darstellungsproblem (Navigation) in versch. Browsern
[CSS] Falsche Font-Farben bei aktuellen Browsern
css-Style Auswahl auf Homepage
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.