Div ligger inte där den ska i Explorer! Help!

Permalänk
Medlem

Div ligger inte där den ska i Explorer! Help!

Tjena, läser webbutveckling 1 på gymnasiet och nu är våran uppgift att göra en valfri hemsida med lite olika funktioner, den ska funka till Chrome, Firefox och Explorer, fast jag har fastnat vid ett ställe ganska tidigt, en box ligger där den ska i Explorer, i chrome och firefox sitter den som den ska. Undrar ifall någon kan ta en titt på koden o kolla vad jag har gjort fel? Tack!

<!doctype html> <html> <head> <meta charset="utf-8"> <title>ESP</title> <link href="design.css" rel="stylesheet" type="text/css"> </head> <body> <main> <header></header> <nav> <a><img src="Home.png"</a> <a><img src="store.png"</a> <a><img src="gallery.png"</a> <a><img src="about.png"</a> <a><img src="contact.png"</a> </nav> <section> </section> <aside> </aside> <article> </article> <footer> </footer> </main> </body> </html>

CSS:

@charset "utf-8"; /* CSS Document */ body { background: url(background.png) no-repeat; } main { height: 1500px; width: 1425px; margin-right: auto; margin-left: auto; } header { width: 400px; height: 200px; margin-left: auto; margin-right: auto; background-image: url(ESP.png) } nav { width: 1000px; height: 80px; margin-left: auto; margin-right: auto; background: rgba(20, 20, 20, 0.9); } Nav img { margin-left: 28px; margin-top: 15px; } section { width: 1000px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 10px; background: rgba(20, 20, 20, 0.9); } article { margin-top: 10px; width: 1000px; height: 1000px; margin-left: auto; margin-right: auto; background: rgba(20, 20, 20, 0.9); } aside { width: 200px; height: 300px; margin-right: auto; background: rgba(20, 20, 20, 0.9); float: right; margin-left: auto; margin-top: 10px; } footer { width: 1000px; height: 150px; background: rgba(20, 20, 20, 0.9); margin-left: auto; margin-right: auto; margin-top: 10px; }

Lade till koduppmärkning.
Permalänk
Medlem

Ska vi gissa vilket element som ligger fel, eller kan du bidra med namn & bild på felet?

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Medlem
Skrivet av Ibas:

Tjena, läser webbutveckling 1 på gymnasiet och nu är våran uppgift att göra en valfri hemsida med lite olika funktioner, den ska funka till Chrome, Firefox och Explorer, fast jag har fastnat vid ett ställe ganska tidigt, en box ligger där den ska i Explorer, i chrome och firefox sitter den som den ska. Undrar ifall någon kan ta en titt på koden o kolla vad jag har gjort fel? Tack!

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESP</title>

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

<body>
<main>
<header></header>
<nav>
<a><img src="Home.png"</a>
<a><img src="store.png"</a>
<a><img src="gallery.png"</a>
<a><img src="about.png"</a>
<a><img src="contact.png"</a>
</nav>

<section>

</section>
<aside>

</aside>
<article>

</article>
<footer>

</footer>
</main>
</body>
</html>

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

CSS:

@charset "utf-8";
/* CSS Document */
body
{
background: url(background.png) no-repeat;
}
main
{
height: 1500px;
width: 1425px;
margin-right: auto;
margin-left: auto;
}
header
{
width: 400px;
height: 200px;
margin-left: auto;
margin-right: auto;
background-image: url(ESP.png)
}

nav
{
width: 1000px;
height: 80px;
margin-left: auto;
margin-right: auto;
background: rgba(20, 20, 20, 0.9);
}
Nav img
{
margin-left: 28px;
margin-top: 15px;
}
section
{
width: 1000px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: rgba(20, 20, 20, 0.9);
}
article
{
margin-top: 10px;
width: 1000px;
height: 1000px;
margin-left: auto;
margin-right: auto;
background: rgba(20, 20, 20, 0.9);
}
aside
{
width: 200px;
height: 300px;
margin-right: auto;
background: rgba(20, 20, 20, 0.9);
float: right;
margin-left: auto;
margin-top: 10px;
}
footer
{
width: 1000px;
height: 150px;
background: rgba(20, 20, 20, 0.9);
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}

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

Dold text

Ett tips är att lägga koden i en spoiler tagg, sen kanske du ska läsa igenom din text, som du har skrivit nu är det ju inget fel alls;)

Visa signatur

Falling In Reverse - Game Over

"Midway upon the journey of our life I found myself within a forest dark, For the straightforward pathway had been lost."

Permalänk
Medlem

Här kommer ett par tips på hur du kan förbättra din webbsida

  • Använd gemener i filnamn när du kodar för att göra sökvägar mer lättlästa. Flera av dina filnamn innehåller versaler

  • Ibland kan det löna sig att spara bilder för webben som t.ex. jpg (cirka 80% kvalité) för att minska storleken. Är bilderna däremot genomskinliga eller har transparent bakgrund så måste filformatet vara png

  • När man använder rgba så bör man ha en fallback för webbläsare som inte kan hantera rgba

  • Använd aldrig <a> utan att ange vart länken skall pekas. Detta gör du genom att lägga till href="#"

Permalänk
Hedersmedlem
Skrivet av Curemylife:
Dold text

Ett tips är att lägga koden i en spoiler tagg, sen kanske du ska läsa igenom din text, som du har skrivit nu är det ju inget fel alls;)

Inte [spoiler][/spoiler], men däremot

  • [code][/code], för allmän programkod

  • [html][/html], för HTML-kod

  • [php][/php], för PHP-kod (eventuellt med HTML-inslag).

Spoilertaggen är mest ett ofog i allmänhet i mina ögon . Den har sina användningsområden, som just en "spoiler" där man känner att det behövs, men den används till så mycket annat…

Jag tar mig friheten att redigera in kodtaggar i trådstarten.

Visa signatur

Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.

Permalänk
Medlem
Skrivet av Ibas:

Tjena, läser webbutveckling 1 på gymnasiet och nu är våran uppgift att göra en valfri hemsida med lite olika funktioner, den ska funka till Chrome, Firefox och Explorer, fast jag har fastnat vid ett ställe ganska tidigt, en box ligger där den ska i Explorer, i chrome och firefox sitter den som den ska. Undrar ifall någon kan ta en titt på koden o kolla vad jag har gjort fel? Tack!

<!doctype html> <html> <head> <meta charset="utf-8"> <title>ESP</title> <link href="design.css" rel="stylesheet" type="text/css"> </head> <body> <main> <header></header> <nav> <a><img src="Home.png"</a> <a><img src="store.png"</a> <a><img src="gallery.png"</a> <a><img src="about.png"</a> <a><img src="contact.png"</a> </nav> <section> </section> <aside> </aside> <article> </article> <footer> </footer> </main> </body> </html>

CSS:
[CODE]
@charset "utf-8";
/* CSS Document */
body
{
background: url(background.png) no-repeat;
}
main
{
height: 1500px;
width: 1425px;
margin-right: auto;
margin-left: auto;
}
header
{
width: 400px;
height: 200px;
margin-left: auto;
margin-right: auto;
background-image: url(ESP.png)
}

nav
{
width: 1000px;
height: 80px;
margin-left: auto;
margin-right: auto;
background: rgba(20, 20, 20, 0.9);
}
Nav img
{
margin-left: 28px;
margin-top: 15px;
}
section
{
width: 1000px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: rgba(20, 20, 20, 0.9);
}
article
{
margin-top: 10px;
width: 1000px;
height: 1000px;
margin-left: auto;
margin-right: auto;
background: rgba(20, 20, 20, 0.9);
}
aside
{
width: 200px;
height: 300px;
margin-right: auto;
background: rgba(20, 20, 20, 0.9);
float: right;
margin-left: auto;
margin-top: 10px;
}
footer
{
width: 1000px;
height: 150px;
background: rgba(20, 20, 20, 0.9);
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}

Dold text

[/CODE]

Jag är inte speciellt vass på det här med CSS, men, utan att egentligen veta vad du är ute efter, så hade jag förmodligen, själv, ändrat lite i margin. Sen kan det vara så, att det inte är boxen (som du inte berättat vilken) som är problemet. Det kan vara ett annat objekt som inte kan visas korrekt och därmed så blir det kaos hos resterande ordning. Vidare så bör du kolla browser-support. Personligen så har jag fått rätt på ganska mycket, i egna projekt, med margin: 0 auto;.

http://www.w3schools.com/cssref/css3_browsersupport.asp

Vidare har jag tidigare stött på liknande problem. Detta då jag upplevt att IE tycker bättre om % på exempel width, istället för px.
Ett annat tips är att försöka validera sidan för att se om validorn reagerar på något. Detta kan vägleda dig ganska väl. Att högerklicka för att se hur koden läses in av webbläsaren kan också vara ett alternativ.

http://jigsaw.w3.org/css-validator/

Det finns även plugins för felsökning, som är väldigt bra och användbara.
http://www.microsoft.com/en-us/download/details.aspx?id=18359
http://getfirebug.com/
https://getfirebug.com/releases/lite/chrome/

Återkom gärna med en något bättre förklaring och pekande på var du upplever felet, vilken box det gäller.

Permalänk
Medlem
Skrivet av phz:

Inte [spoiler][/spoiler], men däremot

  • [code][/code], för allmän programkod

  • [html][/html], för HTML-kod

  • [php][/php], för PHP-kod (eventuellt med HTML-inslag).

Spoilertaggen är mest ett ofog i allmänhet i mina ögon . Den har sina användningsområden, som just en "spoiler" där man känner att det behövs, men den används till så mycket annat…

Jag tar mig friheten att redigera in kodtaggar i trådstarten.

Haha tänkte jag inte ens på, skyller på -something-:)

Däremot sa jag det inte för att det just skulle bli lättare att läsa utan för att kunna överblicka svaren snabbare och ifall en lösning hade uppnåtts.

Visa signatur

Falling In Reverse - Game Over

"Midway upon the journey of our life I found myself within a forest dark, For the straightforward pathway had been lost."

Permalänk
Medlem

Hehe okej tack, är fortfarande ganska ny i forumet!

Permalänk
Medlem

Lyckades lösa problemet, vet inte direkt hur jag gjorde, men det ser likadant nu i alla 3 webbläsarna! Tack för hjälpen ändå