I made a website in html and some css just for fun.
I'm still in high school so my code might not be good.
Can someone help me why my layout works in chrome but doesn't work at all in Safari?
Here is my html code:
<!doctype html>
<html>
<head>
<title>Oefeningen boek</title>
<link rel="stylesheet" type="text/css" href="../STIJL/opmaak.css">
</head>
<body>
<div id="rand">
<div id="blok1">
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Tutorials</a></li>
<li><a href="index.html">Coding</a></li>
<li><a href="index.html">Wordpress</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>
<div id="blok2">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li>
<a href="index.html">Products<span class="caret"></span></a>
<div>
<ul>
<li><a href="index.html">Chair</a></li>
<li><a href="index.html">Table</a></li>
<li><a href="index.html">Cooker</a></li>
</ul>
</div>
</li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Help</a></li>
</ul>
</nav>
</div>
<div id="blok3">
<div class="ballon">
Dit is een tekstballon.
<br/>
Zonder afbeeldingen
</div>
</div>
<div id="blok4">
<div id="cloud">
<span class='shadow'></span>
</div>
</div>
</div>
</body>
</html>
and here is my css code:
body
{
background-color: #a7d3e6;
}
#rand
{
width: 1220px;
height: 620px;
border-style: solid;
border-width: 5px;
border-color: black;
margin-left: auto;
margin-right: auto;
}
#blok1,#blok2,#blok3,#blok4,#blok5
{
height: 300px;
width: 600px;
float: left;
border-style: solid;
border-width: 5px;
}
#blok1 ul li
{
background: #000;
list-style: none;
height: 44px;
padding: 10px 5px;
float: left;
}
#blok1 ul li a
{
display: block;
width: 175px;
height: 40px;
padding: 0px;
font-size: 18px;
font-weight: lighter;
text-align: center;
text-decoration: none;
color: #fff;
line-height: 53px;
border-bottom: 4px solid #636393;
transition: .2s all linear;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
}
#blok1 ul li:nth-child(1) a
{
border-color: #636393;
}
#blok1 ul li:nth-child(2) a
{
border-color: #B5222D;
}
#blok1 ul li:nth-child(3) a
{
border-color: #D4953C;
}
#blok1 ul li:nth-child(4) a
{
border-color: #609491;
}
#blok1 ul li:nth-child(5) a
{
border-color: #87A248;
}
#blok1 ul li:nth-child(1) a:hover
{
border-color: 35px solid #636393;
height: 9px;
}
#blok1 ul li:nth-child(2) a:hover
{
border-color: 35px solid #B5222D;
height: 9px;
}
#blok1 ul li:nth-child(3) a:hover
{
border-color: 35px solid #D4953C;
height: 9px;
}
#blok1 ul li:nth-child(4) a:hover
{
border-color: 35px solid #609491;
height: 9px;
}
#blok1 ul li:nth-child(5) a:hover
{
border-color: 35px solid #87A248;
height: 9px;
}
#blok2
{
border-color: black;
background-color: #EBE9E4;
color: #222;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 15px;
}
#blok2 nav
{
background-color: #fff;
border: 1px solid #dedede;
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0,0,0,0.255);
color: #888;
display: block;
margin: 8px 22px 8px 22px;
width: 90%;
overflow: hidden;
}
#blok2 nav ul
{
margin: 0;
padding: 0;
}
#blok2 nav ul li
{
display: inline-block;
list-style-type: none;
transition: all .2s;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
}
#blok2 nav > ul > li > a
{
color: #aaa;
display: block;
line-height: 56px;
padding: 0 24px;
text-decoration: none;
}
#blok2 nav > ul > li > a > .caret
{
border-top: 4px solid #aaa;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
display: inline-block;
height: 0;
width: 0;
vertical-align: middle;
transition: color .1s linear;
-webkit-transition: color .1s linear;
-moz-transition: color .1s linear;
-o-transition: color .1s linear;
}
#blok2 nav > ul > li:hover
{
background-color: rgb(40,44,47);
}
#blok2 nav > ul > li:hover > a
{
color: rgb(255,255,255);
}
#blok2 nav > ul > li:hover > a > .caret
{
border-top-color: rgb(255,255,255);
}
#blok2 nav > ul > li > div ul > li
{
display: block;
}
#blok2 nav > ul > li > div ul > li > a
{
display: block;
padding: 12px 24px;
text-decoration: none;
color: #fff;
}
#blok2 nav > ul > li > div ul > li:hover > a
{
background-color: color: rgb(255,255,255,0.1);
}
#blok2 nav > ul > li > div
{
background-color: rgb(40,44,47);
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 2px 2px -1px rgba(0,0,0,0.255);
margin: 0;
width: 165px;
position: absolute;
opacity: 0;
display: none;
visibility: hidden;
z-index: 100;
transition: opacity .2s;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
-moz-transition: opacity .2s;
}
#blok2 nav > ul > li > a > .caret
{
border-top: 4px solid #aaa;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
display: inline-block;
height: 0;
width: 0;
vertical-align: middle;
transition: color .1s linear;
-webkit-transition: color .1s linear;
-moz-transition: color .1s linear;
-o-transition: color .1s linear;
}
#blok2 nav > ul > li:hover
{
background-color: rgb(40,44,47);
}
#blok2 nav > ul > li:hover > a
{
color: rgb(255,255,255);
}
#blok2 nav > ul > li:hover > a > .caret
{
border-top-color: rgb(255,255,255);
}
#blok2 nav > ul > li > div ul > li
{
display: block;
}
#blok2 nav > ul > li > div ul > li > a
{
display: block;
padding: 12px 24px;
text-decoration: none;
color: #fff;
}
#blok2 nav > ul > li > div ul > li:hover > a
{
background-color: rgb(255,255,255,0,1);
}
#blok2 nav > ul > li > div
{
background-color: rgb(40,44,47);
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 2px 2px -1px rgba(0,0,0,0.255);
margin: 0;
width: 165px;
position: absolute;
opacity: 0;
display: none;
visibility: hidden;
z-index: 100;
transition: opacity .2s;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
-moz-transition: opacity .2s;
}
#blok2 nav > ul > li:hover > div
{
display: block;
opacity: 1;
visibility: visible;
}
#blok3
{
height: 270px;
width: 570px;
padding-top: 30px;
padding-left: 30px;
}
.ballon
{
font-family: Arial;
font-size: 20px;
text-align: center;
width: 300px;
background-image: linear-gradient(#0014ff,#4561d8,#6191c9);
padding: 30px;
color: white;
position: relative;
line-height: 25px;
border-radius: 50%;
}
.ballon:before
{
content: "";
display: block;
width: 20px;
height: 20px;
background-image: linear-gradient(#0014ff,#4561d8,#6191c9);
border-radius: 50%;
position: absolute;
bottom: -3px;
}
.ballon:after
{
content: "";
display: block;
width: 14px;
height: 14px;
background-image: linear-gradient(#0014ff,#4561d8,#6191c9);
border-radius: 50%;
position: absolute;
bottom: -20px;
left: 20px;
}
#blok4 #cloud
{
width: 350px;
height: 120px;
background: #f2f9fe;
background: linear-gradient(top,#f2f9fe 5%, #d6f0fd 100%);
background: -webkit-linear-gradient(top,#f2f9fe 5%, #d6f0fd 100%);
background: -moz-linear-gradient(top,#f2f9fe 5%, #d6f0fd 100%);
background: -ms-linear-gradient(top,#f2f9fe 5%, #d6f0fd 100%);
background: -o-linear-gradient(top,#f2f9fe 5%, #d6f0fd 100%);
border-radius: 100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
position: relative;
margin: 120px auto 20px;
}
#blok4 #cloud:after,#blok4 #cloud:before
{
content: "";
position: absolute;
background: #f2f9fe;
z-index: -1;
}
#blok4 #cloud:after
{
width: 100px;
height: 100px;
top: -50px;
left: 50px;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
#blok4 #cloud:before
{
width: 180px;
height: 180px;
top: -90px;
left: 130px;
border-radius: 200px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
}
.shadow
{
width: 350px;
position: absolute;
bottom: -10px;
background: #000;
z-index: -1;
box-shadow: 0 0 25px 8px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 25px 8px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 25px 8px rgba(0,0,0,0.4);
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
In what way does it fail in Safari and how does it fare in other browsers? Not on a Mac, I can't see for myself.
Meanwhile you should see to that your CSS validates.
https://jigsaw.w3.org/css-validator/
Nah, you have two HTML errors.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)