[Solved] Cross Browser Positioning Problem

[Totoro]

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:

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.

---

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.

---

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.

---

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!

---

[Totoro]

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?

[Totoro]

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.

[Author]

Posts