Solved

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

Posted on 2009-05-08
11
333 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 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:Britt Thompson
Britt Thompson 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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
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 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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.

729 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