Why are my containers no longer the same height? 1

[okpeery]

I have been using this javascript to round the corners and give the same height to the main content area with pictures and to the bio's of the designers. I just noticed that no longer are the containers the same height. They are slightly off. Anyone have any ideas why?

Only the home page on the main nav bar has a page and Metal Pointu subnav under jewelry too.

I also used a <br> tag after the 2nd image to force 2 images per line. I know I should use CSS for this but I don't know how.

I also know the js for lighboxes is causing the shaking images but I haven't fixed it yet. I saw a tutorial fix on the original site.

If anyone would be so kind as to look at my padding and margins on my nav and subnav items. I got them to line up on the left side but it was through sheer trial and error, maybe some luck too. Is there a better way to do it? I wanted my main nav items slightly spaced out but that made it hard to align the subnav items. Myonly requirements are that they align on the left with a little space between them and the edge and that they are spaced out a little.

http://www.jean-jacquesgallery.com/storesite2

 

[Vragabond]

Your #content is 492px wide. Your #tablecontentcontainer, which resides inside the 492px #content has a width of 490px plus 5px padding on each side and 10px left margin, making it effectively occupy the space of 510px. While stuffing 510px element into 492px one, FF just hangs it over and IE expands the parent container to 510px. So, change the properties (whichever you desire) of #tablecontentcontainer so that its entire width (width, margin, padding and borders) will be less or equal to 492px.

 

[okpeery]

That makes sense but I made some changes and it still doesn't look right. The main container is 750px wide with 5px padding all around. This means that I have 740px wide to play with. My #content is 495px there is a 5px gap between it and my #nav which is 240px wide, which makes 740px wide. I don't understand why it doesn't display correctly. I also don't have padding or margins on the sides for either of these 2 containers.

I moved the margins and padding of my nav and subnav lists to my tablist a and tabcontentcontainer a elements so I am assuming this doesn't change the overall width of the container itself. I'm only using these to achieve some spacing between the list items, if there is another way to achieve this and restore the same height to my columns please advise. I hated my previous navigation system but since I changed it my containers are not lining up again.

http://www.jean-jacquesgallery.com/storesite2

 

[okpeery]

Oops, I haven't uploaded the changes to the server yet. I'll do this later today.

 

[Vragabond]

I see no problems in Mozilla or IE6. Did you fix it?

Other than that, your main container is actually 760px wide (750px width + 10px for padding), so your effective area is 750px. You seem to be confusing how the box model works. Besides, I was not talking about that, I was talking about the container inside #content that is wider than #content and extends it in IE.

 

[okpeery]

This is so strange. I zeroed out the padding on the #content and #nav containers and then the containers resized to the same size. Then I added my desired padding back, the same as it was before, and it worked again. I had already cleared my cache numerous times so I can't figure out why it works now and why it didn't work before. Oh well.

Now that my lists have been tamed, sort of, I would like the main nav items to have some sort of marker so that the user knows when they are in the sub nav menu which main nav item the sub nav items are a part of. Is there a way to do this other than with a background image? Border left with active, current, focus psuedo class?

I'm still trying to find a solution for my <br> after the 2nd picture on my Metal Pointu page. I know I should achieve this with CSS but I'm not sure how, a custom class?

http://www.jean-jacquesgallery.com/storesite2

 

[Andeee]

I thinks omethings causing an optiocal illusion on the page.

Although they look different sizes, on closer inspection form a screengrab and an image editor, they are in fact the same size.