Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2009-05-08
11
Medium Priority
?
337 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
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 
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

Industry Leaders: 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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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.
Suggested Courses

636 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