#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    1
    Rep Power
    0

    Browser Compatibility


    I am relatively new to web design with css and am wondering if someone can help me work out browser compatibility for a recent site I started working on. It displays how I want in ie9,Mozilla, and safari but is a bit off in Chrome. Can some one check it our and help me with a fix?It is the ribbon banner and header logo that is being pushed down in Chrome... Ok so I can't post links but the site is John DiSalvatore Basement Waterproofing in Havertown PA if you Google it. Here is my html and css:


    for the banner and header:

    Code:
    <div id="navigation_container">
    
    <!-- the left side of the fork effect -->
       <div class="l-triangle-top"></div>
       <div class="l-triangle-bottom"></div>
    
    <!-- the ribbon body -->
    
       <div class="rectangle">
      
    <!-- the navigation links -->
       	
    		<ul id="navigation">
    	   	  <li><a href="/"> &nbsp;⌾&nbsp;<strong>Home</strong></a></li>
    	      <li><a href="l"> &nbsp;⌾<strong> About</strong> </a></li>
    	      <li><a href=""> &nbsp;⌾<strong> Services</strong></a></li>
              <li><a href=""> &nbsp;⌾<strong> Testimonials</strong></a></li>
              <li><a href=""> &nbsp;⌾<strong> Photo Gallery</strong></a></li>
         </ul>
       
    <!-- end the ribbon body -->
       </div>
       
    <!-- the right side of the fork effect -->
       <div class="r-triangle-top"></div>
       <div class="r-triangle-bottom"></div>
    
    <!-- end container --></div>
    		
    		<div id="header"><img src="web_banner.png"width="1000" height="120"alt="logo">
            </div>
       
    
    
    
    <body id="home">
    <p><a href="/"></a>    </p>
    <p>&nbsp;</p>
    <p><a href="#" id="top"><b>Back<br>
      to Top</b></a>
    </html>
    Code:
    html{background: transparent url('waterbackground.jpg') top center no-repeat;
    width: 100%; height: 100%;
    margin: 0 0;}
    body
    
    
    #navigation_container {
    	margin: 0 auto;
    	width: 900px;
    	
    }
    
    #navigation li {
            list-style: none;
            display:block;
    		float: left;
    	  margin: 23px 7px 0px 10px;
    		
    	
    }
    
    #navigation li a {
            text-shadow: 0 2px 1px rgba(0,0,0,0.5);
            display: block;
            text-decoration: none;
    		color: #f0f0f0;
            font-size: 18px;
    		font-family:Arial, Helvetica, sans-serif
            margin: 0;
        
    		
    }
    
    #navigation li.active a:hover,
    #navigation li a:hover {
            margin-top: 2px;
    }
    
    #navigation li.active {
            font-style: italic;
    }
    
    #navigation li.active a {
    }
    
    
    .rectangle {
       background: #0066ff;
       height: 62px;
       position: relative;
       -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
      	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
      	box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
      	
       -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
    	border-radius: 2px;
    	
       z-index: 500; /* the stack order: foreground */
       margin: 3em 0;
    }
    
    .l-triangle-top {
       border-color: #0066cc transparent transparent;
       border-style:solid;
       border-width:50px;
       height:0px;
       width:0px;
       position: relative;
       float: left;
       top: 1px;
       left: -50px;
    }
    
    .l-triangle-bottom {
       border-color: transparent transparent #0066cc;
       border-style:solid;
       border-width:50px;
       height:0px;
       width:0px;
       position: relative;
       float: left;
       top: -40px;
       left: -150px;
    }
    
    
    .r-triangle-top {
       border-color: #0066cc transparent transparent;
       border-style:solid;
       border-width:50px;
       height:0px;
       width:0px;
       position: relative;
            float: right;
            right: -45px;
            top: -107px;
    }
    
    .r-triangle-bottom {
       border-color: transparent transparent #0066cc;
       border-style:solid;
       border-width:50px;
       height:0px;
       width:0px;
       position: relative;
            float: right;
            top: -149px;
            right: -145px;
    }
    
    
    /* ------------------ layout ------------------ */
    #wrap {
    position:relative;
    width:1200px;
    margin:195px auto 0;
    padding:10px;
    z-index:3;
    }
    #wrap:before { /* faux column for #main */
    content:'';
    position:absolute;
    top:10px;
    bottom:10px;
    box-shadow:2px 2px 5px #555;
    border-radius:8px;
    background:rgb(255,255,255);
    background:rgba(255, 255, 255, .9);
    width:844px;
    left:10px;
    }
    #wrap:after {
    content:'';
    display:block;
    clear:both;
    }	
    
    #main, #website-search, #menu, #ads, #domains, #friends, #topcontributors, #mywebsites {
    box-shadow:2px 2px 5px #555;
    border-radius:8px;
    float:right;
    clear:right;
    background:rgb(255,255,255);
    background:rgba(255, 255, 255, .9);
    padding:20px;
    width:266px;
    margin:0 0 50px;
    }
    /* --- main --- */
    #main {
    padding:20px 58px;
    width:728px;
    float:left;
    background:none;
    box-shadow:none;
    margin:0;
    border-radius:8px;
    position:relative;
    z-index:3; /* position above faux column #wrap:before */
    }

    Thanks in advance I really appreciate it
    Last edited by Kravvitz; June 5th, 2013 at 12:05 AM. Reason: added [code] tags
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, mimiliss.

    Here's the link to your site (for others who want to look): http://jdsbasementwaterproofing.com/

    This is not a valid doctype:
    Code:
    <!DOCTYPE HTML//EN>
    Use this:
    Code:
    <!DOCTYPE html>
    The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    P.S. When posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo