Couple IE Issues

HTML & CSS
1

Hi,

Our website 1TM.com has a couple IE issues.

First is a drop down menu issue when you use the drop down the text warps… Example: http://www.1tm.com/fixing/IEDROP.jpg

Second are these tiny white space on the bottom of the images… example: http://www.1tm.com/fixing/IESPACE.jpg

Any help would be much appreciated.

Thanks!

2

First is a drop down menu issue when you use the drop down…
Hi,

That problem got started by the float on the .products ul li , a float without a width will shrinkwrap to the width of it’s content.

Then the problem got compounded by floating all the child elements too, the only one that needed a float was the img

Remove the floats from the LI, H2, and P and add text-align:left to the LI

.products ul li {
border-bottom:1px solid #CCCCCC;
display:block;
[COLOR=Red]/*float:left;/*---- remove this ---*/[/COLOR]
height:40px;
padding:10px 0;
[COLOR=Blue]text-align:left;/*--- add this ---*/[/COLOR]
}
.products h2 {
display:block;
[COLOR=Red]/*float:left;/*---- remove this ---*/[/COLOR]
font-size:16px;
margin:0;
padding:2px 0 3px;
}
.products p {
color:#666666;
display:block;
[COLOR=Red]/*float:left;/*---- remove this ---*/[/COLOR]
font-size:10px;
margin:0;
padding:0;
font-size:10px;
}
.products img {
[COLOR=Blue]float:left;[/COLOR]
padding-right:10px;
}

Second are these tiny white space on the bottom of the images
When using images in the html like that IE will give you whitespace at the bottom in it’s default state of vertical-align:baseline

The fix is to set it as vertical-align:bottom or change the img to display:block
Set up a new selector to target that img and style it or better yet make them background images positioned at the bottom of the parent element with some bottom padding to show the image.

3

Thanks Rayzur

the warped text works in IE now but the menu its a little longer then in every other browser. Also the tiny white space vertical-align:bottom and display:block does not work. Could you possibly give me an example?

Thanks again!

4

Also the tiny white space vertical-align:bottom and display:block does not work.
I didn’t notice you had them nested a mile deep in tables like that :frowning:

You may have missed the whole point of CSS, take a look at all the inline styles and tables your using on that hosting plans page.

Now the content in your left column IS table data so that is fine. Everything in that right column does not really qualify as table data.

You might try setting a class on the images causing the whitespace, that way you can target them without effecting all the other images in your tables.

You also have IE in quirks mode because of an incomplete doctype, it is missing the referring url.

W3C QA - Recommended list of Doctype declarations

Fixing the DTD might help the img problem, not sure but it needs to be fixed just the same.

5

Wow lol putting the DTD makes everything all over the place.

Any way to fix it in the current mode?

Thanks Rayzur

6

Wow lol putting the DTD makes everything all over the place.

That’s actually a good indicator of problems it’s causing while in quirks mode.

Make a version of that page with the DTD correction and post the link so we can see what it does.

Any way to fix it in the current mode?

Unless a table expert comes along with some trick that I’m not aware of the only thing I can suggest is putting a class on the problem images so you can target them only as I mentioned above.

7

Which Doctype declaration should I use?

Thanks!

8

We’ve been through this before and you can’t use a standards mode doctype because it breaks your whole page as it is built on quirks mode.:slight_smile: There were just too many bugs to fix (e.g. you have no units on your inline styles which mean in standards mode they will be treated as zero).

If you remember way back I (and others since) gave you a standards based version right at the start but you had gone too far with this design to change and now you are stuck with what you have I’m afraid.

Note that the links to the images in your first post seem to be redirecting to your front page so I can’t see which images you are looking at specifically.

9

The links should work again I fixed the example 1 (menu still showing longer in IE.) but still have issues with example 2

Example 1: http://www.1tm.com/fixing/IEDROP.jpg

Example 2: http://www.1tm.com/fixing/IESPACE.jpg

Thanks!

10

A quick and dirty fix would be to add a negative margin to the bottom of the table to soak up the gap.

e.g.


<!--[if IE ]>
<style type="text/css">
#SocialNav {display:none}
[B]table{margin-bottom:-2px}[/B]
</style>
<![endif]-->
11

Sorry about that Paul, I didn’t know the history on that layout.
Yes, it seems a bit late to turn back now short of rebuilding it.

12

No worries Ray I was just trying to save you some work :slight_smile:

Actually, now I come to think of it I’ve even offered this fix before this same issue a few months ago :slight_smile:

13

It worked but I have some question. I’m not starting over which is the best way now to optimize the code for the website?

Also I tried putting all my websites style tags in class tags but its showing all over the place not exactly how they look now. How come its not working?

Using CSS like this:
}
.class1
{
style information here
}
.class2
{
style information here
}
.class3
{
style information here
}

14

I’d need to see the real code to find out why its not working as there could be many things that could get in the way (specificity for example).

You do have an extra bracket at the start but I guess that was just a typo.