css, mozilla issue

css forces images to scroll to drop 1 line below

[mcaizpp2]

Hi, I have this html/css code that baasically works correctly in IE6/7 but when it comes to mozilla the image and text drop to the next line.

The html is -

<div id="Breadcrumbs">
<div style="display: block; position: relative; height: 30px; width: 100%; ">
<div class="left">
<!--breadcrumb text -->
</div>
<div class="right">
<div style="display: block; float: left; ">
<asp:Literal ID="ltlUserName" runat="server"></asp:Literal>
<asp:LinkButton ID="lnkLog" CssClass="logoutLink" OnClick="btnLogOut_Click" runat="server" CausesValidation="false"></asp:LinkButton>
</div>

<div class="linkImg" style="margin-left: 5px;">
<a href="javascript:help('help/member/contents.htm');" title="Help (Opens a new window)">
<img src="images/help.gif" alt="Help" class="img" style="padding-top:5px;"/>
<span class="link">Help</span>
</a>
</div>
</div>
</div>
</div>

the css for the classes used is -

#Breadcrumbs
{
display: block;
position: relative;
border-top: dotted 1px #ccc;
border-bottom: dotted 1px #ccc;
font-size: 11px;
color: #5B6671;

}

#Breadcrumbs .right
{
position: absolute; right: 10px; line-height: 22px;
}

#Breadcrumbs .left
{
position: absolute; left: 10px; line-height: 24px;
}

#Breadcrumbs a
{
color: #5B85BE;
font-weight: bold;
text-decoration: none;
}

.logoutLink
{
display: inline;
margin: 0px 20px;
padding: 0px 10px;
border-left: solid 1px #ccc;
border-right: solid 1px #ccc;
}

Basically what you should see is -

breadcrumb Logged in as eemail address ¦ LOGOUT ¦ help_Image Help

Instead what you get is the help image and the help text on the next line down. This only occurs in Mozilla, in IE6/7 it all appears on 1 line.

Thanka for any suggestions

[swa66]

Welcome to webmasterworld! [webmasterworld.com]

I'm trying to grasp what you're trying to do and why you go about it the way you do, but I honestly fail.

Why do you use those absolutely positioned blocks in the first place ?

Why no just float the stuff that needs to go right to the right and let the rest sit in the flow on the left ?

Oh, an important tip (for next time I guess): try to develop in a standards compliant browser and only then fix what's broken in IE in a few conditional comments, it'll be much faster, easier and far more future proof that way.

[mcaizpp2]

Hi Thanks for responding.

The code I showed you literally represents 1 line on the webpage I'm working on. On the left will be the breadcrumb trail and then on the right of the page (same line) will be the login name, log out button and help image.

I'm not an expert on css to be honest ansd this isn't a web page I created. I was just told to see why the help gif falls on to the second line in mozilla. Ill give you suggestion a go and I'll let you know how I get on.

Thanks.