Multiple browser background color size

lisarhode · Member · Dec 30, 2013 at 12:44 am
Copy link

Add topic to favorites
I leveled the background color in Chrome browser and checked in Safari, the heights were different sizes and in Chrome they are leveled. How do I match the height of the background of the body text and the sidebar?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 30, 2013 at 3:35 am
Copy link
I suspect part of what you are seeing is that when you are logged into your account, there is an edit link below the content which lengthens the post area (and background). If you are not logged in, that edit link is not there so the post/content container is shorter. Add the following CSS to hide the edit link which will make things a little closer, and closer from page to page.
```
.post-edit-link {
    display: none;
}
```
All browsers render differently, so a minimum height set for #primary that works in Firefox could be off in Safari, Chrome and Internet Explorer. There isn’t a way here at WordPress.com to write browser-specific CSS.

There is sort of a “big hammer” solution, and that is to set a min-height for #secondary and #primary that is taller than any of the content or sidebar content. If you wish to give that a try, add the following to your CSS replacing the existing #primary and #secondary rules you have now.
```
#primary {
    background-color: #BFB2BC;
    margin-top: -22px;
    min-height: 425px;
}

#secondary {
    background-color: #DCE3E6;
    margin-top: -20px;
    min-height: 419px;
    padding: 0.333em 2.5em 0 1em;
    width: 28.2051%;
}
```
lisarhode · Member · Jan 1, 2014 at 8:52 pm
Copy link
yes, that worked.
thesacredpath · Member · Jan 3, 2014 at 4:19 pm
Copy link
Yay!

No items found.