Just by looking at the html, you have a div that is not closed. Just before navcontainer you have a logo div that is never closed off. Suprised it looks fine in FF, but that is most likely causing the problem, as everything from that point forward is a child of this div.
Thread Starter
jinsan
(@jinsan)
hmmm well the div for the log div actually does close at the end of the menu before the main content div starts – if you note that ul id closes as ul not as div, therefore the div opens and closes. I also checked the validation on this and it seems to be fine.
One other odd behaviour that just randomly happened was all the links that went from Home About Gallery etc are now in Reverse as Gallery About Home – f’in weird.
Also I can’t figure out the solution. Bugger
Thread Starter
jinsan
(@jinsan)
Any other solutions on this one?
This problem is called collapsing margins. Two contigious divs without borders but with margins will collapse. Best to avoid top and bottom margins one above the other Plus in the context we need to remember that some internal items like para have margins by default. This is a very common difficulty when learning CSS positioning. When you get done your blog is going to look very spiffy. Maybe put a border in while you test ? HTH.
Thread Starter
jinsan
(@jinsan)
It sort of helped – yu’ve turned CSS into a science:)
Between the log and the maincontent all the margins I believe have been removed. Now it’s probably the margins for the menu that are causing the problem, butI need to have the menu above the logo title, not in the content area.
I added a 1px border, and that fixed it remotely, adding bottom margin to the entry date seemed, strangly to make the problem smaller, sadly the actual placement of the menu remains below the logo.
It’s as though IE is reading the alignment double that of it’s intention and forcing it into the content area.
I’ve added an image to illustrate the IE borking:
htp://sekhu.net/stuff/problem.jpg
The menu should be just above the sekhu.net part of the heaer image.
Thanks in advance
You must be short of a div closing tag before the hmenu gets started. Root Tip:
Put a comment for each div closer with the div id in it so you know what does what.
Good suggestion Root. All the elements are properly closed now according to the W3c validator.
BTW, Jinsan, I have to say that the design is looking really good.
Thread Starter
jinsan
(@jinsan)
thanks ifelse:)
I validated the page before and as above the guy suggested I close the div, but there seemed nothing to be closed. Rock and hard place is not my favourite place to be.
Is there anything else I can do? I mean what if I have the meu before the logo div? would that possibly work? Or perhaps after the logo rather than in the logo?
Just to clarify, the menu is in the div which defines the logo
so it’s something like:
<div id="logo">
<div id="menu">
</div>
</div>
Or someting to that effect. Also why on Earth are my menu links showing in reverse order?
EDIT:
Ok I fixed it – i removed the float element, and used text-align to shift the links to the right hand side and then used margin-top to shift the bugger down. Displays fine now in IE and FF. If this is a bad solution, let me know 😉
