Overlapping Header

I have a situation in the browser of Safari where my Header element (search bar) and language text moves down as well and is overflowing to the bottom not sure why these browsers are displaying it this way
Website

Obligatory question: Safari for Windows? Mac? Version?

Safari for Windows.

Safari for Windows has been discontinued and should not be developed for. The last Safari version was released YEARS ago and Apple has discontinued the product. You should uninstall Safari immediately upon reading this message.

</thread>

(Yes, it’s that old.)

1 Like

wow ok

same situation on my macbook Safari though…

Look at “#header_wrap”. What have we told you about fixed heights on elements :slight_smile: ?

Remove the height, and to contain hte floated children, do overflow:hidden; on it.

Gah - looking at the page. You had such a good CSS structure to the page! It’s all messed up now. Posiiton:absolute in the header section…what happened?!

Remove the height on header{} as well…

:joy: ha is that bad technique?? I just wanted to align the logo with the content

Yes…very bad practice. There are VERY few scenarios that warrant position:absolute. It’s normally for smaller effects.

Remember this cardinal rule. This applies for 99.9% of cases. You should NEVER use position:absolute for any sort of page layout. Aka aligning that header with the other columns content. Remember. It’s not for page layout.

Ok ill use something else. ill check back.

ok I think this is what I had before but the logo is a little off…

#header_wrap{

    width: 100%;
    margin: auto;
    width:1200px;
    display: table;
    table-layout: fixed;
    
    
}

#main_header, #main_headerleft{
    
    display: table-cell;

}

Have you played with vertical-align on the table cells?

I’m not sure exactly where you want it.

Alright I think I got it I have

#header_wrap{

    width: 100%;
    margin: auto;
    width:1150px;
    display: table;
    table-layout: fixed;
 }


#main_header {
    width: 600px;
    display: table-cell;
    vertical-align: middle;
}

Anything else that look funky in my CSS?

Besides all those widths (and repeated width)? Not really :slight_smile: .

Oh my gosh your right ill take a look at that ha! I saw had it repeated here I removed one:

[quote="csosa, post:13, topic:193400"]
#header_wrap{

    margin: auto;
    width:1150px;
    display: table;
    table-layout: fixed;
 }


#main_header {
    width: 600px;
    display: table-cell;
    vertical-align: middle;
}
[/quote]

Remember, fixed widths is bad. Also, you need to look at your page; you have massive scrollbars going on.

Darn and I also noticed I got this space on the right side of the browser as well. (scrolling right)
Website

Do you want to try and figure it out yourself?

Well I see the problem is the width of my wrapper but I have put to width:100% shouldn’t that
go full width in the browser?

I’ll give you a massive hint. Look at “#subscribe” in your CSS.

FYI, CTRL+F for the height property in your CSS files. WHy do you set heights so much? Bad! Remove them all.