The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
pandy
post Feb 21 2020, 05:55 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Senmo5865
post Feb 25 2020, 04:25 AM
Post #3





Group: Members
Posts: 2
Joined: 21-February 20
Member No.: 27,180



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2020, 10:05 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 02:41 PM