HTMLHelp Forums > margin collapse?

MDurkee

Apr 20 2007, 09:04 PM

I originally designed my site and tested in IE6 and then began to make corrections for the other browsers. I have managed to hack my way through but still have trouble with Foxfire and now IE7.
In IE7 the bottom margin seems to collapse or maybe the sections just don't clear properly, I am not really sure what is happening. The top section seems to slip below the mid-section making the navigational tabs get cut off.
Then in Foxfire in the feature sections below are smashed right up next to the mid-section. For some reason the top section clears just fine.
How can I get all to look the same as they do in IE6 without messing that one up?
The link to the home page is http://www.oldhonolulu.com and then similar problems are happening on the sub-pages - http://www.oldhonolulu.com/shop.htm

Peter1968

Apr 21 2007, 01:49 AM

Bunch of HTML errors

CODE

Result: 0 errors / 15 warnings

line 46 column 99 - Warning: inserting implicit <span>
line 46 column 99 - Warning: replacing unexpected iframe by </iframe>
line 46 column 11 - Warning: missing </iframe>
line 25 column 1 - Warning: <script> inserting "type" attribute
line 26 column 1 - Warning: <script> inserting "type" attribute
line 45 column 11 - Warning: <a> escaping malformed URI reference
line 45 column 227 - Warning: <a> escaping malformed URI reference
line 50 column 11 - Warning: <script> inserting "type" attribute
line 51 column 11 - Warning: <script> inserting "type" attribute
line 52 column 11 - Warning: <script> inserting "type" attribute
line 72 column 11 - Warning: <script> inserting "type" attribute
line 121 column 11 - Warning: <form> lacks "action" attribute
line 136 column 11 - Warning: <script> inserting "type" attribute
line 180 column 309 - Warning: <img> lacks "alt" attribute
line 46 column 99 - Warning: trimming empty <span>
Info: Doctype given is "-//W3C//DTD HTML 4.01 Transitional//EN"
Info: Document content looks like HTML 4.01 Transitional

Plus, you use what's commonly known in the game as "div soup". If you Google for that term, you'll find quite a few homilies on why not to do it.

Essentially, you have a very finicky design here that needs ot be simplified.

MDurkee

Apr 25 2007, 12:44 PM

QUOTE(Peter1968 @ Apr 21 2007, 01:49 AM)

CODE

Result: 0 errors / 15 warnings

line 46 column 99 - Warning: inserting implicit <span>
line 46 column 99 - Warning: replacing unexpected iframe by </iframe>
line 46 column 11 - Warning: missing </iframe>
line 25 column 1 - Warning: <script> inserting "type" attribute
line 26 column 1 - Warning: <script> inserting "type" attribute
line 45 column 11 - Warning: <a> escaping malformed URI reference
line 45 column 227 - Warning: <a> escaping malformed URI reference
line 50 column 11 - Warning: <script> inserting "type" attribute
line 51 column 11 - Warning: <script> inserting "type" attribute
line 52 column 11 - Warning: <script> inserting "type" attribute
line 72 column 11 - Warning: <script> inserting "type" attribute
line 121 column 11 - Warning: <form> lacks "action" attribute
line 136 column 11 - Warning: <script> inserting "type" attribute
line 180 column 309 - Warning: <img> lacks "alt" attribute
line 46 column 99 - Warning: trimming empty <span>
Info: Doctype given is "-//W3C//DTD HTML 4.01 Transitional//EN"
Info: Document content looks like HTML 4.01 Transitional

Thanks for trying anyway. I can't really follow the warnings above as I they don't tend to be true. There are closing tags where it says there is not one, alt tags, etc. I am aware of the script type warnings and they don't cause design problems. What I am looking for is a css hack to help with the collapsing margins. I read up on some that work with IE6 but they don't seem to be touching it with IE7.
Thanks again anyway.
MDurkee

Shadeaux

Apr 25 2007, 01:04 PM

What Peter said. You have WAY to many DIV tags all nested in using classes for each...it's a mess, and it doesn't need to be. Best method I know to fix this is to look at how you want it to appear (In IE6, I guess?) and count how many major blocks you have that are positioned in different spots on the page. That tells you how many major <DIV> tags to make...then you position the elements inside the blocks, but not by breaking them into dozens of <DIV>s ...

I couldn't immediately see what your positioning problem is because it was nearly impossible to tell if the cascading style elements across so many divisions were closed properly or not.

If you must have all the divs, I'd use a  comment tag after each closed </div> to show what division it is closing. That way you can be sure you know what <DIV> you are dealing with. You could also put a thin line border around each to see which one is causing the problem - but I wouldn't.

I'd simplify it to about four or five major DIV tags.

Dave

Peter1968

Apr 25 2007, 06:56 PM

Yes, never ceases to amaze me. People come here for help - you give them that help - they don't believe it or are in denial about it.

To the OP - as an extra - disable CSS and view your page then. Dreadful, isn't it? That's why div soup is no better than tag soup.

The page should make sense structurally -with or without CSS.

MDurkee

Apr 25 2007, 07:10 PM

Thanks guys,
I will re-design and see how it comes out. I am sure you're right about the over-the-top divs.
MD

MDurkee

May 1 2007, 05:50 PM

QUOTE(Shadeaux @ Apr 25 2007, 01:04 PM)

What Peter said. You have WAY to many DIV tags all nested in using classes for each...it's a mess, and it doesn't need to be. Best method I know to fix this is to look at how you want it to appear (In IE6, I guess?) and count how many major blocks you have that are positioned in different spots on the page. That tells you how many major <DIV> tags to make...then you position the elements inside the blocks, but not by breaking them into dozens of <DIV>s ...

Dave

Okay, I have spent some time trying to simplify the code for the home page of this site. I have decided to re-design the whole thing but it will take some time. For now, I have gotten the home page down to four major blocks:
Top Navigation Area
Content Area - which includes the secondary content to the left and the main content to the right.
Feature Area
Bottom Navigation Area
I realize that there is way too much there still but can't remedy that too quickly. I have made some progress but can't post the new until all pages are complete.
What I am still having trouble with is between the Top Navigation Area and the Content Area. In IE6 it is spaced correctly and I can even live with the way it looks in FireFox. Thing is in IE7, the content area moves up and covers half of the tabs. Is there some reason that the Top Navigation Area will not hold it off by the height? What am I missing?
Thanks for any help you can give me.
Maxanne