Alignment Issues in FF/IE
Posted: 19 June 2008 09:04 AM   [ Ignore ]
Newbie
Rank
Total Posts:  9
Joined  2008-05-28

Hi all,
    So I’ve been redesigning a site for a client for a while, I’m just getting back into the swing of this stuff after sometime off. I’ve had the usual FF vs. IE problems and gotten it down to just two pages that I can’t figure out how to solve. I would really appriciate some advice!

They display fine in IE and are a mess in FF. The page links are;

http://www.bjmarine.net/newsite/salesteam.html

http://www.bjmarine.net/newsite/services.html

http://www.bjmarine.net/newsite/images/bjmarine.css

Thanks for your input in advance!
Denis

Profile
 
 
Posted: 19 June 2008 01:30 PM   [ Ignore ]   [ # 1 ]
Member
Avatar
RankRankRank
Total Posts:  52
Joined  2007-11-08
<div id="staff-columns">

                <
div class="col-left-staff">
                    <
img src="images/bernard.jpg" width="250" height="250" alt="Bernard Gallagher" class="no-border" />
                </
div>
                <
div class="col-right-staff"><br /><br /><br />
                    <
h3>Bernard Gallagher Managing Director</h3>
                    <
p>Lorem ipsum dolor sit ametconsectetuer adipiscing elitPraesent aliquamjusto convallis luctus rutrumerat nulla fermentum diamat nonummy quam ante ac quamMaecenas urna purusfermentum idmolestie incommodo porttitorfelis. </p>
                </
div>
            </
div>

            <
div id="staff-columns">
                <
div class="col-left-staff-odd">
                    <
h3>Noel Davidson SalesDublin</h3><br />
                    <
p><strong>Mobile: +353 87 771 2225</strong></p>
                    <
p>Noel Davidson has been with BJ Marine since 2001. Noel was Marketing Distribution Manager with Quinnsworth before coming to BJ Marine to “work at his hobby”He is a qualified Yachtmastera member of Howth Yacht Club where he can regularly be seen helming his boat in the Club regattas and has a wide knowledge of both power and sail boats.  Noel is passionate about his industry both professionally and socially and is well known member within the marine industry</p>
                </
div>
                <
div class="col-right-staff-odd">

                    <
img src="images/noel.jpg" width="250" height="250" alt="Noel Davidson" class="no-border" />
                </
div>
            </
div


You’re using duplicated ids of “staffs-columns”..bad practice..Always keep in mind : IDs are unique, classes may be multiple


So, the problem you’re getting on your pages is quite ‘normal’. I believe you’re using floats to display the photo on left, text on right and vice-versa. You should always clear the float before leaving the container, i.e, div#staff-columns.

Regards,

Profile
 
 
Posted: 20 June 2008 08:27 AM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  9
Joined  2008-05-28

Thanks for that! clear: both; works great but when I change the mulitple id nests to class it stacks all the divs on top of each other vertically down the page.

Profile
 
 
Posted: 20 June 2008 10:22 AM   [ Ignore ]   [ # 3 ]
Member
Avatar
RankRankRank
Total Posts:  52
Joined  2007-11-08

When you change your ids to classes, you should also do the same in your stylesheet..

Also, I believe you can, when you can, try implement the same layout with an unordered list and eliminate as much structure tags like “<br>”..

Profile