Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Cross Browser Compatibility

    I made website and checked at firefox it was looking good there but when I opened the same web on Chrome, the margins and padding of some div elements collapse. Why this is happening? How can I fix this? I want to make web which should be compatible for all major browsers.. Thank you..

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,726
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    If you do it right, using valid and semantic HTML and all the correct CSS then there should be no difference between recent browsers. If you want a more specific answer then you need to provide your code (preferably a link to your site).

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,311
    Thanks
    11
    Thanked 284 Times in 283 Posts
    We can't diagnose your specific issue without a link to the site. But in general the way to make a site that works across browsers is to have a strict doctype, and make sure your html and css validate. That should cover 99% of cross-browser issues, presuming you're talking about relatively recent versions.

    ...Officially, Stephan types faster than me

  • #4
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Code:
    <body>
            <div id="header-wrapper">
                <div id="header">
                    <div id="logo">
                        <img src="http://www.codingforums.com/images/logo.png" />
                    </div>
                    <div id="nav">
                        <ul>
                            <li>
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <a href="#">Services</a>
                            </li>
                            <li>
                                <a href="#">Our Work</a>
                            </li>
                            <li>
                                <a href="#">About Us</a>
                            </li>
                            <li>
                                <a href="#">Contact Us</a>
                            </li>
    
                        </ul>
                    </div>
                    <!--End Nav -->
                </div>
                <!--End header -->
            </div>
            <!--End Header Wrapper -->
    
            <div id="content-wrapper">
                <div id="content">
                    <div id="loginArea">
                        <div id="eclipse">
                            <img id="eclipse" src="http://www.codingforums.com/images/eclipse.png" />
                        </div>
    
                        <div id="form">
    
                            <form>
                                <label>
                                    <input type="text" class="form-field" placeholder="Email" />
                                </label>
    
                                <div id="sign-in">
                                    <a href="#" class="log-in"></a>
                                </div>
    
                                <br />
    
                                <label>
                                    <input type="password"  class="form-field2" placeholder="Password" />
                                </label>
                            </form>
    
                        </div>
    
                        <div id="forgot">
                            <a href="#">Forgot your password?</a>
                        </div> <br clear="all">
                        <div id="signup">
                            <div id="signUp">
                                <div id="shadow">
                                    <a id="sign-up" href="#">Sign Up for free registration</a>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <!-- End Login Area -->
                    <br clear="all">
                </div>
                <!-- content -->
            </div>
            <!-- End oontent wrapper-->
            <div id="footer-wrapper">
                <div id="footer">
                    <div id="columns">
                        <div id="column1">
                            <p class="heading">
                                Media app
                            </p>
                            <ul>
                                <li>
                                    <a href="#">facebook</a>
                                </li>
                                <li>
                                    <a href="#">Development</a>
                                </li>
                                <li>
                                    <a href="#">Facebook</a>
                                </li>
                                <li>
                                    <a href="#">Fan Pages</a>
                                </li>
                                <li>
                                    <a href="#">Facebook Development</a>
                                </li>
                                <li>
                                    <a href="#">Facebook Pages</a>
                                </li>
                            </ul>
                        </div>
    
                        <div id="column2">
                            <p class="heading">
                                Mobile App
                            </p>
                            <ul>
                                <li>
                                    <a href="#">iPhone App</a>
                                </li>
                                <li>
                                    <a href="#">Development</a>
                                </li>
                                <li>
                                    <a href="#">iPad App</a>
                                </li>
                                <li>
                                    <a href="#">Development</a>
                                </li>
                                <li>
                                    <a href="#">Development</a>
                                </li>
                            </ul>
                        </div>
    
                        <div id="column3">
                            <p class="heading">
                                Who We Are
                            </p>
                            <ul>
                                <li>
                                    <a href="#">About Us</a>
                                </li>
                                <li>
                                    <a href="#">Our Team</a>
                                </li>
                                <li>
                                    <a href="#">Our Work</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- End Columns -->
    
                </div>
                <!-- Footer -->
            </div>
            <!-- Footer Wrapper -->

    Code:
    /* Css Style */
    
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        font-family: Myriad Pro;
    }
    
    body {
        background: url(../images/bg.gif) repeat #ccc;
    }
    
    /*** header wrapper ***/
    
    #header-wrapper {
        width: 100%;
        background: black;
    }
    
    #header {
        width: 1002px;
        margin: 0 auto;
        height: 110px;
    }
    
    #logo {
        float: left;
    }
    #nav {
        margin-top: 82px;
        float: right;
        text-align: center;
    }
    
    #nav ul li {
        padding: 0 25px;
        float: left;
    }
    
    #nav ul li a {
        color: #fff;
        float: left;
        font-family: Tahoma;
    }
    
    #nav ul li a:hover {
        color: #00609c;
        text-decoration: underline;
    }
    
    /** Content wrapper **/
    
    #content-wrapper {
        width: 100%;
        height: 750px;
    }
    
    #content {
        width: 1002px;
        margin: 0 auto;
        position: relative;
    }
    
    #loginArea {
        margin: 99px auto;
        width: 666px;
        height: auto;
    }
    
    #eclipse {
        margin: 0 auto;
        width: 187px;
        height: 187px;
    }
    
    #form {
        margin: 41px auto;
        width: 520px;
    }
    
    #sign-in {
        float: right;
    }
    
    #sign-in a {
        background: url(../images/arrow.png) no-repeat;
        padding: 30px 40px;
        text-indent: -19999px;
    }
    
    #sign-in a:hover {
        background: url(../images/arrow-hover.png) no-repeat;
        padding: 30px 40px;
    }
    
    .form-field {
        background: url(../images/input-field.png) no-repeat;
        width: 465px;
        height: 63px;
        border: none;
        color: #fff;
        font-size: 13.7pt;
        padding-left: 10px;
        border-bottom-right-radius: 10px;
    }
    
    .form-field2 {
        background: url(../images/input-field2.png) no-repeat;
        width: 465px;
        height: 63px;
        border: none;
        margin-top: -2px;
        color: #fff;
        display: inline-block;
        font-size: 13.7pt;
        padding-left: 10px;
        vertical-align: bottom;
    }
    
    #forgot {
        margin: -25px 0 0 80px;
        display: block;
        float: left;
        
    }
    
    #forgot a {
        color: #e2a926;
    }
    
    #signup {
        margin: 40px auto 0 auto;
        width: 420px;
    }
    
    #signUp {
        width: 424px;
        height: 63px;
        text-align: center;
        word-spacing: 2px;
    }
    
    #shadow {
        background: url(../images/shadow.png);
        width: 420px;
        height: 58px;
    }
    
    #signUp a {
        padding: 14px 109px;
        color: #2b2b2b;
        border-radius: 5px;
        margin: 5px 0 0 6px;
        background: #eaae26;
        float: left;
        behavior: url(PIE.htc);
    }
    /** Footer Wrapper **/
    
    #footer-wrapper {
        height: 315px;
        width: 100%;
        background: url(../images/background.png) repeat-x;
        background-position: left top;
    }
    
    #footer {
        margin: 0px auto;
        width: 1002px;
    }
    
    #columns {
        margin-top: 42px;
        margin-left: 50px;
        float: left;
    }
    
    #column1 a, #column2 a, #column3 a {
        display: block;
        color: #5d5d5d;
        font-size: 14px;
        line-height: 19px;
        padding-bottom: 11px;
    }
    
    #column1, #column2, #column3 {
        margin-top: 20px;
        margin-left: 50px;
        float: left;
    }
    
    #column2, #column3 {
        margin-left: 144px;
    }
    
    .heading {
        color: #645139;
        font-size: 13.13pt;
        padding-bottom: 18px;
    }
    Last edited by VIPStephan; 04-28-2014 at 10:29 PM. Reason: added code BB tags

  • #5
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This is my html and css.. I am testing my sites locally yet..


  •  

    Posting Permissions

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