Webbsida perfekt i FF, skitful i IE, vad göra?

[deficio]

Hej alla!

Jag behöver lite CSS-tips.. Jag har precis uppdaterat en hemsida jag krafsade ihop lite snabbt för ett tag sedan, och nu jobbat mer ordentligt med CSS och positionering.. Problemet är nu att sidan ser ut precis som den ska i Firefox, som är webbläsaren jag främst förhandsgranskat i, men visas väldigt konstigt i Internet Explorer.. Logotypen "Hjältar" flyttas ett par pixlar till höger, sedan "Tid till premiär" försvinner helt, och menyboxen blir 10 pixlar mindre bred, varför är det så?

 

Adressen till sidan är:

"http://hjaltar-film.deficio.se"

 

Om någon orkar försöka hjälpa mig anpassa sidan även till IE vore jag evigt tacksam!

 

Här är min CSS-kod:

 

.body, h1, h2, h3, h4, h5, h6, blockquote, p, form {
margin: 0;
padding: 0;
font-color: #ffffff;

}

body {
background-color: #222222;
text-align: center;


}

a:link, a:visited {
text-decoration: none;
color: #ffffff;
font-weight: bold;
}

a:hover{
text-decoration: none;
}


p {
padding: 10px 0 0 0;

}

#wrapper  {
width: 584px;
height: 400px;
margin: 7% auto 0 auto;
text-align: center;

}

#header {
float: left;
width: 620px;
height: 186px;
background-color: #000000;
}

#container {
width: 584px;
height: 400px;

}

#main {
float: left;
width: 620px;
height: 400px;
background-color: #000000;
display: inline;
}


#sidebar {
float: left;
width: 166px;
height: 484px;
background-color: #444444;
}

#footercontainer {
float: left;
width: 620px;
height: 60px;
background-color: #333;
margin: -20px 0 0 0;
}

#footer {
float:	left;
width 580px;
height: 60px;
margin: -10px 0 0 20px;

}


#logo {
width: 418px;
height: 126px;
margin: 40px auto 0 100px;

}

#menu {
float: left;
width: 600px;
height: 18px;
padding: 7px 0 3px 20px;
margin: 0px 0 0 0;
background-color: #333;
font-family: Verdana, Georgia, Sans-serif;
font-size: 10px;
color: #fff;

}

#textbox {
float: left;
width: 500px;
height: 220px;
margin: -20 50 70 65;
font-family: Verdana, Georgia, Sans-serif;
font-size: 10px;
color: #ffffff;
text-align: left;
overflow-x: hidden;
overflow-y: auto;
}

.headline {
float: left;
width: 450px;
height: 75px;
margin: 30 50 0 70;
font-family: Verdana, Georgia, Sans-serif;
color: #ffffff;
text-align: center;
}

.countdownbox {	
font-family: Verdana, Arial, Helvetica, sans-serif;	
font-size: 14px;
margin: 20px 0 -20px 100px;
color: #fff;
height: 30px;
width: 300px;
background-color: #333;
border: none;

}

.timetext {
font-family: Verdana, Arial, Helvetica, sans-serif;	
font-size: 12px;
color: #fff;
width: 300px;
height: 10px;
font-weight: bold;
margin: 10px 0 -10px 150px;

}

 

Tack på förhand!

 

/ Elin

 

[inlägget ändrat 2009-01-20 14:28:05 av deficio]

[spiffen]

Hej.

 

Du kan prova att använda dig av CSS hack som brukar fungera.

 

Vet inte hur du strukturerat din HTML/CSS kod, men om du delat upp dem i olika filer så borde du kunna göra följande:

 

I din HTML kod:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]-->

 

Filen 'not-ie.css' bör innehålla det du har postat här tidigare och i 'ie-only.css' får du ändra om koordinaterna så de ser OK ut i IE.

 

[Cluster]

Det är ju alltid bra att ange vilken doctype (DTD) som du använder dig av så att webbläsaren kan (försöka) följa standarder.

 

Se t.ex.

http://www.doctype.se/

http://www.w3.org/QA/Tips/Doctype

http://www.w3.org/QA/2002/04/valid-dtd-list.html

http://www.klientsidan.se/artiklar/20081016/Vad_ar_en_doctype/

 

 

/Cluster

------------------------------------------------------

I do not fear computers. I fear the lack of them

--------> http://eforum.kicks-ass.net <---------

 

[Jonas__B]

!IE (not IE) finns väl inte.

Övriga webbläsare ser conditional comments som bortkommenterad kod, väl.

 

[spiffen]

Det stämmer, den rätta koden borde vara så här:

 

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>

 

Hittade en sida som även beskriver dessa kommentarer lite mer ingående.

http://www.thesitewizard.com/css/excludecss.shtml

 

Fungerar inte det här så borde det gå att lösa det med javascript, typ:

 

<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if (browser == "Microsoft Internet Explorer")
document.write('<link rel="stylesheet" type="text/css" href="ie-only.css" />');
else
document.write('<link rel="stylesheet" type="text/css" href="not-ie.css" />');
</script>

 

Koden är inte testad, så jag kan inte svära på att den fungerar 100%-igt..

 

[inlägget ändrat 2009-01-20 16:06:25 av spiffen]

[Jonas__B]

För att slippa dubbelarbete är det bäst att först inkludera en css som fungerar för de webbläsare som hanterar standarden bäst och sedan css med endast css-selektorer för de element som inte fungerar.

 

Så brukar jag göra iaf

<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

 

 

[mac3]

Hejsan elin

 

jag har förenklat i koden men det se lika grafiskas i både ff o ie

jag är hundraprocentigt säker att du använder typ av WYSIWYG-editorer är Frontpage och Dreamweaver. De genererar den kod programtillverkaren anser är korrekt vilket inte betyder att det är korrekt enligt rekommendationerna från W3C.

 

 

jag vill att du jämför min html mot din html då kommer du nog se svaret

innan du klipp ut o klistra in

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>HJÄLTAR!</title>

<style type="text/css" media="screen">
body{
padding: 0px;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #222222;

color: white;
font-size: 100%;
}

.ram{

width: 584px;
margin-right: auto;
margin-left: auto;
margin-top: 87px;
background-color: black;
}

.inneram{
padding-right: 38px;
padding-left: 38px;
padding-top: 38px;
}

p{
margin-top: 15px;
margin-bottom: 15px;
padding: 0px;
font-size: 65%;
}

h1{
text-align: center;
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
font-size: 115%;
}	

h2{
 text-align: center;
 padding-bottom: 0px;
 margin-bottom: 0px;
 margin-top: 0px;
padding-top: 0px;
font-size: 75%;
}	

.loggan{
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 25px;
margin-top: 25px;
}

.meny{
font-size: 65%;
background-color: #333333;
padding-bottom: 7px;
padding-top: 7px;
}

.a0:link, .a0:visited {
text-decoration: none;
color: #ffffff;
font-weight: bold;
display: block;
float: left;
border-right: 1px solid white;
padding-left: 15px;
padding-right: 15px;
}
.a0:hover{
text-decoration: none;
}

.a1:link, .a1:visited {
text-decoration: none;
color: #ffffff;
font-weight: bold;
display: block;
float: left;
border-left: 1px solid white;
padding-left: 15px;
padding-right: 15px;
}
.a1:hover{
text-decoration: none;
}

.text{
font-weight: bold;
text-align: center;
font-size: 75%;
background-color: #333333;
padding-top: 5px;
margin-top: 120px;
}

.sidfot{
background-color: #333333;
text-align: center;
padding-top: 8px;
font-size: 90%;
padding-bottom: 8px;
}
</style>

<script type="text/javascript">

var year = 2009;
var month = 4;
var day = 17;

// Do not edit lines below.
var then = new Date(year,month-1,day);
function runMany(){
var now = new Date();
if (now < then){
	var days  = Math.floor((then-now)/(1000*60*60*24));
	var hours = Math.floor((then-now-days*1000*60*60*24)/(1000*60*60));
	var mins  = Math.floor((then-now-days*1000*60*60*24-hours*1000*60*60)/(1000*60));
	var secs  = Math.floor((then-now-days*1000*60*60*24-hours*1000*60*60-mins*1000*60)/(1000));
	var tsecs = Math.floor((then-now-days*1000*60*60*24-hours*1000*60*60-mins*1000*60-secs*1000)/(100));
	document.getElementById('skriv_ut_tid_som_ar_kvar').innerHTML = days + " dagar, " + hours + " timmar, " + mins + " minuter, " + secs + ":" + tsecs + " sekunder.";
}
setTimeout("runMany();",100);
}

</script>


</head>

<body onload="runMany();">

<div class="ram">
<img src="HJALTAR-logo.jpg" alt="Movie Logotype" class="loggan">

<div class="meny"><div style="margin-left: auto; margin-right: auto; width: 93%;"><a href="http://hjaltar-film.deficio.se/index.php" class="a0">Start</a><a href="http://hjaltar-film.deficio.se/whatsthis.php" class="a0">Vad är Hjältar?</a><a href="http://hjaltar-film.deficio.se/whatsnow.php" class="a0">Vad händer just nu?</a><div style="float: left; padding-left: 15px; padding-right: 15px;">Samarbeten</div><a href="http://hjaltar-film.deficio.se/contact.php" class="a1">Kontakta oss</a><div style="clear: both;"></div></div></div>
<div class="inneram">
<h1>Vad är det här?</h1>
<h2>- Information om Hjältar.</h2>

<p>
Hej, och välkommna till den officiella hemsidan för filmproduktionen "Hjältar!"<br>
Filmen "Hjältar!" är ett projektarbete av två glada mediaelever på en
gymnasieskola någonstans på en solig plats i det vackra Göteborg. På
den här hemsidan kommer ni att finna information om vad filmen handlar
om, och uppdateringar under produktionens gång, i både text och bilder.
Ni kommer även att kunna se våra samarbeten, (med bl.a. det fantastiska
bandet "Siphon Fuel"), information om hur man kontaktar oss, samt
slutligen själva filmen, när den är färdig, ungefär i april 2009.
Längst ner på varje sida finns en räknare som talar om exakt (och då
menar vi verkligen exakt!) hur lång tid det är kvar till premiären av
filmen. Kolla gärna runt på hemsidan, håll koll på räknaren, och besök
oss igen när filmen är färdig!
</p>
</div>
<div class="text">Tid till premiär:</div>
<div id="skriv_ut_tid_som_ar_kvar" class="sidfot"></div>
</div>



</body>
</html>

 

tid göra sidan var 15 min

program TopStyle Pro 3

This document was successfully checked as HTML 4.01 Transitional!

 

[deficio]

TACK TACK TACK alla, och speciellt "spiffen" - javascriptgrejen funkade helt galet bra och nu efter att ha delat upp cssfilen i två sådär som ni beskrev och lagt in javascriptet och ändrat i den som ska vara anpassad för IE fungerar det alldeles utmärkt (på min kopierade testsida, atm)

 

Dock har jag en annan fråga, som till viss del rör javascript.. på testsidan jag nu lagt upp, som är http://hftest.deficio.se (för att inte råka förstöra den andra, som iallafall i FF såg helt okej ut) hamnar ju den där texten "tid till premiär" under den "divmålade" javascript-koden som gör att tiden tickar ner, men enbart i IE, vilket jag tror beror på att scriptet för nedtickningsgrejen ligger i något slags "cform"-pryl, som jag inte vet vad den har för funktion eller varför.. jag hittade den på nätet första gången jag gjorde sidan, då i Dreamweaver, utan kodkunskaper, och brydde mig inte om att scriptet låg i en cform, utan stylade den helt enkelt för att slippa "formulärutseendet", eftersom det inte funkade att skriva ut scriptet utanför formuläret.. - problemet är nu alltså att den tar alldeles för mycket plats i IE, och jag undrar nu hur jag kan lösa det med min "ie-css.css"-fil, eftersom jag inte vill ändra i sidfilerna (index.php, osv..) för att det, som sagt ser bra ut i FF..

 

Det är svårt att förklara, så jag bifogar en bild.. (Det är alltså när jag markerar script-grejen som man ser att det är en överflödig vit linje ovanför scriptet, som knuffar bort min "Tid till premär-text" som står ovanför..) Jag har försökt ändra på lite marginaler i både "tidstexten" och i div:en som scriptet är stylat med, men det löser inte problemet med den överflödiga linjen, utan gör bara min "footer" lite högre så att båda grejerna får plats, och ger ett alldeles för stort mellanrum mellan "tid till premiär" och den synliga delen av scriptet... Se bilden så förstår ni kanske..

 

Och återigen, tack för hjälpen med det andra, och hoppas att någon kan hjälpa mig fatta varför mitt script måste ligga i ett formulär, varför min text knuffas bort i IE, och hur jag löser det på bästa sätt..

 

Det viktigaste för mig är att jag lär mig, och inte så mycket om att resultatet blir perfekt just på den här sidan.. Jag pluggar nämligen Grafisk Design annars, och lär mig webb mest för att kunna fortsätta jobba på reklambyrån jag är på just nu, eftersom de behöver någon som kan hyfsad webb i första hand..

 

[bild bifogad 2009-01-20 21:45:47 av deficio]

 

[inlägget ändrat 2009-01-20 21:56:36 av deficio]

[deficio]

Hej!

 

Till att börja med måste jag säga att du har hundraprocentigt fel i att jag använt mig av Dreamweaver och/eller Frontpage, då jag faktiskt skrivit all satans kod i Notepad, och den är antagligen varken snygg eller går igenom en validering, eftersom jag försökte lära mig vettig html, css och php förra veckan, och nu lyckats göra en wordpressblogg installerad på min server, två versioner av sidan jag vill få hjälp med här, och lite annat jag pysslar med och försöker lära mig inom webb.

 

Och tack för tipset, men jag ser i din kod att du skrivit in alla css-kommandon direkt i filen, vilket jag absolut inte vill, eftersom det är otroligt mycket lättare att styra flera sidor samtidigt genom externa css-filer, som gör att jag kan ändra alla mina sidor samtidigt, vid behov. Exempelvis hela sidan, och framförallt menyn att växa på bredden, i takt med att fler sidor och fler länkar kommer till, vilket gör att jag isåfall måste in i alla olika sidor och ändra, vilket skulle vara väldigt tidskrävande. Scriptet du skrivit ut i enbart <script></script> tycks dessutom inte att fungera om det inte ligger i en cform, vad tusan det nu är, och är på sin sida oformatterad, vilket inte alls fungerar i min layout.. Men tack för hjälpen ändå!

 

[mac3]

okej

 

jaså om jobbar du i Notepad men det ser ut som var WYSIWYG.

nu var det exempel på kod.

du har så rätt med css mall.

men visste du om att du kan flytta javascript till fil på samma sätt som css mall

 

med php kan du göra en fil.php som innehåller bara layout som befoga in sidan

slipper du skriva nya filer med samma layout.

 

 

jag byte ut värdet till skriv_ut_tid_som_ar_kvar

och nu kan du sätta id värdet till viken tagg som du vill.

 

TopStyle Pro 3 är typ av Notepad.

 

<link href="style.css" media="screen" type="text/css">

<script src="tid.js" type="text/javascript"></script>

 

 

document.getElementById('skriv_ut_tid_som_ar_kvar').innerHTML = days + " dagar, " + hours + " timmar, " + mins + " minuter, " + secs + ":" + tsecs + " sekunder.";

 

gå till id värdet skriv_ut_tid_som_ar_kvar ¨

 

obs startmortoren för script är <body onload="runMany();">

 

 

 

 

[inlägget ändrat 2009-01-20 23:38:02 av mac3]