I've been defeated

Have a look at this on the Sitepoint forums.

http://tools.sitepoint.com/spanky/

OMG - how many more people are going to direct me to that friggin link.

Did you go to my link? Did you see the fact that the rounded corners are built? Did you read my post about how all i am trying to do is get things THAT ARE NOT the rounded corners to align properly?

As I think I mentioned before this is nothing to do with you using rounded corners.

For vertical centering, search these forums on vertical centering or check-out kk5st's CSS tips site - its helpfully lists three different ways. But, its not really a vertical centering issue, its a white-space issue that can be fixed by adding 0.3em padding-bottom to .nav (actually its a collapsing margin issue - see below).

Kk5st's site also explains the logo issue. Give that image display:block. All browsers make that space, you are only seeing it in IE because IE expands elements to surround their content where as other browsers let the element overflow. The extra space is because the img is inline and as such is aligned with the (imaginary) text baseline, leaving space for letter descenders and half-leading.

For the last issue, read up on collapsing margins. Vertical margins merge with contiguous margins[1] and the largest margin is applied to the outer most element. In your case the .nav p element margin merges with the .nav & .header margins and ends up applying to .header - meaning the white space appears between .header and the padding-bottom on .wrap. IE behaves a little differently when the block element haslayout - which .header has. In this case the margin pushes up against the internal edge of the element with hasLayout. So IE shows the space in .header and the other browsers outside.

IE with hasLayout is very similar to other browsers with overflow:hidden and height: auto. You can therefore ignore my previous advice about adding padding-bottom and apply overflow:hidden to .header to get similar behaviour and spacing for all browsers.

[1] margins don't apply when the element creates a new display context - that is if the element is floated, has an overflow value other than visible, is positioned absolutely or fixed.

ref. http://www.w3.org/TR/CSS21/box.html#x22

Obviously your opening sentence led me, and by your response many others, to assume you were having corner issues.

Despite your tetchy response, I will try and give you some pointers.

Looking at your html code, you need to put all your script stuff up in the header and not have it embedded inside a dive as you have at the moment.

Looking at your page with a screen ruler and looking at the css, it looks to me like you are having box model problems.

You need to read up on the difference between the way IE handles margin + border + padding + width/height compared to how FF and Opera do it.

FF and Opera do it right. You need to design for them then apply the changes that make it appear the same in IE by having IE specific styling in a seperate file that you call using the IE conditional method after you have loaded the normal stylesheet.

That way the values in the IE specific file will override the normal ones.

Geoff, the two types of box model are only an issue under two circumstance
1/ when IE is rendering in Quirks mode
2/ When dealing with IE browsers < IE6 which can't render in standards mode

In both of the above circumstances IE will use the broken box model then and only then do differences in the way borders and padding become a problem.

Generally this forum advocates using standards switching Doctypes unless the problem is specific to IE5 or poster is not using a correct DTD then box model problems should not be an issue.

:-$

/points back at my post.... all is explained there

Correct.

This makes .nav HUGE. I guess i was extremly unclear now that i look back, but i don't want .nav to get any bigger, i want the text to fit in what is already there or less. Perferably I want want the next to touch both the top and bottom borders. But me defining padidng:0 and margin:0 the browsers still don't care.

Will find kk5st's page and read up on it.

IE with hasLayout is very similar to other browsers with overflow:hidden and height: auto. You can therefore ignore my previous advice about adding padding-bottom and apply overflow:hidden to .header to get similar behaviour and spacing for all browsers.

This breaks the bottom left rounded corner if i take out the padding-bottom from .nav - if i don't it does nothing.

Thanks for this advice. I will read your ref. page and see if i can figure something out. This is giving me a huge headache. I am have kicking it around for two weeks now, and it makes me depressed because I thought I new CSS rather well....

Despite your tetchy response, I will try and give you some pointers.

Looking at your html code, you need to put all your script stuff up in the header and not have it embedded inside a dive as you have at the moment.

Looking at your page with a screen ruler and looking at the css, it looks to me like you are having box model problems.

You need to read up on the difference between the way IE handles margin + border + padding + width/height compared to how FF and Opera do it.

FF and Opera do it right. You need to design for them then apply the changes that make it appear the same in IE by having IE specific styling in a seperate file that you call using the IE conditional method after you have loaded the normal stylesheet.

That way the values in the IE specific file will override the normal ones.

You obviously have no clue what is going on around you. Why would I put my ads in the header? I understand no one wants to see them, but a guy's gotta eat.

You just like to post things that you have no clue what is going on. I understand you might be trying to be helpful, but you are only being counterproductive. Please refrain from giving me "advice" anymore, thanks.

Found the site and looked at his examples and got it fixed it looks like.

Thanks Chris, thanks kk5st!!

Gonna go do some research on this spacing issue with .nav

Edit: Was playing with your overflow:hidden idea and found that if i put it in .nav instead it almost does the same thing. In FF and Opera it vertically aligns the text but IE it is sitting at the bottom. Now I just need to figure out how to tighten it all together.

Now now Duece lets keep things friendly you were slightly sharp in your second post and Geoff is only trying to help regardless of whether that help misses the point. lets leave it to the moderators to ask people to refrain from posting when necessary.

Hugo.

For IE and .nav you will most likely need to trigger hasLayout - iirc correctly that div didn't have hasLayout. Give it width:100%, that is one of the methods to trigger hasLayout and in this case it is neutral to all browsers.

Sweet. with width: 100% on .nav it makes the whole thing perfectly the way i want it to look

i honestly don't understand why Opera and FF don't want to play along. If all padding and margins are set to 0 how come the .nav still has a huge padding around the navigation words?

Because all of the padding and margins are not set to zero. You have no style rules targetting the <p> element. Most semantic block elements come with a default vertical margin setting of 0.6 - 1em. That is how if you don't specify any styles your paragraphs and headings are all neatly separated by a neat blank line.

Until you get to grips with how browsers work you may find it beneficial to put the following at the top of your CSS

* { margin: 0; padding: 0; }

You will now need to add margins back where they are needed. Be aware not only will that scrunch up the natural vertical spacing a browser gives your page it will remove the left hand indentation given to lists.

I have been studying this CSS for so long I completly forgot I put the navigation in a <p>

is the * { } a legal statement? I set <p>'s padding and margins to 0 so it sits pretty now. I can see how the * { } will help another design I am working on though, or at least I think it can.

Thank you so much for your patience and your help.

Yes.

"*" is the universal selector, that is, it will match every element. The rule will also have the lowest specificity allowing a single tag selector to override it.