PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS-Layout: kein Einheitliches Design in IE und Firefox


Henrik
2004-11-02, 22:11:01
Ich kriege es einfach nicht auf die Reihe, den Contentteil sauber neben der Navigation auszurichten, ohne das auf einem der beiden Browser die Rahmen falsch angezeigt werden oder der Content zu weit unten positioniert wird.
Es geht dabei um diese Seite (http://www.brede10c.userhost.de/3DC/webdesign/container_bug/index.htm), die im Übrigen 100%ig valide (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.brede10c.userhost.de%2F3DC%2Fwebdesign%2Fcontainer_bu g%2Findex.htm&charset=%28detect+automatically%29&doctype=%28detect+automatically%29) ist.

Kann mir jemand helfen?

_cby
2004-11-02, 22:33:20
Ich kriege es einfach nicht auf die Reihe, den Contentteil sauber neben der Navigation auszurichten, ohne das auf einem der beiden Browser die Rahmen falsch angezeigt werden oder der Content zu weit unten positioniert wird.
Es geht dabei um diese Seite (http://www.brede10c.userhost.de/3DC/webdesign/container_bug/index.htm), die im Übrigen 100%ig valide (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.brede10c.userhost.de%2F3DC%2Fwebdesign%2Fcontainer_bu g%2Findex.htm&charset=%28detect+automatically%29&doctype=%28detect+automatically%29) ist.

Kann mir jemand helfen?

Ich kriege da einen süßen kleinen Timeout :|

Henrik
2004-11-02, 22:36:38
Ich nicht, F5 ?

astanoth
2004-11-02, 23:11:06
http://stichpunkt.de/css/bereiche.html <--das würde ich als anfänger als grundlage nehmen.... und wenn dus kaputtgespielt hast neu anfangen X-D
das problem mit css ist, dass ie viele commands nicht kennt...
selfhtml.org zum beispiel hat denn immer stehn was ein browser noch nicht kann.
teste einafch immer parallel mit ie(=opera) und ff

(bin müde darum sone sätze...)

_cby
2004-11-02, 23:33:59
Ich nicht, F5 ?

Nix zu machen:
http://img83.exs.cx/img83/5967/Clipboard3.png

Der kriegt nicht mal die DNS aufgelöst wenn ich das richtig deute
Firefox 1.0 PR

Henrik
2004-11-03, 16:31:55
Ok, dann hier der Quelltext, für die, die es nicht öffnen können:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<style type="text/css">
<!--

body
{
background-image:url(img/background.jpg);
font-family:comic sans ms, sans-serif;
font-size:10pt;
font-color:#4D4D4D;
}

#header
{
border-bottom:1px solid #804000;
width:758px;
height:150px;
}

#links
{
background-color:#FCEDCC;
/*border-left:1px solid #804000;*/
width:170px;
float:left;
font-size:12pt;
}

a.menu
{
display:block;
padding:3px;
border-top:1px solid #804000;
text-align:center;
font-weight:bold;
}

.menutitle
{
font-weight:bold;
text-align:center;
margin:2px;
}

img.img_menutitle
{
width:148px;
height:30px;
}

.menucontainer
{
border:1px solid #804000;
background-color:#FCEDCC;
width:150px;
margin:10px;
}

a:link
{
text-decoration: none;
font-weight: bold;
color:#4D4D4D;
}

a:visited
{
text-decoration: none;
font-weight: bold;
color:#4D4D4D;
}

a:hover
{
text-decoration:none;
font-weight:bold;
}

#content
{
border:none;
background-color:#FCEDCC;
width:570px;
float:right;
padding: 0px 10px;
text-align:justify;
font-size:10pt;
}

//-->
</style>
<title>*deleted*</title>
<meta name="author" content="*deleted*" />
<meta name="generator" content="Ulli Meybohms HTML EDITOR" />
<meta name="keywords" content="*deleted*" />
<meta name="description" content="*deleted*" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>


<!-- Haupt-Container-->
<div style="border: 1px solid #804000; margin: 3px auto 3px auto; width: 760px; height:100%; text-align: left; background-color:#FCEDCC">

<!-- Header -->
<div>
<img id="header" src="img/logo.jpg" alt="" />
</div>

<!-- Navigations-Menü-->
<div id="links">
<div class="menucontainer">
<p class="menutitle"><img class="img_menutitle" src="img/bg_title_rubrik.jpg" alt="" /></p>
<a href="news.html" class="menu">###</a>

<a href="sounds.html" class="menu">###</a>
<a href="movies.html" class="menu">###</a>
<a href="progs.html" class="menu">###</a>
<a href="forum/index.php" class="menu">###</a>
</div>
</div>

<!-- Hauptteil-->

<div id="content">
<h1>Hier kommt der Content hin!</h1>
</div>





</div>
</body>
</html>

Nase
2004-11-03, 17:05:59
Mal eben was auf die Schnelle:

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

<html>
<head>
<title>_3DFX_</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--

body {
background-image: url(background.jpg);
color: ##4d4d4d;
}

#rahmen {
background-color: #fcedcc;
border: 1px #804000 solid;
margin: 10px auto;
min-height: 300px;
padding: 10px;
width: 730px;
}

#menu {
background-color: #fcedcc;
border: 1px #804000 solid;
float: left;
margin-right: 10px;
margin-top: 5px;
text-align: center;
width: 150px;
}

#menu a:link, #menu a:visited, #menu a:hover {
border-top: 1px #804000 solid;
color: #000;
display: block;
font-size: 12pt;
font-weight: bold;
padding: 3px;
text-align: center;
text-decoration: none;
}

#logo {
background-color: #fff;
border-bottom: 1px #804000 solid;
margin: -10px -10px 5px -10px;
padding: 10px;
}

// -->
</style>

</head>

<body>

<div id="rahmen">
<div id="logo">Logo<br><br></div>

<div id="menu">
<img src="bg_title_rubrik.jpg" alt="Menu">
<a href="#">Punkt 1</a>
<a href="#">Punkt 2</a>
<a href="#">Punkt 3</a>
<a href="#">Punkt 4</a>
<a href="#">Punkt 5</a>
<a href="#">Punkt 6</a>
</div>

Inhalt
</div>


</body>
</html>

mr.slater
2004-11-07, 11:53:41
3D_FX_bla_unterstrichener_Nick_Rulez: Ich würd mal nen hack probieren, der ein Problem von IE löst. IE interpretiert im CSS die margins und paddings oft falsch (doppelte Höhe oder Breite), vA. bei floats... mech bei den Sachen, wo's ein float hat, noch folgendes rein:

display:inline;

Hoffentlich klappts. Ach und nimm nicht "pt" für die Grössenangabe des Textes. Das ist für Papierausgabe gedacht. Korrekt wäre die Grössenangabe im "em"

Gast
2004-11-07, 22:20:59
Hi,

erst mal was anderes: hast du eigentlich was gegen externe Stylesheets? Sind doch sehr viel einfacher zu editieren wie die einzelnen HTML Dateien.

Dein Problem kannst du mit einem min-height: xxx mit xxx = Höhe der Navigation lösen (dieses CSS interpretiert nur Mozilla, nicht der IE weil zu alt (der Browser, nicht min-height)).
Außerdem macht es keinen Sinn, dem umfassenden Div eine Höhe von 100% zu geben, wenn das html, bzw. body Element keine Höhe von 100% haben.

Dann würde ich noch die ganzen Überflüssigen Meta Tags weglassen und die Leerzeilen, da Mozilla und IE auch Leerzeilen anders Interpretieren (z.b. als Zeilenumbruch oder neuen Paragraphen). Du sparst damit auch Schmalbandnutzern marginal Onlinezeit.

Gruß, Arno Nym