3 replies [Last post]
birjolaxew
birjolaxew's picture
Offline
newbie
Last seen: 8 years 10 weeks ago
Timezone: GMT+2
Joined: 2011-08-30
Posts: 2
Points: 3

Hello there,

I have recently run into a massive problem with my website. It is to be said that I am new to HTML and CSS in general, and had to develop the entire website in 2 days, so the code is, mildly said, most likely crap. However, I managed to get it working after a lot of tweaking, Googling and pulling my hair out, and I was ready to publish it. However, as I tested it with IE, everything went down the drain. The website is nothing special, a tiling background image with another, non-tiling one on top, as well as a bit of text, an @font-face, some images and a .swf file. Below are two images of what the website should look like, and what it looks like in IE.

Website in Chrome Website in IE

My code is as follows:

index.html

<!DOCTYPE HTML>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Johan Fagerberg" />
 
    <title>AMOK</title>
	<link rel="stylesheet" href="index.css" />
</head>
<body>
	<a href="index.html"><center><img src="Logo.png" alt="AMOK Logo" /></center></a>
	<a href="index.html"><center><img src="HjemKnap.png" alt="Hjem Knap" id="HjemKnap"/></center></a>
	<a href="about.html"><center><img src="AboutKnap.png" alt="Kontakt Knap" id="AboutKnap"/></center></a>
	<a href="index.html"><center><img src="ForumKnap.png" alt="Forum Knap" id="ForumKnap"/></center></a>
 
	<center><p id="NyhedsbrevTitel">Nyheder</p></center>
 
	<center><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="MedlemmerFlash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="344" HEIGHT="285" id="Medlemmer" >
	<PARAM NAME=wmode value="transparent"><PARAM NAME=movie VALUE="Medlemmer.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#000000> <EMBED src="Medlemmer.swf" quality=high WIDTH="344" HEIGHT="285" NAME="Yourfilename" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" wmode="transparent"></EMBED> </OBJECT></center>
 
	<center><p id="OmOsTitel">Om Os</p></center>
 
	<center><p id="OmOsTekst">Lorum Ipsum</p></center>
 
	<center>
	<p id="NyhedsbrevTekst">Den seneste nyhed vil blive vist her.<br /> Når der altså er nogen.<br />Det kan være møder, etc. Kan dog maks fylde<br />4 linjer, kan linkes til længere tekst.</p>
	</center>
 
</body>
</html>

index.css

@font-face {
    font-family: 'AovelSans';
    src: url('asans-webfont.eot');
    src: url('asans-webfont.eot?#iefix') format('embedded-opentype'),
         url('asans-webfont.woff') format('woff'),
         url('asans-webfont.ttf') format('truetype'),
         url('asans-webfont.svg#AovelSans') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
body {
	background-image: url("TekstBaggrund.png"), url("NavBar.png"), url("Baggrund.png");
	background-position: 50% 0%, 50% 0%, 0% 0%;
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-attachment: scroll;
}
 
 
img#HjemKnap {
	position:relative;
	left:-100px;
	top:8px;
}
 
img#AboutKnap {
	position:relative;
	top:-25px;
}
 
img#ForumKnap {
	position:relative;
	left:100px;
	top:-57px;
}
 
p {
	font-family: AovelSans, Helvetica;
}
 
p#NyhedsbrevTitel {
	font-size: 250%;
	color: #e3e3e3;
	position:relative;
	left:-215px;
	top:350px;
}
 
p#NyhedsbrevTekst {
	color: #7d7d7d;
	position:relative;
	left:-215px;
	top: -120px;
}
 
p#OmOsTitel {
	font-size: 250%;
	color: #e3e3e3;
	position:relative;
	left:170px;
	top:-468px;
}
 
p#OmOsTekst {
	color: #7d7d7d;
	position:relative;
	top:-480px;
	left:55px;
}
 
object#MedlemmerFlash {
	position:relative;
	left:-210px;
	top: -110px;
}
 
input#NyhedsbrevFelt {
	position:relative;
	left:-210px;
	top: 15px;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

First thing you need to do is

First thing you need to do is learn more modern, semantic ways of marking up your content. You're using a HTML5 doctype and code that probably wouldn't even validate with HTML4.

You need to take a look at your HTML - every thing in it that relates to how it looks should be in the CSS. This means all the center tags have to go

Then you need to mark up your content for what it is. Your list of links should be marked up as a list. Your title should use a H1 tag.

Viewthe page with styles disabled as you make the changes. If it looks right with no styles then you're on the right track.

Verschwindende wrote:
  • CSS doesn't make pies

birjolaxew
birjolaxew's picture
Offline
newbie
Last seen: 8 years 10 weeks ago
Timezone: GMT+2
Joined: 2011-08-30
Posts: 2
Points: 3

Thank you.

Thank you very much for your reply.

I've attempted to do as you adviced, by organizing the sections into div tags, and removing all center tags. The following is my new code;

index.html

<!DOCTYPE HTML>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Johan Fagerberg" />
 
    <title>AMOK</title>
	<link rel="stylesheet" href="index.css" />
</head>
<body>
	<div id="Header">
		<a href="index.html"><img src="Logo.png" alt="AMOK Logo" id="Logo"/></a>
		<a href="index.html"><img src="HjemKnap.png" alt="Hjem Knap" id="HjemKnap"/></a>
		<a href="about.html"><img src="AboutKnap.png" alt="Kontakt Knap" id="AboutKnap"/></a>
		<a href="index.html"><img src="ForumKnap.png" alt="Forum Knap" id="ForumKnap"/></a>
	</div>
 
	<div id="Nyhedsbrev">
		<p id="NyhedsbrevTitel">Nyheder</p>
 
		<p id="NyhedsbrevTekst">Den seneste nyhed vil blive vist her.<br /> Når der altså er nogen.<br />Det kan være møder, etc. Kan dog maks fylde<br />4 linjer, kan linkes til længere tekst.</p>
	</div>
 
	<div id="Medlemmer">
		<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="MedlemmerFlash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="344" HEIGHT="285" id="Medlemmer" >
		<PARAM NAME=wmode value="transparent"><PARAM NAME=movie VALUE="Medlemmer.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#000000> <EMBED src="Medlemmer.swf" quality=high WIDTH="344" HEIGHT="285" NAME="Yourfilename" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" wmode="transparent"></EMBED> </OBJECT>
	</div>
 
	<div id="OmOs">
		<p id="OmOsTitel">Om Os</p>
 
		<p id="OmOsTekst">Lorum Ipsum</p>
	</div>
</body>
</html>

index.css>

@font-face {
    font-family: 'AovelSans';
    src: url('asans-webfont.eot');
    src: url('asans-webfont.eot?#iefix') format('embedded-opentype'),
         url('asans-webfont.woff') format('woff'),
         url('asans-webfont.ttf') format('truetype'),
         url('asans-webfont.svg#AovelSans') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
body {
	background-image: url("TekstBaggrund.png"), url("NavBar.png"), url("Baggrund.png");
	background-position: 50% 0%, 50% 0%, 0% 0%;
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-attachment: scroll;
}
 
img#Logo {
	display:block;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	top:-15px;
}
 
img#HjemKnap {
	display:block;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	left:-100px;
	top:0px;
}
 
img#AboutKnap {
	display:block;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	top:-27px;
}
 
img#ForumKnap {
	display:block;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	left:100px;
	top:-54px;
}
 
p {
	font-family: AovelSans, Helvetica;
	text-align: center;
}
 
p#NyhedsbrevTitel {
	text-align: center;
	font-size: 250%;
	color: #e3e3e3;
	position:relative;
	left:-215px;
	top:367px;
}
 
p#NyhedsbrevTekst {
	color: #7d7d7d;
	position:relative;
	left:-205px;
	top: 353px;
}
 
p#OmOsTitel {
	font-size: 250%;
	color: #e3e3e3;
	position:relative;
	left:170px;
	top:-533px;
}
 
p#OmOsTekst {
	color: #7d7d7d;
	position:relative;
	top:-550px;
	left:55px;
}
 
object#MedlemmerFlash {
	display:block;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	left:-210px;
	top: -200px;
}

I've also, as you adviced, attempted to view the page with styles disabled, and it looks pretty good. However, the background still doesn't display, for whatever reason. Any future help would be appreciated.

Thanks in advance.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Which version of IE? It's

Which version of IE? It's probably because you're using multiple background images. I think it's only v9 of IE that supports this - Firefox has had it since version 3.6 (a year and a half ago) Tongue

Verschwindende wrote:
  • CSS doesn't make pies