Solved

Firefox doesn't align image to left of div but IE does.

Posted on 2009-05-08
11
328 Views
Last Modified: 2013-12-07
I have an image and a div. The image is defined with align=left. In IE, the div begins to the right of the image. In FF, the div goes behind the image.

Secondly, my div as text-align: center. The div contains text and a div below the text. In IE, the text and the nested div are centered. In FF, only the text is centered.

Can anyone tell me how I can:
1) not have FF cover the div with the image?
2) have the nested div centered in the div for FF?
0
Comment
Question by:ZekeLA
  • 4
  • 4
  • 2
  • +1
11 Comments
 
LVL 39

Accepted Solution

by:
abel earned 250 total points
Comment Utility
It would be very helpful if you could show a link to your page or the full code (use "attach code snippet"). Normally, the answer to your first question would be: use z-index (but sometimes the problem lies elsewhere):

#myImage {
    z-index: 100;
}
and to your second question: I believe firefox is correct here and IE is not. Use margin-left/right is auto on the inner element to fix this:

#myDiv {
    margin-left: auto;
    margin-right: auto;
}
that is the "normal" way to center an element within its container.
0
 
LVL 30

Assisted Solution

by:renazonse
renazonse earned 50 total points
Comment Utility
If I'm understanding this correctly, it sounds like you may need to assign a left position to your div (assuming you want it to sit in that position). If not, and image of what's happening and an image of what you want to accomplish may help.
0
 
LVL 1

Author Comment

by:ZekeLA
Comment Utility
Attached are images of what I want (IE Good) and what I don't want (FF Bad). My descriptions only relate to how it appears; I do not think FF is bad and I know IE is the one that is incorrect according to CSS standards. I just want to get the result in IE Good.
IE-Good.jpg
0
 
LVL 1

Author Comment

by:ZekeLA
Comment Utility
Second Image...
FF-Bad.jpg
0
 
LVL 30

Expert Comment

by:renazonse
Comment Utility
from this it looks abel may have the right idea with the margins:

#myDiv {
   margin-left: auto;
   margin-right: auto;
}

pasting and example of the code your working with will help as well.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 39

Expert Comment

by:abel
Comment Utility
> Second Image...
note: you can put more images/uploads in one post (not that it matters so much, though).

Have you applied my code? It should work for your situation. Otherwise, I'd love to see a link to your page and/or your full source code.
0
 
LVL 1

Author Comment

by:ZekeLA
Comment Utility
I just realized these images are after my last hack: I added a second div above the current one to force things down. I'll try your solution after reversing the hack. Unfortunatly, I have a meeting to go to and probably won't get to this until tomorrow.
(I did try uploading in two passes but I forgot the description and it seemed to cause problems when I tried to add it after - only the first image got uploaded. In the future, I know to add the description so I can do multiple images.)
0
 
LVL 39

Expert Comment

by:abel
Comment Utility
(interesting, maybe you should mention that as a bug to EE. )
0
 
LVL 4

Assisted Solution

by:galadore
galadore earned 200 total points
Comment Utility
I'd get rid of the 'align=left' and div the pic with an inline 'style="float:left"'.  Just define the width for the other div and center with 'margin: 0 auto;' and you should be all set.
0
 
LVL 1

Author Closing Comment

by:ZekeLA
Comment Utility
Whenever I try to be good and use CSS for seemingly basic layout solutions, I run into these browser differences. In just a few minutes I fixed the whole problem using a simple table containing 1 row and 2 cells. I appreciate the suggestions. I'm not sure what the correct process is when the author abandons the original question, but I've assigned points as best as I can determine.
0
 
LVL 39

Expert Comment

by:abel
Comment Utility
(from grading comment)
> I'm not sure what the correct process is when the author abandons
>  the original question, but I've assigned points as best as I can determine.


you didn't abandon, you stayed around and found an alternative solution. The table-solution is a good one and for completeness sake I post it here (and for the PAQ archive). Which is what the "correct process" is, you post your solution, accept your post as a solution and assign points to the people who invested time and/or brought you closer to a solution.
(from grading comment, solution by OP)Whenever I try to be good and use CSS for seemingly basic layout solutions, I run into these browser differences. In just a few minutes I fixed the whole problem using a simple table containing 1 row and 2 cells.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
The viewer will learn how to dynamically set the form action using jQuery.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now