?
Solved

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

Posted on 2011-03-25
9
Medium Priority
?
217 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
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

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!

Question has a verified solution.

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

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…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month16 days, 11 hours left to enroll

864 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