Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Website works in chrome but not in Safari

Posted by: Senmo5865 Feb 21 2020, 03:53 AM

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%;
}

Posted by: pandy Feb 21 2020, 05:55 PM

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/

Posted by: Senmo5865 Feb 25 2020, 04:25 AM

QUOTE(pandy @ Feb 21 2020, 11:55 PM) *

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/


I made a new design with way less code but it still doesn't work.

Code html:

<!doctype html>
<html>
<head>
<title>C-Tech | Standard</title>
<link rel="stylesheet" type="text/css" href="../STIJL/aaStandard.css">
</head>
<header>
<h1><a href="Home.html" style="text-decoration: none">C-Tech</a></h1>
</header>
<body>
<div id="Main">
<div id="Menu">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="Producten.html">Producten</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Teamviewer.html">Teamviewer</a></li>
</ul>
</div>
</div>
</body>
<footer>Designed by Senne Mollez</footer>
</html>

Code css:

/*Code Kader*/
#Main{
width: 1220px;
height: 620px;
margin-left: auto;
margin-right: auto;
border-width: 4px;
border-color: black;
border-style: solid;
}

/*Code Titel*/
h1,header a:visited{
font-family: Helvetica;
text-align: center;
font-size: 50px;
color: dodgerblue;
/* no hyperlink*/
text-decoration: none;
}

/*Code Menu*/
#Menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

#Menu li {
float: left;
}

#Menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
#Menu li a:hover {
background-color: #111;
}

/*shows the current page*/
#Menu .active {
background-color: #4CAF50;
}

so i did validate the code and it was correct.
The thing is when i open in chrome i can see the navigator bar.
But when i open it in safari i just see a bunch of hyperlinks without any layout. so no navigator bar.

Posted by: pandy Feb 25 2020, 10:05 AM

Nah, you have two HTML errors.

CODE
Error: Start tag body seen but an element of the same type was already open.
From line 10, column 5; to line 10, column 10


That's this bit.

CODE
    </head>
    <header>
        <h1><a href="Home.html" style="text-decoration: none">C-Tech</a></h1>
    </header>
    <body>


You have placed HEADER between the closing tag for HEAD and the start tag for BODY. Nothing can go there. The validator expresses it as it does because the BODY tags are optional (but should be used IMO). So when it sees HEADER that should be in BODY it assumes BODY has begun and instead complains about the BODY tag you do have as it sees it as a duplicate.

Then you have this.
CODE
Error: Stray start tag footer.
From line 22, column 5; to line 22, column 12


That's here.

CODE
    </body>
    <footer>Designed by Senne Mollez</footer>
</html>


That's easier to understand. Nothing goes after the closing tag for BODY except the closing tag for HTML.

It helps to see HTML elements as containers. Because that's what they really are. Everything is inside HTML. Then the document is split in HEAD, that contains meta information like TITLE, links to external files and so on, and BODY, that contains everything you see on the page. The doctype isn't really part of HTML and is at top of it all.

See if correcting that helps. I don't really expect it to make your problem with Safari go away, but you never know.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)