[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2011-03-25
9
Medium Priority
?
214 Views
Last Modified: 2012-05-11
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
Comment
Question by:timburkart
[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
  • 3
  • 2
9 Comments
 
LVL 12

Expert Comment

by:Amick
ID: 35220252
Changing your doctype to strict will induce newer versions of IE to interpret the page in Standards mode.
0
 

Author Comment

by:timburkart
ID: 35220277
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
 
LVL 12

Expert Comment

by:Amick
ID: 35220443
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
Independent Software Vendors: 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!

 

Author Comment

by:timburkart
ID: 35220485
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
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35220544
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
 

Author Comment

by:timburkart
ID: 35220581
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
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35220619
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
 
LVL 12

Expert Comment

by:Amick
ID: 35220710
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
 
LVL 12

Accepted Solution

by:
Amick earned 2000 total points
ID: 35220789
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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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!
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

650 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