| Autor |
Nachricht |
JAAHZ
Threadersteller
Dabei seit: 31.01.2005
Ort: Münster
Alter: 41
Geschlecht: 
|
Verfasst Di 12.09.2006 11:13
Titel CSS Formatierungsproblem |
  |
|
Tach,
muss hier gerade ziemlich schnell was hinbiegen. es geht um formatierungsunterschiede zwischen firefox und ie (schon wieder  ). leider verschieben sich einige sachen, die es aber nicht sollten.
Speziell sind die im Firefox rutschende Unterschrift und die sich nicht gescheit anpassende Navigation gemeint.
Hat jemand nen tipp für mich? wäre sehr dankbar!
CSS:
| Code: |
/* Standards */
body {
padding-right: 20px;
padding-left: 20px;
font-size: 12px;
padding-bottom: 20px;
margin: 0px;
color: #000000;
padding-top: 20px;
font-family: verdana, arial, helvetica, sunsans-regular, sans-serif;
line-height: 16px;
background-color: #00000;
text-align: center
}
#kasten {
border-right: 0;
padding-right: 0px;
border-top: #0;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px auto;
vertical-align: middle;
border-left: 0;
width: 792px;
padding-top: 0px;
border-bottom: 0;
background-color: #ffffff;
text-align: left
}
#header {
margin: 0px;
padding: 0px;
}
#footer {
width: 792px;
margin-top: 25px;
padding: 0px;
background-image : url(../_images/footer.gif);
}
#inhalt {
width: 792px;
height: 290px;
margin-top: 25px;
padding: 0px;
background-image : url(../_images/hg.gif);
background-repeat: no-repeat;
}
#textbox {
width: 379px;
float: right;
}
#bildbox {
vertical-align: top;
width: 392px;
margin-right: 22px;
padding: 0;
}
#unterschrift {
float: right;
margin-right: 22px;
margin-top: 22px;
}
p {
padding-right: 10px;
padding-left: 10px;
padding-bottom: 5px;
margin: 0px;
padding-top: 5px
}
h1 {
padding-right: 10px;
padding-left: 10px;
padding-bottom: 5px;
margin: 0px;
padding-top: 5px
}
h1 {
font-size: 14px;
color: #246ab9;
}
a {
font-size: 12px;
color: #246ab9;
background-color: transparent;
text-decoration: none
}
/* Navigation */
#navischatten {
width: 792px;
background-color : transparent;
background-image : url(../_pics/schatten.gif);
background-repeat: repeat-x;
}
#navi {
width: 792px;
background-color: #3c436b;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
}
#navlist {
margin: 0;
padding: 5px 0 5px 10px;
background-color: #3c436b;
}
#navlist ul, #navlist li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #ffffff;
}
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
border-bottom: 1px solid #ffffff;
padding-bottom: 2px;
background: transparent;
color: #fffff;
}
#navlist a:hover {
color: #abb9c9;
}
|
HTML:
| Code: |
<!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>blabla</title>
<link rel="STYLESHEET" type="text/css" href="_css/style.css" />
</head>
<body>
<div id="kasten">
<div id="header"><a href="index.htm" target="_parent"><img src="_images/header.jpg" width="792" height="107" alt="" border="0"></a></div>
<div id="navi">
<ul id="navlist">
<li><a href="index.htm" title="Home">Home</a></li>
<li><a href="ferienwohnung.htm" title="Ferienwohnung">Ferienwohnung</a></li>
<li><a href="ort.htm" title="Ort & Umgebung">Ort & Umgebung</a></li>
<li><a href="karte.htm" title="Karte">Karte</a></li>
<li><a href="kontakt.htm" title="Kontakt">Kontakt</a></li>
<li><a href="impressum.htm" title="Impressum">Impressum</a></li>
</ul>
</div>
<div id="navischatten"><img src="_pics/nix.gif" width="1" height="13" alt="" border="0"></div>
<div id="inhalt">
<div id="textbox">
<h1>Herzlich Willkommen an der Nordsee!</h1>
<p>Ut wisi enim ad minim veniam, quis ionullamcorper suscipit
lobortis nisl ut aliquipex ea commodo consequat. Duis autem
vel eumdolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiatduienim ad minim
veniam, quis nostrud exerci tation ullam corper suscipit lobort
nisl ut commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse, vel illum dolore eu feugiat nulla facilisis at
vero et accumsan et iusto.Dolore <a href="index.htm" target="_parent">eu feugiatduienim</a> ad minim
veniam, quis nostrud exerci tation.</p>
<div id="unterschrift"><img src="/Austrup_FeWo/_images/unterschrift.gif" width="125" height="86" alt="" border="0" /></div>
</div>
<div id="bildbox"><img src="/Austrup_FeWo/_images/haus1.jpg" width="392" height="258" alt="Bild des Ferienhauses in Tossens an der Nordsee" border="0" /></div>
</div>
<div id="footer"><img src="/Austrup_FeWo/_pics/nix.gif" width="1" height="27" alt="" border="0" /></div>
</div>
</body>
</html>
|
Wäre für Hilfe wirklich sehr dankbar, hab echt schon laaaange gesucht....
Zuletzt bearbeitet von JAAHZ am Mi 13.09.2006 09:33, insgesamt 2-mal bearbeitet
|
|
| |
   |
 |
SanMiguel
Dabei seit: 05.07.2005
Ort: Düsseldorf
Alter: 41
Geschlecht:
|
Verfasst Di 12.09.2006 12:14
Titel
|
|
|
Ich lege an dieser Stelle meistens ein .css für den IE dazu, für andere Browser durch "conditional comments" nicht sichtbar:
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
Mit den einzelnen Stylesheets kann man dann für jeden Fall Abstände usw. korrigieren..
|
|
| |
|
|
|
Anzeige
|
|
|
xitrix
Dabei seit: 04.10.2005
Ort: Detmold
Alter: 101
Geschlecht:
|
Verfasst Di 12.09.2006 12:50
Titel
|
|
|
joa, oder nimmste nen css hack. z.b.
html>body #navlist{
anderer paddingwert fürn firefox;
}
^^^^^^dieser hack wird vom IE nicht interpretiert, also überlesen. ist denke ich mal die schnellste methode für dich tschüss
|
|
| |
|
|
Kai.S
Dabei seit: 20.12.2005
Ort: München
Alter: 41
Geschlecht:
|
Verfasst Di 12.09.2006 14:23
Titel
|
|
|
| SanMiguel hat geschrieben: | Ich lege an dieser Stelle meistens ein .css für den IE dazu, für andere Browser durch "conditional comments" nicht sichtbar:
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
Mit den einzelnen Stylesheets kann man dann für jeden Fall Abstände usw. korrigieren.. |
Hmm das kann ich nicht empfehlen, ich habe bislang jedes Layout ohne Browserweichen hinbekommen!
Zur Not ein CSS Hack, aber keine Browserweichen, man denke an den armen Mensch (vielleicht sogar du) der ein Redesign fährt ...
Die Wichtigsten Dinge im Überblick:
Der IE darf nicht in den Quirks-Mode, da man sonst sein Box-Modell vergessen kann.
Testen kannste das mit:
| Code: | <script type="text/javascript">
alert(document.compatMode);
</script> |
was immer hilft ist:
| Code: | | * {margin:0;padding:0;} |
und in deinem Fall würde ich dir empfehlen die <a>'s mit display:block und die <li>'s float:left und definierter Line-Height einzukasteln, aber nicht vergessen danach zu clearen. So wie auf www.deutschepokerunion.de z.b.
Zuletzt bearbeitet von Kai.S am Di 12.09.2006 14:24, insgesamt 2-mal bearbeitet
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Di 12.09.2006 14:36
Titel
|
|
|
Conditional comments sind kompletter Unfug.
Es gab in 4 Jahren genau _einen_ fall, wo ich sie (leider)
benutzen MUSSTE. Mit entsprechendem Vorwissen und
wenn man sich schon beim Layouten ein paar gedanken
macht kommt man sogar meist ohne bzw. mit sehr
wenigen hacks aus.
Zum Thema: nach der ul clearen soll helfen.
css hinzufügen:
| Code: |
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: block; }
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
|
und die klasse in den container packen:
| Code: | | <ul id="navlist" class="clearfix"> |
feddsch.
hier gibs infos dazu:
http://www.yaml.de/artikel/xhtml/floats.html
Zuletzt bearbeitet von sahnemuh am Di 12.09.2006 15:14, insgesamt 3-mal bearbeitet
|
|
| |
|
|
JAAHZ
Threadersteller
Dabei seit: 31.01.2005
Ort: Münster
Alter: 41
Geschlecht:
|
Verfasst Di 12.09.2006 15:38
Titel
|
|
|
ich hab die gängigsten hacks ja schon ausprobiert und war irgendwie am verzweifeln.
das mti dem clearfix klappt irgendwie auch nicht...
sehr ich den wald vor lauter bäumen nicht?!
|
|
| |
|
|
xitrix
Dabei seit: 04.10.2005
Ort: Detmold
Alter: 101
Geschlecht:
|
Verfasst Di 12.09.2006 15:44
Titel
|
|
|
oh mann....
#navi {
width: 792px;
background-color: #3c436b;
margin: 0;
height: 25px;
}
zack bumm. das wars
|
|
| |
|
|
aight
Dabei seit: 26.09.2003
Ort: Berlin
Alter: 37
Geschlecht:
|
Verfasst Di 12.09.2006 17:59
Titel
|
|
|
|
für diesen simplen aufbau dort braucht du keine hacks! da gibt es nichts was einer der browser falsch interpretieren könnte
|
|
| |
|
|
| |
|
|
Willkommen auf dem Portal für Mediengestalter
