Delphi-PRAXiS - [CSS] IE / Firefox und nirgends passts

Seite 1 von 2

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - [CSS] IE / Firefox und nirgends passts (https://www.delphipraxis.net/49033-%5Bcss%5D-ie-firefox-und-nirgends-passts.html)

[CSS] IE / Firefox und nirgends passts

Aloha DP!

Ich möchte ohne Tabellen, nur unter der Zuhilfenahme von CSS eine äußerst simple Struktur darstellen:

http://www.acira.net/blog/pics/ie_ok.gif
so sieht das ganze im Internet Explorer aus, genau wie ich es haben will. Nur... wenn ich meine Maus über einen der Links bewege, sieht es so aus, und bleibt auch so:

http://www.acira.net/blog/pics/ie_hover.gif
Das ist schlecht. Noch viel schlechter ist die Ausgebe im Firefox:

http://www.acira.net/blog/pics/ff.gif

Hier der Code:

Code:

			<div align="center">

<div class="menubox" style="padding: 8px">

   <div align="left" style="float: left; width: 50%" class="navbar">[img]print.gif[/img] [url="#"][b]Print[/b][/url][img]mail.gif[/img] [b][url="#"]Mail[/url][/b]</div>

   <div align="right" style="float: left; width: 50%" class="navbar">[b][url="#"]&laquo; back[/url][/b] [img]icon_story_page.gif[/img] [b]Page 3 [/b] of 14 [b][url="#"]next &raquo;[/url][/b]</div>

</div>

</div>

und die Styles die da verwendet werden:

Code:

			.menubox {

   width: 700px;

   border: solid #cccccc 1px;

   position: relative;

}

.navbar {

   font-family: Verdana, Arial, Helvetica, sans-serif;

   font-size: 11px;

   color: #666666;

}

a.navbar {

    position:relative;

    z-index:24;

    color:#000;

    text-decoration:none;

}

a.navbar:hover {

   z-index:23; 

   background-color:#ffffff;

   color: #003366;

}

Kann mir da mal jemand weiterhelfen? Es kann doch nicht sein, das etwas derart simples derart ***** interpretiert wird :?

Re: [CSS] IE / Firefox und nirgends passts

PS: Tabellen sind momentan wieder übelst in. :stupid:

Re: [CSS] IE / Firefox und nirgends passts

Zitat:

Zitat von bigg

PS: Tabellen sind momentan wieder übelst in. :stupid:

mir eigentlich schnurzwurscht. Die Lösung ohne hat einfach ihre Vorteile, leider halt auch Nachteile. Wie auch immer, mit Tabelle kann das jeder Noob, und lernen tut man nur bei doing, ferner ists besser, also werde ich auch keine Tabellen verwenden ;)

Re: [CSS] IE / Firefox und nirgends passts

float sollte dein freund sein

hier ein kleines quick&dirty-beispiel:

Code:

			<html>

<head>

   <title>Test</title>

   <style type="text/css">

      #aussen{

         border: #CCC 1px solid;

         font-size: 14px;

         padding: 5px;

      }

      #links{

         float: left;

         font-size: 14px;

         padding: 0px;

         margin: 0px;

      }

      #rechts{

         float: right;

         font-size: 14px;

         padding: 0px;

         margin: 0px;

      }

      a:link, a:visited, a:active{

         font-weight: bold;

         text-decoration: none;

         color: #000;

      }

      a:hover{

         color: #003366;

      }

   </style>

</head>

<body>

   <div id="aussen">

      <div id="links">

         [url="#"]Print[/url]

         [url="#"]Mail[/url]

      </div>

      <div id="rechts">

         [url="#"]back[/url]

         [url="#"]...[/url]

      </div>

   </div>

</body>

</html>

Re: [CSS] IE / Firefox und nirgends passts

Zitat:

Zitat von bigg

PS: Tabellen sind momentan wieder übelst in. :stupid:

Lüg nicht! :evil: Meflin macht schon das richtige! :thumb:

//Edit: Und einmal mehr is die rote Box nich aufgetaucht...
Ich würd noch vorschlagen statt im Style einfach nur "a" zu schreiben, dass du das wie folgt definierst:

Code:

			<style type="text/css">

#aussen{

  ...

}

#links{

  ...

}

#rechts{

  ...

}

#links a:link, #links a:visited, #links a:active,

#rechts a:link, #rechts a:visited, #rechts a:active{

  ...

}

#links a:hover, #rechts a:hover{

  ...

}

Sieht zar erst mal länger aus, aber du legst auf die Art und Weise fest, dass nur Links innerhalb von Elementen der Klasse "links" oder "rechts" diese Auszeichnungen bekommen. So kannst du ohne Probleme für den Rest des Dokuments die Links anders definieren.

mfg, mh166

Re: [CSS] IE / Firefox und nirgends passts

Zitat:

Zitat von mh166

Zitat:

Zitat von bigg

PS: Tabellen sind momentan wieder übelst in. :stupid:

Lüg nicht! :evil: Meflin macht schon das richtige! :thumb:

http://validweb.nl/artikelen/javascr...-zebra-tables/ :roll: :stupid: :P :mrgreen:

Re: [CSS] IE / Firefox und nirgends passts

Hallo ihr,

koenntet ihr euch mal die Diskussion bezueglich divs und tables sparen und euch auf das Problem zu konzentrieren?
Wenn einer von euch sein Auto nicht anlassen kann empfehle ich auch nicht ein Motorrad weil ich es fuer besser halte :roll:
Ich werde jegliche weitern Kommentare zum Thema "<div> vs. <table>" loeschen, soviel sei gesagt.

Greetz
alcaeus

Re: [CSS] IE / Firefox und nirgends passts

Zitat:

Zitat von idontwantaname

float sollte dein freund sein

JA aber ich floate doch schon :gruebel: zwar nicht direkt in der Klasse, sondern als style="" aber das dürfte keinerlei unterschied machen :stupid:

Re: [CSS] IE / Firefox und nirgends passts

Zitat:

Zitat von Meflin

Zitat:

Zitat von idontwantaname

float sollte dein freund sein

JA aber ich floate doch schon :gruebel: zwar nicht direkt in der Klasse, sondern als style="" aber das dürfte keinerlei unterschied machen :stupid:

:oops: :oops:
ganz übersehen, aber ich sehe hier gerade 2mal float: left; ???

[edit] @mh166: jaja, dass sind jedoch nur so kleinigkeiten, die jetzt zur lösung des problems nicht unbedingt beitragen, und das war auch nur ein kleines 1min-beispiel, gemacht im Editor (ist an platz 1 in den 5 meist genutzten programmen bei mir :lol: )

Re: [CSS] IE / Firefox und nirgends passts

Setz ein leeres <div> mit dem Stil clear: both; ans Ende (innerhalb der Box) um die Box im Firefox die Floats umspannen zu lassen.

Seite 1 von 2