Link to home
Start Free TrialLog in
Avatar of timburkart
timburkart

asked on

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!
Avatar of Amick
Amick
Flag of United States of America image

Changing your doctype to strict will induce newer versions of IE to interpret the page in Standards mode.
Avatar of timburkart
timburkart

ASKER

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

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!
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.
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?
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).
Add this to your css file

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

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Amick
Amick
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial