Need professional help.

Discussion in 'CSS' started by chlopzmazur, May 3, 2008.

0
  1. #1
    Hello,

    I am making sites that are working correctly on IE. But not on Firefox. I need to solve this problem. Lets focus on the site I am making now. First, test version is on this adress: http://www.facjata.nazwa.pl/granitpolska

    I need to:
    1. Have logo on the top left. (seems to be working on IE and FireFox)
    2. Div on the left for ads.
    3. And div for the text and content next to div for ads.
    4. And footer on the bottom but I haven't made that yet.

    What is not working correctly on FireFox?
    Text in content should be in distance in 20px from ads - but the distance in higher in Firefox. And second thing: text in content in FireFox behave like div have margin-top.

    What am I doing wrong? My technique or site structure? Or CSS?
    Hope you can fix my problem and give me advices to make sites working good both in IE and FireFox.

    Thank you.

     
    chlopzmazur, May 3, 2008 IP
  2. ourblink

    ourblink Peon

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Im not sure what do you wan , but try it

    body{
    padding:0;
    margin:0;
    font-family: Georgia;
    font-size: 14px;
    color: #FFFFFF;
    }

    #header{
    background:#23190F url(images/bg.jpg) 0 0 repeat-x;
    height:250px;
    position:relative;
    }
    #logo{
    width:300px;
    height:200px;
    position:absolute;
    top:0;
    left:0;
    }
    #logo img{
    border:0;
    }
    #content{
    background:#372718;
    min-height:300px;
    position:relative;
    padding:0 0 0 20px;
    }
    #adplace {
    float: left;
    width: 340px;
    }
    #text {
    float: left;
    width: 560px;
    text-align:justify;
    }
    #text h1{
    font-size: 24px;
    font-style:italic;
    color:#C98F58;
    }
    #footer{
    background:#23190F;
    height:60px;
    font-family:Georgia;
    font-size:12px;
    padding:20px 0 0 20px;
    }

    ------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="header">
    <div id="logo"><img src="images/logo.jpg" alt="logo" width="300" height="200" /></div>
    </div> <!-- header end here -->

    <div id="content">
    <div id="adplace"><img src="images/ad1.jpg" alt="Ads" height="250" width="300" /></div>
    <div id="text"><h1>Witamy na stronie GranitPolska.pl!</h1>

    Strona ta powstała w celu dostarczania informacji o granicie i wszystkim co z nim związane. Są tu omówione zagadnienia z zakresu kamieniarstwa, nagrobków i architektury.
    </div>
    </div><!-- content end here -->

    <div id="footer">
    Footer here Footer here Footer here Footer here Footer here
    </div>

    </body>
    </html>
     
    ourblink, May 3, 2008 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    You don't have a complete and proper DTD. That kicks browsers into quirks mode. IE does not follow the rules in quirks mode. Properly, padding is added to the width. IE gets it wrong in quirks.

    Firefox is displaying correctly.

    ourblink may have fixed the issue by adding the DTD and removing the padding.

    cheers,

    gary
     
    kk5st, May 3, 2008 IP