webForumDet fria alternativet

background-image: funkar på ena stället men inte på andra....

HTML & CSS

1 svar · 225 visningar · startad av richi_f

Medlem sedan apr. 2004206 inlägg
Frågan#1

Hej!

Har slitit mitt hår nu ett tag och hittar inte var felet ligger... Allt funkar klockrent i firefox men inte i IE såklart....

Jag har två menyer, på huvudmenyn funkar background-image: url(../images/bg_meny.gif); på både IE och firefox

MEN inte på undermenyn på IE, allt är fint i firefox.

Jag kan inte förstå varför IE inte vill visa bakgrundsbilden på hover när den visar den på det markerade valet...

Det funkade för ett par dagar sen, sen har jag ändrat lite i css:en så jag antar att det är nåt litet som jag inte ser men ändå, varför funkar det då i Firefox?

Det lustiga är att koden är exakt samma:

För huvudmenyns hover:

.menuElementLink:hover {
	background-image: url(../images/bg_meny.gif);
	color: 			#ffffff;
	text-decoration: 	none;
}

för undermenyns hover:

.menuElementLinkSub:hover {
	background-image: url(../images/bg_meny.gif);
	color: 			#ffffff;
	text-decoration: 	none;
}

Sidan hittar ni på
http://test.tanneforsif.com/default.asp?p=23
den sidan innehåller både huvud- och undermeny.

Tack på förhand!

Här är hela css:en:


/* nollställ marginaler och indrag för alla element - inklusive listor 
   Läs t.ex. [url]http://www.clagnut.com/blog/1287/[/url]  om du inte sett denna förr  */
* {margin:0;padding:0;} 
/* Grundinställningar för visningsytan   no-repeat center fixed; */
html,body { 
color: #000; 
background: #fff url(../images/bakgrund_logga6.jpg);

height:100%; /* se till att vi kan utnyttja hela visningsytan */
text-align:center;  /* centrera #container a'la bluerobot.com del 1 */
}

p {
font-family: verdana, helvetica, sans-serif;
font-size: 12px; line-height: 18px;
color: #000; background-color:transparent;
padding: 0px 5px 10px 0px;
}

#container {
width:766px; /* innehållets totala bredd */
min-height:100%;  /* ta upp hela sidan (se MISIE-hack nedan) */
background-image: url(../images/bg_main.gif); /* Se alistapart.com "faux columns" */
margin:0 auto;  /* centrera #container a'la bluerobot.com del 2 */
text-align: left; /* ... och del 3 */
}

#header1 {
height: 53px;
background-color:#ccc;
background-image: url(../images/top_tanneforsif.gif);
TEXT-ALIGN:		right;	
FONT: 			10px verdana, arial, helvetica, sans-serif;
color: 			#333333;
}

#header1 a {
COLOR: 			#990000;
text-decoration: 	none; 
}

#header1 a:hover {
	TEXT-DECORATION: 	none;
	COLOR: 			#ffffff;
	BACKGROUND-COLOR: 	#6699CC;
}

#header2{
height: 165px;
background-color:#990000;
background-image: url(../images/toplogo.jpg);
}

#menu {
height: 25px;
background-image: url(../images/menytop_2.gif);
}

/* tvåspaltad lösning a'la realworldstyle.com del 2*/
#main {
width:526px; /* width+margin-left skall vara < width på #container, med marginal  */ 
	float:left;

	font-family: verdana, helvetica, sans-serif;
	font-size: 12px; line-height: 18px;
	background-color:transparent;
	margin-left:7px;
	margin-top:14px;
}

#main img {
border:0px solid #dddddd;
margin:0;
padding:0;
}

#main a {
COLOR: 			#990000;
text-decoration: none; 
border-bottom: 1px dotted #6699CC;
}

#main a:hover {
	TEXT-DECORATION: 	none;
	border-bottom: 1px solid #6699CC; 
	COLOR: 			#6699CC;
	BACKGROUND-COLOR: 	#FFFFFF;
}

/* tvåspaltad lösning a'la realworldstyle.com del 1  	line-height: 1.4;*/	
#sidebar {
  width:220px; /* skall vara mindre än margin-left på #main (med marginal) */
	margin-left:536px; /* något mer än bredden på #sidebar */
	margin-top:5px;
}

#sidebar HR { 
 height: 0;
 border: 0px;
 border-bottom: 1px solid #FFF;
 width: 50%;
 margin: auto;
 *margin: 0px; /* ignoreras av firefox */
 padding: 0px;
 text-align: center;
}

/* sidfotsmek */
#belowthebottom {
  height:35px;  /* samma som #bottom */
	clear:both;
}

#bottom{
width:766px;
height: 35px; /* height = p height + p margin-top + p margin-bottom */
background-color:#990000;
background-image: url(../images/footer.gif);
margin-top:-35px; /* samma som height */
margin-left:auto;
margin-right:auto;
TEXT-ALIGN:	center;	
FONT: 		10px verdana, arial, helvetica, sans-serif; line-height: 10px;
color: 		#cccccc;
}

#bottom a {
COLOR: 			#cccccc;
text-decoration: 	none; 
}

#bottom a:hover {
	TEXT-DECORATION: 	none;
	COLOR: 			#6699CC;
	BACKGROUND-COLOR: 	#FFFFFF;
}

#homeclick {

    display:block;
    bottom:0; left: 0;
    width: 766px;
    height: 165px;
}

#homeclick a {
text-decoration: none; 
BACKGROUND-COLOR: 	none;
}

#homeclick a:hover {
	TEXT-DECORATION: 	none;
	BACKGROUND-COLOR: 	none;
}

/*##############################
 * Style för omarkerat huvudmenyval 	background-color: 	#CC0000;
 *##############################
 */
.menuElementLink {
	margin-left: 		3px;
	list-style: 		none;
	display: 		inline;
	color: 			#ffffff;
	padding: 		1px 8px 1px 8px;
	text-decoration: 	none;
	FONT: 			11px verdana, arial, helvetica, sans-serif;
}

.menuElementLink:hover {
	background-image: url(../images/bg_meny.gif);
	color: 			#ffffff;
	text-decoration: 	none;
}

/*##############################
 * Style för markerat huvudmenyval 	background-color: 	#ffffff;
 *##############################
 */
.menuElementLinkWhite {
	margin-left: 		3px;
	list-style: 		none;
	display: 		inline;
	background-image: url(../images/bg_meny.gif);
	color: 			#ffffff;
	padding: 		1px 8px 1px 8px;
	text-decoration: 	none;
	BORDER:		 	#660000 2px solid;
	FONT: 			11px verdana, arial, helvetica, sans-serif;
}

.menuElementLinkWhite:hover {
	text-decoration: 	none;
}

/*##############################
 * Style för omarkerat undermenyval
 *##############################
 */
.menuElementLinkSub {
list-style: none;
display: inline;
color: #000000;
padding: 1px 8px 1px 8px;  
text-decoration: none;
FONT: 11px verdana, arial, helvetica, sans-serif;
margin-left: 35px;
}

.menuElementLinkSub:hover {
	background-image: url(../images/bg_meny.gif);
	color: 			#ffffff;
	text-decoration: 	none;
}

/*##############################
 * Style för markerat undermenyval  padding: 1px 8px 1px 8px;    
 *##############################
 */
.menuElementLinkWhiteSub {
color: #ffffff;
padding: 1px 8px 1px 8px;  
text-decoration: none;
FONT: 11px verdana, arial, helvetica, sans-serif;
font-weight: normal;
background-image: url(../images/bg_meny.gif);
BORDER:	#660000 2px solid;
margin-left: 35px;
}

.menuElementLinkWhiteSub:hover {
	background-image: url(../images/bg_meny.gif);
	color: 			#ffffff;
	text-decoration: 	none;
}

.jiwebForm {
	FONT: 		11px trebuchet ms, arial, helvetica, sans-serif;
}

.jiwebButtons {
	FONT: 		11px trebuchet ms, arial, helvetica, sans-serif;
}		

H1 { 
	PADDING: 		0px 0px 0px 0px;
	FONT-WEIGHT: 		normal;
	MARGIN:			5px 0px 15px 0px; 
	COLOR:			#990000;
	FONT-SIZE:		22px;
	FONT-FAMILY: 		verdana, arial, helvetica, sans-serif;
	LINE-HEIGHT:		24px;
}

H2 { 
	PADDING: 		0px 0px 0px 0px;
	FONT:			18px verdana, arial, helvetica, sans-serif;
	FONT-WEIGHT: 		normal;
	MARGIN:			0px 0px 0px 0px; 
	COLOR:			#990000;
	FONT-FAMILY: 		verdana, arial, helvetica, sans-serif;
	LINE-HEIGHT:		24px;
}
Medlem sedan apr. 2004206 inlägg
#2

Jag kopierade in koden nedan istället under hover på undermenyn och då funkade det, fattar inte varför så om nån kunnig kan förklara varför det inte funkade med den koden jag hade innan så är det välkommet!

.menuElementLinkSub:hover {
color: #ffffff;
padding: 1px 8px 1px 8px;  
text-decoration: none;
FONT: 11px verdana, arial, helvetica, sans-serif;
font-weight: normal;
background-image: url(../images/bg_meny.gif);
BORDER:	#660000 0px solid;
margin-left: 35px;
}

edit:
jag accepterar inte detta svaret ännu, är sugen på att veta varför det inte funkade innan...

282 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
147 ms — deklarationer (db)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)
147 ms — ändringar (db)