SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Different output coming in web browsers for same CSS

    Hello Everybody
    I am trying to place navigation button right side of logo but Google Chrome 30 not accepting my code, where as my code is working perfect in FF 25.0 and IE 9. For testing purpose I uploaded the files here contact us,Kindly check in Chrome and FF and IE then you can see the problem. Or kindly see the attached images.
    Image from FireFox
    ff.JPG

    Image from Google Chrome
    GC.JPG
    Here is my HTML code
    HTML Code:
    <body>
    <div class="container">
    <!-- Top Navigation -->
      <div class="codrops-top clearfix">
        <span class="right"><a class="codrops-icon codrops-icon-drop" href="#"><span>Back to the Codrops Article</span></a></span>
      </div>
      <header>
        <img src="images/demo4/othermanazeschoollogo.jpg" width="430" height="109" />
          <nav class="codrops-demos">
        <a href="index.html">Home</a>
        <a href="http://software.manazeschool.com">Demo</a>
        <a href="index4.html">Clients</a>
        <a class="current-demo" href="#">Contact</a>
          </nav>
      </header>
      <form method="post" action="mailsend.php" name="form1">
         <table width="57%" border="1" style="text-align:left;">
    CSS code
    HTML Code:
    /* Header Style */
    .main,
    .container > header {
        margin: 0 auto;
        padding: 0.5em;
    }
    
    .container {
        height: 100%;
    }
    
    .container > header {
        background: rgba(0,0,0,0.03);
    }
    /* Demo Buttons Style */
    .codrops-demos {
        float:right;
        padding-top: 1em;
        font-size: 0.9em;
        position:relative;
    }
    
    .codrops-demos a {
    
        margin: 0.2em;
        padding: 0.45em 1em;
        background: #555;
        color: #fff;
        font-weight: 700;
        border-radius: 2px;
    }
    
    .codrops-demos a:hover,
    .codrops-demos a.current-demo,
    .codrops-demos a.current-demo:hover {
        opacity: 0.6;
    }
    
    .codrops-nav {
        text-align: center;
    }
    
    .codrops-nav a {
        display: inline-block;
        margin: 20px auto;
        padding: 0.3em;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try adding this to your styles:

    Code:
    header {overflow: hidden;}
    
    header img {float: left;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OOhh GREAT..! Thank you, Thank you very much. It works in all 3 browser.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Glad it helped.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

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
  •