The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Website works in chrome but not in Safari
Senmo5865
post Feb 21 2020, 03:53 AM
Post #1





Group: Members
Posts: 2
Joined: 21-February 20
Member No.: 27,180
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%;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
Senmo5865   Website works in chrome but not in Safari   Feb 21 2020, 03:53 AM
pandy   In what way does it fail in Safari and how does it...   Feb 21 2020, 05:55 PM
Senmo5865   In what way does it fail in Safari and how does i...   Feb 25 2020, 04:25 AM
pandy   Nah, you have two HTML errors. Error: Start t...   Feb 25 2020, 10:05 AM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 04:09 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC