?
Solved

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

Posted on 2009-05-08
11
Medium Priority
?
335 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
  • +1
11 Comments
 
LVL 39

Accepted Solution

by:
abel earned 1000 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:Britt Thompson
Britt Thompson earned 200 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
Percona Live Europe 2017 | Sep 25 - 27, 2017

The Percona Live Open Source Database Conference Europe 2017 is the premier event for the diverse and active European open source database community, as well as businesses that develop and use open source database software.

 
LVL 1

Author Comment

by:ZekeLA
ID: 24340503
Second Image...
FF-Bad.jpg
0
 
LVL 30

Expert Comment

by:Britt Thompson
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
 
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 800 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

Get MongoDB database support online, now!

At Percona’s web store you can order your MongoDB database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card. Handle your MongoDB database support now!

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This video teaches users how to migrate an existing Wordpress website to a new domain.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Suggested Courses

800 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