Autor |
Nachricht |
maxpower
Threadersteller
Dabei seit: 05.03.2006
Ort: Linz, Österreich
Alter: 37
Geschlecht:
|
Verfasst Sa 09.02.2008 20:04
Titel Firefox web Problem |
|
|
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
|
|
|
|
|
intelli
Dabei seit: 08.12.2007
Ort: Bonn
Alter: 52
Geschlecht:
|
Verfasst Sa 09.02.2008 20:48
Titel
|
|
|
Nach dem float muss auch irgendwann ein clear kommen.
Habs wirklich nur so zusammengehauen, dass es so aussieht, wie ich es mir denke.
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;
}
|
|
|
|
|
|
Anzeige
|
|
|
maxpower
Threadersteller
Dabei seit: 05.03.2006
Ort: Linz, Österreich
Alter: 37
Geschlecht:
|
Verfasst Sa 09.02.2008 21:17
Titel
|
|
|
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?
|
|
|
|
|
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Sa 09.02.2008 23:32
Titel
|
|
|
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.
|
|
|
|
|
maxpower
Threadersteller
Dabei seit: 05.03.2006
Ort: Linz, Österreich
Alter: 37
Geschlecht:
|
Verfasst So 10.02.2008 17:54
Titel
|
|
|
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.
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst So 10.02.2008 18:05
Titel
|
|
|
vlt liegts daran?
irgendwie schnallt der fuchs das
Code: | position:absolute TOP LEFT; |
ned
|
|
|
|
|
intelli
Dabei seit: 08.12.2007
Ort: Bonn
Alter: 52
Geschlecht:
|
Verfasst So 10.02.2008 18:46
Titel
|
|
|
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
|
|
|
|
|
|
|
|
Ä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
|
|