✔ Opera Abstand bei div

Necro_nomicon · 7. Oktober 2008

Hallo!

Ich habe folgendes Problem:
Ein horizontales Menue funktioniert im IE, FF. Im Opera ist oberhalb und unterhalb des Menues ploetzlich ein riesen Abstand.

Wenn ich das div-Tag (div id="navcontainer") rausnehme, passt es wieder (nur ist dann natuerlich das Menue nicht mehr horizontal).

HTML:

 <div id="navcontainer">
								<ul id="navlist">
								<li id="active"><a href="athleteninfo.html" id="current">BABBV-Info</a></li>
								<li><a href="reglement.html">Reglement</a></li>
								<li><a href="anmeldung.html">Anmeldung</a></li>
								<li><a href="doping.html">Doping-Liste</a></li>
								<li><a href="posen.html">Posing</a></li></ul></div> 
				</td>

Maik · 7. Oktober 2008

Hi,

wenn du hier ein neues Thema startest, erwarte bitte nicht, dass der Leser weiß, dass er das dazugehörige Stylesheet über deine vorangegangen Themen findet.

Vielen Dank!

mfg Maik

Necro_nomicon · 7. Oktober 2008

Das weiss ich. Allerdings ist das Stylesheet hier absolut egal.
Der Abstand wird auch gemacht,wenn einfach nur ein Text drinnen ist.

Es passiert in dem Moment wenn ein div-Tag da ist.
Deswegen hab ich das style nicht gepostet.

Habe zuerst auch ein erprobtes anderes CSS Menue statt meinem genommen, wie gesagt, daran liegt es nicht. Nur am div.

CSS-Menue:

HTML:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navcontainer
{
margin: 10px 0 0 30px;
padding: 0;
height: 20px;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #fff;
width: 78px;
height: 18px;
border-top: 1px solid #f5d7b4;
border-left: 1px solid #f5d7b4;
border-bottom: 1px solid #f5d7b4;
border-right: none;
padding: 0;
margin: 0 0 10px 0;
color: #f5d7b4;
text-decoration: none;
display: block;
text-align: center;
font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #930;
background: #f5d7b4;
}

#navcontainer a:active
{
background: #c60;
color: #fff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
}

komplettes CSS:

HTML:

/* CSS Document */

html, body {

	background-color:#393939;

	margin-top:0px;

	margin-left:-1px;

	margin-right:0px;

	margin-bottom:0px;

	height:100%;

	font-family:Verdana, Arial, Helvetica, sans-serif;

	font-size:10pt;

	color:#cccccc;

	}



/* Breite der tds auskommentieren bei table-layout fixed */

.hoehetest {

	height:100%;

	padding:0;

	margin:0;

	table-layout:fixed;

	border-collapse:collapse;

	overflow:hidden;

	} 



/* fake spalten fuer fixe Breite */

.klein1, .klein2, .klein3 {

	font-size:0px;

	font-family:Verdana, Arial, Helvetica, sans-serif;

	line-height:0px;

	height:1px;



	}

.klein1 {

	width:249px;

	}

.klein2 {



	}

.klein3 {

	width:2px;

	}

	

	







.td1 {

	background-image:url(img/layout10_2.jpg);

	background-repeat:repeat-x;

	background-color:#393939;

	height:131px;

	}

.td2 {

	background-image:url(img/layout10_2.jpg);

	}

.td2b {

	background-color:#3e3e3e;

	background-image:url(img/layout10_4.jpg);

	background-repeat:no-repeat;}

.td2c {

	background-color:#1e1e1e;

	height:44px;}

.td3 {

	background-image:url(img/layout10_3.jpg);

	background-repeat:no-repeat;

	width:249px;}

.td4 {

	background-image:url(img/layout10_4.jpg);

	background-repeat: repeat;

	height:26px;}

.td5 {

	background-image:url(img/layout10_5.jpg);

	background-repeat:no-repeat;

	background-color:#1e1e1e;

	width:249px;

	height:44px;}

.td6 {

	background-image:url(img/layout10_6.jpg);

	background-repeat:no-repeat;

	background-color:#1e1e1e;

	height:44px;

	/* background-color:#1e1e1e; */

	}

.td7 {

	width:249px;

	}

.td10 {

	background-image:url(img/layout10_10.jpg);

	background-repeat:no-repeat;}

.bg_content {

	background-color:#2e2e2e;

	/*** Wappen 

	background-image:url(img/bg_wappen.png);

	background-repeat:no-repeat;

	background-position:right; ***/

	height:100%; /* Inhalt bis runter */

	}

.bg_content2 {

	background-color:#2e2e2e;

	background-image:url(img/bg_wappen.png);

	background-repeat:no-repeat;

	background-position: center;

	height:100%; /* Inhalt bis runter */

	}

	

	

	

.content_zeuchs {

	background-color:#393939;

	border-color: #000000;

	border-width: 1px 1px 1px 1px;

	border-style: solid;

	}

h1 {

	color:#f7bc5b;

	font-family:Verdana, Arial, Helvetica, sans-serif;

	font-size:12pt;

	font-weight:bold;

	margin-bottom:30px;

	}	

h2 {

	font-family:Verdana, Arial, Helvetica, sans-serif;

	font-size:10pt;

	margin-top:4pt;

	color:#f7bc5b;

	font-weight:bold;

	margin-bottom:25px;

	margin-top:30px;

	}

.txt, p {

	color:#cccccc;

	font-family:Verdana, Arial, Helvetica, sans-serif;

	font-size:10pt;

	}

#gelb {

	color:#f7bc5b;

	}

#gelb2 {

	color:#f7bc5b;

	margin-left:35px;

	}





/* maximale Textbreite */

#maxibreit {

	max-width:900px;

	}

.img {

	border: solid 3px #000000;

	float: right;

	}	

/*** img {

	display:block;

	} ***/

/* .td_kalender { */

/*	 background-image:url(menue_peter_small3.png); */

/*	 } */

	







/* werden nur im Druck angezeigt, nicht am Screen */

.print {

	display:none;

	}

	

	

		

/* MENUE MENUE MENUE */



a {

	outline:none; /* funktioniert nur bei Gecko-Browsern */

	}



ul {

	margin: 0;

	padding: 0;

	list-style: none;

	}



#nav1 a {

	text-decoration: none;

	text-align: center;

	display: block; /* verleiht dem Inline-Element "Block-Level-Charakteristika" */

	margin: 0 0 0 0;

	font: bold 8pt Verdana, sans-serif;

	color: #000;

	width:219px;

	}





/*** unnotwenig : Fixt den IE6-3px-Gap-Bug 

* html ul#nav1 li { 

	margin: -3px 0 0 0;

	} 

mit externem ie_fix.css geloest ***/

	

/*** 

im html:

mit id auf a nicht auf li NEU wie unten

<li><a href="index.html" id="home" title="home"><span>home</span></a></li>

mit Klasse im li alt

<li class="verband" title="Verband"><a href="verband.html"><span>Verband</span></a></li>

ende html

HTML class="home":

ul#nav1 li.home a:active

HTML id="home":

ul#nav1 li a#home:link, ul#nav1 li a#home:visited 

***/

/*** 

ul#nav1 li a#home:link, ul#nav1 li a#home:visited, ul#nav1 li a#home:active { }

ul#nav1 li#current a#home { } ***/







/*** current fuer forum, galerie und 2wsoft nicht relevant da externes Fenster ***/

ul#nav1 li a#home:link, li.verband:link, li.infos:link, li.ergebnis:link, li.news:link, 

li.galerie:link, li.forum:link, li.links:link, li.kontakt:link, li.impressum:link, li.soft:link {

	background-repeat:no-repeat;

	padding: 0px;

	margin:0px;

	}

ul#nav1 li a#home:link, ul#nav1 li a#home:visited, ul#nav1 li a#home:active {

	background-image:url(img/home.jpg);

	height:66px;

	line-height:66px;

	}

ul#nav1 li a#verband:link, ul#nav1 li a#verband:visited, ul#nav1 li a#verband:active {

	background-image: url(img/verband.jpg);

	height:36px;

	}

ul#nav1 li a#ergebnis:link, ul#nav1 li a#ergebnis:visited, ul#nav1 li a#ergebnis:active {

	background-image: url(img/ergebnisse.jpg);

	height:45px;

	line-height:45px;

	}

ul#nav1 li a#news:link, ul#nav1 li a#news:visited, ul#nav1 li a#news:active {

	background-image: url(img/news.jpg);

	height:36px;

	}

ul#nav1 li a#galerie:link, ul#nav1 li a#galerie:visited, ul#nav1 li a#galerie:active {

	background-image: url(img/galerie.jpg);

	height:36px;

	}

ul#nav1 li a#forum:link, ul#nav1 li a#forum:visited, ul#nav1 li a#forum:active {

	background-image: url(img/forum.jpg);

	height:36px;

	}

ul#nav1 li a#links:link, ul#nav1 li a#links:visited, ul#nav1 li a#links:active {

	background-image: url(img/links.jpg);

	height:36px;

	}

ul#nav1 li a#infos:link, ul#nav1 li a#infos:visited, ul#nav1 li a#infos:active {

	background-image: url(img/infos.jpg);

	height:98px;

	line-height:98px;

	}

ul#nav1 li a#kontakt:link, ul#nav1 li a#kontakt:visited, ul#nav1 li a#kontakt:active {

	background-image: url(img/kontakt.jpg);

	height:46px;

	}

ul#nav1 li a#impressum:link, ul#nav1 li a#impressum:visited, ul#nav1 li a#impressum:active {

	background-image: url(img/impressum.jpg);

	height:46px;

	}

ul#nav1 li a#soft:link, ul#nav1 li a#soft:visited, ul#nav1 li a#soft:active, ul#nav1 li#current a#soft {

	background-image: url(img/2wsoft.jpg);

	height:24px;

	}





ul#nav1 li a#home:hover, ul#nav1 li#current a#home {

	background-image:url(img/home_a.jpg);

	height:66px;

	}

ul#nav1 li a#verband:hover, ul#nav1 li#current a#verband {

	background-image: url(img/verband_a.jpg);

	height:36px;

	}

ul#nav1 li a#ergebnis:hover, ul#nav1 li#current a#ergebnis {

	background-image: url(img/ergebnisse_a.jpg);

	height:45px;

	}

ul#nav1 li a#news:hover, ul#nav1 li#current a#news {

	background-image: url(img/news_a.jpg);

	height:36px;

	}

ul#nav1 li a#galerie:hover, ul#nav1 li#current a#galerie {

	background-image: url(img/galerie_a.jpg);

	height:36px;

	}

ul#nav1 li a#forum:hover, ul#nav1 li#current a#forum {

	background-image: url(img/forum_a.jpg);

	height:36px;

	}

ul#nav1 li a#links:hover, ul#nav1 li#current a#links {

	background-image: url(img/links_a.jpg);

	height:36px;

	}

ul#nav1 li a#infos:hover, ul#nav1 li#current a#infos {

	background-image: url(img/infos_a.jpg);

	height:98px;

	}

ul#nav1 li a#kontakt:hover, ul#nav1 li#current a#kontakt {

	background-image: url(img/kontakt_a.jpg);

	height:46px;

	}

ul#nav1 li a#impressum:hover, ul#nav1 li#current a#impressum {

	background-image: url(img/impressum_a.jpg);

	height:46px;

	}

ul#nav1 li a#soft:hover {

	background-image: url(img/2wsoft_a.jpg);

	height:24px;

	}



/*** ALTES MENUE ***/





/*** Text wird noch eingeblendet ***/

a span {

	display:none;

	} 









/* UNTERMENUE NEU */

#navcontainer

{

margin: 10px 0 0 30px;

padding: 0px;

height: 20px;

}



#navcontainer ul

{

border: 0;

margin: 0;

padding: 0;

list-style-type: none;

text-align: center;

}



#navcontainer ul li

{

display: block;

float: left;

text-align: center;

padding: 0;

margin: 0;

}



#navcontainer ul li a

{

background: #fff;

width: 78px;

height: 18px;

border-top: 1px solid #f5d7b4;

border-left: 1px solid #f5d7b4;

border-bottom: 1px solid #f5d7b4;

border-right: none;

padding: 0;

margin: 0 0 10px 0;

color: #f5d7b4;

text-decoration: none;

display: block;

text-align: center;

font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;

}



#navcontainer ul li a:hover

{

color: #930;

background: #f5d7b4;

}



#navcontainer a:active

{

background: #c60;

color: #fff;

}



#navcontainer li#active a

{

background: #c60;

border: 1px solid #c60;

color: #fff;

}

		



/* UNTERMENUE UNTERMENUE UNTERMENUE */

/***

#navlist

{

margin: 0;

padding: 0 0 20px 10px;



border-bottom: 1px solid #2e2e2e;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:10pt;

}



#navlist ul, #navlist li

{

margin: 0;

padding: 0;

display: inline;

list-style-type: none;

}



#navlist a:link, #navlist a:visited

{

float: left;

line-height: 14px;

font-weight: bold;

margin: 0 10px 4px 10px;

text-decoration: none;

color: #878787;

}



#navlist a:link#current, #navlist a:visited#current, #navlist a:hover

{

border-bottom: 4px solid #F7BC5B;

padding-bottom: 2px;

background: transparent;



color: #FFF;

}



#navlist a:hover { 

	color: #fff;

	margin: 0 10px 4px 10px;

	}

***/



/* KALENDER KALENDER KALENDER */



#calendar {

 width: 141px;

 padding: 0;

 margin: 0;

 border-left: 1px solid #000000;

 font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

 color: #1b1b1b;

 text-align: center;



}



#td_c {

 /* border-right: 1px solid #A2ADBC; */

 /* border-bottom: 1px solid #A2ADBC; */

 width: 20px;

 height: 20px;

 text-align: center;

 background-color:#3e3e3e;

 /* background: url(images/bg_calendar.gif) no-repeat right bottom; */

}



#td_c a:link, #td_c a:visited {

 	color: #f2ea9d;

	background-color:#1b1b1b; 

 /* background: url(images/bg_calendar.gif) no-repeat; */

}



#td_c a:hover, #td_c a:active {

 color: #f2ea9d;

 background-color:#1b1b1b;

 /* background: url(images/bg_calendar.gif) no-repeat right top; */

}

#calendar a:link, #calendar a:visited, #calendar a:hover, #calendar a:active {

 color: #f2ea9d;

 text-decoration:none;

}



/* LINKSFARBEN */

a:link {

	text-decoration:underline;

	color:#f7bc5b;

	}

a:visited {

	text-decoration:underline;

	color:#f7bc5b;

	}

a:hover, a:active {

	color:#CCCCCC;

	text-decoration:underline;

	}

Maik · 7. Oktober 2008

Soll ich http://2wsoft.at/test2/verband.html im Opera anschauen?

Und von welcher Version sprichst du?

mfg Maik

Necro_nomicon · 7. Oktober 2008

Habe es am Server upgedatet.
verband.html

Opera Version 9.27

Maik · 7. Oktober 2008

Sieht nicht anders aus, wie in den übrigen Browsern auch.

mfg Maik

Maik · 7. Oktober 2008

Necro_nomicon hat gesagt.:
Opera Version 9.27

Hab ich nicht (mehr) zur Verfügung - aktuell ist 9.5.x

mfg Maik

Necro_nomicon · 7. Oktober 2008

Also irgendwas ist da jetzt eigenartig.

Anbei das Bild im Opera und das im Firefox

Maik · 7. Oktober 2008

In der aktuellen Opera-Version sieht's bei mir wie im Firefox (und den übrigen Browsern) aus.

mfg Maik

Necro_nomicon · 7. Oktober 2008

Hab gerade auf die neue Version upgegradet...

Da passt es bei mir dann auch.

✔ Opera Abstand bei div

Necro_nomicon

Erfahrenes Mitglied

Maik

Necro_nomicon

Erfahrenes Mitglied

Maik

Necro_nomicon

Erfahrenes Mitglied

Maik

Maik

Necro_nomicon

Erfahrenes Mitglied

Maik

Necro_nomicon

Erfahrenes Mitglied

Neue Beiträge