Søg
Avatar billede anettegrubbe Nybegynder
28. april 2004 - 13:33 Der er 21 kommentarer

Forskellige style sheets til forskellige browserer

Jeg har lavet 2 forskellige stylesheets (CSS) til henholdsvis Explorer 6. og Explorer 5.

Hvordan får jeg linket til dem inde fra i html-documentet, så der først bliver tjekket hvilken browser der er på det givne computer.

Mvh
Anette
Avatar billede killerclown Nybegynder
28. april 2004 - 13:45 #1
Hej Anette !
SKAL det være HTML ?
Må det godt være ASP i stedet ?
/Killer
Avatar billede anettegrubbe Nybegynder
28. april 2004 - 13:45 #2
Nej, det skal helst være i html ...

/Anette
Avatar billede lordhead Nybegynder
28. april 2004 - 13:56 #3
Hvad med alle andre browsere?? - og undskyld for spam :)
Avatar billede anettegrubbe Nybegynder
28. april 2004 - 14:00 #4
Vi har aftalt at det først og fremmest bare skal fungere i de to browserer, så hvis du ved hvordan jeg laver det, vil jeg meget gerne høre det!

/Anette
Avatar billede roenving Novice
28. april 2004 - 14:20 #5
<script type="text/javascript">
ua = navigator.userAgent.toLowerCase();
uaie = ua.indexOf('msie');
document.write = '<link rel="stylesheet" type="text/css" href="style/' + ((ua.charAt(uaie+5)=='5')?'styleie5':(ua.charAt(uaie+5)=='6')?'styleie6':'styleother') + '.css">'
</script>
Avatar billede roenving Novice
28. april 2004 - 14:21 #6
-- og scriptet skal selvfølgelig placeres der, hvor man eller ville have skrevet link-tagget, altså i head-sektionen !-)
Avatar billede anettegrubbe Nybegynder
28. april 2004 - 14:27 #7
Hvad skal mine stylesheets så hedde?
Avatar billede roenving Novice
28. april 2004 - 14:37 #8
style/ som står i koden er den mappe style-sheets ligger i, den skal du selvfølgelig give den korrekte sti ...

Og så er de navne jeg har brugt: styleie5 for IE5-stylesheetet, styleie6 for IE6 og så styleother, hvis ingen af dem er tilstede -- alle med .css på !-)
Avatar billede anettegrubbe Nybegynder
28. april 2004 - 14:46 #9
Det virker ikke!

Nu har jeg kaldt mine stylesheets det samme som dig og lagt dem i en mappe der hedder style.

Så her jeg sat scriptet ind i head-sektionen, er det ikke rigtigt?!

Min head-sektion ser så sådan ud:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ecolab.dk</title>
<meta name="keywords" content="Ecolab, reng&oslash;ring, clean">
<meta name="description" content="Ecolab, reng&oslash;ring, clean">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
ua = navigator.userAgent.toLowerCase();
uaie = ua.indexOf('msie');
document.write = '<link rel="stylesheet" type="text/css" href="style/' + ((ua.charAt(uaie+5)=='5')?'styleie5':(ua.charAt(uaie+5)=='6')?'styleie6':'styleother') + '.css">'
</script>

<script language="JavaScript">
<!--
function mmLoadMenus() {
  if (window.mm_menu_0315122702_0) return;

window.mm_menu_0316092437_0 = new Menu("root",170,20,"Tahoma, Arial, sans",11,"#3766AE","#3766AE","#E3EDFA","#FFFFFF","left","middle",3,0,200,-5,7,true,true,true,10,true,true);
  mm_menu_0316092437_0.addMenuItem("Hvem&nbsp;er&nbsp;Ecolab","window.open('html_sider/profil.htm', '_self');");
  mm_menu_0316092437_0.addMenuItem("Ecolab&nbsp;strategi","window.open('html_sider/strategi.htm', '_self');");
  mm_menu_0316092437_0.addMenuItem("Ecolab&nbsp;historie","window.open('html_sider/historie.htm', '_self');");
  mm_menu_0316092437_0.addMenuItem("Ecolab&nbsp;kultur","window.open('html_sider/kultur.htm', '_self');");
  mm_menu_0316092437_0.addMenuItem("Ecolab&nbsp;miljø","window.open('html_sider/miljoe.htm', '_self');");
  mm_menu_0316092437_0.hideOnMouseOut=true;
  mm_menu_0316092437_0.bgColor='#3766AE';
  mm_menu_0316092437_0.menuBorder=0;
  mm_menu_0316092437_0.menuLiteBgColor='#3766AE';
  mm_menu_0316092437_0.menuBorderBgColor='#3766AE';


 
 
  window.mm_menu_0317094331_0 = new Menu("root",170,20,"Tahoma, Arial, sans",11,"#3766AE","#3766AE","#E3EDFA","#FFFFFF","left","middle",3,0,200,-5,7,true,true,true,10,true,true);
  mm_menu_0317094331_0.addMenuItem("Ledige&nbsp;stillinger","window.open('html_sider/stillinger.htm', '_self');");
  mm_menu_0317094331_0.addMenuItem("Uopfordret&nbsp;ansøgning","window.open('html_sider/ansoegning.htm', '_self');");
  mm_menu_0317094331_0.addMenuItem("Elevuddannelse","window.open('html_sider/elev.htm', '_self');");
  mm_menu_0317094331_0.addMenuItem("Ansættelsesprocedure","window.open('html_sider/ansat_procedure.htm', '_self');");
  mm_menu_0317094331_0.addMenuItem("Ansat&nbsp;i&nbsp;Ecolab","window.open('html_sider/ansat.htm', '_self');");
  mm_menu_0317094331_0.hideOnMouseOut=true;
  mm_menu_0317094331_0.bgColor='#3766AE';
  mm_menu_0317094331_0.menuBorder=0;
  mm_menu_0317094331_0.menuLiteBgColor='#3766AE';
  mm_menu_0317094331_0.menuBorderBgColor='#3766AE';


  window.mm_menu_0319084943_0 = new Menu("root",170,20,"Tahoma, Arial, sans",11,"#3766AE","#3766AE","#E3EDFA","#FFFFFF","left","middle",3,0,200,-5,7,true,true,true,10,true,true);
  mm_menu_0319084943_0.addMenuItem("Institutional","window.open('html_sider/institutional.htm', '_self');");
  mm_menu_0319084943_0.addMenuItem("Professional&nbsp;Products","window.open('html_sider/professional_products.htm', '_self');");
  mm_menu_0319084943_0.addMenuItem("Textile&nbsp;Care","window.open('html_sider/textile_care.htm', '_self');");
  mm_menu_0319084943_0.addMenuItem("Food&nbsp;&&nbsp;Beverage","window.open('html_sider/food_beverage.htm', '_self');");
  mm_menu_0319084943_0.hideOnMouseOut=true;
  mm_menu_0319084943_0.bgColor='#3766AE';
  mm_menu_0319084943_0.menuBorder=0;
  mm_menu_0319084943_0.menuLiteBgColor='#3766AE';
  mm_menu_0319084943_0.menuBorderBgColor='#3766AE';

    window.mm_menu_0317093440_0 = new Menu("root",170,20,"Tahoma, Arial, sans",11,"#3766AE","#3766AE","#E3EDFA","#FFFFFF","left","middle",3,0,200,-5,7,true,true,true,10,true,true);
  mm_menu_0317093440_0.addMenuItem("Cantering","window.open('html_sider/cantering.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Detailhandel","window.open('html_sider/detail.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Ejendomsselskaber","window.open('html_sider/ejendom.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Føde-&nbsp;og&nbsp;drikkevare","window.open('html_sider/foede_drik.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Forhandler","window.open('html_sider/forhandler.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Industri&nbsp;og&nbsp;produktion","window.open('html_sider/industri_pro.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Kontor&nbsp;og&nbsp;administration","window.open('html_sider/kontor_admin.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Landbrug","window.open('html_sider/landbrug.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Overnatning&nbsp;og&nbsp;forplejning","window.open('html_sider/overnatning.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Sundhedssektor","window.open('html_sider/sundhedssektor.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Offentlig&nbsp;sektor","window.open('html_sider/offentlig_sektor.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Rengøringsselskaber","window.open('html_sider/rengoering.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Sport&nbsp;og&nbsp;fritid","window.open('html_sider/sport_fritid.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Transport","window.open('html_sider/transport.htm', '_self');");
  mm_menu_0317093440_0.addMenuItem("Vaskerier","window.open('html_sider/vaskerier.htm', '_self');");
  mm_menu_0317093440_0.hideOnMouseOut=true;
  mm_menu_0317093440_0.bgColor='#3766AE';
  mm_menu_0317093440_0.menuBorder=0;
  mm_menu_0317093440_0.menuLiteBgColor='#3766AE';
  mm_menu_0317093440_0.menuBorderBgColor='#3766AE';

mm_menu_0317093440_0.writeMenus();
} // mmLoadMenus()
//-->
</script>
<script language="JavaScript" src="../mm_menu.js"></script>
<style type="text/css">
<!--
.style1 {color: #999999}
-->
</style>
</head>
Avatar billede roenving Novice
28. april 2004 - 14:56 #10
Jeg fik præcis denne sti ud:

style/styleie6.css

-- så de to andre vil være:

style/styleie5.css &
style/styleother.css

-- og style-mappen er undermappe til html-dokumentets ?-)
Avatar billede anettegrubbe Nybegynder
28. april 2004 - 15:04 #11
Ja, det er også sådan det er!
Har du et bud på, hvorfor det så ikke virker? Siden bliver bare vist helt uden stylesheet ...
Avatar billede anettegrubbe Nybegynder
28. april 2004 - 15:10 #12
Måske jeg du hjælpe mig, hvis du ser, hvad problemet er.

Jeg har lavet denne side, som ser pæn ud i Explorer 6, men i version 5 hopper nogle af overskrifterne 10-50pixels op. Det var derfor jeg ville lave et ekstra stylesheet til 5-versionen.

Kan det hjælpe?! (- det håber jeg ...)

Her er en test-version af siden: http://www.ecolab.dk/agl1
Avatar billede roenving Novice
28. april 2004 - 15:23 #13
Prøv at teste det med:

<body ... onload="alert(document.styleSheets[0].href)">

-- og det er nok det nemmeste at lave to forskellige stylesheets, når det lige er IE5 og IE6, der skal differentieres til, men du kan jo lægge det meste, som vel er ens, i et style-sheet, som altid loades, og så sætte js-tingen til at hente de tillæg, der skal være ...

-- eller endnu lettere:

Lave et default stylesheet, som ser ud som du vil i den browser, som er det primære mål, og så, hvis det er en anden browser loade et andet, som så med sit indhold kan overskrive de forkerte ting !-)
Avatar billede roenving Novice
28. april 2004 - 15:24 #14
-- og husk så at lukke det ulovlige dobbeltspørgsmål, ellers er jeg jo nødt til at iføre mig min coadmin-kasket *g*
Avatar billede anettegrubbe Nybegynder
28. april 2004 - 15:42 #15
Det du skriver til sidst lyder som en god idé, for det er 6'eren, som er den primær browser, men hvordan får jeg så overskrevet de forkerte ting?

På forhånd mange mange tak :-)


P.S nu tror jeg, at jeg har lukket det andet spørgsmål! sorry ;-)
Avatar billede roenving Novice
28. april 2004 - 15:52 #16
Css er opbygget således at en style cascader, altså arves, så man på underliggende elementer kan tilføje nye properties ...

-- en side-effekt ved det er, at en senere angivet property vil overskrive en tidligere angivet, f.eks.:

.menu{
  color:green;
  text-decoration:underline;
}

-- hvis du så et andet sted senere har:

.menu{
  font-family:tahoma,verdana,sans-serif;
  color:red;
}

vil resultatet blive, at color-propertyen vil blive overskrevet af den senere værdi, mens de andre vil blive konkateneret, altså vil den resulterende style for klassen 'menu' blive:

  font-family:tahoma,verdana,sans-serif;
  color:red;
  text-decoration:underline;

Så du kan gøre det, at de afstande, som er forkerte i IE5, simpelthen overskrives !o]

-- og så lyder det iøvrigt uprofessionelt at I designer til kun omkring 7/8 af internet-brugerne på sådan en side (medmindre det er en ren inhouse-ting, hvad det dog ikke så ud til !-)
Avatar billede anettegrubbe Nybegynder
28. april 2004 - 15:55 #17
Forresten så kom alert-boxen frem når jeg kom ind på siden!
Avatar billede roenving Novice
28. april 2004 - 15:58 #18
-- og viste det rigtige ?-)
Avatar billede anettegrubbe Nybegynder
28. april 2004 - 16:05 #19
Men hvis jeg overskriver de afstande længere ned i stylsheet'et, så indvirker det vel både på IE5 og IE6?

Skal der så et eller andet JS på enten i html-dokumentet eller i stylesheet'et?

(- og jeg ville også godt teste og optimere sitet til netscape, div versioner mm, men det er jeg jo ikke ene om at bestemme ...)
Avatar billede roenving Novice
28. april 2004 - 16:19 #20
Nej, du skal:

1. Lægge default-stylesheetet ind:

<link rel="stylesheet" type="text/css" href="style/style.css">

2. lægge det ovenfor lagte script bagefter, og så lade de andre stylesheets _kun_ indeholde ændringer:

<script type="text/javascript">
ua = navigator.userAgent.toLowerCase();
uaie = ua.indexOf('msie');
if(ua.charAt(uaie+5)!='6')
document.write = '<link rel="stylesheet" type="text/css" href="style/' + ((ua.charAt(uaie+5)=='5')?'styleie5':'styleother') + '.css">'
</script>

-- og her i en version, som kun tilføjer et stylesheet, hvis det ikke er IE6 !-)
Avatar billede anettegrubbe Nybegynder
29. april 2004 - 08:14 #21
Hej Roenving

Du skal have mange gange tak for hjælpen! Jeg kan godt se, hvad du mener, men det virker bare ikke hos mig ...
Jeg må vist have få en anden til at lave det for mig ...

/Anette
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 19:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
10/0821:30 Blokeret på Snapchat? Af LineP i Chat & Messaging
09/0816:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
White papers
Flere white papers »