SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Isue with FireFox

    Hi everybody,





    i am creating a website for myself, the problem i'm having is trying to keep the look consistent with other browsers i.e essentially ensure that my boxes are the same on IE. When i adjust the code the two boxes look fine on IE which is how i want them, but on FF, they are not positioned how i want them to be.





    If adjust the 'top' and 'left' and 'right' attributes for FF, it will affect the look on IE. What exactly must i do to ensure that my 2 boxes look the same on FF to make sure that there is a visual consistency?



    The code is very simple.



    Code:
     
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
        <title>Home Page V1</title>
    <link rel="stylesheet" type="text/css" href="homepage_V1.css" />
    </head>
    <body>
        <div class="container">
        <div class="header" align="center">
            <h1> WELCOME TO THE HOME PAGE </h1>
            
        </div>
     
        <div class="nav">
            <ul>
                <li><a href="#Home"> Home </a></li>
                <li><a href="#Contact"> Contact </a></li>
                <li><a href="#News"> News </a></li>
                <li><a href="#About"> About </a></li>
            </ul>
        </div>
        
         <div class="content">
            <div class="tpleft"> <h1 align="left">TOP LEFT </h1></div>
            <div class="tpright"><h1 align="right"> TOP RIGHT </h1></div>
            
            <!--   <div class="btleftimg"> <img src="gal_car_stars1.jpg" width="557" height="259" /></div>-->
        </div>
          
    </body>
    </html>




    Code:
    /* homepage_V1.css is used to help build my homepage*/
    
     body
    {
        margin-top: 2em;
        margin-left: 2em;
        margin-bottom: 1em;
        margin-right: 1em;
    
        
    }
    
     div.container
    {
        width: 80em;
        border: solid #9400D3 0.1em;
        height: 40em;
        
        padding-bottom: 1em;
    }
    
    div.header
    {
        padding: 0.5em;
        background-color: #66CDAA;
        height: 5.2em;
        
    }
    
    div.nav
    {
        border: 2px solid red;
        width: 10em;
        height: 28.3em;
        float:left;
    }
    
    div.content
    {
        
        border: solid #FF8C00 2px;
        padding-bottom: 0;
        margin-left: 0em; /** use this to separate nav and content **/
        height: 28.4em;
    }
    
    div.tpleft 
    {
        position: relative;
        padding: 0;
        border: solid #800000 2px;
        margin-left: 0em;
        background-color: blue;
        width: 557px;
        height: 228px;
    
    }
    
    div.tpright 
    {
        position: relative;
        padding: 0;
        border: solid #800000 2px;
        margin-right: 4em;
        margin-top: 0em;
        top: -14.5em;
        right: -34.5em;
        width: 557px;
        height: 228px;
        background-color: #737CA1;
        
        
    }


    Please help, thanks

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,889
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Your code does not validate because of a missing container </div>.

    You site is optimised for IE so FireFox has to take a guess at what you are trying to achieve.

    Learn how to use
    http://validator.w3.org/ and also how to vaildate your CSS files.

    I would also try to be consistent with your widths, margins, etc and to use either em or px but not both.






    .
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi thanks for the assit.

    I managed to validate my html document, so errors there, but when validating my css file i had no errors, should i be expecting errors? I removed my 2 boxes for the time being, and have been changing my css file to only include em. I'm focusing on the div.content making sure that it looks exactly on both FF and IE. I've managed to make it how i want on IE but on FF there is a 167px width gap between the content div and my container div.

    Obviously, it isn't right, how do make it look consistent. Is the case of adjusting the values or what??

    updated code:
    Code:
    /* homepage_V1.css is used to help build my homepage*/
    
     body
    {
        margin-top: 2em;
        margin-left: 2em;
        margin-bottom: 1em;
        margin-right: 1em;
    
        
    }
    
     div.container
    {
        width: 80em;
        border: solid #9400D3 0.1em;
        height: 40em;
        padding-bottom: 1em;
    }
    
    div.header
    {
        padding: 0.5em;
        background-color: #66CDAA;
        height: 5.2em;
        
    }
    
    div.nav
    {
        border: 0.1em solid red;
        width: 10em;
        height: 28.3em;
        float:left;
    }
    
    div.content
    {
        
        border: solid #FF8C00 0.1em;
        padding-bottom: 0;
        margin-left: 0em; /** use this to separate nav and content **/
        height: 28.4em;
        width: 69.5em;
    }
    html code, not much change
    Code:
     
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
                                                                                   
        <title>Home Page V1</title>
    <link rel="stylesheet" type="text/css" href="homepage_V1.css" />
    </head>
    <body>
        <div class="container">
        <div class="header" align="center">
            <h1> WELCOME TO THE HOME PAGE </h1>
            
        </div>
     
        <div class="nav">
            <ul>
                <li><a href="#Home"> Home </a></li>
                <li><a href="#Contact"> Contact </a></li>
                <li><a href="#News"> News </a></li>
                <li><a href="#About"> About </a></li>
            </ul>
        </div>
        
         <div class="content">
           <!-- <div class="tpleft"> <h1 align="left">TOP LEFT </h1></div>
            <div class="tpright"><h1 align="right"> TOP RIGHT </h1></div>
          -->  
            <!--   <div class="btleftimg"> <img src="gal_car_stars1.jpg" width="557" height="259" /></div>-->
        </div>
        </div>
    </body>
    </html>

  4. #4
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,889
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Hi nvidia123,

    I am not sure of your exact requirements but think that as far as your basic layout is concerned then it has been covered numerous times by some very experienced coders.

    Try a Google search for "CSS two column layout" and you will find numerous examples that have been tried and tested in all the popular browsers.

    If your layout does not do exactly what you want it to do then I would endeavour to find the problem yourself. You will learn a lot about how CSS works.

    Meanwhile here is my attempt at what I think you are trying to achieve:

    http://johns-jokes.com/downloads/sp/nvidia123/




    .
    Last edited by John_Betong; Apr 20, 2010 at 03:22. Reason: spelling
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014


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
  •