Runde Kanten

[TobiaZ]

Muss mal wieder einer den anstandswauwau machen (derHund ist ja nicht da )

Trotz 2000er auflösung, habe ich hier nen Scrollbalken. DU nicht? Bitte ändern.

[orderfeuer]

Lass die Tabellen weg und benutze layer...
dann kannst du auch auf jeden besch... browser reagieren.

Stichwort: Browserweiche.

[kabeljau]

Hallo, schau Dir mal die Seite sinstech.de an, da ist sowas ähnliches: auch runde Kanten mittels einer Tabelle.

Der Unterschied ist, dass Du die Eckbilder direkt als Bild in die Zelle lädst und auf obiger Seite die Eckbilder als Hintergrundbild für die entsprechende Zelle gesetzt wurde.

Übrigens ist Deine Tabellenzelle obenlinks 7x1 Pixel groß und die eingefügte Grafik (images/home/oben_links_rand.gif) 13x13 Pixel. Das sollte schon irgendwie übereinstimmen.

Versuch doch mal mit CSS zu arbeiten, also statt:

<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111"
width="980" id="AutoNumber1" height="82">
  <tr>

    <td width="7" height="1">
    <img border="0" src="images/home/oben_links_rand.gif" width="13" height="13"></td>
    <td width="967" height="1" bgcolor="#0058A5" style="border-top-style: solid; border-top-width: 1">
    <font color="#0058A5"><span style="font-size: 1pt">yxxxxx</span></font></td>
    <td width="6" height="1">
    <p align="right">
    <img border="0" src="images/home/oben_rechts_rand.gif" width="13" height="13"></td>
  </tr> 

schreibst Du nur

<table id="AutoNumber1">
  <tr>
    <td class="obenlinks">&nbsp;</td>
    <td class="top">
<font color="#0058A5"><span style="font-size: 1pt">yxxxxx</span></font>
    </td>
    <td class="obenrechts">&nbsp;</td>
  </tr> 

sowie im CSS-file:

table {
border:0px solid #111111;
padding:0px;
spacing:0;
border-collapse: collapse;
width:980;
}

td.obenlinks {
background-image:url('images/home/oben_links_rand.gif');
width:13px;
height:13px;
}

td.obenrechts {
background-image:url('images/home/oben_rechts_rand.gif');
width:13px;
height:13px;
}

td.top {
width:967px;
height:1px;
background-color:#0058A5;
border-top-style: solid;
border-top-width: 1;
}

etc... 

[paderfan]

Ok besten dank, dann werde ich damit wohl erst mal leben müssen

[pekka]

Das Eckenbild ist nicht wirklich das Problem - das alleine sieht sowohl im IE als auch im Firefox völlig ok aus. Das Problem ist, daß Firefox die Ecke 1 Pixel zu weit unten rechts platziert. Was wahrscheinlich mit der Border-Definition der danebenliegenden Zellen zu tun hat, durch die die Firefox-Engine automatisch auch in Zellen ohne Border-Definition entsprechend Platz freiläßt. Hmmm. Da fällt mir grad auch keine geschickte Lösung ein

[Benny-one]

was sollen eigentlich die ganzen 'gg' auf der seite

[paderfan]

              <td width="1%" bgcolor="#0058A5" style="border-bottom-style: none; border-bottom-width: medium" height="13">
              <img border="0" src="images/home/oben_links_rand.gif" width="13" height="13"></td>
              <td width="97%" bgcolor="#0058A5" style="border-top-style: solid; border-top-width: 1" height="13">
              <font color="#0058A5"><span style="font-size: 1pt">xxxxx</span></font></td>
              <td width="2%" bgcolor="#0058A5" height="13">
              <img border="0" src="images/home/oben_rechts_rand.gif" width="13" height="13"></td>
            </tr>
            <tr>
              <td width="1%" bgcolor="#0058A5" style="border-left-style: solid; border-left-width: 1; border-top-style: none; border-top-width: medium" height="1">
              <font color="#0058A5"><b><span style="font-size: 1pt">x</span></b></font></td>
              <td width="97%" bgcolor="#0058A5" height="1">
              <iframe name="navi_oben" marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0" width="100%" height="15" src="navigation/bluelight.htm" target="_top">
              Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.</iframe>
              </td>
              <td width="2%" bgcolor="#0058A5" style="border-right-style: solid; border-right-width: 1" height="1">
              <font color="#0058A5"><b><span style="font-size: 1pt">x</span></b></font></td>
            </tr>
            <tr>
              <td width="1%" bgcolor="#0058A5" height="1">
              <img border="0" src="images/home/unten_links_rand.gif" width="13" height="13"></td>
              <td width="97%" bgcolor="#0058A5" style="border-bottom-style: solid; border-bottom-width: 1" height="1">
              <font color="#0058A5"><span style="font-size: 1pt">xxxxx</span></font></td>
              <td width="2%" bgcolor="#0058A5" height="1">
              <img border="0" src="images/home/unten_rechts_rand.gif" width="13" height="13"></td> 

[pekka]

@Benny: Im IE siehts in der Tat gut aus.

@paderfan: HTML-Code bitte! Wir sind hier kein Selbstbedienungsladen, sondern helfen, Probleme zu lösen. Das ist ein Unterschied zu "wir lösen Probleme".

[paderfan]

Ja, aber mir geht es jetzt weniger um schaf als um das das sie bei Firefox anders aussehen als im IE...

[Benny-one]

1. Frage: Ist die Grafik in Photoshop CS AUCH scharf??????????????????????????????????

[paderfan]

Original geschrieben von paderfan
Wie schon geschrieben.

- Photoshop CS
- Gif
- Die Grafiken sind in Tabellen

Hab eich grade mal, ist jetzt auch so Online, nur hat sich nix getan ...

[Benny-one]

@pader*: speicher es mal ohne transparenz ab

[paderfan]

Original geschrieben von pekka
Das Problem ist nachvollziehbar. Da ich aber gerade meine Glaskugel zuhause vergessen hab und keine Lust habe, deinen HTML-Code auseinanderzunehmen, erklär uns doch bitte erstmal, wie die runden Kanten zustande kommen (Hintergrundbild / IMG / Oder wie?), in welchem Format sie vorliegen (GIF / PNG / JPG), mit welcher Software du sie gemacht hast und so weiter.

Wie schon geschrieben.

- Photoshop CS
- Gif
- Die Grafiken sind in Tabellen

[paderfan]

Sicher gif, oder meinst du ich will eweige Ladezeiten haben
Is jemand bereit mir die so zu machen, das sie besser ausehen? (1 Pixel ist der Rand (Schwarz))

[pekka]

Das Problem ist nachvollziehbar. Da ich aber gerade meine Glaskugel zuhause vergessen hab und keine Lust habe, deinen HTML-Code auseinanderzunehmen, erklär uns doch bitte erstmal, wie die runden Kanten zustande kommen (Hintergrundbild / IMG / Oder wie?), in welchem Format sie vorliegen (GIF / PNG / JPG), mit welcher Software du sie gemacht hast und so weiter.