mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 15:57 Benutzername: Passwort: Auto-Login

Thema: Firefox web Problem vom 09.02.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Firefox web Problem
Autor Nachricht
maxpower
Threadersteller

Dabei seit: 05.03.2006
Ort: Linz, Österreich
Alter: 37
Geschlecht: Männlich
Verfasst Sa 09.02.2008 20:04
Titel

Firefox web Problem

Antworten mit Zitat Zum Seitenanfang

Hallo!

Ich habe das problem dass meine webseite im internet explorer richtig angezeigt wird, im Firefox verschiebt sich mein layout total. Wie könnt ich das ändern? Hab schon etwas herumgetüftelt, komm aber auf keinen grünen zweig.

website

Code:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<html>

<head>
<meta http-quiv="content-type" content="text/html; charset=utf-8" />
<title>MOX</title>
<!-- Deklaration Style-Sheet -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen"</>
</head>

<body>
<div id="wrapper">

<div id="logo">
<img src="graphic/moxlogo.png"</>
</div>

<div id="header">
<img align=TOP src="graphic/header.png"</>
</div> <!-- end header div-->

<div id="headerpic">
<img class="headeralign" align=TOP src="graphic/headerpic.png"</>
</div> <!-- end headerpic-->

<div id="menubar">
<a href="contact.html" class="navlink">Contact</a> <a href="printdesign.html" class="navlink">Printdesign</a> <a href="storyboard.html" class="navlink">Storyboard</a> <a href="concept.html" class="navlink">Concept</a> <a href="index.html" class="navlink">Film</a>
</div> <!-- end menubar div-->

<div id="content">

<div id="submenu">
<img align=TOP class="moxlogo2" src="graphic/moxlogo2.png"</>
<p class="subtitle">Storyboard</p>
<ul id="sublist">
<li><a class="listentry" href="link1.html">Idea collection</a></li>
<li><a class="listentry" href="link2.html">Story</a></li>
<li><a class="listentry" href="link3.html">Technique</a></li>
</ul>

</div> <!-- end submenu div-->

<div id="text">

<p class="areatext">
TEXT MISSING!
</p>


</div> <!-- end textarea div-->
</div>
<div id="footer">

<p class="footertext">a symbol odyssey</p>
</div> <!-- end footer div-->


</div> <!-- end wrapper div-->




</body>

</html>
 


Code:

body
{
padding-top: 25px;
background: url(graphic/bg.gif);
background-color:#6c5e6b;
margin:0;
font-family: Palatino Linotype, Palatino;
font-size: 12px;
color: #b5a8a9;
text-align:center;
}

#wrapper
{
text-align:left;
position: relative;
width: 650px;
margin: 0 auto;
overflow: hidden;
}

#logo
{
position:absolute TOP LEFT;
padding-bottom: 20px;
padding-left: 20px;
}

#header
{
position:absolute TOP LEFT;
width: 100%;
height: 20px;
margin:0;
}


#headerpic
{
position:absolute TOP LEFT;
width: 100%;
height: 80px;
background-color: #ffffff;
padding-top:0px;
padding-left: 20px;
padding-right: 20px;
}

#menubar
{
position: relative;
width: auto;
padding-top:10px;
padding-right: 20px;
height: 20px;
background-color: #ffffff;
}

a.navlink{
diplay:block;
padding-top: 20px;
padding-left: 45px;
float: right;
width: 50 px;
text-decoration: none;
color: ;
font-weight: bold;
font-family: Palatino Linotype, Palatino;
line-height: 20px;
text-align: center;
color: #b5a8a9;
font-stretch:expanded;
font-size: 14px;
}

a.navlink:hover
{
color:#6c5e6b;
font-weight:bold;
text-decoration:underline;
}

a.navlink:visited
{
color:#6c5e6b;
font-weight:bold;
text-decoration:underline;
}

a.navlink:active
{
color:#6c5e6b;
font-weight:bold;
text-decoration:underline;
}

#content
{
possition:relative;
background-color:#ffffff;
width: 100%;
height:auto;
padding-top:30px;

}


#text
{
position:relative top right;
width:450px;

background-color:#ffffff;
float:right;
padding-right:20px;
padding-bottom:20px;
}

p.areatext
{
position:relative;
color: #6c5e6b;
padding-left:10px;
padding-right:10px;
padding-top:15px;
padding-bottom:15px;
text-align:justify;
border: 2px dashed #b5a8a9;
}

#submenu
{
position: absolute;
width: auto;
float:left;
background-color:#ffffff;
}

#sublist
{
}

p.subtitle
{
color: #6c5e6b;
font-family: Palatino Linotype, Palatino;
font-size: 18px;
font-variant:small-caps;
font-weight:bold;
line-height: 25px;
text-align:center;
padding-left:20px;
}

a.listentry
{
text-decoration: none;
font-weight: normal;
font-family: Palatino Linotype, Palatino;
color: #b5a8a9;
font-stretch: normal;
font-size: 12px;
line-height:25px;
font-style: oblique;
}

a.listentry:hover
{
border-bottom: 1px dashed #b5a8a9;
}

img.moxlogo2
{
padding-left:35px;
padding-top: 0px;
padding-bottom: 15px;
}

#footer
{
position:absolute bottom left;
width: 100%;
background-color:none;
background-image:url(graphic/footer.gif);
}

p.footertext
{
position:absolute bottom;
text-align:right;
padding-right: 20px;
font-type: Palatino Linotype;
font-weight: 8pt;
font-style: oblique;
}


kann die seite möglicherweise raufladen. Tatsache ist, dass beim Firefox mein Footer oben beim submenu reingeschoben wird, also komplett falsch. Ich hoffe auf euren Rat.

Freundliche Grüße

mp[/quote]


Zuletzt bearbeitet von maxpower am Sa 09.02.2008 20:26, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
intelli

Dabei seit: 08.12.2007
Ort: Bonn
Alter: 52
Geschlecht: Männlich
Verfasst Sa 09.02.2008 20:48
Titel

Antworten mit Zitat Zum Seitenanfang

Nach dem float muss auch irgendwann ein clear kommen. Lächel

Habs wirklich nur so zusammengehauen, dass es so aussieht, wie ich es mir denke. Lächel

Code:
body
{
padding-top: 25px;
background: url(graphic/bg.gif);
background-color:#6c5e6b;
margin:0;
font-family: Palatino Linotype, Palatino;
font-size: 12px;
color: #b5a8a9;
text-align:center;
}

#wrapper
{
text-align:left;
position: relative;
width: 650px;
margin: 0 auto;
overflow: hidden;

}

#logo
{
position:absolute TOP LEFT;
padding-bottom: 20px;
padding-left: 20px;
}

#header
{
position:absolute TOP LEFT;
width: 100%;
height: 20px;
margin:0;
}


#headerpic
{
position:absolute TOP LEFT;
width: 100%;
height: 80px;
background-color: #ffffff;
padding-top:0px;
padding-left: 20px;
padding-right: 20px;
}

#menubar
{
position: relative;
width: auto;
padding-top:10px;
padding-right: 20px;
height: 20px;
background-color: #ffffff;
}

a.navlink{
diplay:block;
padding-top: 20px;
padding-left: 45px;
float: right;
width: 50 px;
text-decoration: none;
color: ;
font-weight: bold;
font-family: Palatino Linotype, Palatino;
line-height: 20px;
text-align: center;
color: #b5a8a9;
font-stretch:expanded;
font-size: 14px;
}

a.navlink:hover
{
color:#6c5e6b;
font-weight:bold;
text-decoration:underline;
}

a.navlink:visited
{
color:#6c5e6b;
font-weight:bold;
text-decoration:underline;
}

a.navlink:active
{
color:#6c5e6b;
font-weight:bold;
text-decoration:underline;
}

#content
{
possition:relative;
background-color:#ffffff;
width: 100%;
height:auto;
padding-top:30px;

}


#text
{
position:relative top right;
width:450px;

background-color:#ffffff;
float:right;
padding-right:20px;
padding-bottom:20px;
}

p.areatext
{
position:relative;
color: #6c5e6b;
padding-left:10px;
padding-right:10px;
padding-top:15px;
padding-bottom:15px;
text-align:justify;
border: 2px dashed #b5a8a9;
}

#submenu
{
position: absolute;
width: 180px;
height:24em;
float:left;
background-color:#ffffff;
}

#sublist
{
}

p.subtitle
{
color: #6c5e6b;
font-family: Palatino Linotype, Palatino;
font-size: 18px;
font-variant:small-caps;
font-weight:bold;
line-height: 25px;
text-align:center;
padding-left:0px;
}

a.listentry
{
text-decoration: none;
font-weight: normal;
font-family: Palatino Linotype, Palatino;
color: #b5a8a9;
font-stretch: normal;
font-size: 12px;
line-height:25px;
font-style: oblique;
}

a.listentry:hover
{
border-bottom: 1px dashed #b5a8a9;
}

img.moxlogo2
{
padding-left:35px;
padding-top: 0px;
padding-bottom: 15px;
}

#footer
{
clear:both;
position:absolute -bottom;
width:100em;
background-color:none;
background-image:url(graphic/footer.gif);
}

p.footertext
{
padding:0px 0px 3px 545px;
font-type: Palatino Linotype;
font-weight: 7pt;
font-style: oblique;
z-index:3;
}
  View user's profile Private Nachricht senden
Anzeige
Anzeige
maxpower
Threadersteller

Dabei seit: 05.03.2006
Ort: Linz, Österreich
Alter: 37
Geschlecht: Männlich
Verfasst Sa 09.02.2008 21:17
Titel

Antworten mit Zitat Zum Seitenanfang

hallo, danke für deine mühen.

Das Problem hat sich zwar kurzfristig erledigt, fülle ich aber den content bereich mit mehr text, ergibt sich unter dem Submenu ein freier Raum der bis zum Footer-Balken reicht.

Was könnte man da machen?
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich
Verfasst Sa 09.02.2008 23:32
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
dass meine webseite im internet explorer richtig angezeigt wird

das wage ich doch stark zu bezweifeln...
die seite wird vielleicht so angezeigt, wie du es gerne hättest, aber sicherlich nicht richtig!
der code ist völlig fehlerbelastet. der firefox hält sich sehr viel mehr an bestehende standards als der msie.
daher wundert es mich nicht, wenn die anzeige da nicht, wie von dir gewünscht, aussieht.

Es beginnt schon mit einem Fehler in der DTD-Angabe, wo du mindestens einen / vergessen hast. Dadurch schaltest du die Browser in den Quirks-Mode anstelle des standardkompatiblen Modus.

und dann frage ich mich natürlich, was deine merkwürdigen tag-abschlüsse im code sollen.
ein inhaltsleeres tag wird in xhtml mit /> beendet, nicht mit </>.
außerdem verwendest du html 4 transitional anstelle von xhtml. das sagst du zumindest in der dtd-angabe. wozu also tags als inhaltsleer kennzeichnen..?

image-tags erfordern zwingend ein alt-attribut. du darfst es leer lassen, aber nicht weglassen.

usw. usf.

als erstes würde ich dazu raten, einen validator einzusetzen und die fehler im code zu berichtigen.
dann kannst du dir über die "darstellungsfehler" gedanken machen.
mein validator zeigt mir bei deinem code zur zeit 51 fehler an.
nachdem du den fehler in der dtd-angabe korrigiert hast, wird das wahrscheinlich ein wenig anders aussehen.
das solltest du ohnehin als erstes tun, ansonsten werden die meisten validatoren den code ohnehin nicht richtig prüfen können, sofern du dem validator nicht sagen kannst, welche dtd zum einsatz kommt.
  View user's profile Private Nachricht senden
maxpower
Threadersteller

Dabei seit: 05.03.2006
Ort: Linz, Österreich
Alter: 37
Geschlecht: Männlich
Verfasst So 10.02.2008 17:54
Titel

Antworten mit Zitat Zum Seitenanfang

Ich hab meinen html code entsprechend w3c korrigiert und wird nun als valid angegeben. Wie kann ich den weißen Leerraum unter dem Submenu im Firefox beseitigen. Vielleicht hat jemand eine Lösung parat.

www.msiah.com/mox

Dank im Voraus.
  View user's profile Private Nachricht senden
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst So 10.02.2008 18:05
Titel

Antworten mit Zitat Zum Seitenanfang

vlt liegts daran?



irgendwie schnallt der fuchs das
Code:
position:absolute TOP LEFT;

ned
  View user's profile Private Nachricht senden
intelli

Dabei seit: 08.12.2007
Ort: Bonn
Alter: 52
Geschlecht: Männlich
Verfasst So 10.02.2008 18:46
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn Du den Wrapper weiß machst

Code:
#wrapper (linie 14)
{
   text-align: left;
   position: relative;
   width: 650px;
   margin-top: 0pt;
   margin-right: auto;
   margin-bottom: 0pt;
   margin-left: auto;
   overflow-x: hidden;
   overflow-y: hidden;
   background-color:#fff;
}


Musst Du nur die Grafik oben und den Footer anpassen.

Ansonsten musst Du noch nen Container anlegen, in dem das Menü und der content liegen, und dort den Hintergrund weiß machen.


Zuletzt bearbeitet von intelli am So 10.02.2008 18:48, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen ul a li - Problem mit Firefox
css Problem Firefox und IE
SVG in Firefox - Problem
Problem mit Flashbuttons im Firefox
firefox - popup-problem
Webanzeige Problem im Firefox
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.