6 replies [Last post]
blueiguana
blueiguana's picture
Offline
newbie
Last seen: 10 years 35 weeks ago
Timezone: GMT-6
Joined: 2010-01-01
Posts: 6
Points: 8

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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...

blueiguana
blueiguana's picture
Offline
newbie
Last seen: 10 years 35 weeks ago
Timezone: GMT-6
Joined: 2010-01-01
Posts: 6
Points: 8

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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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...

blueiguana
blueiguana's picture
Offline
newbie
Last seen: 10 years 35 weeks ago
Timezone: GMT-6
Joined: 2010-01-01
Posts: 6
Points: 8

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

you haven't contained your

you haven't contained your floats (the left and right column). add overflow: hidden; to #contentWrapper

blueiguana
blueiguana's picture
Offline
newbie
Last seen: 10 years 35 weeks ago
Timezone: GMT-6
Joined: 2010-01-01
Posts: 6
Points: 8

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.