CSS - Abgerundete Buttons

Soulstormer · 1. September 2008, 02:41

Quellcode

/* == == == Main Menu == == == */
#mainMenu {
height:31px;
margin-left:8px;
}
#mainMenu img {
display:none;
}
.mainMenu a {
border: 0px solid #8da4b7;
border-width: 0 0px;
background-repeat:no-repeat;
padding:5px -0px 5px 13px;
margin-left:16px;
font-size:1em;
font-weight:bold;
line-height:20px;
}
.mainMenu li {
padding-right:12px;
background:url(../images/apfelFRUCHT/largeButtons.png) no-repeat right top;
}
.mainMenu .active a, .mainMenu .firstActive a, .mainMenu .lastActive a {
background-position:0% -89px;
background-color: transparent !important;
}
.mainMenu li.active, .mainMenu li.firstActive, .mainMenu li.lastActive {
background-position:100% -89px;
border:0 !important;
background-color:transparent !important;
}

Alles anzeigen

Ich habe nun im IE das Problem das oben und unten ein Stück der Button-Grafik fehlt. Wenn ich "display:block;" einfüge sind die Buttons allerdings viel zu breit, wobei nun die höhe stimmt. Die Breite der Buttons soll natürlich variabel sein.

FF
IE <- Buttons im Header, oben und unten sind die Grafiken abgeschnitten.
Ich habe mal Bilder angehängt

Torben Brodt · 2. September 2008, 19:48

Hi, poste bitte noch den HTML Code oder eine Online Demo dazu.
Könnte am padding liegen.

Soulstormer · 3. September 2008, 17:16

Der HTML Code, ist der Standard "mainMenu" Code des WBB3:

Quellcode

{*{if $this->getHeaderMenu()->getMenuItems()|count > 0}*}
<div id="mainMenu" class="mainMenu">
<div>{assign var='menuItemCounter' value=0}{assign var='menuItemCount' value=$this->getHeaderMenu()->getMenuItems()|count}<ul>{foreach from=$this->getHeaderMenu()->getMenuItems() item=item}{assign var='menuItemCounter' value=$menuItemCounter+1}<li{if $item.activeMenuItem || $menuItemCounter == 1 || $menuItemCounter == $menuItemCount} class="{if $menuItemCounter == 1}first{elseif $menuItemCounter == $menuItemCount}last{/if}{if $item.activeMenuItem}{if $menuItemCounter == 1 || $menuItemCounter == $menuItemCount}Active{else}active{/if}{/if}"{/if}><a href="{$item.menuItemLink}">{if $item.menuItemIcon}<img src="{$item.menuItemIcon}" alt="" /> {/if}<span>{lang}{@$item.menuItem}{/lang}</span></a></li>{/foreach}</ul>
</div>
</div>
{*{/if}*}

Torben Brodt · 3. September 2008, 19:13

Klappt Firebug mit der IE Engine? Versuch damit mal ein bisschen am padding zu spielen.
Oder poste mal einen HTML Code womit man das ganze online oder zumindest standalone betrachten kann.

Soulstormer · 4. September 2008, 17:17

beyond-network.net/forum/index.php
Account: testaccount
Passwort: TeST55
Stil: Luboo

Nicht wundern, die Verschiebungen im MainMenu verursachen ein paar Plugins... Aber das ist ja nicht das Problem was mich "juckt".

Soulstormer · 10. September 2008, 13:46

community.woltlab.com/db/index…age=Project&projectID=507
Selbiges Menü, selbiges Problem.

CSS - Abgerundete Buttons

CSS - Abgerundete Buttons

Quellcode

Quellcode

Teilen

Benutzer online 1

Tags