Grow your CSS skills. Land your dream job.

[Solved] Cross Browser Positioning Problem

  • # November 12, 2009 at 1:07 pm

    Hi,

    I’m having problems with the positioning of paragraphs in a div.
    It looks different in every browser, I’ve tested in on a pc and mac (Firefox/IE7/Safari)
    I need to place the text in the middle of the dotted lines in each section. But in Firefox the text appears with 19 pixels margin on top. In IE7 there’s only a 5 pixel margin on top. And in Safari it looks different too.

    You can view the page here: http://www.puppetbrain.com/temp/website … ation.html

    Screenshots:
    http://www.puppetbrain.com/temp/screenIE7.jpg
    http://www.puppetbrain.com/temp/screenFirefox.jpg
    http://www.puppetbrain.com/temp/screenSafari.jpg

    Can somebody tell me what I’m doing wrong or give some hints/tips. Thanks in advance!

    Here’s part of the CSS:

    Code:
    div.hr{
    width: 940px;
    height: 2px;
    background: url(img/divider.gif) no-repeat ;
    padding:0;
    margin: 0 auto;
    position:relative;
    }

    div.hr hr {
    display: none;
    }

    p{
    font-size: 14px;
    font-style: normal;
    color: #878787;
    width: 641px;
    line-height: 1.5em;
    float:right;
    }

    .subheading {
    float: left;
    margin: 30px 15px 0 0;
    }

    #mainContent{
    width: 1016px;
    height: 100%;
    margin: 0 auto;
    position:relative;
    }

    #mainheading{
    width: 940px;
    height: 92px;
    margin: 0 auto;
    position:relative;
    }

    .heading{
    float:left;
    width:300;
    height: 52px;
    margin: 0 auto;
    padding-top: 27px;
    padding-right: 125px;
    position:relative;
    }

    #introduction{
    width: 940px;
    height: 202px;
    margin: 0 auto;
    position:relative;
    }

    #vision{
    width: 940px;
    height: 139px;
    margin: 0 auto;
    position:relative;
    }

    #mission{
    width: 940px;
    height: 180px;
    margin: 0 auto;
    position:relative;
    }

    #value{
    width: 940px;
    height: 139px;
    margin: 0 auto;
    position:relative;
    }

    #services{
    width: 940px;
    height: 180px;
    margin: 0 auto;
    position:relative;
    }

    #top{
    width: 940px;
    height: 50px;
    margin: 0 auto;
    position:relative;
    }

    Part of html:

    Code:
    introduction

    OrienTouch Entertainment is an independent and professional entertainment and events organization bureau which specializes in organizing both traditional and modern Chinese entertainment shows to cater to your explicit wishes.

    OrienTouch is proud to present and organize the annual Miss China Europe Pageant and the European Chinese New Talent Singing Championship to generate and discover promising new talents in Europe. The success and popularity of both events had generated huge publicity in Europe. Both the events are now broadcasted in 48 European countries by the Chinese channel TVBS.


    vision

    China is harnessing an increasingly prominent role in the world. There are now increasing opportunities for China and Europe to collaborate with each other in the areas of economy, culture, politic and tourism due to the exponential rise of the Chinese economy. There is also an increasing need from the Western society to understand the diversity and beauty of the Chinese culture. Chinese entertainment shall form an important bridge to reinforce the relationship between both parties.


    mission

    OrienTouch's mission is to constitute professionally organized and distinctive Chinese entertainment shows and events. We are also dedicated to discovering and uniting brilliant young talents from Europe and China.

    Through the major events that we are organizing annually to offer the youths in Europe a chance to showcase their talents, we are also successful in uniting the diverse Chinese communities living in Europe.


    value

    Our extensive entertainment network in Europe and China ensures the quality and professionalism of our entertainment programs. OrienTouch collaborates with the major Hong Kong television channel TVBS and hence, the events we organized had generated much publicity and exposure in Europe. OrienTouch has an experienced and highly creative team to organize and deliver the most spectacular and tailor-made Chinese event and entertainment to cater to your very wishes!


    # November 12, 2009 at 1:56 pm

    You have not defined any margins in the css so each browser is just using its own default settings, specify the top (and bottom) margins for all <p>’s in the stylesheet.

    # November 12, 2009 at 3:27 pm

    Thanks. I put the paragraphs into a div and gave the div a top-bottom margin. But I still encounter problems. Everything looks good in Firefox on my mac, but when I check it on Firefox pc and other browsers it’s still not aligned correctly. FYI I did specify a height for each div where the text is. eg. introduction div, vision div etc. Is this causing the problem?

    # November 13, 2009 at 6:54 am

    The extra divs are totally unnecessary and setting a fixed height for a text area is never a good idea.

    If it was my page I would give div.hr top and bottom margins, take the specific height away from the divs (which incidentally dont need to be seperate id’s, they could all share a class), alter the .subheading margins (which should really be headings), get rid of the extraneous divs, float the <p>’s right again and set their bottom margins and, finally, move <div class="clearfix"/> before the <hr />’s.

    Code:
    div.hr {
    background:transparent url(img/divider.gif) no-repeat scroll 0 0;
    height:2px;
    margin:10px auto 30px;
    padding:0;
    width:940px;
    }
    #introduction {
    margin:0 auto;
    position:relative;
    width:940px;
    }
    .subheading {
    float:left;
    margin:5px 15px 0 0;
    }
    p {
    color:#878787;
    float:right;
    font-size:14px;
    font-style:normal;
    line-height:1.5em;
    margin:0 0 12px;
    padding:0;
    width:641px;
    }
    Code:


    introduction

    text

    text

    # November 13, 2009 at 8:29 am

    Thanks apostrophe!

    It’s working now! Yeah I know it’s not all semantically correct, I think the veteran coders will have a headache looking at my code. Thanks for pointing out the problems though. I’m still learning and it can be sometimes be frustrating since I’m not a web designer familiar with coding/css, I am an animator actually.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".