IE Problem with List Images - Weird, Very Unpredictable

**dwzemens** · Sep 23, 2006, 17:02

http://zemens.com/gehometech/home.php

I cannot figure out why the arrow image to the left of the "Unordered List Items" in the center and right hand column display unpredictably in IE. Each list item has the same image attached via CSS, and in FF they are perfect in appearance. But in IE there are some items with arrows and some without, even though the code for both the center and right columns is identical code called from an included text file.

The code is valid CSS and HTML....

Can anyone suggest what the problem is in IE?

Thanks very much once again.

**deathshadow** · Sep 23, 2006, 17:13

I'm not seeing any 'arrows' out of place in IE, at least nothing that also isn't broken in Opera... but your entire column layout isn't working at ALL, being one long stripe down the page...

I'd dig deeper, but your HTML is giving me a headache on the formatting... To be honest with all the 'commenting for the sake of commenting' and oddball hodgepodges of formatting techniques, I'm amazed you got it to validate, much less work in a standards compliant browser.

**dwzemens** · Sep 23, 2006, 17:21

Problem solved by adding postion:relative to the ul li.

Deathshadow: Dude, go easy, I am just developing this. Besides, it now works perfectly in FF and IE 6.0. Three columns, not one long column.

My HTML and CSS is perfect and validates to strict standards. What's your beef here? Thanks for nothing.

**deathshadow** · Sep 23, 2006, 17:32

Originally Posted by dwzemens

My HTML and CSS is perfect and validates to strict standards. What's your beef here? Thanks for nothing.

Excuse me if I was a bit too blunt, but it's how I am. I see something wrong, I tell you it's wrong instead of trying to 'magic bullet' your problem.

Just because the code validates doesn't mean the formatting is legible or easy to follow, and also doesn't mean it's cross browser friendly... and most certainly doesn't mean you are using the 'right tags for the right job'.

Besides, this:
<body id="home">

is enough to make EVERYONE here break out in hysterics

Oh, and IE now returns two columns, with the third appearing beneath the left one.

**dwzemens** · Sep 23, 2006, 17:34

What version of IE are you using?

**deathshadow** · Sep 23, 2006, 17:38

Originally Posted by dwzemens

What version of IE are you using?

IE 6.0 and 7.0 RC1 both have the problem. WinXP SP2, 120dpi system metrics (aka 'large fonts') on.

It could be my 'large fonts' metric, which could be effecting your layout if you used PT or EM inside a fixed pixel-width design.

**deathshadow** · Sep 23, 2006, 17:51

In fact, this is most likely the problem:
font-size : 90%;

Which means safari might choke as well... 90% does not equal the same font size in relationship to pixels on all machines because not all browsers start out with the same sized fonts...

**dwzemens** · Sep 23, 2006, 17:55

Thanks --- what would you suggest I use for the font size?

**brandaggio** · Sep 23, 2006, 18:46

The site is visually really nice and clean - nice job there.

The point about the commenting overkill is that it actually does the opposite of what you intend - the page is so overcommented it is hard to seperate things outs. By doing as best you can to use CLASS and ID names that are as descriptive of the content they contain as possible, you will not really need many comments and your markup will be as crisp and lean as your site looks.

e.g.:
<h2 id="tagline">Best Widgets in Widgetville</h2>

is self explanatory

No need to say:

<h2 id="tagline">Best Widgets in Widgetville</h2>

The site does look quite nice in Safari as of now - 3 columns.

In the real world pixels for font sizing offer the most consistent results across browsers and lessens quirks that may be caused by inheritence.

You put the home ID on the body tag to differentiate everything on the page from another page I imagine - there is nothing wrong with doing that per se (It is in the O'Reilly CSS Cookbook IIRC), but don't do it unless you need to show an active/current state or have some other good reason. It is kind of a "blunt instrument".

Probably a result of recent edits you have made (and some from image replacement) - but you should run your page through Tidy as you have 10 or so warnings - nothing big - but it will certainly help in the effort towards more consistent cross browser rendering.

**Tyssen** · Sep 23, 2006, 19:09

Originally Posted by deathshadow

Besides, this:
<body id="home">

is enough to make EVERYONE here break out in hysterics

I'm not laughing. What's so funny about that?

**Dan Schulz** · Sep 24, 2006, 00:40

I use it also... albeit sparingly and only when I want to highlight the current page's link in a menu, or if I want to style a certain page differently from the others.

**dwzemens** · Sep 24, 2006, 01:32

Thanks John and Tyssen for your comments. Much appreciated. I am pretty new at this game, but really try to get things done correctly.

**brandaggio** · Sep 24, 2006, 03:37

Originally Posted by dwzemens

Thanks John and Tyssen for your comments. Much appreciated. I am pretty new at this game, but really try to get things done correctly.

You are doing really well. One step at time as they say - you will get there. I learn new tricks and techniques every day - every day I learn there was that that much more I wasn't aware of now want to explore.

The SitePoint Forums have moved.

User Tag List

Thread: IE Problem with List Images - Weird, Very Unpredictable

Thread Tools

Display

IE Problem with List Images - Weird, Very Unpredictable

Problem Solved

Bookmarks

Bookmarks

Posting Permissions