Fungerar i FF, inte i IE

Althalos · 2008-03-05, 22:15

Hej!
Jag har en sida som inte fungerar i IE, trots att den fungerar i FF. Detta är min första design jag kodar själv, således är jag rådlös i hur jag skall skriva om det. Sidan är: http://southvermillion.ekdahlproduction.com

Om ni har några tips på vad jag kan göra för att få footer, meny och lista att fungera så vore jag väldigt tacksam. Det är ingen stor design, så det borde inte vara så svårt...

/Calle

Syke · 2008-03-05, 22:47

Hej!

Edit: Såg nu att det var problem på två sidor, men fixa detta först så får vi se hur mycket problem som återstår på sidan med listan.

Här är kod som fungerar, du var inte långt ifrån!

De ändringar som jag gjorde:
La till en doctype allra högst upp.
La till "type"-attributet på style-taggen.
La till "alt"-attribut på loggan och signaturen.
La till "left: 0" på #footer

Dessa ändringar gjorde dels så att koden validerar och att webbläsarna går in i "standards mode" istället för "quirks mode" vilket gör att de tolkar koden lite annorlunda, samt att det sista tilllägget till #footer gjorde så att footern la sig på rätt plats. Fungerar i FF, IE7 och IE6.

Sen finns det lite annat du skulle kunna förbättra i koden (ex. menucase-divven är onödig och kan tas bort), men det hör inte till den här tråden.

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>South Vermillion Community Schools</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#header {
 position: relative;
	background-image: url(images/design_02.gif);
	background-repeat: repeat-x; 
	height: 140px;
}
#news {
 text-align:left;
 background-color:rgb(238,238,238);
 border:1px solid black;
 font-size:12px;
 width: 80%;
 position: relative;
 margin: 10 auto;
 padding: 10;
}
#stylefour {
position:relative;
display:block;
height:39px;
font-size:11px;
font-weight:bold;
background:transparent url(images/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-top:4px solid #B30000;
}
#stylefour ul {
margin:0;
padding:0;
list-style-type:none;
width:auto;
}
#stylefour ul li {
display:block;
float:left;
margin:0;
}
#stylefour ul li a {
display:block;
float:left;
color:#666;
text-decoration:none;
padding:11px 20px 0 20px;
height:23px;
background:transparent url(images/bgDIVIDER.gif) no-repeat top right;
}
#stylefour ul li a:hover,#stylefour ul li a.current {
color:#B30000;
background:#fff url(images/bgON.gif) no-repeat top right;
}
body {
	text-align: center;
}
.wrapper {
	width: 600px;
	text-align: left;
}
img.logo {
float: left;
}
h2 {
	padding: 15px 0;
	color: rgb(255,204,51);
	font: 1.3em verdana,sans-serif;
}
p {
	padding: 0 0 15px;
	color: #194379;
	font: 1em/1.3em arial,sans-serif;
}
strong {
	font-weight: normal;
}
a {
	color: #194379;
}
a:hover {
	text-decoration: none;
}
* {
	margin: 0;
}

.wrapper {
	margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
 position: relative;

}
#signature {
text-align: right;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
</style>
</head>
<body>
<div id="menucase">
 	
 	
	<div id="stylefour">
	<ul>
	<li><a href="" title="" class="current">Home</a></li>

	<li><a href="downloads.html" title="Downloads">Downloads</a></li>
	<li><a href="" title="" >Directory of faculty and staff</a></li>
	<li><a href="" title="">Employment opportunities</a></li>
	<li><a href="http://www.svcs.k12.in.us/SVHarmony.htm" title="Harmony login">Harmony</a></li>
	</ul>
	</div>

	</div>

<div id="header"><img src="images/design_01.gif" class="logo" alt="South Vermillion Community Schools"></div>
 	<div class="wrapper">
 	<h2>Vision of excellence</h2>
 	South Vermillion students possess the skills, abilities, and attitudes to be successful in life, to appreciate their self worth, and to appreciate the value and importance of lifelong learning.
   <h2>Mission</h2>
   South Vermillion Community Schools provide academic and social experiences that nurture the potential of all students to be productive, creative, and responsible citizens.
   <br><br><div id="signature"><img src="images/sig.png" alt="Signature"></div>
   <div class="push"></div>

   </div>
   <div id="footer">
 	<p>Copyright &copy; 2008 South Vermillion Community Schools, designed by <a href="http://ekdahlproduction.com">Calle Ekdahl</a></p>
 </div>
</body>
</html>

T00b · 2008-03-06, 12:05

Att lägga css-informationen i en extern fil skulle nog kunna vara en bra idé med. På så sätt så slipper du ha css och html i en och samma fil. Det gör du genom att lägga
<link rel=StyleSheet href="style.css" type="text/css"> innanför head-taggen på din sida.
Sen skapar du helt enkelt style.css och lägger alla stilmalsinfo i den istället och vips så kan du använda dig av samma stilmall på alla dina undersidor.

sasserdude · 2008-03-06, 13:12

Det som är felet, vad jag tror, är att sidan är för bred i IE och det rättar du till så här:

width : 234px !important; /* FF bred */
width : 220px; /* IE bred */

etc.. FF width är mycket bredare än vad IE width är.

Prova med det.

nu när ja kollat igenom koden så får du nog ta och börja med att lära dig css fullt ut, för att förstå vad dina kommandon betyder.

och sedan att du lägger css mall vid sidan av. i en egen fil tex style.css och sedan länkar till den, så laddar dina sidor både snabbare och det blir lättare att ha koll på dina grejjer.

och börja med att göra menyn på nytt, att gå igenom varje detalj och förhandsgranska dem. så får du se skillnaden på alla olika knep och knåp man kan göra.

Taras · 2008-03-06, 14:55

Lägg till

Kod:

* { margin:0; padding:0}

överst i css:en för att nollställa alla marginaler och paddings. Alla webbläsare kör med lite olika standarder, så därför nollställer man allt, och sedan anger du helt enkelt margin/padding för de element där du vill ha det.

Nomda · 2008-03-06, 17:24

Förstår egentligen inte grejjen med dessa workarounds.
Kodar man bara rätt från början så visas oftast allt ut korrekt i alla webbläsare från början.

Här har vi lite tips för att undvika olika utvisningar:

* { margin:0; padding:0; } - Motverkar olika utvisning när det gäller padding/margin. Dock så behöver du styla alla element igen för att överhuvudtaget använda sig utav padding/margin.

display:block; / line-height:0; - På bilder för att motverka överflöd.

clear:both; - Tänk på att cleara ut alla floats. Så fort du använder dig utav en float så måste du cleara ut den.

display:inline; - På horisontella eller vertikala menyer. Fixar utvsingen i IE6.

Navigationsproblem - Tänk på att när du stylar varje menysystem så kör du själva stylingen direkt i "li a"

Undvik positions - Visst kan man använda dem, men i de flesta fallen är de helt onödiga.

Height/Width - Sätt fasta height och widths på de områden du vet inte skall vara flexibla. Vill du sätta en fast höjd men ändå vill att det ska vara flexibelt? Använd exempelvis: min-height:600px height:auto !important; height:600px

Lycka till.

Althalos · 2008-03-07, 23:44

Wow, tack för alla bra svar

Jag skall testa detta och lära mig det. Underbart att jag nu vet hur man gör.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Fungerar i FF, inte i IE