Funkar i Firefox o Opera, men ej i IE!

5 svar · 565 visningar · startad av diondra 31 aug. 2005

diondraMedlem sedan feb. 200461 inlägg

Frågan31 aug. 2005 21:13#1

Den här lilla rutan fungerar precis som den ska i Firefox och Opera, men i IE blir den helt konstig. Det ser bra ut tills man hovrar över en av länkarna, då blir hela rutan konstig. Skickar med bild, css samt htmlkod. Provade att ta bort padding 2px, men det blev ingen skillnad. Vill ogärna tvingas göra ett separat stylesheet för det där j***a IE x(

Css

#rightbox {background: #E45E21;}
.rightbox-navigation {color: #FFFFFF; font-size: 0.9em; margin-left: 10px;}
.rightbox-roundtop {background: #ffffff;}
.rightbox-roundbottom {background: #ffffff;}
.rightbox-r1{margin: 0 5px; height: 1px; overflow: hidden; background: #E45E21;}
.rightbox-r2{margin: 0 3px; height: 1px; overflow: hidden; background: #E45E21;}
.rightbox-r3{margin: 0 2px; height: 1px; overflow: hidden; background: #E45E21;}
.rightbox-r4{margin: 0 1px; height: 2px; overflow: hidden; background: #E45E21;}
.rightbox-content {padding: 5px;}

.rightbox-content p {
	color: #FFFFFF;
	font-size: 0.9em;
	margin-left: 10px;
}

#rightbox a, a:visited, a:active {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px solid #CE5620;
	padding: 2px;
}

#rightbox a:hover {
	color: #E45E21;
	background-color: #FFFFFF;
	text-decoration: none;
	padding: 2px;
}

HTML

 <div id="rightbox">
            <div class="rightbox-roundtop">
              <div class="rightbox-r1"></div>
              <div class="rightbox-r2"></div>
              <div class="rightbox-r3"></div>
              <div class="rightbox-r4"></div>
            </div>
            <div class="rightbox-content"><h1>Navigering</h1>
			<p class="rightbox-navigation"><img src="img/rightboxnavimg.jpg" alt="Journal" /> <a href="#">Link 1</a><br />
			  <img src="img/rightboxnavimg.jpg" alt="Girl" /> <a href="#">Link 2</a><br />
			  <img src="img/rightboxnavimg.jpg" alt="Domain" /> Link 3<br />
			  <img src="img/rightboxnavimg.jpg" alt="Extras" /> Link 4<br />
			  <img src="img/rightboxnavimg.jpg" alt="Exit" /> Link 5</p>
            </div>
            <div class="rightbox-roundbottom">
              <div class="rightbox-r4"></div>
              <div class="rightbox-r3"></div>
              <div class="rightbox-r2"></div>
              <div class="rightbox-r1"></div>
            </div>
          </div>

Nån som kan hjälpa mig rätta till felet? Anledningen till att det är så mycket csskod är för att det ska vara runda hörn :)

InsiderMedlem sedan jan. 2000978 inlägg

31 aug. 2005 22:30#2

När jag klistrar in koden i ett html-dokument får jag inget fel så som du beskriver det...
Har du möjlighet att länka till sidan?
Annars kan du lägga alla filer inkl bilder under 'mina filer' här på forumet. :)

diondraMedlem sedan feb. 200461 inlägg

1 sep. 2005 08:52#3

Javisst, här kommer filen/länken. Det konstiga är att det blir knasigt endast när boxen ligger i en tabell, annars fungerar det.

Knasig i IE

zcorpanMedlem sedan dec. 20042 245 inlägg

1 sep. 2005 14:00#4

"hasLayout" löser denna. Om du ändrar:

.rightbox-content p {
	color: #FFFFFF;
	margin-left: 10px;
}

...till:

.rightbox-content p {
	zoom: 1;
	color: #FFFFFF;
	margin-left: 10px;
}

...så hoppar det inte längre i IE. :)

Det finns andra sätt än zoom:1 för att få IE att sätta "hasLayout", vilket beskrivs mer ingående i On having layout. [ins] (Lagade länken.) [/ins]

diondraMedlem sedan feb. 200461 inlägg

1 sep. 2005 18:01#5

hmm jo den lilla zoom koden löste det, men nu validerar den inte istället :S inte bra det heller ju *suck*

zcorpanMedlem sedan dec. 20042 245 inlägg

1 sep. 2005 19:07#6

Felhantering i CSS är definierat (CSS1, CSS2.1). Om en UA inte känner igen en egenskap måste den ignorera den och gå vidare till nästa.

Om du vill att din CSS ska validera så kan du använda någon av de andra metoderna för att sätta hasLayout som jag skrev i mitt förra inlägg. :)