Menu Truncated vertically Twentytwelve

Thank you for the note on commenting. I know that has nothing to do with the issue we are having since we get the same effect when using the core theme.

It appears that I have made an error in my assumption of how the child themes work so that can be cleared up.

I thought that a style sheet in the child theme would override the one in the core theme rather than both of them being referenced. Is that incorrect?

Yes, that is incorrect. The @import line tells WordPress to go read the other sheet, then the sheet in the Child Theme is added to change things. If you are like me and want to see all the styling together in one place, you can “remove @import rule and copy all styles from parent theme style.css to child theme style.css” as mentioned here…
https://www.ads-software.com/support/topic/ie-8-responsive-design?replies=17

That keeps all the styling in one place and leaves WordPress with a little less work to do, but any future updates to Twenty Twelve’s style sheet would later have to be placed in the Child Theme manually if you want or need them.

So since the @import rule is not in my child style.css the core style.css is not getting referenced?

This is the only overflow: visible I see in your child theme style.css:

.site-content nav {
	clear: both;
	<!-- smh line-height: 2;-->  line-height: 1.25;
	overflow: visible;
}

The other thing that’s a bit tricky about this theme is that it’s mobile first – so if you want styles to work on a regular browser they need to go inside media queries .. that’s what’s not changed – see line 1454 in the style.css file.

Yes, if you don’t have @import, it’s not importing the parent styles (though you copied them anyway) but if you’re changing things in the parent style.css file, no those are not getting imported. But you should not be changing anything in the parent theme anyway.

Nothing is changed in the parent theme.

Try adding this to the bottom of your child theme style.css file:

@media screen and (min-width: 600px) {

	.site {
		overflow: visible;
	}
	}

Works in Firebug…

Thank you!

@media screen and (min-width: 600px) {

.site {
overflow: visible;
}
}

That is now causing it to display correctly in Chrome and FF. IE 8 is still a problem. In non-compatibility mode it truncates the menu and in compatibility mode the menu displays correctly but my footer contents end up in the side-bar.

Yeah, IE8 is a whole other (horrible IMHO :)) story – beyond me these days – I’ve given up on it – just tell people to get a better browser – LOL (I know that’s not always possible and I don’t really say it like that but support for IE8 is being dropped pretty widely)! I think most people end up either finding another theme (that is still coded for IE8 which this one is not) or paying someone to deal with special coding for it. You could try googling around on that topic – you’d likely find relevant stuff. Or asking on a CSS forum like https://csscreator.com might be fruitful as well.

BTW, your site is really nice looking, so good job!

One other thing you might look at re: IE is a few mark-up errors:

https://validator.w3.org/check?uri=http%3A%2F%2Fwww.openvoices.ca%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

IE is really cranky about those – not sure if they would make a difference by you might want to check on them…

Thanks very much. IE8 has certainly been a nightmare. I will try to work my way through the validation errors but maybe the best approach will be a recommendation that people get FF or Chrome!

`@media screen and (min-width: 600px) {

.site {
overflow: visible;
}
}`

That is now causing it to display correctly in Chrome and FF. IE 8 is still a problem. In non-compatibility mode it truncates the menu and in compatibility mode the menu displays correctly but my footer contents end up in the side-bar.

That can be fixed with PIE.htc in a custom ie.css, my own project to hopefully complete today, and you possibly also have IE8 displaying nothing in the password box during login unless you do something like this:
https://stackoverflow.com/questions/9316219/why-ie8-password-field-display-nothing-when-we-type-through-keyboard