Solved

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

Posted on 2011-03-25
9
199 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
  • 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
 

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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now