Solved

Centering image in a DIV with IE6? (got it working in FF and IE7)

Posted on 2007-11-21
3
1,546 Views
Last Modified: 2008-02-01
Hi there,

I have a image centered in a div using FF and IE7 using the following method.

.tagName { height: 200px; float: left; width: 100px; line-height: 200px; text-align:center;}
.tagContent1 {height: 200px; float: left; line-height: 200px; text-align:center; vertical-align: middle;}

        <div class="tagContent1">
            <a class="no-border" href="http//test.com">
                <img style="vertical-align:middle;" alt="test alt" src="http://www.test.com/Services/Images/gen.ashx?url=http://test.com/" />
            </a>
        </div>

this works great in FF and IE7, ie 6 isn't aligned correctly...

Then i read a document that said to make IE6 play nice you add a font-size the same size as height.. i.e. so i got this line now

.tagContent1 {height: 200px; float: left; line-height: 200px; text-align:center; vertical-align: middle; font-size: 200px; }

But this throws everything off inc ie7 and ff

my img which is inside the div as the following on it

<img style="vertical-align: middle;"  for testing..

It may have something to do with the doctype but i am using the following
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I know this is a real pain to do, as i see many others asking similar questions but i don't see a solution as yet...

Any advise really appreciated

thanks



0
Comment
Question by:iangregson1
[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
3 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 20332898
always try and use the strict DOCTYPE
0
 

Author Comment

by:iangregson1
ID: 20333010
1.0 or 1.1, what is the difference?

but some of the css requires workarounds/hacks and using a strict doctype would prevent that no?
0
 
LVL 1

Accepted Solution

by:
edenmachine earned 500 total points
ID: 20335706
It appears that the image is actually centered inside the div.  The problem seems to be that the div doesn't have a specified width therefor it "snaps" tightly around the image with no room for the image to move left or right.  If you want to fix this, simply put a width of "100%" (or whatever your need is) and then the image should center within the div's specified width.
0

Featured Post

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

690 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