Extra space between Sub and Sys Menus and Gallery in IE

[tgontz]

I customized my template.html file to match the rest of my site. The way I have it set up my coppermine gallery appears exactly the way I want it to in Firefox (on the PC) and Safari on OSX. However, Internet Explorer puts extra space between my Sub and Sys Menu and the Gallery.

My coppermine gallery is located at:

http://www.gontzphotography.com/gallery/index.php

Any suggestions?

Thanks!

[tgontz]

One note for anyone who may have read this and thought, well of course there are going to be subtle differences! However the problem I am having is drastic!

[Tranz]

When troubleshooting CSS issues, it helps to have valid CSS: http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.gontzphotography.com%2Fgallery%2Findex.php

Before you can validate CSS, though, you need to validate the html: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.gontzphotography.com%2Fgallery%2Findex.php

[tgontz]

OK, both my HTML and CSS now pass validation. On that note, I had no idea that <hr> had to be closed with </hr> until just now. Also, I have no idea what happened with that stuff in my style sheet. There was text there that I certainly did not create!


However, the results are the same.

Thanks for looking into the validation aspect.

[Joachim Müller]

html tags that don't have to be closed (like <br>, <hr> or <img>) should be opened and closed in one step, i.e. <hr /> instead of opening and closing (<hr></hr>). This way, older browsers don't get confused.

[tgontz]

When I tried to vaildate my gallery, the validater told me I had to close the <hr> tag with </hr>. After I did that, when I ran the validater again it did not return any errrors.

[Joachim Müller]

sure, the validator is happy with it, but older browsers may have issues. Using the <hr /> tag will work even in older browsers and the validator will still validate, that's what I suggested. If you don't care for older browsers, then it's perfectly OK to leave things just as they are.

[tgontz]

Ok, I replaced <hr></hr> with <hr /> and re-validated. Validation was successful.

Now, any suggestions as to why IE is placing so much space between my Sub/Sys Menus and the rest of the Gallery?

Thanks!

[Joachim Müller]

in your stylesheet, you have specified

Code Select Expand

#content {
margin: 0px 0px 0px 165px;
border: 1px solid rgb(14, 114, 164);
padding: 12px;
background-color: rgb(255, 255, 255);
}
could be the culprit, temporarily replace the 165px margin with 0px

[tgontz]

I tried replacing the 165px left margin with 0 - I get the same spacing issue from the top. However, I did discover that while the white background behind the Sub/Sys menus goes behind my sidebar links, the Sub/Sys menu does not. Also, I just now discovered that it appears as though the top edge of the Category List table (at least I think its a table!) wants to sit tight up against my sidebar links. Before I thought there was some sort of issue of spacing between the Sub/Sys menu and the main gallery stuff. Now I believe that for whatever reason the gallery stuff (Category List) won't sit beside my sidebar links/menu.

[Joachim Müller]

hm, as things work as expected in FF, but fails to work in IE I suspect your issue is related to the IE getting confused by a mixture of table-based and css-block based layout. Is it an option for you to replace the sidebar (which currently is in a div that is positioned on the page using the float attribute) with an old-fashioned table layout? I know, tables suck, and everybody wants a genuine floating layout, but as coppermine currently is table based, could you give the whole layout a table layout a try instead?

[tgontz]

I created a table for my gallery page and now everything lines up the way I would like it to. I ended created a table with one row and two columns. My sidebar links are in the first column and my gallery is in the second column. I still have both inside of a div tag. Then below my table I have another div tag for my footer.

I knew that a table would probably solve my problem, but it is in my nature to try and solve whatever problem is preventing me from doing things the way I want to! - And I just couldn't figure out why it wouldn't work, which I why I enlisted your help.

I apologize for troubling everyone and taking your time with this issue. I would still like to know the exact cause and fix (using css and div tags) for this problem, but this issue is solved.

Thanks for your help!