5 replies [Last post]
larskfischer
larskfischer's picture
Offline
newbie
Last seen: 5 years 30 weeks ago
Timezone: GMT+1
Joined: 2014-02-08
Posts: 4
Points: 5

I am a complete newbie at css and Html
I am working on a webpage and it looks good in firefox and chrome but I cannot get Ie11 to show it correctly. It looks like Ie11 cannot find the "main" external stylesheet...

Can anyone see the error? And please let me know, if there are other issues with the code. I would like to learn.

Greetings lars
Denmark

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Velkommen til Heartbeats hjemmeside</title>
<style type="text/css"></style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="_css/main.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
 
<body>
<div id="container">
 
<div id="header">
  <p><img src="Pictures/Head-For.jpg" width="1200" height="231"></p>
</div>
<div id="Navigation">
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#">Heartbeat</a>    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Vi tilbyder</a>
      <ul>
<li><a href="#">Liv i byen</a></li>
        <li><a href="#">Workshop</a></li>
        <li><a href="#">Skolekoncert</a></li>
        <li><a href="#">Heartbeatshow</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Firmaevents</a>
      <ul>
        <li><a href="#">Teambuilding</a></li>
        <li><a href="#">Kickstart konferencen</a></li>
        <li><a href="#">Stompevent</a></li>
        <li><a href="#">Heartbeatshow</a></li>
      </ul>
    </li>
    <li><a href="#">Kalender</a></li>
  <li><a href="#" class="MenuBarItemSubmenu">Media</a>
    <ul>
      <li><a href="#">Galleri</a></li>
      <li><a href="#">Filmklip</a></li>
    </ul>
  </li>
<li><a href="#">Lms</a></li>
  <li><a href="#" class="MenuBarItemSubmenu">Kun for b&oslash;rn</a>
    <ul>
      <li><a href="#">L&aelig;r et bodybeat</a></li>
      <li><a href="#">Byg en stompbalje</a></li>
      <li><a href="#">Hej med jer</a></li>
    </ul>
  </li>
  <li><a href="#">Pressekit</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Referencer</a></li>
  </ul>
  <img src="Pictures/fb.png" width="25" height="25" alt="Facebook">
  <p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
 
<div id="Indhold">
  <div id="Indholdsbaggrund">
  	<div id="indholdvenstre">
  	  <h1>Stomp- og performancegruppen HeartBeat</h1>
  	  <p> er fire unge, sprælske musikere fyldt med spilleglæde. </p>
  	  <p> De leverer en alsidig koncertoplevelse, der bobler af begejstring. Avancerede rytmer præsenteres legende let, mens scenen fyldes af sang, rap, teater og stomp. Stomp er 			musik på alt andet end gængse instrumenter, og der spilles på hvad som helst. </p>
  	  <p>Med hjertevarme og glimt i øjet stråler HeartBeat langt ud over scenekanten og tryllebinder børnene, der undervejs inviteres til at deltage med klap og bodybeat. For 							hvert et trommeslag – hvert et hjerteslag - breder smilet sig til op over begge ører. </p>
  	  <p>&nbsp; </p>
  	  <h1>Om HeartBeat</h1>
      <p>Vi er fire unge, sprælske musikere sprængfyldt med  spilleglæde, i alderen 23 til 34 år. Vi har spillet sammen i ca. 18 år og har  turneret som stomp-gruppe siden 2009. </p>
      <p> Vores forkærlighed for rytmer og vores begejstring for at  lave musik på alt andet end almindelige instrumenter, har fået os til at elske  stomp-genren. Men på grund af vores store vægt på performance-delen synes  stomp-begrebet en smule snævert til at beskrive vores underholdning. Hvert nummer  har sin egen fortælling, ofte helt uden ord. På den måde danner musikken  rammen, mens mimikken er historiefortælleren.</p>
      <p> Højenergisk stomp og humoristisk skuespil med et kærligt  tvist rammer alle aldre. Vi er derfor blevet brugt til mange forskellige arrangementer  igennem de sidste fem år. Vi har givet et væld  af skole- og familiekoncerter og spillet til byfester, indvielser, store  konferencer, firmafester og reklamespots.</p>
<p>&nbsp;</p>
  	  <p>&nbsp;</p>
    </div>
 
  <div id="indholdhoejre">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><img src="Pictures/foodfight.jpg"></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><img src="Pictures/Nils.jpg">    </p>
  </div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
 
<p>&nbsp;</p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</div>
</body>
</html>

@charset "utf-8";
 
 
 
#container {
    width: 1200px;
	max-width: 90%;
    margin: 0 auto; /*this centers the page */
}
 
body {
	background-color: #000000;
	font-family: "Tw Cen MT", Arial, sans-serif;
	font-size: 1em;
	letter-spacing: 0.08em;
	color: rgba(0,0,0,1);
}
 
h1 {
	color: #000000;
	font-size: 1.2em;
	font-weight: lighter;
	font-style: normal;
	letter-spacing: 0.1em;
}
 
 
#header {
	width: 1200px;
	max-width: 90%;
	margin-right: auto;
	margin-left: auto;
	background-size: contain;
	background-repeat: no-repeat;
	/* [disabled]margin-top: 0px; */
	margin-bottom: -20px;
}
#header p img {
	width: 100%;
	height: auto;
}
 
#Navigation {
	float: none;
	width: 1200px;
	max-width: 90%;
	margin-right: auto;
	margin-left: auto;
	color: rgba(255,255,255,1);
	overflow: hidden;
	/* [disabled]margin-top: -100px; */
	margin-bottom: -190px;
	position: relative;
}
 
 
#Indhold {
	width: 1200px;
	max-width: 90%;
	margin-right: auto;
	margin-left: auto;
	z-index: 2;
	font-family: Arial, Helvetica, sans-serif;
	background-color: rgba(94,94,96,1);
	width: 1200px;
	/* [disabled]padding-left: 50px; */
	position: relative;
	/* [disabled]padding-top: 50px; */
}
 
#Indholdsbaggrund {
	max: 100%;
	margin-right: auto;
	margin-left: auto;
	z-index: 1;
	background-image: url(../Pictures/Battle2.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top;
	padding-top: 50px;
}
#indholdvenstre {
	float: left;
	width: 44%;
	padding-left: 4%;
	/* [disabled]padding-top: 70px; */
	padding-right: 2%;
	padding-bottom: 20px;
	/* [disabled]font-weight: bold; */
}
 
 
#indholdhoejre {
	float: right;
	width: 46%;
	padding-right: 2%;
	padding-left: 2%;
	/* [disabled]padding-top: 70px; */
	padding-bottom: 20px;
	text-align: center;
}
#Navigation img {
	float: right;
	bottom: 0px;
	margin-top: 5px;
}
 
#Indhold #Indholdsbaggrund #indholdhoejre img {
	left: auto;
	right: auto;
	width: 60%;
	max-width: 302px;
	/* [disabled]padding-bottom: 20px; */
	text-align: center;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 15 hours 7 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi larskfischer, Make sure

Hi larskfischer,
Make sure you validate your styles and markup any errors can cause browsers to ignore big sections of code.

larskfischer
larskfischer's picture
Offline
newbie
Last seen: 5 years 30 weeks ago
Timezone: GMT+1
Joined: 2014-02-08
Posts: 4
Points: 5

Validated

Hi Tony
Thanks for your answer. I validated the Html and the css documents.
There were some minor details, but correcting it did not solve my problem.
I am getting really desperate:-(

larskfischer
larskfischer's picture
Offline
newbie
Last seen: 5 years 30 weeks ago
Timezone: GMT+1
Joined: 2014-02-08
Posts: 4
Points: 5

Validated

Hi Tony
Thanks for your answer. I validated the Html and the css documents.
There were some minor details, but correcting it did not solve my problem.
I am getting really desperate:-(

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 15 hours 7 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Is it working in other IE

Is it working in other IE versions?
Make sure that the page isn't putting the browser into quirks mode.
Can you explain the difference between IE and the other browsers more carefully. Are all the styles in the main stylesheet being ignored?

larskfischer
larskfischer's picture
Offline
newbie
Last seen: 5 years 30 weeks ago
Timezone: GMT+1
Joined: 2014-02-08
Posts: 4
Points: 5

Hi Tony I tried to upload the

Hi Tony
I tried to upload the page to a webserver and now it shows correctly in Ie11...
Strange.
Maybe it had something to do with the security settings.
But - it is working now.

Thank you for your interest in my problem.
Lars.