1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Css Position!!!

Discussion in 'Web Design & Development' started by RAMAddict, Feb 13, 2005.

Thread Status:
Not open for further replies.
Advertisement
  1. RAMAddict

    RAMAddict Thread Starter

    Joined:
    Jul 6, 2004
    Messages:
    189
    I'm working with CSS layouts. I like to use <DIV> alot. Except for some reason it doesn't work in Mozilla Firefox, everything comes out big and everything and off. Anyone have any ideas? It works in IE.
     
  2. Rockn

    Rockn

    Joined:
    Jul 29, 2001
    Messages:
    21,334
    position:absolute and use the X/Y coordinates to position it on the page using
    Left:number of pixels
    Top:number of pixels
     
  3. RAMAddict

    RAMAddict Thread Starter

    Joined:
    Jul 6, 2004
    Messages:
    189
    still didn't work, I had that before
     
  4. Rockn

    Rockn

    Joined:
    Jul 29, 2001
    Messages:
    21,334
    Post your code for the DIV's
     
  5. RAMAddict

    RAMAddict Thread Starter

    Joined:
    Jul 6, 2004
    Messages:
    189
    <div style="position: absolute; width: 25px; background-color:#C0C0C0; border: 1px #000000 solid;height: 25px; z-index: 0; left: 830px; top: 25px">
     
  6. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    Try this. It looks the same in Opera 8 beta 1, Firefox 1.0 (xform enabled nightly) and IE 6

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us" id="www-site-com">
        <head>
            <title>Positioning Divs</title>
            <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
            <meta http-equiv="content-style-type" content="text/css"/>
            <meta http-equiv="content-script-type" content="application/x-javascript"/>
            <meta http-equiv="content-language" content="en-us"/>
            <style type="text/css">
                html {
                    color: #000;
                    background-color: #fff;
                    font-size: 1em;
                }
                body {
                    margin: 0px;
                    padding: 8px;
                }
                div#example {
                    position: absolute;
                    padding: 5px;
                    width: 25px;
                    height: 25px;
                    left: 830px;
                    top: 25px;
                    border: 1px solid #000;
                    z-index: 0;
                    background-color: #c0c0c0;
                    line-height: 25px;
                    text-align: center;
                }
            </style>
        </head>
        <body id="www-site-com-body">
            <div id="example">test</div>
        </body>
    </html>
    
     
  7. RAMAddict

    RAMAddict Thread Starter

    Joined:
    Jul 6, 2004
    Messages:
    189
    Still doesn't work..here is the whole css

    <style type="text/css">
    body {
    font-size: 10px;
    font-family: verdana;
    }
    div#example {
    position: absolute;
    padding: 0px;
    width: 25px;
    height: 25px;
    left: 830px;
    top: 25px;
    border: 1px solid #000;
    z-index: 0;
    background-color: #c0c0c0;
    line-height: 25px;
    text-align: center;
    }

    div#dude
    {
    position:absolute;
    left: 100px;
    top: 25px;
    width: 320px;
    height: 10px;
    background-color: #c0c0c0;
    border: 1px #000000 solid;
    z-index: 1;
    padding: 3px;
    font-size: 10px;
    font-family: verdana;

    }

    div#right
    {
    position:absolute;
    left:320px;
    top:50px;
    width:500px;
    height:1500px;
    background-color:#C0C0C0;
    border:1px #000000 solid;
    padding:10px;
    }





    div.for
    {
    position:absolute; left: 830px; top: 75px; width:25px; height:25px; background-color:#FF6633; border:1px #000000 solid; padding:3px font-size: 10px;
    font-family: verdana;;
    }
    div.dude5
    {
    position:absolute; left:830px; top:125px; width:25px; height:25px; background-color:#c0c0c0; border:1px #000000 solid; padding:3px font-size: 10px;
    font-family: verdana;
    }

    div.right
    {
    position:absolute; left: 320px; top:50px; width:450px; height:1500px; background-color:#c0c0c0; border:1px #000000 solid; padding:10px; font-size: 10px;
    font-family: verdana;

    }

    div.left
    {
    position:absolute; left:100px; top:50px; width:200px; height:1500px; background-color:#c0c0c0; border:1px #000000 solid; padding:10px; font-size: 10px;
    font-family: verdana;
    }

    div.bottom
    {
    position:absolute; left:100px; top:1555px; width:320px; height:20px; background-color:#c0c0c0; border:1px #000000 solid; padding:3px; font-size: 10px;
    font-family: verdana;
    }


    A:link { text-decoration: none; }
    A:visited { text-decoration: none; }
    A:hover { text-decoration: none; color:#000000;}

    A:link{ text-decoration: none; color:#ffffff;}
    A:visited{ text-decoration: none; color:#ffffff;}
    A:hover{ text-decoration: none; color:#000000;}
    H2 {font-size: 18pt;}
    H3.first{position:absolute; left:100px; top:25px; width:320px; height:20px; background-color:#c0c0c0; border:1px #000000 solid; z-index:1;
    padding:3px; font-size: 10px; font-family: verdana;}




    </style>
     
  8. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    in div.for and div.dude5, you are missing a ; after the padding. That shouldn't be the problem, but fix them anyway and check to see if it helped.

    Also, check the page in Opera 7.5u2 and 8 beta1 to see how it looks.

    Also, try setting margin: 0px for an element to see if it straightens out the problem.

    If that doesn't help, we need to see all of the code and or a testcase. You never know, it might be a bug in Firefox.
     
  9. RAMAddict

    RAMAddict Thread Starter

    Joined:
    Jul 6, 2004
    Messages:
    189
    I'm taking apart the layout right now and re-constructing it from scratch. I am going to see what it looks like in IE and Mozilla and see if I can get them to look the same.
     
  10. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    Just remember to produce valid html, valid css and have it look good in Firefox. Then if something doesn't work right in IE find a workaround. Not the other way around.

    Also, make sure you use a valid doctype and charset. (see post #6) . If you do not, the page will put the browser in quirks mode instead of standards mode. Each browser's quirks mode could handle a page differently and you'll just be causing yourself problems trying to get things looking right.

    When viewing the page, put javascript:alert(document.compatMode) in the address bar and press enter. It should say css1compat. If it says quirks mode or BackCompat, then you don't have a valid doctype and char encoding set and things won't render properly.
     
  11. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/330222

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice