• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 222
  • Last Modified:

How can I center an image in a table cell list?

Please refer to http://zclientdev.net/stre/index.html and view it in IE. Displays fine in other browsers.

Please go to the bottom navigation bar and note that the twitter image is aligned to the right in IE but is situated next to the Contact Us link in the other browsers. The relevant styles are:

#tbut {
  display: block;
   float: right;
   margin-top: -2px;
    padding-left: 6px;
}
.navigationbottom{
float: left;
    height: 32px;
    padding-top: 3px;
}

This is an old site that I inherited and I would like to avoid HTML changes as this code is hard coded throughout the site. Can the two styles be modified so the page displays properly in IE?

Thank you!
0
timburkart
Asked:
timburkart
  • 4
  • 3
  • 2
1 Solution
 
AmickCommented:
Changing your doctype to strict will induce newer versions of IE to interpret the page in Standards mode.
0
 
timburkartAuthor Commented:
Hi Amick,

Thank you for your response however changing the doctype is the same as changing the HTML. I would have to make the change across the whole site. My question is can the CSS alone be changed to fix this display problem?

Regards,
Tim
0
 
AmickCommented:
That's a fair comparison, but there are easy ways to make such bulk changes, and DOCTYPE only shows up once at the top of the page as opposed to HTML elements, many of which appear multiple times in unspecified locations.  In the long run you are better off with pages that render in Standards mode than pages that render in Quirks mode, but you are currently forcing perfectly good browsers into quirks mode with your DOCTYPE declaration.

Here's an article discussing bulk editing with SED: http://www.schrodingersghost.com/?p=242

You can introduce conditional IE accommodation code in your CSS and style #tbut as you'd like, but I advise against it.  A February, 2011 report showed that only about 9% of the remaining browser population is using IE7 or older in any case.

Here's a link to writing IE conditional code if you decide that's the way you really want to go. http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
timburkartAuthor Commented:
If I change the doctype don't I run the risk of affecting the entire site? As I am not the author of the original code on the site that this page represents, I don't want to introduce any other problems. I am trying to fix one problem that is controlled by the two styles I indicated. Please, would you or someone tell me if that is possible, AND tell me how I can accomplish my goal.

I have no desire to write IE conditional code because again that would force me to change multiple HTML pages. I would really prefer to change a single CSS file containing the ID and CLASS.

Thank you!
0
 
Mark BradyPrincipal Data EngineerCommented:
Timburkart: How are you going to make any changes to those two CSS rules as the rules themselves are located inside the html page (hard coded) and not linked. I mean they may be located in one of the external style sheets but they are also hard coded inside that webpage you gave us the link to. If you don't want to edit any HTML then how would you accomplish your task?

In saying that, if you can edit that code then you could try adding "text-align:right;" without the quotes to your #navigationbottom{} rule. that would force anything you put inside it to the right unless it is a div or class with their own rules. Give it a try and see if it helps.
0
 
timburkartAuthor Commented:
Hi elvin66,

I put those two rules inside the HTML page for demonstration purposes. They are actually contained in one of the linked css files. I thought it would be easier to make changes to them based on feedback I received here.

As for your suggestion to align right, I want the image to align left in IE as it does in FF, etc. I am trying to get the HTML and CSS to display the same across browsers. Right now IE is the problem not the solution. I tried to text-align: left but that didn't work.

Is there another option?
0
 
Mark BradyPrincipal Data EngineerCommented:
Sorry I got it around the wrong way. Yeah text-aligned:left should throw all content to the left but if it's not working..... You could get fussy and give it an absolute position instead of floating it? Or add a left or right border to it untill it displays properly in all browsers (you are not going to be able to test them all but I mean the main ones).
0
 
AmickCommented:
Add this to your css file

<!--[if IE]>
#tbut{
  display: block;
   float: right;
   margin-top: -20px;
    padding-right: 28%;
}
<[endif]-->

Open in new window

0
 
AmickCommented:
The use for the conditional tags was not properly shown above.

To include in HTML use it this way
<!--[if IE]>
<style type="text/css">
#tbut{
  display: block;
   float: right;
   margin-top: -20px;
    padding-right: 28%;
}
</style>
<[endif]-->

Open in new window


In an external CSS file, use it this way

[if IE] #tbut{
  display: block;
   float: right;
   margin-top: -20px;
    padding-right: 28%;
}

Open in new window


If this is used in an existing CSS file, you may want to precede the non-IE styling with [if !IE],  the non-IE styling should occur before the IE specific styling.

You may have to adjust #tbut's styling to suit your needs, but this should get you in the ballpark.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now