Trennlinie kann nicht in IE skaliert werden

[petz_e]

Hallo

Ich versuche dünne Trennlinien (1 pixel) in HTML zu erstellen. Das mache ich so:

<tr height="1"><td height="1" bgcolor="#000000"> <img src="spacer.gif" height="1"> </td></tr>

In Mozilla klappt das perfekt, jedoch in Internet Explorer sieht das ganze dann gar nicht mehr so toll aus, denn alle Linien sind ungefähr 10px hoch.

Ist mir schon aufgefallen dass Tabellen-Layout in Internet Explorer nie ganauso aussieht wie in Mozilla. Wenn in Mozilla 2 Zeilen genau untereinander plaziert sind, zeigt IE immer einen kleinen Abstand zwischen diesen Zeilen an.

/Patrick

 

[dkdenz]

Schon mal was von <hr> gehört?

 

[petz_e]

Schon mal was von <hr> gehört?

Ja sicher, jedoch möchte ich eine Haarlinie in einer Farbe meiner Wahl

/Patrick

 

[dkdenz]

Und wo ist das Problem?

Bis zum Ende durchlesen:
http://forum.jswelt.de/css-x-html/22417-ie-sucks-hr.html?highlight=sucks

 

[petz_e]

Also das mit der Trennlinie hab ich jetzt kapiert

Aber ich habe jetzt ein bischen rum experimentiert und hab jetzt folgendes:

div#title {
height: 50px;
padding: 10px;
text-align: right;
font-family: Arial;
font-size: 14;
color: white;
font-weight: none;
background-color: #718699;
vertical-align: middle;
overflow: hidden;
}

Also ein 50 pixel hoher farbiger Kasten mit mittig formatiertem text der etwas vom Rand abstehen soll. IE zeigt es richtig an, Mozilla auch, jedoch nicht 50px hoch sondern 50+10px padding. Wieso wird da das Padding zu der Höhe hinzugezählt?

/Patrick

 

[petz_e]

OK, also wie es aussieht, berechnen IE und Mozilla die Breite des div-Container falsch wenn padding-Angaben im Spiel sind.

Also, man könnte ja theoretisch mit einem IF den Browser abfragen und dann den einen resp. den anderen Wert einstellen. Jedoch gefällt mir diese Lösung nicht besonders...

/Patrick

 

[dkdenz]

div#title {
height: 40px !important; /*IE ignoriert !important*/
height: 50px;
padding: 10px;
text-align: right;
font-family: Arial;
font-size: 14;/*Hier fehlt ein Wert*/
color: white;
font-weight: none;/*font-weight:none; gibt's nicht*/
background-color: #718699;
vertical-align: middle;/*vertical-align greift nicht*/
overflow: hidden;
}

Andererseits kann man das auch eleganter machen.

#title {
  width:500px;
  height:50px;
  text-align:center;
  overflow: hidden;
}
.text {
  padding:10px;
}
<div id="title"><p class="text"></p></div>

 

[petz_e]

Danke

Das mit !important ist intressant. Ignoriert nur IE das oder auch noch andere Browser?

/Patrick

 

[René]

Hallo dkdenz,

meines erachtens kommt immer 50px raus ob nun IE oder FF.

div#title {
height: 40px !important; /*IE ignoriert !important*/
height: 50px;

Besser wäre eventuell:

div#title {
height: 50px;

div#title[id] {
height: 40px;

 

[dkdenz]

Hallo dkdenz,

meines erachtens kommt immer 50px raus ob nun IE oder FF.

div#title {
height: 40px !important; /*IE ignoriert !important*/
height: 50px;

Besser wäre eventuell:

div#title {
height: 50px;

div#title[id] {
height: 40px;

Hi René,
kann hinkommen
Ich mach das nicht so oft (faule Ausrede), denn ich versuche ein Layout 'fliessen' zu lassen.
Deswegen ist es bei mir irrelevant, ob nun 40, 50 oder 60 px...