Text doesn't show in IE but looks fine in FF

Hi There,
If you look at this page in FF and IE
http://www.lazybones.com.au/categories.php?cat=7

You will see that the text and background color to the images doesn't show up in IE?

Does anyone have any idea why this could be?

What do I need to change in the css to make this work in my favourite (NOT!) browser IE?


TIA
LVL 11
Amanda WatsonWeb DeveloperAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
andrewbleakleyConnect With a Mentor Commented:
Try the attached PHP - it is obviously untested.

The change was to print the text link category name under he image (in the same P tag) and remove the extra table cell that was printing to the right of the cell with the image.

You will have to comment out the margins in the style sheet /template_css_shopcat.css around line 106. Sorry I couldn't test it but it needs a database
snowball.php
0
 
Sector5Commented:
Hi snowball77,

Try the following:

1. http://www.w3schools.com/Css/pr_background-color.asp

2nd thing to try:

CODE
<style type="text/css">
body
{
background: #ffffff url('background.jpg') repeat;
}
</style>

OR

CODE
<style type="text/css">
body
{
background: #ffffff url(background.gif) repeat;
}
</style>

Another thing to try:

3.When you create CSS style using Dreamweaver for web designing, Dreamweaver Adds a default code such as

    @charset “utf-8¿;

Try removing this from your stylesheet, the background image or colour should Display properly


4.Also check CMYK colors in the image, try saving as RGB (for IE)

5.Wherever " @charset "utf-8"; "is, make SURE it is on line 1 of your CSS document
6.Great website to check out is:
http://www.w3schools.com/css/css_background.asp

I hope this helps!! Please let me know.
0
 
remorinaConnect With a Mentor Commented:
Hi snowball77,
The reason it's not showing is because it's actually constructed in a totally wrong way.
You're placing the text paragraph inside a table cell then giving it negative left margins to make it appear below the cell on its left.

Although it's working in FF and some other browsers, it's not a good html structure and probably will never show in IE unless you use relative/absolute positioning which will introduce many other issues to deal with.

Also the table cell widths are not correct?, the cell that holds the image is 5% width?

consider the following
  • move the <p class="catname"> under the image inside  <td class="catimage" width="5%" align="right"> and adjust the cell widths, although it would still work with current widths.
  • Replace its CSS class with the one below
  • I've tested it and it works in both FF and IE

P.catname {
display:block;
text-align: center;
margin:0;
background:#E1E4E9;
}

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Amanda WatsonWeb DeveloperAuthor Commented:
Hi Sector5, I am not sure why you suggest adding a background image to my entire page for this?
Um its only one part of the code that is failing to show?

Also I have checked my css and can''t find this @charset “utf-8¿;

Can you see what the issue is..?

This is the CSS in question attached and I think this is the code that isn't working in IE
P.catname {
width: 168px;
text-align: center;
margin-top: 182px;
margin-bottom: 4px;
margin-left: -176px;
vertical-align:bottom;
background:#E1E4E9;

}
P.catdesc {
margin-top: 0px;
margin-bottom: 4px;
vertical-align:top;
}

Please help
template-css-shopcat.txt
0
 
remorinaCommented:
Hi snowball77,
Have you checked my comment and tried the above ?
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Hi Remorina,
Um I am not sure how to do the first part "move the <p class="catname">  under the image inside  <td class="catimage" width="5%" align="right"> and adjust the cell widths, although it would still work with current widths. "

I changed the css as you suggested and its not working so I have to change the php code attached.

I can see one line of code you mentioned on line 146 but the first reference to class="catname" is on line 177 so it is after...
bit lost how to do that?

I have attached the inccategories.php file to see if you can help there?

Sorry I didn't see your earlier post, we must have posted at the same time!


inccategories.txt
0
 
andrewbleakleyCommented:
There are a whole bunch of problems. Your best bet would be to fix the PHP so that it output proper tables and rows, instead of trying to shift table cells down and to the left (to look like rows) - alternatively you could create captions beneath the images instead of new cells.

Let me look at modifying the PHP for you - it is a far better solution.

The straight CSS way would be to set the P class "catname" to be position:relative and use the left value to move it. At the moment it is moving the margin area which in IE will not have a background colour applied. Increase the width of the element width:400px; to see where the background colour starts and stops
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Excellent..fixed thanks.
I have just noticed another error now in IE and will post another questions about that now.
Thanks again,
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_25503130.html?fromWizard=true

A
0
All Courses

From novice to tech pro — start learning today.