mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 08.12.2016 13:26 Benutzername: Passwort: Auto-Login

Thema: CSS Formatierungsproblem vom 12.09.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Formatierungsproblem
Seite: 1, 2  Weiter
Autor Nachricht
JAAHZ
Threadersteller

Dabei seit: 31.01.2005
Ort: Münster
Alter: 33
Geschlecht: Männlich
Verfasst Di 12.09.2006 10:13
Titel

CSS Formatierungsproblem

Antworten mit Zitat Zum Seitenanfang

Tach,

muss hier gerade ziemlich schnell was hinbiegen. es geht um formatierungsunterschiede zwischen firefox und ie (schon wieder * Ööhm... ja? * ). 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 08:33, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
SanMiguel

Dabei seit: 05.07.2005
Ort: Düsseldorf
Alter: 33
Geschlecht: Männlich
Verfasst Di 12.09.2006 11:14
Titel

Antworten mit Zitat Zum Seitenanfang

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..
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
xitrix

Dabei seit: 04.10.2005
Ort: Detmold
Alter: 93
Geschlecht: Männlich
Verfasst Di 12.09.2006 11:50
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kai.S

Dabei seit: 20.12.2005
Ort: München
Alter: 34
Geschlecht: Männlich
Verfasst Di 12.09.2006 13:23
Titel

Antworten mit Zitat Zum Seitenanfang

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 13:24, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Di 12.09.2006 13:36
Titel

Antworten mit Zitat Zum Seitenanfang

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 14:14, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
JAAHZ
Threadersteller

Dabei seit: 31.01.2005
Ort: Münster
Alter: 33
Geschlecht: Männlich
Verfasst Di 12.09.2006 14:38
Titel

Antworten mit Zitat Zum Seitenanfang

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?!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
xitrix

Dabei seit: 04.10.2005
Ort: Detmold
Alter: 93
Geschlecht: Männlich
Verfasst Di 12.09.2006 14:44
Titel

Antworten mit Zitat Zum Seitenanfang

oh mann....


#navi {
width: 792px;
background-color: #3c436b;
margin: 0;
height: 25px;

}


zack bumm. das wars
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
aight

Dabei seit: 26.09.2003
Ort: Berlin
Alter: 30
Geschlecht: Männlich
Verfasst Di 12.09.2006 16:59
Titel

Antworten mit Zitat Zum Seitenanfang

für diesen simplen aufbau dort braucht du keine hacks! da gibt es nichts was einer der browser falsch interpretieren könnte
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] Button verrutsch im Firefox, CSS-Künstler gesucht
[CSS/PHP/Javascript] CSS-Menu a:active soll sichtbar sein
[Javascript][CSS] JavaScrip-Rollover-Bild in CSS-Dropdown
[CSS] suche ungewöhliche Navigationen auf CSS-Basis
[CSS] print.css soll Lightbox-Bilder drucken
CSS: Druck-CSS für Formularfelder, speziell <textarea>...
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
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.