Solved

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

Posted on 2009-05-08
11
329 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
ID: 24340357
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
ID: 24340379
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
ID: 24340495
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
ID: 24340503
Second Image...
FF-Bad.jpg
0
 
LVL 30

Expert Comment

by:renazonse
ID: 24340619
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 39

Expert Comment

by:abel
ID: 24340792
> 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
ID: 24340937
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
ID: 24340950
(interesting, maybe you should mention that as a bug to EE. )
0
 
LVL 4

Assisted Solution

by:galadore
galadore earned 200 total points
ID: 24341812
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
ID: 31579650
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
ID: 24344343
(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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

896 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

18 Experts available now in Live!

Get 1:1 Help Now