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 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2009
    Location
    UK
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS help in Chrome

    Hey,
    just finished getting the design/layout done for a site iam making, all works great in safari/firefox/ie.

    but in chrome the first time i load the page the one div is dropped down about 100px's but when i hit refresh all is fine.

    any ideas..?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Tyler138,
    It could be any number of problems, none of which would be even possible to guess without looking at some code or a link to the site.
    A link is always best.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2009
    Location
    UK
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Tyler138,
    It could be any number of problems, none of which would be even possible to guess without looking at some code or a link to the site.
    A link is always best.
    sorry havent got a link at the moment as it isn't published yet...

    Html
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>

    <
    head>

    <
    titleWelcome to Jacks School of Motoring </title>
        <
    link rel="stylesheet" href="index.css"

    </
    head>

        <
    body>
        
        <
    div class="container">
        
        <
    div class="banner">
        
        <
    a href="home.html">    
    <
    img src="images/JacksLogo.png">
    </
    a>

    <
    div class="contact">
    <
    p>    Phone 00000 000000         <br/>
        
    Mobile 07000 000000         <br/>
        
    Address 1Address 2,         <br/>
        
    Postcode
    </p>

    </
    div> <!---contact--->

        </
    div> <!---banner--->    
        
    <
    div class="navcontainer">
    <
    ul class="nav">
                    <
    li><a href="home.html">Home                </a></li>
                    <
    li><a href="services.html">Services        </a></li>
                    <
    li><a href="prices.html">Prices            </a></li>
                    <
    li><a href="contact.html">Contact            </a></li>
    </
    ul>
    </
    div> <!---navcontainer--->

    <
    div class="info">
    <
    h1Welcome to Jacks School of Motoring </h1>


    </
    div><!---info--->    
        
        </
    div> <!---container--->
        
        </
    body>

    </
    html
    CSS
    PHP Code:
    body {
        
    background-image:url("images/carbg.jpg");
        
    background-repeat:no-repeat;
        
    background-attachment:fixed;
        
    background-position:top center;
        
        
    }

    .
    container {
        
    background-color:none;
        
        
    width:950px;
        
    margin-left:auto;
        
    margin-right:auto;

    }

    .
    banner {
        
    background-color:gray;
        
        
    width:950px;
        
        
    padding-top:5px;
        
    padding-left:5px;
        
    padding-right:5px;
                
        -
    moz-border-radius-topleft:10px;
        -
    moz-border-radius-topright:10px;
        -
    webkit-border-top-left-radius:10px;
        -
    webkit-border-top-right-radius:10px;

    }

    .
    contact {
        
    text-align:right;
        
        
    margin-top:-20px;

        
    position:relative;     /* needed for chrome*/
        
    top:0px;            /* needed for chrome*/
        
    right:0px;            /* needed for chrome*/
        
    float:right;
        
        
    font-familyCooper BlackArial BlackSans-Serif;
        
    font-size:20px;
    }

    .
    navcontainer {
        
    margin-top:-20px;
        
    margin-left:-20px;
        
    }

    .
    nav {
        
    background-image:url("images/navimg.png");
        
    background-repeat:repeat-x;
        
    background-position:bottom;

        
    height:30px;
        
    width:950px;
        
    padding-left:5px;
        
    padding-right:5px;
    }

    ul {
    list-
    style:none;
    margin:20px;
    padding:0;

    }

    li {
        
    padding-top:2px;
        
    float:left;
        
    margin-left:20px;
        
    margin-right:20px;
        
    }

    {
        
    color:white;
        
    font-familyCooper BlackArial BlackSans-Serif;
        
    font-size:20px;

        
    text-decoration:none;
        
    }

    a:link
    {text-decoration:none}
    a:visited 
    {text-decoration:none}
    a:hover
    {color:#ff0000}
    a:active 
    {color:#a10000}
    img 
    {border:none}

    .
    info {
        
    background-color:white;
        
    width:950px;
        
    height:500px;
        
    margin-top:-21px;
         
    padding:5px;
         
    }

    h1 {
        
    text-align:center;
        
    font-familyCooper BlackArial BlackSans-Serif;
        

    The problem is the div contact holding all the telephone number etc drops by 100px causing it to go over the nav var n into the info bit.
    All the main info hasn't been added yet but you get the jist of it.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    .contact is margined up, positioned and then floated. I think you're doing a little too much there.

    No point in using a negative margin when you can just position it.
    Float doesn't work with positioning and also only works when you have a width. The reason for that is you use float to put something beside something else so it needs a width to show how much room it's taking.

    I'm not sure what you want it to end up looking like. If you .contact is supposed to sit on top of your #navcontainer, then top:-20px; might be what you want.

    Throughout your entire code you make mistakes on your box model. See how the box model works here. Those paddings count in the total width.

    Have a look at this -
    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http: //www.w3.org/TR/html4/loose.dtd"><html> 
    <head> 
    <title> Welcome to Jacks School of Motoring </title> 
    <style type="text/css">
    body {
    	background: #fc6 url(images/carbg.jpg) no-repeat fixed center top; /*color for testing only*/
    } 
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    .container {     
        width: 950px; 
    	margin: 0 auto;
    	overflow: auto;
    } 
    .banner { 
        background: #ccc;      
        width: 950px; 
    	overflow: auto;
        -moz-border-radius-topleft: 10px; 
        -moz-border-radius-topright: 10px; 
        -webkit-border-top-left-radius: 10px; 
        -webkit-border-top-right-radius: 10px;  /*CSS3 struff is not going to work in many browsers*/
    } 
    .contact { 
    	width: 300px;
        float: right;      
        text-align: right; 
        font-family:  Cooper Black, Arial Black, Sans-Serif; 
        font-size: 20px; 
    } 
    ul.nav {
    	height: 30px;
    	width: 950px;
    	line-height: 30px;
    	list-style: none; 
    	background: #0F0 url(images/navimg.png) repeat-x bottom;
    } 
    	li { 
    		display: inline;
    		margin-left: 20px; 
    		margin-right: 20px;      
    	} 
    .info { 
    	background: #fff; 
    	width: 940px; 
    	height: 500px; 
    	padding: 5px;       
    } 
    a {
    	color: #fff;
    	text-decoration: none;
    	font: 20px "Cooper Black", "Arial Black", Sans-Serif;
    } 
    a: link {text-decoration: none} 
    a: visited {text-decoration: none} 
    a: hover {color: #ff0000} 
    a: active {color: #a10000} 
    h1 { 
        text-align: center; 
        font: "Cooper Black", "Arial Black", Sans-Serif     
    }
    </style>
    </head> 
    <body>      
        <div class="container">      
            <div class="banner">    
                <div class="contact"> 
                    <p>    
                        Phone - 00000 000000<br/> 
                        Mobile - 07000 000000<br/> 
                        Address 1, Address 2,<br/> 
                        Postcode 
                    </p> 
                </div> <!--contact-->   
                	<a href="home.html"><img src="images/JacksLogo.png" width="400" height="200" alt="description of image goes here. I just guessed at image size."></a> 
            </div> <!--banner-->   
                <ul class="nav"> 
                    <li><a href="home.html">Home</a></li> 
                    <li><a href="services.html">Services</a></li> 
                    <li><a href="prices.html">Prices</a></li> 
                    <li><a href="contact.html">Contact</a></li> 
                </ul> 
            <div class="info"> 
            	<h1> Welcome to Jacks School of Motoring </h1> 
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            </div><!--info-->          
        </div> <!--container-->      
    </body> 
    </html>
    Last edited by Excavator; 12-26-2009 at 08:39 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Dec 2009
    Location
    UK
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the feed back, but it is still slightly messed up in chrome and firefox 3.0.16...

    This is how is how i want it to look and how it looks in the newest firefox...

    http://twitpic.com/vd5ct

    but instead in the old firefox and chrome is looks like this...

    http://twitpic.com/vd5h8


    Also with the box model to fix it all i have to do is add
    margin: 0 auto;
    overflow: auto;
    and the rest of the pixels from the padding equaling width of 960px in the container..?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Check that code again, I updated it right after I posted it but I think you grabbed it before I finished. The code that's there now should fix that.

    To fix that header, I moved the floated .contact to go first - floats go first. If that looks weird to you, you could always float that logo image instead.

    The box model fix is changing all the math so your width/margin/padding/border all figure in to the total width.

    The *{margin:0;padding:0;} is the CSS reset. Read all about that here. I put that or a similar version of it on every site I write.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    The box model fix is changing all the math so your width/margin/padding/border all figure in to the total width.
    Sorry if that's confusing. For an example, if you have -
    Code:
    #id {
    width: 900px;
    margin: 20px auto;
    padding: 5px;
    border: 3px sold #f00;
    }
    The total width of #id would be 916px.
    That would fit inside a 916px wide container.
    You could put a 890px wide div inside #id, or two divs floated side by side if their combined width did not exceed 890px.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Dec 2009
    Location
    UK
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow man, what can i say.

    Thanks a lot, u have cleared up so much for me and it all made sense when i went through it.



    Thanks a lot,

    Defo be sticking around these forums

    Tyler


  •  

    Tags for this Thread

    Posting Permissions

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