Re: inline-block vs. float

[djpic]

@ChristopherBurton – I am trying to center the menu. Why should I not use absolute position?

@wolfcry911 – That design looks perfect, but of course only in Safari on my machine. I am running a VM with IE 8 and it looks like crap (no offense). In firefox, does a little bit better, but the menu is off along with the copyright notice (I do have firefox version 3.6 and they are out with 6? I have only had this computer for around a year). Once upgraded to version 6, it looked fine. I don’t know if it is more of the HTML5 tags or the CSS3 that is messing with the look in IE8. I know that IE8 is old but if you look at companies and such, there still is a lot of people using it. Plus the people like me that didn’t update their browser (safari is my primary). I would like to keep it consistent in all browsers without having to format for every single browser. Personally I think it is ridiculous that you have to do that. This is why I have used table layouts for so long. I can whip out a table layout in under than 30 minutes for this site and it would look identical on ALL browsers but that defeats the purpose of me doing this (and is now frowned upon). I want one constant way that will look and work the same in all browsers from the last 5-6 years. Just call me crazy! I did play with the shadow property a few times in the first revision and didn’t mind missing it in the other browsers. Things like that I can live without, but when a menu goes crazy or a design isn’t aligned correctly, then it just drives me nuts! Don’t get me wrong, I do love the way you did it and really that is the way it should be done. I will keep it as an example (wolfcry911 example) and posted it for any others that would like to take a look. I just think we need to wait another 2-3 years to be able to use that and not have to worry. IE is really holding everyone back.

I have posted the old version before I made all the corrections: click here for version 2

Of course, I found the issue with the spacing on the top of the menu had to do with the header padding. I did notice you used padding / margin on the logo itself, so that might also be another route instead of absolute positioning. The spacing on the bottom of the menu was an issue as well (between the menu and the content). That again was fixed the minute I put the padding; I am sure because of the reasons you stated. The only thing that was stopping me from using float from that point on was centering the whole menu. The nav in your example was only 800 wide which you were able to do because of the wrapper was providing the shadow / glow. The background image of mine is providing the shadow leaving 10px on either side to be filled (and the spacers soon). Without centering the entire menu, it will stay to full left putting it out of alignment.

With the collapsable css, I tried changing the background element and of course it broke in IE8 so I think I will leave it alone for now.

With the padding, what you are telling me is if I define say a div with the height of 100px and width of 100px, when I add padding of 10px to all sides, the height will then be 120px and width then would be 120px? I understand where this is going but I assumed it wouldn’t add to the total, would just move in from the outside. For example, the same situation, the div tag would still be 100 x 100 but the area I could type in would be 80 x 80. The same with the border. 100 x 100 with a 1px border would equal 102 x 102 (on the outside) or would the 1px border be on the inside of the div?

With absolute positioning I know that could turn bad. I just figured the menu and header is not going to change much within it’s own div. I would not do that for any content on the site and if I do, it would be relative to a parent.

I am not sure with the nav / menu (which is better, nav or menu?) in the header. How would you make sure it was aligned to the bottom? I did see in your example that you used the absolute positioning to position the nav at the bottom of the header I think?

With the image map, I thought that would be pretty much the same thing (easier) then creating an anchor and then using absolute positioning to place the anchor over where I need it to be clickable. But now that the footer is in the background, will do it with AP?

Again, thank you for all this help. I have been off of work for a week, so this stuff has been keeping me occupied.