Cross Browser Compatability - Solved!

[Ananemain]

Solved!

 

It turns out the problem was my organization. I had the right menu bar in the div containing all my main content. As I adjusted the menu to compensate for the content items, things got out of whack. I placed the whole menu in another, separate div, took out a whole lot of unnecessary coding, and fixed the problem. Now it all looks great!

 

I'll leave my initial post for anyone who wants to read it.

 

I'm about to pull my hair out over here.

 

I'm working in Brackets on a new site and I can't for the life of me get one element to display the same over all browsers. I have a menu bar on the right that looks great in Firefox and Chrome but is wildly different, like 300px different, in Safari. For some reason, it displays way higher in Safari than any other browser. No other attribute is changed. Just the top.

 

I'm sure you guys get tons of questions like this, but most fixes I've found so far don't help. I'm using normalize, which has helped immensely with other problems (literally everything else looks exactly the same), but not this one thing.

 

And by all means, tell me if I'm doing this whole thing completely wrong. I'm self-taught, so any advice is greatly appreciated.

 

HTML:

    <a href="index.html" class="homelink"><div class="Homebg">    	<img src="Images/home.png">    </div></a>    <a href="about.html" class="homelink"><div class="Aboutbg">    	<img src="Images/about.png">    </div></a>    <a href="hawthorne.html" class="homelink"><div class="Hawthornebg">    	<img src="Images/glasses.png">    </div></a>    <a href="chatter.html" class="homelink"><div class="Chatterbg">    	<img src="Images/pizza.png">    </div></a>    <a href="sakamoto.html" class="homelink"><div class="Sakabg">        <img src="Images/camera.png">    </div></a>    <a href="other.html" class="homelink"><div class="Otherbg">    	<img src="Images/pill.png">    </div></a>	<a href="contact.html" class="homelink"><div class="Contactbg">    	<img src="Images/mail.png">    </div></a>

CSS:

.RightBG {  position:relative;  display:inline-block;  left: 0px;  top: 0px;  width: 960px;  height: 600px;}.Contactbg {        position:relative;	border-style: solid;  border-width: 2px;  border-color: rgb( 215, 215, 215 );  background-color: rgb( 255, 255, 255 );  left: 854px;  right:87px;  top: -915px;  width: 63px;  height: 67px;   line-height:67px;  text-align:center;  }.Contactbg:hover {	background-color:#ad45ab;}.Contactbg img {	vertical-align:middle;}.Otherbg {        position:relative;	border-style: solid;  border-width: 2px;  border-color: rgb( 215, 215, 215 );  background-color: rgb( 255, 255, 255 );  left: 854px;  right:87px;  top: -919px;  width: 63px;  height: 67px;   line-height:67px;  text-align:center;}.Otherbg:hover {	background-color:#3ebd3e;}.Otherbg img {	vertical-align:middle;}.Sakabg {    border: 2px solid rgb( 215, 215, 215 );    background-color: white;    position:relative;    left:854px;    top:-923px;    width: 63px;    height: 67px;    line-height:67px;    text-align:center;}.Sakabg:hover {	background-color: #b1000b;}.Sakabg img {	vertical-align:middle;}.Chatterbg {        position:relative;border-style: solid;  border-width: 2px;  border-color: rgb( 215, 215, 215 );  background-color: rgb( 255, 255, 255 );left: 854px;    right:87px;  top: -927px;  width: 63px;  height: 67px;   line-height:67px;  text-align:center;}.Chatterbg:hover {	background-color: #FF9A00;}.Chatterbg img {	vertical-align:middle;}.Hawthornebg {        position:relative;	border-style: solid;  border-width: 2px;  border-color: rgb( 215, 215, 215 );  background-color: rgb( 255, 255, 255 );left: 854px;    right:87px;  top: -931px;  width: 63px;  height: 67px;   line-height:67px;  text-align:center;}.Hawthornebg:hover {	background-color:#5555ce;}.Hawthornebg img {	vertical-align:middle;}.Aboutbg {        position:relative;	border-style: solid;  border-width: 2px;  border-color: rgb( 215, 215, 215 );  background-color: rgb( 255, 255, 255 );left: 854px;    right:87px;  top: -935px;  width: 63px;  height: 67px;  line-height:67px;  text-align:center;}.Aboutbg:hover {	background-color:#e9eb25;}.Aboutbg img {	vertical-align:middle;}.Homebg {        position:relative;	border-style: solid;  border-width: 2px;  border-color: rgb( 215, 215, 215 );  background-color: rgb( 255, 255, 255 );  background-image: url("White.png");    left: 854px;  right:87px;  top: -939px;  width: 63px;  height: 67px;  line-height:65px;	}.homelink {	display:block;	height:67px;	width:63px;}.Homebg:hover {/*	height:74px;*/	background-color:rgb( 215, 215, 215 );}.Homebg img {	vertical-align:middle;	margin-left:11px;}

Edited July 4, 2014 by Ananemain