Forum Mjukvara Programmering och digitalt skapande Tråd

Är det Doctypes som krabbar?

1
Skriv svar
Permalänk
Medlem
●

Är det Doctypes som krabbar?

Jag har problem med att det blir lite olika i Firefox, Chrome och Internet Explorer. Jag antar att det har att göra med Doctypes. Någon som vet hur jag ska gå till väga? Om det är att jag ska använda mig av en speciell doctype, skriv den här så vore det schysst. Har googlat och de säger "använd denna", men det funkar inte vidare bättre.

Chrome:

Firefox

Internet Explorer

Uploaded with ImageShack.us

HTML-kod

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title> Välkommen till Karlshamns Zoologiska AB </title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link href="mincss.css" type="text/css" rel="stylesheet" />
	</head>
<body>

<div class="Main1">

<div class="header">
	<div class="logo">
	</div>
</div>

<div class="gron">


</div>
</div>
<div class="Main">




	<div class="huvudbox">
		<div id='cssmenu'>
		
<ul>
   <li class='active '><a href='index.html'><span>Hem</span></a></li>
   <li class='has-sub '><a href='#'><span>Djur</span></a>
      <ul>
			<li class='active'><a href='#'><span> Katt </span></a>
			<li><a href='#'><span>Hund</span></a></li>
			<li><a href='#'><span>Fågel</span></a></li>
			<li><a href='#'><span>Fisk</span></a></li>
			<li><a href='#'><span>Smådjur</span></a></li>
			</li>
         <!-- <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li> -->
      </ul>
   </li>
   <li><a href='#'><span>Erbjudande</span></a></li>
   <li><a href='#'><span>Kontakt</span></a></li>
   <li><a href='#'><span>Om oss</span></a></li>
</ul>
</div>

	   
		<h1> Välkommen till Karlshamns Zoologiska AB </h1>
		<div class="nyheter">
			<div class="Content">
				<h2> Nyheter </h2>				
				<div id="underline">
				</div>
				<div class="NyheterContent">
					
					<p>2012-10-25</br><u><b>Mocolony i Staffanstorp
					i nya lokaler</u></b></br>
					Mocolony i Staffanstorp 
					nyöppnar</br> i nya lokaler som
					ligger i</br> Rondellens handels-
					område. Butiken är nu 575 kvm
					och superfräsch. Monica 
					välkomnar</br> nya och gamla.</br><a href="#"> <b><u>Läs mer</b></u></a></p></br>
					<div id="underline">
					</div>
					<p> 2012-10-13</br><u><b>Ny tidning ute</u></b></br>
					Nu finns en ny tidning ute!</br>
					Som vanligt innehåller den
					massor av bra erbjudande,
					välkommen</br>in i din butik. 
					Har du inte fått den</br> i din butik
					brevlåda, så finns</br> den är på</br><a href="#"> <b><u>Läs mer</b></u></a></p></br>
					<div id="underline">
					</div>
					</br>
					<a href="#"><b>Alla nyheter</b></a>
					
				</div>
			</div>
		</div>
		
		<iframe name="namn" src="https://www.facebook.com/plugins/like.php?href=https://www.fa..."
        scrolling="no" frameborder="0" width='165px' height='80px'>
       </iframe>
		<div class="mainContent">
			<p> Karlshamns Zoologiska är en väletablerad djuraffär i centrala Karlshamns </br>med många års erfarenhet inom branchen. Här kan ni hitta information om</br> de mest populära produkterna just nu, erbjudanden och nyheter i butiken.</br></br>Mvh Personalen på Karlshamns Zoologiska</p>
		</div>
		<div class="framsida">
		</div>
	</div>
	
	

	<div class="copy">
		<p> © Karlshamns Zoologiska AB | Drottningsgatan 44, Karlshamn | Telefon: 0454-182 90 | Fax: 0454- 151 77 </p>
	</div>
</div>
</body>
</html>

CSS:

body{
	background-color: #f2f2d9;
	margin: 0px;
}

.Main{
	width: 1060px;
	margin: 0px auto;
}

h1{
	position: absolute;
	margin-left: 230px;
	font-size: 30px;
	color: #262626;
	font-weight: bold;
	margin-top: 10px;
	font-weight: lighter;
}


.nyheter{
	width: 250px;
	height: 500px;
	margin-left: 800px;
	position: absolute;
	background-color: #639f5d;
	-moz-border-radius: 12px;
	border-radius: 12px;
	margin-top: 8px;
}

.Content{
	height: 500px;
	color: white;
	font-family: Helvetica, Arial, sans-serif;
	text-transform: none;
	text-shadow: 0 1px 1px #000; 
	font-weight: 300;
	margin-left: 15px;
}

.NyheterContent{
	font-size: 15px;
	height: 400px;
}

.NyheterContent a{
	color: white;
	font-family: Helvetica, Arial, sans-serif;
	text-transform: none;
	text-shadow: 0 1px 1px #000;
	font-weight: 300;
}

#underline{
	height: 2px;
	width: 220px;
	margin-top: -15px;
	background-color: #f2f2d9;
}

.header{
	background-color: white;
	height: 152px;
}

.framsida{
	background-image: url(djuraff.jpg);
	width: 490px;
	height: 367px;
	margin: 0px auto;
	margin-top: 50px;
	margin-left: 240px;
}

.copy{
	height: 50px;
	width: 1060px;
	background-color: white;
	position: absolute;
	margin: 0px auto;
	margin-top: 5px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

.copy > p{
	text-align: center;
}

iframe{
	margin-top: 240px;
	margin-left: 10px;
}

.mainContent{
	width: 600px;
	margin-left: 234px;
	margin-top: -250px;
	font-size: 17px;
}

.logo{
	background-image: url(header3.png);
	height: 150px;
	width: 1060px;
	margin: 0px auto;
	
}

.huvudbox{
	background-color: white;
	height: 650px;
	width: 1060px;
	margin: 0px auto;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

.gron{
	background-color: #639f5d;
	height: 12px;
}

/* Some stylesheet reset */
#cssmenu > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	line-height: 1;
}

/* The container */
#cssmenu > ul {
	display: block;
	position: absolute;
	width: 150px;
	margin-top: 10px;
	margin-left: 8px;
}

	/* The list elements which contain the links */
	#cssmenu > ul li {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		width: 150px;
	}

		/* General link styling */
		#cssmenu > ul li a {
			/* Layout */
			display: block;
			position: relative;
			margin: 0;
			border-top: 0px solid #3a3a3a;
			border-bottom: 0px solid #1b1b1b;
			padding: 11px 20px;
			width: 130px;

			/* Typography */
			font-family: Helvetica, Arial, sans-serif;
			color: white;
			text-decoration: none;
			text-transform: none;
			text-shadow: 0 1px 1px #000;
			font-size: 17px;
			font-weight: 300;

			/* Background & effects */
			background: #639f5d;
		}

		/* Rounded corners for the first link of the menu/submenus */
		#cssmenu > ul li:first-child>a {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			border-top: 0;
		}

		/* Rounded corners for the last link of the menu/submenus */
		#cssmenu > ul li:last-child>a {
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			border-bottom: 0;
		}


		/* The hover state of the menu/submenu links */
		#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
			color: #fff;
			text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
			background-color: #6eba76;
			/*background: -webkit-linear-gradient(bottom, #ade5a7, #f23f37);
			background: -ms-linear-gradient(bottom, #f23f37, #f45d57); 
			background: -moz-linear-gradient(bottom, #f23f37, #f45d57);
			background: -o-linear-gradient(bottom, #f23f37, #f45d57);
			border-color: transparent;
			*/
		}

		/* The arrow indicating a submenu */
		#cssmenu > ul .has-sub>a::after {
			content: '';
			position: absolute;
			top: 16px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #d8d8d8; 
		}

		/* The same arrow, but with a darker color, to create the shadow effect */
		#cssmenu > ul .has-sub>a::before {
			content: '';
			position: absolute;
			top: 17px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #000;
		}

		/* Changing the color of the arrow on hover */
		#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
			border-left: 4px solid #fff;
		}

		#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
			border-left: 4px solid rgba(0, 0, 0, .3);
		}

	
		/* THE SUBMENUS */
		#cssmenu > ul ul {
			position: absolute;
			left: 170px;
			top: -9999px;
			padding-left: 5px;
			opacity: 0;
			/* The fade effect, created using an opacity transition */
			-webkit-transition: opacity .3s ease-in;
			-moz-transition: opacity .3s ease-in;
			-o-transition: opacity .3s ease-in;
			-ms-transition: opacity .3s ease-in;
		}

		/* Showing the submenu when the user is hovering the parent link */
		#cssmenu > ul li:hover>ul {
			top: 0px;
			opacity: 1;
		}
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Här har du felet:

<li class='active'>
    <a href='#'><span> Katt </span></a>
    <li><a href='#'><span>Hund</span></a></li>
    <li><a href='#'><span>Fågel</span></a></li>
    <li><a href='#'><span>Fisk</span></a></li>
    <li><a href='#'><span>Smådjur</span></a></li>
</li>

Flytta den sista avslutande li så att den ligger efter katt så här:

<li class='active'><a href='#'><span> Katt </span></a></li>
<li><a href='#'><span>Hund</span></a></li>
<li><a href='#'><span>Fågel</span></a></li>
<li><a href='#'><span>Fisk</span></a></li>
<li><a href='#'><span>Smådjur</span></a></li>
Senast redigerat
Visa signatur

Mina poster är en illusion. Det som står skrivet här över står i själva verket inte där så inget av det som du läser är sant. Inte ens den här texten. Jag har själv ingen kunskap om det jag skriver och ingen bör således läsa eller ta in den information som står skrivet.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Hittade också felet ganska fort mha. notepad ++. Och det är ju "</li>" som hamnat fel. Vad använder du för texteditor när du kodar? Notepad++ är riktigt smart. Då du placerar markören i en tagg som börjar, färgar den även taggen som avslutar. Vilket gör att du ganska fort borde sett vad som är fel. Vill minnas att dreamweaver som kostar dyrt inte klarar det, bland annat.

Troligtvis så kompenserade firefox och chrome för felet medan internet explorer var dum.

Visa signatur

Car pc (bygglogg) | Fishtank server (galleri) | HTPC (galleri)

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av jocke92:

Hittade också felet ganska fort mha. notepad ++. Och det är ju "</li>" som hamnat fel. Vad använder du för texteditor när du kodar? Notepad++ är riktigt smart. Då du placerar markören i en tagg som börjar, färgar den även taggen som avslutar. Vilket gör att du ganska fort borde sett vad som är fel. Vill minnas att dreamweaver som kostar dyrt inte klarar det, bland annat.

Troligtvis så kompenserade firefox och chrome för felet medan internet explorer var dum.

Gå till inlägget

Jag använder också Notepad++.

Jag kan dock rekommendera att du försöker städa upp koden och använder indentering överallt.
Då kan du ofta snabbt se sådana här fel.

Senast redigerat
Visa signatur

Mina poster är en illusion. Det som står skrivet här över står i själva verket inte där så inget av det som du läser är sant. Inte ens den här texten. Jag har själv ingen kunskap om det jag skriver och ingen bör således läsa eller ta in den information som står skrivet.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av rumpnisse:

Här har du felet:

<li class='active'>
    <a href='#'><span> Katt </span></a>
    <li><a href='#'><span>Hund</span></a></li>
    <li><a href='#'><span>Fågel</span></a></li>
    <li><a href='#'><span>Fisk</span></a></li>
    <li><a href='#'><span>Smådjur</span></a></li>
</li>

Flytta den sista avslutande li så att den ligger efter katt så här:

<li class='active'><a href='#'><span> Katt </span></a></li>
<li><a href='#'><span>Hund</span></a></li>
<li><a href='#'><span>Fågel</span></a></li>
<li><a href='#'><span>Fisk</span></a></li>
<li><a href='#'><span>Smådjur</span></a></li>
Gå till inlägget

Tack så mycket, det funkar i Internet Explorer och Chrome, men i Firefox blir "Alla nyheter" längst ner i Nyheter boxen utan för, och sen blir skuggan på texten olika i Firefox och Internet Explorer, text snitt, osv. Hur ska man gå till väga då?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av rumpnisse:

Jag använder också Notepad++.

Jag kan dock rekommendera att du försöker städa upp koden och använder indentering överallt.
Då kan du ofta snabbt se sådana här fel.

Gå till inlägget

Jag använder Notepad++, men har inte pallat städa upp, haha

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Adam.E:

bump

Gå till inlägget

Värt att bumpa [fy!] mitt i natten när bara zombies och fyllon är vakna.

Som svar på din fråga, det finns två doctypes: rätt och fel. Rätt är en doctype som triggar "standards mode", fel är vilken annan som helst.

Rätt doctype stavas <!DOCTYPE html> (eller som en av de andra, det spelar faktiskt ingen roll)

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Teknocide:

Värt att bumpa [fy!] mitt i natten när bara zombies och fyllon är vakna.

Som svar på din fråga, det finns två doctypes: rätt och fel. Rätt är en doctype som triggar "standards mode", fel är vilken annan som helst.

Rätt doctype stavas <!DOCTYPE html> (eller som en av de andra, det spelar faktiskt ingen roll)

Gå till inlägget

Okej tack, men som jag skrev tidigare till en annan var att "Alla nyheter" längst ner i Nyheter boxen blir utan för på Firefox, och skuggor osv. i Firefox och Internet Explorer blir inte som i Chrome. Vet du vad felet kan vara?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Adam.E:

Okej tack, men som jag skrev tidigare till en annan var att "Alla nyheter" längst ner i Nyheter boxen blir utan för på Firefox, och skuggor osv. i Firefox och Internet Explorer blir inte som i Chrome. Vet du vad felet kan vara?

Gå till inlägget

Ja, du har satt fast höjd på NyheterContent. Standard overflow är visible. (det har ingenting att göra med doctype, bara dålig CSS)

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Teknocide:

Ja, du har satt fast höjd på NyheterContent. Standard overflow är visible. (det har ingenting att göra med doctype, bara dålig CSS)

Gå till inlägget

Tack, jag såg det, jag är inte helt 100 på om det var doctype eller inte. Jag är inte den bästa på att felsöka detta, haha Jag har fått det att funka med att den stannar inne i boxen i alla webläsare, men ett litet problem till....

Uploaded with ImageShack.us

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara