Fri, 2010-01-01 21:08
Hey everyone,
I have run into a frustrating issue with Safari and my CSS that I cannot figure out. When I preview the site in other browsers, even older IE it looks great.
Image of site in browsers
As you can see the main content of the site shifts up and into the header, in Safari. For some reason, the outer div (id=outwrapper), which contains the main content and side navigation of the site, does not position below the header div (id=header), but instead aligns with the top of the browser, and this only happens in Safari. I cannot figure out how to fix this in Safari and my head is spinning. If you know the answer to this riddle you are a genius in my book.
Thanks,
blueiguana
Fri, 2010-01-01 22:18
#1
we're not going to be able to
we're not going to be able to debug much from a picture. I'm guessing some sort of float clearing problem, but without code or a link there's no saying...
Sun, 2010-01-03 18:35
#2
The Code
Thanks for the reply Wolfcry911.
I cannot post the site yet, but I attached a pdf of the code in the previous link. I did tinker with a clear float thinking that would fix my problem before posting, but nothing I do seems to budge this issue. If you don't mind taking a look, I would be very grateful.
Sun, 2010-01-03 22:59
#3
sorry, I didn't notice that
sorry, I didn't notice that before. Have you validated? It appears you have two #nav ids which is invalid. It also appears that the #header div is not closed (perhaps one of the nav id'd divs should be a closing header div?).
I'll look into it further after your response...
Mon, 2010-01-04 05:03
#4
Header looks good
Thanks for your help. I went through my tags and adjusted the position of the closing header tag, it looks great in both browsers now. But when fixing that, something peculiar happened to the base of the site. the navigation in the left column div now runs outside of the content wrapper, as you will see in the link. I checked my tags but I am blinded again - i don't know what I'm missing here, is it an invalid nav ID?
Link re-post
Mon, 2010-01-04 12:59
#5
you haven't contained your
you haven't contained your floats (the left and right column). add overflow: hidden; to #contentWrapper
Mon, 2010-01-04 17:54
#6
Brilliant
Wolfcry911 - you've made my week! I still have more to learn when it comes to CSS - thanks for teaching me!
Take care and have prosperous New Year.