Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.

WP Template optisches Menü-Problem mit IE9

Ajax, Hijax, Microformats, RDF, Markup, HTML, PHP, CSS, MySQL, htaccess, robots.txt, CGI, Java, Javascript usw.
Neues Thema Antworten
CubeMaster
PostRank 7
PostRank 7
Beiträge: 547
Registriert: 15.12.2004, 21:21

Beitrag von CubeMaster » 13.05.2012, 14:50

Hi,
ich habe mir das Template "smartbiz" installiert und ein bisschen angepasst. Beim Header-Menü hab ich jedoch ein Problem.
Es ist ein oben abgerundeter schwarzer Balken. Im FF funktioniert optisch alles super. Im IE9 entsteht jedoch zwischen der abgerundeten Leiste und dem eigentlichen Menübalken eine Lücke, die transparent ist.

Wäre super, wenn mir jemand helfen könnte BITTE! :oops:

Ich bekomm noch die Krise und ein neues Template will ich auch nicht nehmen wegen so einer kleinigkeit. Habe jetzt schon 2 Stunden rumprobiert und keine Lösung gefunden.

Die URL gebe ich gerne per PM weiter.

Hier die header.php

Code: Alles auswählen

<div id="nav_bar" style="width&#58;980px;margin&#58;0 auto;height-minimum&#58;46px;float&#58;left;">
			<table id="get_height" cellpadding="0" cellspacing="0" width="100%" style="border&#58;solid 0px transparent;background-color&#58;transparent;">
				<tbody>
				<tr valign="top">
					<td style="font-size&#58;0;background-color&#58;transparent;height&#58;6px;width&#58;46px;">
						<div class="border_radius navigation">
							<b class="r1" style="margin-right&#58;0;">&nbsp;</b><b class="r2" style="margin-right&#58;0;">&nbsp;</b><b class="r3" style="margin-right&#58;0;">&nbsp;</b><b class="r4" style="margin-right&#58;0;">&nbsp;</b><b class="r5" style="margin-right&#58;0;">&nbsp;</b>
						</div>
					</td>
					<td rowspan="2" style="height&#58;100%;width&#58; 918px;background-color&#58;transparent;">
						<div id="navigation">
							<ul class="menu">
							<li class="<?php if &#40;is_home&#40;&#41;&#41; echo 'current_page_item'; ?>"><a href="<?php echo home_url&#40;&#41;; ?>/" class="<?php if &#40;is_home&#40;&#41;&#41; echo 'current_page_item'; ?>" title="Startseite">Startseite</a></li>
							</ul>
							<?php smartbiz_nav&#40;&#41;; ?>
						</div>
					</td>
					<td style="font-size&#58;0;background-color&#58;transparent;height&#58;6px;width&#58;16px;">
						<div class="border_radius navigation">
							<b class="r1" style="margin-left&#58;0;">&nbsp;</b><b class="r2" style="margin-left&#58;0;">&nbsp;</b><b class="r3" style="margin-left&#58;0;">&nbsp;</b><b class="r4" style="margin-left&#58;0;">&nbsp;</b><b class="r5" style="margin-left&#58;0;">&nbsp;</b>
						</div>
					</td>
				</tr>
				<tr>
					<td id="set_height" class="navigation_b" style="min-height&#58;100%;">&nbsp;</td>
					<td class="navigation_b" style="min-height&#58;100%;">&nbsp;</td>
				</tr>
				</tbody>
			</table>
		</div>
…und die die .css

Code: Alles auswählen

/* Border radius
-------------------------------------------------------------- */
.border_radius&#123;
	width&#58;100%;
	float&#58; left;
&#125;
.border_radius.navigation b, .navigation_b&#123;
	background-color&#58; #333;
&#125;
.border_radius.featured b&#123;
	background-color&#58; #f9f6ed;
&#125;
.border_radius.page b&#123;
	background-color&#58; #fff;
&#125;
.border_radius .r1, .border_radius .r2, .border_radius .r3, .border_radius .r4, .border_radius .r5 &#123;
	display&#58; block;
&#125;
.r1&#123;
	margin&#58; 0 6px;
	height&#58; 1px;
&#125;
.r2&#123;
	margin&#58; 0 4px;
	height&#58; 1px;
&#125;
.r3&#123;
	margin&#58; 0 3px;
	height&#58; 1px;
&#125;
.r4&#123;
	margin&#58; 0 2px;
	height&#58; 1px;
&#125;
.r5&#123;
	margin&#58; 0 1px;
	height&#58; 2px;
&#125;
/* Menu NEW
-------------------------------------------------------------- */

#navigation &#123;
	background-color&#58; #333333;
	clear&#58; both;
	display&#58; block;
	float&#58; left;
	margin&#58; 0 auto 0;
	width&#58;100%;
&#125;

#navigation .menu &#123;
	padding&#58; 0;
&#125;

#navigation ul &#123;
	font-size&#58; 13px;
	list-style&#58; none;
	margin&#58; 0;
	padding&#58; 0;
&#125;
#navigation li &#123;
	float&#58; left;
	position&#58; relative;
&#125;
#navigation a &#123;
	display&#58; block;
	height&#58; 40px;
	padding&#58; 14px 25px 0px 25px;
	text-decoration&#58; none;
	font-family&#58; Arial, Helvetica, sans-serif;
	font-size&#58; 14px;
	font-weight&#58; normal;
	color&#58; #FFF;
	border&#58; 0;
&#125;
#navigation ul ul &#123;
	width&#58;200px;
	position&#58;absolute;
	z-index&#58;500;
	display&#58; none;
	float&#58; left;
	margin&#58; 0;
	left&#58; 0;
&#125;
#navigation ul ul ul &#123;
	left&#58; 100%;
	top&#58; 0;
&#125;
#navigation ul ul a &#123;
	background&#58; #d0ccc1;
	color&#58; #444;
	font-size&#58; 14px;
	font-weight&#58; normal;
	line-height&#58; 1.4em;
	padding&#58; 14px 25px 0px 25px;
	width&#58; 200px;
	box-shadow&#58; 0 2px 10px #82775b;
&#125;
#navigation li&#58;hover > a,
#navigation ul ul &#58;hover > a,
#navigation a&#58;focus &#123;
	background&#58; #cc9966!important;
	color&#58; #fff!important;
&#125;
#navigation ul li&#58;hover > ul &#123;
	display&#58; block;
&#125;
#navigation .current-menu-item > a,
#navigation .current-menu-ancestor > a,
#navigation .current_page_item > a,
#navigation .current-cat > a,
#navigation .current-cat-parent > a,
#navigation .current_page_ancestor > a &#123;
	background&#58; #666!important;
	color&#58; #fff!important;
&#125;

Anzeige von ABAKUS

von Anzeige von ABAKUS »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002
  • persönliche Betreuung
  • individuelle Beratung
  • kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.


nerd
PostRank 10
PostRank 10
Beiträge: 4023
Registriert: 15.02.2005, 04:02

Beitrag von nerd » 15.05.2012, 00:57

Ohje; deinem beispielcode nach scheint das template ja noch ganz andere probleme zu haben:

Code: Alles auswählen

<td style="font-size&#58;0;background-color&#58;transparent;height&#58;6px;width&#58;46px;">
                  <div class="border_radius navigation">
                     <b class="r1" style="margin-right&#58;0;">&nbsp;</b><b class="r2" style="margin-right&#58;0;">&nbsp;</b><b class="r3" style="margin-right&#58;0;">&nbsp;</b><b class="r4" style="margin-right&#58;0;">&nbsp;</b><b class="r5" style="margin-right&#58;0;">&nbsp;</b>
                  </div>
               </td> 
Ganz schoen viel code um 4 leerzeichen mit fontgroesse 0 in fettschrift darzustellen.
Von dem restlichen inline-css und table-design mal ganz abgesehen.

Mein eindruck hier ist, dass das template einfach nur diletantisch umgesetzt wurde; wuerde lieber zu einem professionellem template wechseln - sollte auch in allen modernen browsern laufen.

Edit:
ich habs mir mal auf https://getbusinessblog.com/demo/smartbiz/ angesehen. Die "4 leerzeichen" werden gebraucht um runde ecken zu simulieren. Die sauberste loesung waere, die tabelle rauszuwerfen und die ganze navigation in ein <div> zu packen und dann via "border-radius:4px 0 0 4px;" die ecken via css darstellst.
Zuletzt geändert von nerd am 15.05.2012, 12:44, insgesamt 1-mal geändert.

CubeMaster
PostRank 7
PostRank 7
Beiträge: 547
Registriert: 15.12.2004, 21:21

Beitrag von CubeMaster » 15.05.2012, 08:29

Tausend dank für deine Antwort! :D

Naja, die Website ist jetzt fertig, und es ist nur eine Fanpage zu einer Musikgruppe, hat also wenig mit Big-Business-SEO zu tun, sodass der Kosten-Nutzen-Aufwand jetzt ein bisschen uneffektiv wäre, da ein komplett neues Design zu nehmen. Denn dann müsste ich das wieder so anpassen, wie ich will. ;)

Den HTML-Code hatte ich mit der Tabelle auch schon interpretiert und mich ebenfalls gewundert, warum da Leerzeichen sind. Hat mich wiederum an meine Anfangszeiten von Websiteaufbau erinnert (ohne div, immer alles schön per Tabelle :D ) ABER auf die Idee mit dem DIV bin ich nicht gekommen. Dabei ist das echt das naheliegendste ;)

Werd das ausprobieren. SUPER, danke für deine Hilfe bzw. den Denkanstoß!

Antworten
  • Vergleichbare Themen
    Antworten
    Zugriffe
    Letzter Beitrag