Hello

 

I'm redesigning my website and this is my first attempt at CSS. It's all going well but I'm now stuck as to why my links are not centred in Safari. All is ok in Firefox and Explorer.

 

Have a look at my test page here and you'll see the problem.

 

if you need to see the HTML or CSS it's all there when you view source.

 

Needless to say, any help most appreciated.

 

Thank you

Hi There,

 

This is because of your word-spacing: 20px;

Safari still starts the text in the same place and adds the spacing on after (try removing it and see the difference)

 

I used the following css instead:

#centertop {
margin: auto;
}
#centertop a {
padding: 10px;
}
.black {
margin-top: 4px;
margin-bottom: 2px;
}

 

and changed the html to this:

 

<div id="centertop">
  <img src="http://www.neilleslie.com/neilleslieillo.jpg" width="400" height="40"><br>
  <img class="black" src="http://www.neilleslie.com/black.jpg" width = "800" height="1"><br>
  <A HREF="index.html">home</A>
  <A HREF="portfolio.html">portfolio</A> 
  <A HREF="stock.html">stock</A> 
  <A HREF="clients.html">clients</A>
  <A HREF="process.html">process</A>
  <A HREF="aboutme.html">bio</A>
  <A HREF="contact.html">contact</A><br>
  <img class="black"  src="http://www.neilleslie.com/black.jpg" width="800" height="1"><br>
 </div>

 

Note I also got rid of the invisible gifs as this is unnecessary complication.

 

It's also good practice to use a list for your menu like this:

 

.black {
margin-top: 4px;
margin-bottom: 2px;
}
#centertop {
margin: auto;
}
#centertop ul {
list-style: none;
}
#centertop li {
display: inline;
}
#centertop a {
padding: 10px;
}

 <div id="centertop">
<img src="http://www.neilleslie.com/neilleslieillo.jpg" width="400" height="40"><br>
<img class="black" src="http://www.neilleslie.com/black.jpg" width = "800" height="1"><br>
<ul>
	<li><A HREF="index.html">home</A></li>
	<li><A HREF="portfolio.html">portfolio</A> </li>
	<li><A HREF="stock.html">stock</A> </li>
	<li><A HREF="clients.html">clients</A></li>
	<li><A HREF="process.html">process</A></li>
	<li><A HREF="aboutme.html">bio</A></li>
	<li><A HREF="contact.html">contact</A></li>
 </ul>
 <img class="black"  src="http://www.neilleslie.com/black.jpg" width="800" height="1"><br>
 </div>

 

Hope this helps!

- Eris