Question

I'm working on my first ever page. I'm using HTML and CSS only.

I've been using external style sheets, and checking as I go in both Chrome and IE. Having finished the first 2 pages I have now checked in Firefox and Safari. It needed a few tweaks in FF which were easy enough, but in Safari it's rendering my CSS pretty differently.

Here is my html for the navigation and header part, that I'm mainly having an issue with:

<div id="logo">  <img src="images/logo no name.jpg" style="width: 50px">           </div>

<div id="jlc">   James Lucas Coaching    </div>

<div id="menu">     <nav>

                    <ul>
                    <li class="here">Home</li>
                    <li class ="coming"><span title="Coming soon!"><a>The Coach</a></li>
                    <li class="coming"><span title="Coming soon!"><a>The Process</a></li>  
                    <li class="coming"><span title="Coming soon!"><a>Packages</a></li>
                    <li><a href="Ccontact.html">Contact</a></li> 
                    </ul>
        </nav> </div>

</div>

And the CSS:

#top {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
min-width: 688px;
height: 10%;
padding-left: 1%;}

#logo {
padding-top: 2%;
margin-top: none; 
width: 100%;
min-width: 45px;
-webkit-box-align: center;}

#jlc {
font-family:'Amatic SC', cursive;
font-size: 6.5vh;
color: #4c5d71;
width: 33%; 
min-width: 260px;
margin: none !important;}

#menu {
display: flex;
display: -webkit-flex;
-webkit-box-align: center;
align-items: center;
align-self: flex-end;
justify-content: flex-end;
width: 60%;
min-width: 800px;
float: right !important;
padding: 0% 0% 0% 0%;
margin: 0% 0% 0% 0%;}

ul {

float: right;
width: 100%;
padding-left: 9%;
padding-right: none !important;}


nav {
display: flex;
justify-content: flex-end;
float: right;}

li {

font-family: 'Cabin Sketch', cursive;
font-weight: 700;
font-size: 28px;
padding: 0vh 2vh 0vh 2vh;}

I realise I have probably made a complete rookie error, but for the life of me can't see what it is. As you can see I have started with an attempt at using -webkit- vendor prefixes, but they make no different. And when I added display: -webkit-flex; to #top it disappeared entirely.

I was thinking maybe I can set up a style sheet solely for Safari and then fix these bugs? However this seems a bit long winded, and I've read on here that 'browser sniffing' or whatever it's called is frowned upon.

Further down my homepage I've got another flexbox element that is not behaving as intended in Safari, but hopefully I will be able to work that bit out based on your suggestions for the above.

Please go easy on me! All help appreciated.

Answer 1

close your span tags with </span> and you have an extra </div> at the end aslo your jpeg logo name has spaces, add - or take out the spaces

#top {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  min-width: 688px;
  height: 10%;
  padding-left: 1%;
}

#logo {
  padding-top: 2%;
  margin-top: none;
  width: 100%;
  min-width: 45px;
  -webkit-box-align: center;
}

#jlc {
  font-family: 'Amatic SC', cursive;
  font-size: 6.5vh;
  color: #4c5d71;
  width: 33%;
  min-width: 260px;
  margin: none !important;
}

#menu {
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center;
  align-self: flex-end;
  justify-content: flex-end;
  width: 60%;
  min-width: 800px;
  float: right !important;
  padding: 0% 0% 0% 0%;
  margin: 0% 0% 0% 0%;
}

ul {
  float: right;
  width: 100%;
  padding-left: 9%;
  padding-right: none !important;
}

nav {
  display: flex;
  justify-content: flex-end;
  float: right;
}

li {
  font-family: 'Cabin Sketch', cursive;
  font-weight: 700;
  font-size: 28px;
  padding: 0vh 2vh 0vh 2vh;
}

<div id="logo"> <img src="http://static1.squarespace.com/static/5473473ce4b01917866e9a9e/t/5474e24ce4b082d9d5ec8b04/1416946372557/Logo+C+Final.png" alt="coach"> </div>

<div id="jlc"> James Lucas Coaching </div>

<div id="menu">
  <nav>
    <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li><a href="#"><span>The Coach</span></a></li>
      <li><a href="#"><span>Process</span></a></li>
      <li><a href="#"><span>Packages</span></a></li>
      <li><a href="Ccontact.html">Contact</a></li>
    </ul>
  </nav>
</div>

CSS rendering totally differently in Safari

1 个答案: