SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross Browser Support> Why do my pages look different

    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:

    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

    Code:
    .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. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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. #4
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


    firefox.jpgexplorer.jpgchrome.jpg

  5. #5
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •