I am trying to get an image (my logo) to stay in the upper left corner
of my blueprint container over any other elements in the container.
My current site does this only for FireFox and Safari, but IE7 pushes
the image outside and to the right of container.  I am no CSS guru, so
it is probably dumb luck that I got FireFox and Safari to work as it
does.

All my attempts have failed. My large logo just doesn't fit into the
rows that I have defined for my header, greeting and menu, so that is
why I have attempted to use position:absolute. My attempts to get IE
to work only cause the image to be at the top and pushes down all the
rest of my elements on the page.

You can see the login page of my site at
http://community.life.railsplayground.net.  It will look just like I
want it in Safari and FireFox, but IE7 (didn't test with IE6) will
show the problem.

Here is the snippet of code that I currently have

        <body>
                <div class="container">
                        <div style="position:absolute;padding-left:10px">
                                <a href="/"><img alt="logo" 
src="/images/logo.gif" /></a>
                        </div>
                        <div class="page span-24 last">
                                <div class="header span-24 last">
                                        <div class="prepend-4 span-10">
                                                <div class="greeting">...</div>
                                        </div>
                                        <div class="span-10 last">
                                                <div class="address">...</div>
                                        </div>
                                        <div class="menubar span-24 last">
                                                <div class="menu">...</div>
                                        </div>
                                </div>
                                <div class="content prepend-4 span-20 last" 
style="margin-top:
25px;margin-bottom: 2px;">...</div>
                                <div class="footer span-24 last">...</div>
                        </div>
                        <div class="footnote small span-24 last">...</div>
                </div>
        </body>

If anyone has any suggestions on how I can keep the image in the upper
left corner of my container in all three browser, I would be much
appreciative.

Jason

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Blueprint CSS" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to 
[email protected]
For more options, visit this group at 
http://groups.google.com/group/blueprintcss?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to