Ergebnis 1 bis 7 von 7
  1. #1
    mWolf ist offline Jungspund
    registriert
    07-05-2013
    Beiträge
    21

    Question Gradient unter IE8 funktioniert wegen display:inline nicht

    Hallo Zusammen,

    ich habe eine waagerechte Menüleise mit ul/li/a zusammengebaut.
    Bei a:hover soll nun ein linear-gradient ausgelöst werden. Im FF funktioniert das super nur nicht im IE8.
    So wie ich herausgefunden habe, liegt das am display:inline. Meine tests haben ergeben, wenn ich display:inline-block setze funktioniert das ganze im IE8.
    Blöd nur das es dann mein Layout zerreist (Höhen und Abstände werden stark vergrößert, wenn ich inline-block setze).
    Habt ihr eine Idee, wie ich mit wenig Aufwand das Problem beheben kann ohne mein Layout komplett neu zu überarbeiten?
    Hier mal das Layout zu meinem Menü:

    Code:
    #mainNavigation {
    	overflow: hidden;
    	border-top: 1px solid #00FF00;
    	border-bottom: 1px solid #00FF00;
    	background-color: #f5fffa;
    	margin-top: 10px;
    	padding: 5px 10px 5px 10px;
    }
    
    #mainNavigation li {
    	display: inline;
    	margin: 0 10px 0 0;
    }
    
    
    #mainNavigation a, #mainNavigation a:link,#mainNavigation a:visited {
    	text-decoration: none;
    	color: #a9a9a9;
    	font-family: Calibri, Arial;
    	font-size: 16px;
    	font-weight: bold;
    	letter-spacing: 0.2em;
    	padding-top: 8px;
    	padding-bottom:8px;
    	padding-left: 9px;
    	padding-right: 6px;
    }
    
    #mainNavigation a:hover, #mainNavigation a.parent:hover, #mainNavigation a.current:hover {
    	background: #8DFC8D;
    	background: -webkit-linear-gradient(top, #00FF00 0, #8DFC8D 63%, #5A98C7 100%) no-repeat;  /* Chrome10+,Safari5.1+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00FF00), color-stop(63%,#8DFC8D), color-stop(100%,#CBFFCB)); /* Chrome,Safari4+ */
    	background: -moz-linear-gradient(top, #00FF00 0, #8DFC8D 63%, #CBFFCB 100%) no-repeat; /* FF3.6+ */
    	background: -o-linear-gradient(top, #00FF00 0, #8DFC8D 63%, #CBFFCB 100%) no-repeat; /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #00FF00 0, #8DFC8D 63%, #CBFFCB 100%) no-repeat; /* IE10+ */
    	background: linear-gradient(top, #00FF00 0, #8DFC8D 63%, #CBFFCB 100%) no-repeat; /* W3C */
    	-svg-background: linear-gradient(top, #00FF00 0, #8DFC8D 63%, #CBFFCB 100%) no-repeat;
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00FF00', endColorstr='#CBFFCB',GradientType=0 ); /* IE5.5-7 */
    	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FF00, endColorstr=#CBFFCB)"; /*IE8*/
    	
    	border: 1px solid #CBFFCB;
    	padding-top: 8px;
    	padding-bottom:8px;
    	padding-left: 8px;
    	padding-right: 5px;
    	margin: 0;
    }
    Danke und Viele Grüße
    mWolf

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.732

    AW: Gradient unter IE8 funktioniert wegen display:inline nicht

    Probier' mal "zoom: 1;" - das hilft gerne mal.

  3. #3
    mWolf ist offline Jungspund
    registriert
    07-05-2013
    Beiträge
    21

    AW: Gradient unter IE8 funktioniert wegen display:inline nicht

    Funktioniert leider nicht :-(.

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.732

    AW: Gradient unter IE8 funktioniert wegen display:inline nicht

    Kannst du mal einen Testlink machen, wo wir uns das live ansehen können?

  5. #5
    mWolf ist offline Jungspund
    registriert
    07-05-2013
    Beiträge
    21

    AW: Gradient unter IE8 funktioniert wegen display:inline nicht

    Anbei habe ich mal eine leicht abgeänderte und abgespeckte Version meines Menüs angehangen.
    Trotz abgespeckter Version, stellt es mein Problem dar.
    Im FF15 funktioniert es im IE8 nicht.
    Angehängte Dateien Angehängte Dateien

  6. #6
    mWolf ist offline Jungspund
    registriert
    07-05-2013
    Beiträge
    21

    AW: Gradient unter IE8 funktioniert wegen display:inline nicht

    Hallo Zusammen,

    ich habe mich jetzt dazu entschieden "display:inline-block" für meine Navi einzuführen.
    Dies bewirkt, das mein Hover Effekt funktioniert.
    Allerdings musste ich einige Layoutanpassungen machen - bis ich das soweit hatte.... und das nur wegen dem IE (Sollte man abschaffen).

    Anbei hänge ich mal die abgeänderte Version, damit ihr sehen könnt, was ich alles geändert habe.

    Viele Grüße
    mWolf
    Angehängte Dateien Angehängte Dateien

  7. #7
    dertypdernixkan ist offline Tripel-As
    registriert
    31-05-2013
    Beiträge
    194

    AW: Gradient unter IE8 funktioniert wegen display:inline nicht

    @mWolf (auch wenn das ätten hier nicht funzt)

    ich habe eben beide Dateien ausprobiert. Im IE8 sehe ich dein Problem nicht. Bei mir funzt es. Soll beim Hovern ein Untermenü erscheinen?

    Du kannst, sofern Du das liest und das Problem nochmal angehen willst, folgendes machen:

    Baue in den <head> folgendes ein: <meta http-equiv="X-UA-Compatible" content="IE=8">

    Du lädst dir Download PIE – CSS3 PIE: CSS3 decorations for IE runter. Damit kannst Du diverse Styles (Borderradius und Co.) auch für IE6, 7, 8 erzwingen.

    Nutze ich selber und finde es gut.

Ähnliche Themen

  1. Antworten: 8
    Letzter Beitrag: 08-11-2010, 17:20
  2. display inline in einem display block???
    Von hartkrass im Forum CSS und (X)HTML
    Antworten: 2
    Letzter Beitrag: 27-11-2008, 16:51
  3. Listen: list-style-image verträgt sich mit display:inline nicht
    Von Herr-Vorragend im Forum CSS und (X)HTML
    Antworten: 13
    Letzter Beitrag: 27-08-2006, 20:13
  4. Antworten: 4
    Letzter Beitrag: 25-07-2005, 12:32
  5. [NS] display:none/inline
    Von .marc im Forum Allgemeines
    Antworten: 4
    Letzter Beitrag: 13-04-2003, 22:22

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •