Cross Browser Support> Why do my pages look different

HTML & CSS
1

Last post about this particular website, I promise!

My client wants her custom navbar to be vertically aligned with the “wood edge” on this page’s background image. I’ve placed the code for the header image (beachippelli) and code for the custom menu in catalyst_hook_header in my custom hooks in my Catalyst Wordpress Template. The background image is specific to this page and has been added to the Custom CSS.

The problem I’m seeing is that my layout works in Firefox and Explorer but looks bunk in Chrome. What CSS code do I need to add to make my page layout the same on all browers? Or is this impossible? I screwed around with clearfix and still couldn’t get it to work.

I hate to tell my client that I can’t figure this out. I feel that unacceptable on my part. Any help would be greatly appreciated.

http://beachiappelli.com/

Code:

<div class="clearfix"><img class="music-header" src="http://beachiappelli.com/wp-content/themes/dynamik/css/images/header.png" alt="header"class="clearfix"></div>
<div>

<div class="clearfix" >
<ul id="red-nav" class="red-menu">

<li class="red-music"><a href="http://beachiappelli.com/">music</a>
           <ul class="red-menu2" id="red-nav2">
           <li class="red-press"><a href="http://beachiappelli.com/music/press-shot/">press</a></li>
           <li class="red-live"><a href="http://beachiappelli.com/music/live-performances/">live</a></li>
           <li class="red-album"><a href="http://beachiappelli.com/music/album-artwork">album</a></li>
           </ul></li>
	
<li class="red-blog"><a href="http://iycswis.blogspot.com/" target="new">blog</a></li>
<li class="red-projects"><a>projects</a>
    <ul class="red-menu3" id="red-nav3">
           <li class="red-american"><a href= "http://beachiappelli.com/projects/proud-to-be-american/" target="new">american</a></li>
           <li class="red-liberty"><a href="http://beachiappelli.com/projects/liberty-avenue/" target="new">liberty</a></li>
           <li class="red-portraits"><a href="http://beachiappelli.com/portraits/" target="new">portraits</a></li>
           <li class="red-weddings"><a href="http://www.elleandarre.com/" target="new">weddings</a></li>
           </ul></li>
<li class="red-bio"><a href="http://beachiappelli.com/biocontact">bio</a></li>
</ul>
</div>

Css

.clearfix:after { content: "\\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}


body.page-id-51 {
background-image:url('http://beachiappelli.com/wp-content/themes/dynamik/css/images/background.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;
z-index:-1;
}

.music-header
position:fixed;
top: 30px;
z-index:-1;
}

.red-music-header
{
position:fixed;
margin-left:auto;
margin-right:auto;
z-index:-1;
}


.red-menu {
	list-style: none;
           margin-top: -25px;
           margin-left: 183px;
	   float: left;	
	
}
.red-menu li {	
	height: 114px;
	list-style: none;
	background-repeat: no-repeat;
}

.red-menu2 li {	
        margin-left: 30px;
        height: 30px;
	list-style: none;
	background-repeat: no-repeat;
}

.red-menu3 li {	
        margin-left: 30px;
        height: 30px;
	list-style: none;
	background-repeat: no-repeat;
}

.red-menu li ul {
	position: absolute;
	width: 10em;
	left: -9999em;
}
.red-menu li:hover ul, #nav li.sfhover ul {
	left: auto;
}
.red-menu li a, .nav li a:visited {
	display: block;
	text-decoration: none;
	text-indent: -9999px;
	height: 114px;
	background-repeat: no-repeat;
}



.red-music {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music-roll.png); width: 170px;}
.red-music a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music.png);}
.red-blog {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog-roll.png); width: 152px;}
.red-blog a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog.png);}
.red-projects {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects-roll.png); width: 213px;}
.red-projects a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects.png);}
.red-bio {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio-roll.png); width: 280px;}
.red-bio a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio.png);}
.red-press {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press-roll.png); width: 190px;}
.red-press a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press.png);}
.red-live {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live-roll.png); width: 190px;}
.red-live a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live.png);}
.red-album {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album-roll.png); width: 190px;}
.red-album a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album.png);}
.red-american {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/american-roll.png); width: 188px;}
.red-american a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/american.png);}
.red-liberty {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/liberty-roll.png); width: 188px;}
.red-liberty a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/liberty.png);}
.red-portraits {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/portraits-roll.png); width: 188px;}
.red-portraits a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/portraits.png);}
.red-weddings {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/weddings-roll.png); width: 188px;}
.red-weddings a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/weddings.png);}





ul.red-menu li a:hover {background: none;}
.red-menu li {float: left;}
.red-menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
}


#red-nav li:hover ul ul, #red-nav li.sfhover ul ul {
	left: -9999em;
}

#red-nav li.sfhover ul

.red-menu li li, .menu li li a, .red-nav li li a:visited {
  height: auto;
}

#red-nav ul {
margin-top: -35px;
}


#red-nav3 ul {
margin-top: -15px;
}


#red-nav3 li:hover ul ul, #red-nav3 li.sfhover ul ul {
	left: -9999em;
}

#red-nav3 li.sfhover ul

.red-menu3 li li, .menu li li a, .red-nav3 li li a:visited {
  height: auto;
}


#red-nav3 ul {
margin-top: -15px;
}

#red-nav ul.red-menu3{margin-top:0}
2

I just had a look in Firefox 18, Chrome 25, IE 10/9/8/7 and it looks 100% consistent across all of them for me, if you could post screenshots of what your seeing so we have a better idea of what to look for.

3

Likewise, looks the same to me cross browser, too. Sometimes you will see old styles in a browser until you clear your cache and/or refresh your browser a few times. See if that helps.

4

Hey guys,

Thanks for looking. I’m still seeing issues in firefox even after clearing cookies and my cache. I have highlighted in blue on the firefox image where I’m still having issues. The menu should align with the wood border like it does in the chrome and explorer images.

Are you seeing this?

5

Hello,

Is what I’m trying to achieve above impossible? Because I can’t seem to figure this out and its driving me crazy. Any help would be greatly appreciated.