0

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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Viki Lucas
  • 1
  • 1
  • Looks like not all your flex properties have prefixes. This may help: http://stackoverflow.com/a/35137869/3597276 – Michael Benjamin Aug 31 '16 at 20:53
  • You have not closed any of your `` tags and you have an extra closing `` tag. Invalid HTML usually leads to inconsistent rendering across browsers. – Sparky Aug 31 '16 at 20:56
  • HI, thanks for your comment. I actually omitted to paste the opening div tag for the #top div. So there aren't any extra
    or
    tags. I was so excited that was the issue, but unfortunately it isn't. I'll try correcting the span tag issue.     – Viki Lucas Sep 01 '16 at 18:47
  • I've now closed my span tags, and removed spaces in the jpg name, but no change so far. I'll take a look at the link you have given michael_b and see if there is something there I can implement to improve the situation. Thank you. – Viki Lucas Sep 01 '16 at 19:02

1 Answers1

0

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>
Sparky
  • 98,165
  • 25
  • 199
  • 285
mlegg
  • 784
  • 6
  • 19
  • 35