zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden menu verschiebt sich im ie, funktioniert aber im FireFox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.04.2005, 17:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.04.2005
Beiträge: 8
fabiO befindet sich auf einem aufstrebenden Ast
Standard menu verschiebt sich im ie, funktioniert aber im FireFox

Huhu All,

Also ich habe in meine Seite nun ein DropDownMenu eingebaut, dass ich mithilfe von Divtags mache... (denke das muss ich nich erklären)

Naja habe die Submenu's nun in ihrer Ausrichtung an den Parent ausgerichtet und das funktioniert auch, im FireFox.

Im IE schauts ganz anders aus, dort sind die Menu's total sinnlos ausgerichtet.
Sie sind alle nach Rechts verschoben und befinden sich auch nicht unter den Main Menu Punkten sonder über oder auf ihnen.

Ich habe keine Ahnung wie ich das Problem lösung kann. Bitte helft mir.
Die Page gibts hier !
Den Code hier:

CSS TEIL:

Code:
<style type="text/css">
<!--
body { background:url(gfx2/bgmain.png) top #52647C repeat-x; }
.mainmenu
{
	position:relativ;
}
.submenu {
	Visibility: hidden;
	position:absolute;
	top: 50px;
	border-left-color: #535152;
	border-left-width: 1px;
	border-left-style:solid;	
	border-bottom-color: #535152;
	border-bottom-width: 1px;
	border-bottom-style:solid;
	border-right-color: #535152;
	border-right-width: 1px;
	border-right-style:solid;
}
-->
</style>
HTML TEIL:

Code:
<body>
<center>
	  <table width="460" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="460" height="28">[img]gfx2/banner_top.gif[/img]</td>
        </tr>
      </table>  
	  <table width="460" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="42" height="14">[img]gfx2/off_button.gif[/img]</td>
          <td width="43" height="14">[img]gfx2/about_button.gif[/img]</td> 
		    <td width="50" height="14">[img]gfx2/service_button.gif[/img]</td>
          <td width="40" height="14">[img]gfx2/links_button.gif[/img]</td>
          <td width="56" height="14">
          <DIV class="mainmenu" OnMouseOver="openmenu('news')" OnMouseOut="closemenu('news')">
          [img]gfx2/news_button.gif[/img]
		  <DIV class="submenu" ID="news" OnMouseOver="openmenu('news')" OnMouseOut="closemenu('news')">
			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]
		  </DIV></DIV></td>
          <td width="56" height="14"><DIV class="mainmenu" OnMouseOver="openmenu('gfx')" OnMouseOut="closemenu('gfx')">[img]gfx2/gfx_button.gif[/img]
		  <DIV class="submenu" ID="gfx" OnMouseOver="openmenu('gfx')" OnMouseOut="closemenu('gfx')">
			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]
		  </DIV></DIV></td>
          <td width="56" height="14"><DIV class="mainmenu" OnMouseOver="openmenu('lyr')" OnMouseOut="closemenu('lyr')">[img]gfx2/lyr_button.gif[/img]
		  <DIV class="submenu" ID="lyr" OnMouseOver="openmenu('lyr')" OnMouseOut="closemenu('lyr')">
			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]
		  </DIV></DIV></td>
          <td width="56" height="14"><DIV class="mainmenu" OnMouseOver="openmenu('load')" OnMouseOut="closemenu('load')">[img]gfx2/load_button.gif[/img]
		  <DIV class="submenu" ID="load" OnMouseOver="openmenu('load')" OnMouseOut="closemenu('load')">
			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]
		  </DIV></DIV></td>
          <td width="61" height="14"><DIV class="mainmenu" OnMouseOver="openmenu('contact')" OnMouseOut="closemenu('contact')">[img]gfx2/contact_button.gif[/img]
		  <DIV class="submenu" style="border-right-color: #010000" ID="contact" OnMouseOver="openmenu('contact')" OnMouseOut="closemenu('contact')">
			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]

			[img]gfx2/submenu_bg.gif[/img]
		  </DIV></DIV></td>
        </tr>
      </table>

Danke schonma im Vorraus

Gruss fabiO
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.04.2005, 18:48
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.038
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Mir ist das grad zuviel zum durchgucken, aber ein erster HInweis:

position:relativ;

Da fehlt doch was?

Außerdem: Design ist schön, wenn man es als solches erkennen kann.

Deine Futura-Irgendwas-Schrift ist einfach nicht lesbar bei 8px oder .6em oder was du auch immer eingestellt hast
(Sie ist schon lesbar, aber ich will nicht 5 cm vor dem Bildschirm hocken müssen, kurz, es strengt an.)

Das ist zwar Design - irgendwo - und auch mächtig viel leichter als mit größeren Schriftgrößen zurechtkommen zu müssen, da der White-space viel großzügiger wirkt, aber es ist - nicht lesbar

grüsse, der zu diesem Thema ungefragte andir

grüsse andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.04.2005, 21:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.04.2005
Beiträge: 8
fabiO befindet sich auf einem aufstrebenden Ast
Standard

Huhu nochma,

Ok, das ausrichtungsproblem hat sich erledigt, hab das nun mit CC's gelöst...

Nur habe ich nun ein anderes Problem speziell mit den Untermenus!
FireFox zeigt sie richtig, alle unmittelbar untereinander an, so wie ich es will.

Aber der IE zeigt zwischen den einzelnen Menu-Punkten immer Zwischenräume an, was halt scheisse aussieht...

Kann mir da wer sagen, wie ich diesen Bug fixen kann ?

Die Page gibts hier

Gruss fabiO
Mit Zitat antworten
  #4 (permalink)  
Alt 26.04.2005, 09:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

hast Du mal mit
Code:
* {padding:0; margin: 0;}
alle Abstände global auf Null gesetzt? Die Browser haben da unterschiedliche default-Werte.
Mit Zitat antworten
  #5 (permalink)  
Alt 26.04.2005, 12:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.04.2005
Beiträge: 8
fabiO befindet sich auf einem aufstrebenden Ast
Standard

hab ich versucht, hilft aber auch nichts, zwischenräume sind immernoch da

Hab die Abstände sowohl global als auch ausschließlich für die Submenu's auf 0 gesetzt, geht alles nich

mein Stylesheet für'n IE sieht so aus:

Code:
body { background:url(gfx2/bgmain.png) top #52647C repeat-x; }

A:link             { color: #4A5C74; font-family: Verdana; font-size : 10pt; text-decoration: none; }
A:hover            { color: #333E4E; font-family: Verdana; font-size : 10pt; text-decoration: none; }
A:active           { color: #4A5C74; font-family: Verdana; font-size : 10pt; text-decoration: none; }
A:visited          { color: #4A5C74; font-family: Verdana; font-size : 10pt; text-decoration: none; }
A:visited:hover    { color: #333E4E; font-family: Verdana; font-size : 10pt; text-decoration: none; }
A:visited:active   { color: #4A5C74; font-family: Verdana; font-size : 10pt; text-decoration: none; }

.mainmenu_music
{
	position:absolute;
	top: 43px;
	left: 271px;
}
.mainmenu_about
{
	position:absolute;
	top: 43px;
	left: 313px;
}
.mainmenu_service
{
	position:absolute;
	top: 43px;
	left: 356px;
}
.mainmenu_links
{
	position:absolute;
	top: 43px;
	left: 406px;
}
.mainmenu_news
{
	position:absolute;
	top: 42px;
	left: 446px;
}
.mainmenu_gfx
{
	position:absolute;
	top: 42px;
	left: 502px
}
.mainmenu_lyr
{
	position:absolute;
	top: 42px;
	left: 558px
}
.mainmenu_load
{
	position:absolute;
	top: 42px;
	left: 614px
}
.mainmenu_contact
{
	position:absolute;
	top: 42px;
	left: 670px
}
.submenu {
	Visibility: hidden;
	position:absolute;
	width:55px;
	height:36px;
	top: 14px;
	left: 0px;
	padding: 0;
	margin: 0;
	border-left-color: #535152;
	border-left-width: 1px;
	border-left-style:solid;
	border-bottom-color: #535152;
	border-bottom-width: 1px;
	border-bottom-style:solid;
	border-right-color: #535152;
	border-right-width: 1px;
	border-right-style:solid;

}
Ach ja und um zu zeigen was ich meine, falls es bei jemandem nich angezeigt wird, hab ich die attachments drangehangen
Angehängte Grafiken
Dateityp: jpg firefox_abst_nde.jpg (44,3 KB, 421x aufgerufen)
Dateityp: jpg ie_abst_nde.jpg (37,6 KB, 421x aufgerufen)
Mit Zitat antworten
  #6 (permalink)  
Alt 26.04.2005, 14:26
Neuer Benutzer
neuer user
 
Registriert seit: 24.04.2005
Beiträge: 14
Ralf Sch. befindet sich auf einem aufstrebenden Ast
Standard

schreib mal bei a:link ein height: 1%; rein.

Das sollte gehen.
__________________
Gruß Ralf
Mit Zitat antworten
  #7 (permalink)  
Alt 26.04.2005, 14:36
Neuer Benutzer
neuer user
 
Registriert seit: 24.04.2005
Beiträge: 14
Ralf Sch. befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
font-family: Verdana; font-size : 10pt; text-decoration: none;
brauchst du nur bei a:link

und unbedingt die reihenfolge beachten

:link
:visited
:hover
:active
:focus

http://de.selfhtml.org/css/eigenscha...r_active_focus
__________________
Gruß Ralf
Mit Zitat antworten
  #8 (permalink)  
Alt 26.04.2005, 16:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.04.2005
Beiträge: 8
fabiO befindet sich auf einem aufstrebenden Ast
Standard

Huhu,

Also ich hab nun alles gemacht, was ihr mir geraten habt,
sprich height: 1%; eingefügt und die reinfolge der A: Tags geändert.

Der Stylesheet sieht nun so aus:

Code:
body { background:url(gfx2/bgmain.png) top #52647C repeat-x; }

A:link             { color: #4A5C74; height: 1%; font-family: Verdana; font-size : 10pt; text-decoration: none; }
A:visited          { color: #4A5C74; }
A:hover            { color: #333E4E; }
A:active           { color: #4A5C74; }
a:focus            { color: #4A5C74; }

.mainmenu_music
{
	position: absolute;
	top: 43px;
	left: 271px;
}
.mainmenu_about
{
	position: absolute;
	top: 43px;
	left: 313px;
}
.mainmenu_service
{
	position: absolute;
	top: 43px;
	left: 356px;
}
.mainmenu_links
{
	position: absolute;
	top: 43px;
	left: 406px;

}
.mainmenu_news
{
	position: absolute;
	top: 42px;
	left: 446px;
}
.mainmenu_gfx
{
	position: absolute;
	top: 42px;
	left: 502px
}
.mainmenu_lyr
{
	position: absolute;
	top: 42px;
	left: 558px
}
.mainmenu_load
{
	position: absolute;
	top: 42px;
	left: 614px
}
.mainmenu_contact
{
	position: absolute;
	top: 42px;
	left: 670px
}
.submenu {
	Visibility: hidden;
	position: absolute;
	width: 55px;
	height: 36px;
	top: 14px;
	left: 0px;
	padding: 0;
	margin: 0;
	border-left-color: #535152;
	border-left-width: 1px;
	border-left-style: solid;
	border-bottom-color: #535152;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-right-color: #535152;
	border-right-width: 1px;
	border-right-style: solid;

}
Doch die Zwischenräume bleiben
Habe auch mal probiert, die Links wegzumachen.
Beim ersten Submenu sind nun keine Links mehr vorhanden und es rückt trotzdem nicht zusammen, was mich vermuten lässt,
dass es nicht an den A:Tags liegt, oder bin ich da aufm falschen Dampfer ??

Wäre für weiter Vorschläge echt dankbar, bin langsam am verzweifeln

Gruss fabiO
Mit Zitat antworten
  #9 (permalink)  
Alt 27.04.2005, 12:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.04.2005
Beiträge: 8
fabiO befindet sich auf einem aufstrebenden Ast
Standard

Ich hab gerade noch eine entdeckung gemacht.
Als ich heute in der Schule die Seite aufgerufen habe, waren die Zwischenräume im Submenu plötzlich weg...

Aber in der Schule verwenden wir den IE 5.
Zuhause aber habe ich den IE 6, jedoch sind beide Stylesheets identisch.
Kann mir einer sagen, was ich beim Sheet des IE6 ändern muss, damit die zwischenräume verschwinden ?

IE5:

Code:
body { background:url(gfx2/bgmain.png) top #52647C repeat-x; }

A:link             { color: #4A5C74; height: 1%; font-family: Verdana; font-size : 10pt; text-decoration: none; }
A:visited          { color: #4A5C74; }
A:hover            { color: #333E4E; }
A:active           { color: #4A5C74; }
a:focus      { color: #4A5C74; }

.mainmenu_music
{
 position:absolute;
 top: 42px;
 left: 272px;
}
.mainmenu_about
{
 position:absolute;
 top: 42px;
 left: 314px;
}
.mainmenu_service
{
 position:absolute;
 top: 42px;
 left: 357px;
}
.mainmenu_links
{
 position:absolute;
 top: 42px;
 left: 407px;
}
.mainmenu_news
{
 position:absolute;
 top: 42px;
 left: 446px;
}
.mainmenu_gfx
{
 position:absolute;
 top: 42px;
 left: 502px
}
.mainmenu_lyr
{
 position:absolute;
 top: 42px;
 left: 558px
}
.mainmenu_load
{
 position:absolute;
 top: 42px;
 left: 614px
}
.mainmenu_contact
{
 position:absolute;
 top: 42px;
 left: 670px
}
.submenu {
 Visibility: hidden;
 position:absolute;
 width:55px;
 height:36px;
 top: 14px;
 left: 0px;
 border-left-color: #535152;
 border-left-width: 1px;
 border-left-style:solid;
 border-bottom-color: #535152;
 border-bottom-width: 1px;
 border-bottom-style:solid;
 border-right-color: #535152;
 border-right-width: 1px;
 border-right-style:solid;

}
IE6:

Code:
body { background:url(gfx2/bgmain.png) top #52647C repeat-x; }

A:link             { color: #4A5C74; height: 1%; font-family: Verdana; font-size : 10pt; text-decoration: none; }
A:visited          { color: #4A5C74; }
A:hover            { color: #333E4E; }
A:active           { color: #4A5C74; }
a:focus 		   { color: #4A5C74; }

.mainmenu_music
{
	position:absolute;
	top: 43px;
	left: 271px;
}
.mainmenu_about
{
	position:absolute;
	top: 43px;
	left: 313px;
}
.mainmenu_service
{
	position:absolute;
	top: 43px;
	left: 356px;
}
.mainmenu_links
{
	position:absolute;
	top: 43px;
	left: 406px;
}
.mainmenu_news
{
	position:absolute;
	top: 42px;
	left: 446px;
}
.mainmenu_gfx
{
	position:absolute;
	top: 42px;
	left: 502px
}
.mainmenu_lyr
{
	position:absolute;
	top: 42px;
	left: 558px
}
.mainmenu_load
{
	position:absolute;
	top: 42px;
	left: 614px
}
.mainmenu_contact
{
	position:absolute;
	top: 42px;
	left: 670px
}
.submenu {
	Visibility: hidden;
	position:absolute;
	width:55px;
	height:36px;
	top: 14px;
	left: 0px;
	border-left-color: #535152;
	border-left-width: 1px;
	border-left-style:solid;
	border-bottom-color: #535152;
	border-bottom-width: 1px;
	border-bottom-style:solid;
	border-right-color: #535152;
	border-right-width: 1px;
	border-right-style:solid;

}

Gruss fabiO
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
bootstrap tooltip-Problem glupto CSS 2 17.01.2014 23:17
HILFE!!! Spry menu wird in IE nicht korrekt angezeigt! lillaisa CSS 1 28.03.2012 13:17
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 19:51
Drop Down Menu Positionsproblem Schky CSS 4 21.04.2008 13:09
css-datei funktioniert bei firefox nicht :/ Chii CSS 19 15.07.2004 20:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:42 Uhr.