PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : 2 kleine Fehler im CSS?

Marscel
2007-02-25, 17:25:31
Ich sitze gerade an dem Entwurf eines CSS-basierten XHTML-Dokuments. Hier ist die Adresse:

http://pcreact.de/anakonda/html/

Ich habe da aber zwei Probleme mit einigen Browsern festgestellt.

1.) Firefox hat das Inputfeld nach unten verrückt.

http://pcreact.de/anakonda/html/ff.png

Der CSS-Code: http://pcreact.de/anakonda/html/style_new.css - wichtig sind hier ganz unten die input. und form# .


2.) Internet Explorer 6 lässt immer ein oder zwei Pixel zwischen den divs.

http://pcreact.de/anakonda/html/ie6.png

Der CSS-Code: http://pcreact.de/anakonda/html/style_new_ie.css - die ID der divs sind "p_s1" und "p_c".

Ich habe zu beiden Angelegenheiten schon eine ganz Menge versucht, jedoch ohne Erfolg. Wenn jemand eine Idee diesbezüglich hat, wäre ich sehr dankbar. :)
DanMan
2007-02-25, 19:08:04
Bei der Div-Suppe blick ich leider nicht mehr durch. Tut mir leid.
PH4Real
2007-02-25, 19:26:32
Firebug (http://www.getfirebug.com/) schonmal ausprobiert?
Marscel
2007-02-25, 20:49:23
Bei der Div-Suppe blick ich leider nicht mehr durch. Tut mir leid.

:O

(Was soll man denn sonst mit divs machen...)

Firebug (http://www.getfirebug.com/) schonmal ausprobiert?

Firebug nicht, ich arbeite mit dem "Mozilla Web Developer"-AddOn für Firefox, aber ich schau mal, ob sich damit was anstellen lässt.
DanMan
2007-02-25, 22:14:41
:O

(Was soll man denn sonst mit divs machen...)
Nun, da ich nicht weiß was da noch alles so an Inhalten rein soll ist die Anzahl der Divs vllt. gerechtfertigt. Aber wenn man mehr mit Selektoren arbeitet, dann muss man auf jeden Fall nicht jedem Element so viele (und auch noch kryptische) IDs und Klassen verpassen. Ein Beispiel was ich immer gerne nenne ist, dass viele ihre Navigationsliste immer noch in ein <div> packen, anstatt direkt die Liste zu formatieren.

Das Motto sollte sein: so viel wie nötig - nicht viel hilft viel.

Aber so lange es funktioniert... Wer braucht schon Semantik, ne? :tongue:
Marscel
2007-02-26, 00:03:16
Ok, mal ein ganz einfaches Beispiel, warum sitzt das im FF nicht?

http://pcreact.de/anakonda/html/test.html
Gast
2007-02-26, 00:40:02
Ok, mal ein ganz einfaches Beispiel, warum sitzt das im FF nicht?
Was meinst du mit "sitzen"? Textelemente lassen sich mit vertical-align (http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align) vertikal in der Zeile ausrichten. Innen- und Außenabstände kannst du über padding und margin abschalten, dabei aber beachten, daß das Eingabefeld einen Rahmen hat und deshalb höher als der Knopf ist.
5tyle
2007-02-26, 00:49:32
probiers mal so


<html>
<head>
<title>
test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<form>
<input style="display: inline; float: left; height: 20px; border: 1px solid black;" type="text" />
<input style="display: inline; float: left; height: 20px; width: 20px; border: 0px; background-image: url(go.jpg); background-repeat: no-repeat;" type="submit" value="" />
</form>
</body>
</html>

edit: hm das display inline brauch man wohl gar nicht oO
das da was nach unten verrückt is liegt an der formatierung deiner zahlreichen divs. versuchs mal mit float
Marscel
2007-02-26, 01:03:45
Was meinst du mit "sitzen"? Textelemente lassen sich mit vertical-align (http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align) vertikal in der Zeile ausrichten. Innen- und Außenabstände kannst du über padding und margin abschalten, dabei aber beachten, daß das Eingabefeld einen Rahmen hat und deshalb höher als der Knopf ist.

Danke, das wars.

Ich dachte, es wäre selbstverständlich (wie für Opera und IE6), dass gerade input-Felder sich automatisch anpassen, wenn feste Höhen angegeben sind.

Wenn wer eine ähnlich gute Idee für das andere Problem hat... ;)
Marscel
2007-02-28, 14:00:53
Der andere Fehler hat nen etwas anderen Hintergrund, den ich bisher nicht ganz durchschaut habe:

Ich binde in der Seite im <head> folgendes ein:
<style type="text/css">
@import url(style_new.css);
</style>
<!--[if IE 6]>
<style type="text/css">@import url(style_new_ie.css);</style>
<![endif]-->

Da kommt aber Müll im IE6 raus (zumindest nicht das, was ich will).

Dagegen einzig:
<!--[if IE 6]>
<style type="text/css">@import url(style_new_ie.css);</style>
<![endif]-->

bringt das gewünschte Resultat.

Frage: lädt der IE das, was im <!--[...]--> steht nur als Ergänzung zu der vorhergehenden CSS-Datei? Wenn ja, warum werden die eigentlichen CSS-Werte nicht ganz überschrieben? Bzw. warum guckt der IE überhaupt in der "style_new.css" nach?
Gast
2007-02-28, 18:32:19
jo diese art von css-weichen kenne ich.
es gibt sogar (sehr spezielle) fälle, wo man sowas tatsächlich benötigt.

rate dringend davon ab sowas zu verwenden.
die funktionalität kann nicht immer sichergestellt werden.

und dann ist diese methode veraltet.
es gibt mit css eine andere möglichkeit, das zu realisieren.

eine browserunterscheidung per skript, wenn es ums design geht ist, wie soll ich sagen. einfach so nicht gedacht.
Gast
2007-02-28, 18:35:41
oder ums mal anders auszudrücken.

durch passende anpassung der css kann man in 98% aller fälle ans ziel kommen.
Sephiroth
2007-02-28, 20:49:31
Frage: lädt der IE das, was im <!--[...]--> steht nur als Ergänzung zu der vorhergehenden CSS-Datei?
ja
Wenn ja, warum werden die eigentlichen CSS-Werte nicht ganz überschrieben?
vermutlich doch nicht vollständig überschrieben
Bzw. warum guckt der IE überhaupt in der "style_new.css" nach?
Weil sie für alle angeben und gültig ist. Wenn du das nicht willst, dann sollte das folgende gehen
<!--[if !IE]>
<style type="text/css">
@import url(style_new.css);
</style>
<![endif]-->
DanMan
2007-02-28, 21:20:54
und dann ist diese methode veraltet.
es gibt mit css eine andere möglichkeit, das zu realisieren.
Achja? Soweit ich weiß sollen diese Bedingungen Teil von CSS3 sein/werden.
Marscel
2007-03-03, 15:18:08
Weil sie für alle angeben und gültig ist. Wenn du das nicht willst, dann sollte das folgende gehen
<!--[if !IE]>
<style type="text/css">
@import url(style_new.css);
</style>
<![endif]-->

Danke für den Tipp, aber dann wird in nicht-IE Browsern gar kein Stylesheet geladen.

Ich fürchte, ich komme um Javascript nicht herum, oder?
Gast
2007-03-03, 18:53:56
was machst du wenn jemand noscript installiert hat.
und wenn schon so dann würde ich php ggü. js tausend mal vorziehen.
Marscel
2007-03-03, 22:44:18
was machst du wenn jemand noscript installiert hat.
und wenn schon so dann würde ich php ggü. js tausend mal vorziehen.

Wenn es nach mir ginge, würde ich den IE 6 glatt vernachlässigen...

Aber ja, ich werde schauen, ob sich mit PHP etwas besseres machen lässt.
Sephiroth
2007-03-03, 23:44:38
Danke für den Tipp, aber dann wird in nicht-IE Browsern gar kein Stylesheet geladen.

Ich fürchte, ich komme um Javascript nicht herum, oder?
huch, hast ja recht.

ich hab es bisher immer so gehandhabt, daß ich erstmal das normale css-dokument verwendet habe und dann für den ie schaute, was zusätzlich benötigt wird, damit es auch beim IE aussieht wie es soll.