CSS Bug in FF Mobile oder in meinem CSS?

[jan4321]

Hi, ich baue gerade an meiner Webseite, dabei hab ich aber das Problem, das, es in Firefox Mobile (und nur da, Desktop FF und alle anderen Browser nicht) zu einem komischen Darstellungsfehler kommt:


http://www.walter-it-solutions.de/

 

[SonyXP]

Etwas Offtopic:

Wir Bauen Derzeit Für euch um.
Bitte Schaut die Tage noch mal vorbei.
Vielen Dank für ihr Verständnis

Ich möchte jetzt nicht "oberlehrerhaft" daher kommen - aber der Mix aus wahrloser Groß- und Kleinschreibung wirkt nicht so professionell auf mich (und vielleicht andere (potentielle Kunden)).

Vielleicht solltest Du da auch mal ein Auge drauf werfen. Ist wirklich nur gut gemeint!

 

[jan4321]

passt schon, die seite ist sowieso eigentlich nur erst mal für mich, das hab ich erst mal als Platzhalter eingebaut, verlinkt ist die weder bei Google, noch sonst wo. Aber kann nicht schaden, ich ändere das bei Gelegenheit^^

Ich will erstmal, dass das Menü CSS so dargestellt wie ich das will, weil wenn ich einen generellen fehler in meinem CSS hab, kann ich das ganze Menü umwerfen

Ach ja, fast vergessen: Hier mal das CSS:

* {
	padding: 0;
	margin: 0;
}

#menu {
	width: 100%;
	background-color: #0066CC;
	font-family: Verdana;
	font-size: 1em;
	line-height: 1.5;
	float: left;
	padding-top: 3px;

	}

#menu ul {
	float: left;
	background-color: #DBDBDB;
	border-bottom-right-radius: 100px;
	border-top-right-radius: 100px;
	margin-right: -15px;
	width: 135px;
	list-style-type: none;
	}

/*--definiert die Blocküberschriften--*/
#menu h3 {
	text-align: center;
	color: #000;
	font-size: 14px;
	height: 28px;
	padding-left: 8px;
	margin-top: 6px;
}

#menu h3:hover {
	text-align: center;
	color: #0066CC;
	font-weight: bolder;
	font-size: 15px;
}

/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
	text-decoration: none;
	display: block;
	text-align: center;
	border-bottom-right-radius: 100px;
	border-top-right-radius: 100px;
	border-bottom: 2px solid #000000;
	border-top: 2px solid #000000;
	border-right: 2px solid #000000;
}

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
}

/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/

#menu li {
position: relative;
}

/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}


/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}

#menu ul li:focus ul {
display: block;
}



* html #menu ul li, /*--nur für IE-Versionen <=6 erkennbar--*/
*+ html #menu ul li /*--nur für IE 7 erkennbar--*/
{
float: left;
width: 100%;
}

 

[fz21z]

Das ist wohl die Outline.
Mittels der Outline erhalten User die visuelle Rückmeldung auf welche Element gerade zugegriffen wird, z.B. bei Tastatureingaben.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline : 0;
}

 

[mustermen]

Hi, versuch mal bei margin den Wert weiter zu verkleinern:

#menu ul {
	margin-right: -20px;  
}

Deine Navigation ist komisch aufgebaut, eigentlich solltest du nur eine <ul> verwenden und die H3 raus nehmen:

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

soll davon ein Menüpunkt eine weitere Liste anzeigen sobald man die mit der Maus hovert, muss du folgendes machen:

<ul>
<li><a href="#">Link 1</a>
<ul>
<li>unterpunkt von Link 1</li>
</ul>
</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>

Den Borderradius solltest du nur auf das li anwenden, und statt hier feste Größe in Pixel anzugeben solltest du lieber 50% nehmen:

border-radius: 0 50% 50% 0;

Jetzt wird immer ein kreis angezeigt und du kannst die Höhe der Buttons jederzeit ändern ohne den border-radius mit zu ändern.

 

[Daaron]

...das hab ich erst mal als Platzhalter eingebaut, verlinkt ist die weder bei Google, noch sonst wo.

Auch wenn Computerbase typischerweise rel=nofollow verwendet... Du hast das Ding hier verlinkt, also IST es in den Suchmaschinen.

Unabhängig davon: Reiß die Navigation noch einmal ab. Du hast da totalen semantischen Mumpitz geschrieben. Eine Navigation ist, von der Semantik her, eine (meist ungeordnete) Liste mit mehreren Navigationspunkten, die eine hierarchische Struktur aufbaut. Was du hingegen geschrieben hast, sind viele Listen mit jeweils einem Navigationspunkt. Das ist semantisch falsch, versaut die Barrierefreiheit und erhöht unnötig das Codevolumen.

Außerdem: Wenn du schon einen HTML5-DOCTYPE verwendest, dann verwende auch semantisches HTML5. Eine Navigation ist i.d.R. ein <nav> und gehört üblicherweise in den <header role=banner> der Seite.