element alignment differences between IE and the other browsers

You have some pretty major validation errors.
You should get those cleaned up before we can really help you out.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcombatkicks.com%2Flobby%2Fb_military%2Findex-b_catalog.html

When you use absolute positioning as you have, it takes the elements out of the normal flow of the document. There is no need to use this type of positioning in your case. In fact you could put all this data into a table. That would probably be the best solution given the type of display and data you have. Tables are only frowned upon when used for general layout.

Hi, that's interesting.

I just redid the basic sections of the site,which was built with tables.

My reasoning is that I would like to use the page, in one form or another, as the basis for other pages, and I find the CSS easy to style.

I did have CSS with the tables, but also used in-line style as well.

I thought this would be cleaner.

I will take the first advice and use the w3 validator and I will try using just the relative positioning from the top of the page and see what happens.

I will get back to the forum asap.

Thanks,

Thanks,

Guess I'm tired!

I usually validated when I was building the site three years ago.

I've just gotten back to it and skipped some steps.

I'll validate later today and get back to the forum.

Thank you.

well - corrected the code errors- one (same one four times) wouldn't correct. was the one that I had a while back, now can't figure it out:

"
Line 44, Column 83: end tag for "img" omitted, but OMITTAG NO was specified
…href="index.html#oxford">
✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
"

also for lines 47, 48, 50.

Have not yet redone the positioning to relative o see what that does.

---

You are using xhtml transitional so img tags require a closing / before the > e.g.
<img src="http://xxxxxxxxxxxxx_110.jpg" alt="xxxxxxx" />

Yes - I just converted to xhtml,

And - I haven't fully applied the syntax.

I will applyt this change in my code.

Thank You

well,

Here's where I am.

I tried making all the elements “relative.”

It's a nightmare. Doesn't mean it's un-doable!

I guess I would prefer making all the “containing” elements. those I name “box”, “relative” - and all the “sub_elements” as “absolute.”

In theory this should be like a table with nested td's , etc. or divs with nested divs.

The one I have a problem with is the one called “product-index-box”.

if use relative positioning, all the

That holds true with the other elements.

I still like using

BTW - still couldn't find the error that suggest that there is an unclosed tag (?)

I tried the all relative page here:

combatkicks.com/lobby/b_military/index-b_relative.html.

I will back at it in a couple of hours.

thanks ----

Well,

it's validated. (for now- anyway)

I see that I was also confusing the self closing and regular deimiter closings as well.

I will have to look up to what else needs to be self closed besides the img src.... /> and < /br>

I will see what effect this has on the doc.

(odd thing) A message continually showed that an extra div was there. I counted and searched and refresed the screen - sudenly it validated. (odd))

thanks --

Okay -

Here's where I am after some guidance:

The page validates.

I have tried the suggestion, but can't remove the absolute positioning without three of the fields falling

apart:

product-link-box
product-index-box
footer-box

I would like the product index box to be positioned relative, but it is one of the fields that falls apart

when I change the designation to relative. So, as position:absolute I have to move it farther right by

increasing the px number - but it doesn't have the same horizontal alignment on all browsers that way.

I have z-indexed certain elements and it doesn't work

The first product link image won't show up as a functional link (there is no link-border around it.)

The javascript for the product pop-up in the bottom field is broken. The mouse-over works, but not the

on-click to bring up another screen.

I have plaaced the catalog phrase inside the product index, but in so doing I have lost the font style. I

removed the font styling from the product-index box and inserted it into each of the subordinate

I ried to use a table to hold the index, but as soon as I marked the table relative the ul/li's meged into one pile, albeit at the correct edge of the page contents(?)

Any tips on any of these problems would be helpful.

The link is here:
http://combatkicks.com/lobby/b_military/index-b_catalog.html
- and the DTD has the CSS link.

thanks---

Then your whole design is broken and you should start again from the ground up.

You should not need positioning at all if you are setting up your page correctly, nor should you need z-index unless you have overlapping elements.

Obviously while you have grasped css styling that is not the case for css positioning, which is why I recommended that you put the catalogue lists in a table, that's what tables are for. The main structure of your site can be positioned with css and you can style your tables with css.

You are also confusing yourself by having a body tag and a div called body. Think of the body as your background, then use a container, give it a width and center it by using margin:0 auto;
Inside that container, you put the header, content and footer. In the content you can put a table with the items.

Hello,

Thanks for the continued interest.

The #body{} was a holdover, and was not being used. I removed it. Just sloppy as I've been changing a bunch of stuff.

I already have the following as the main container :

#main-container {
width:800px;
height:100%;
background: #ffffff;
margin: 0 auto;
padding-top:10px;
}

Is there too much in this? Does the extra info negate the " margin: 0 auto; " ?

Yes. I do understand the styling much more fully than the positioning. In general I do understand that absolute positioning removes an element from the "flow" and that other elements below it won't accept its positioning for their positioning.

I am under the impression that it is "legal" to use a relative position in a containing element and then use absolute position inside the element.

But it seems that the next containing element feeds off of the last element, albeit embedded. I am not having this problem with the "header" element nor with the "product link" element. both of those contain absolute positioned nested elements and the they respond well to each other. Even the "footer" element aligns well to the two top elements. It is the index element with the ul/il's that won't respond.

This, obviously is where my confusion lies. I have tried to get the info from the w3c, etc - but I guess I can't grasp it.

I will see what I can do to eliminate the position from the containing elements, and see if that helps .

I did try the table approach for the "index div" and I had the same problem that you see on the page right now. http://combatkicks.com/lobby/b_military/index-b_catalog.html#
IE partially shows the "table." although misaligned and without style. FF shows a clump. As soon as I used relative positioning, it lost all the style. The "index" field falls apart. When I rename it absolute the "table displays properly- or did before some changes.

Are you suggesting that I don't use ul/li's for the tables and stick to td's?

I previously used the table/td approach, but I enjoy using the il/ul because it is cleaner on the page, and as I am going to use this page in many varieties and need to plug product information into it. Having less on the page makes it much easier.

I will try creating another table outside of the page and then inserting it. I will place the new index table without any data, just sizing - and then add the data.

The z-index is for the image at the top right, which I want to fall beneath the text.

Actually, aside from the "div index problem" the page is now aligning the same cross browser; - and, except for a Java problem, the z-index , an irresponsive text field and the image that won't properly size, the page works.

But, obviously with those problems it is not useable.

Dorian

Ed, Thanks for the reply.

I just posted a long reply below. Actually, putting aside the java and an image and a couple of styling problems that I haven't gotten to yet, , the site page is where I want it, - but obviously there are unacceptable problems in layout, mainly with positioning the field. At this point the fields are all displaying the same cross browser, an improvement -albeit that one of the field is not where it should be.

So, without throwing out the baby with the bathwater, I will try to salvage what I can.

I am trying to start at the top up and see that everything works as I add elements.

It is the same element though that is giving me problems.

Dorian

http://combatkicks.com/lobby/b_military/index-b_catalog.html#

It will end up costing you a lot more time and effort to do so, and it will all likely prove wasted in the end. When you want to get to LA and you are on the road to New York, you have to turn around, not take detours.

I might be wrong, but these are the probabilities.

That is fine, the extra info has no influence on the other declaration.

Quite true, otherwise the absolutely positioned div is positioned according to the viewport and not it's container. The following explanation should help
http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Ever heard of background images? Put your jacket image on the background of the div containing the text, in the css not in the html.