nomiree

Thank you so much! After many hours of playing, I’d come up with a different solution, which involved modifying the parent IDs (#menu etc), but your result still looks cleaner. The only issue mine still had was there was slightly more padding on the right than the left which couldn’t seemed to be fixed no matter what I did.

So I ended up switching to your way. Why is something so simple always the answer? And you always only work it out once you’ve spent many many hours on it.

Although I’ve now switched to your way, here’s the code I came up with just in case you’re interested (or if anyone else is having similar issues that the above code can’t fix.

/*start drop-down menus on the top menu*/

#menu ul {
	padding:0;
	margin:0 0 0 -10px;
	list-style:none;
	width:108px;
	display: none; /*******if you delete this, your drop down menu will appear randomly on the page somewhere **/
	position: absolute;
}

#menu ul li a { /*This is the drop down stufff */
	text-align:left;
	float:right;
	background:#333333;
	margin:0 10px 0 10px;
	padding:0 10px 0 0px;
	font-size:10px;	

}

#menu ul li a:hover {background:#333333;}

/*end drop-down menus on the top menu*/

To me it now looks like it did at the very start. I’d try going back to

<div style='width:660px; height:500px; overflow: scroll;'><embed src="https://wefarmgreybruce.ca/wp-content/uploads/2012/01/Issue3.pdf"></div>

Because at least that was closest to what you wanted. And just see if there’s anything in the plugin that sets width/height and delete it to see what difference it makes.

And no worries, sorry we couldn’t get all the way there, but at least we got close.

Are you using any sort of third party plugin in order to embed the pdf? Because the problem may lie there. What we had before should have been working.

Ok, maybe not then…

Wait, no,

<div style='width:660px; height:500px; overflow: scroll;'><embed src="https://wefarmgreybruce.ca/wp-content/uploads/2012/01/Issue3.pdf" width=100%></div>

We don’t want the height 100%, because we want it to scroll

Ok, maybe try this:

<div style='width:660px; height:500px; overflow: scroll;'><embed src="https://wefarmgreybruce.ca/wp-content/uploads/2012/01/Issue3.pdf" width=100% height=100%></div>

That will hopefully just make it fill the div?

…And now it’s back to normal. Hmm…

Ok, that went REALLY weird on mine. Now the second scroll bars are gone, but the div is tiny!

https://i.imgur.com/pVuli.jpg

Hmm, I’m not sure if it will work, but try getting rid of the size parameters on the pdf, but keeping them on the div.

So you’d end up with:

<div style='width:660px; height:500px; overflow: scroll;'><embed src="https://wefarmgreybruce.ca/wp-content/uploads/2012/01/Issue3.pdf"></div>

Are you able to post the code for the rest of the page? It just might help to see if I can find the problem.

Yeah, I’d just either slightly crop the original pdf, or if there’s a way you can make the middle panel of your website slightly larger, that would work too (should be in the css somewhere).

As for the second scroll bars, I actually have no idea on that sorry. It’s got a horizontal one as well at the bottom. I’d just try resizing the pdf slightly to make it fit better?

Ok, for starters, you have 2 div openers at the start. Get rid of the first <div> and just start with <div style=....> Second, just reduce the width of the div slightly, because it’s too wide and the sidebar is wrapping to the bottom. Just keep decreasing in small increments until it fits.

Third, the height of the div NEEDS to be less than the height of the pdf, or it’s not going to scroll. I’d set the height of the div to 500px or so, but play and see what looks best.

By making the div longer than the pdf, it’s just an invisible container. You want it to be smaller to force the div to scroll.

Ok, you’re almost there. You’ve just got the width and height around the wrong way. See how you have a scroll bar across the bottom, but not vertically? You need to make the width correct to the pdf, but the height to how big you want the box.

Try:

<div><div style='width:700px; height:500px; overflow: scroll;'><embed src="www.mysite.com/doc.pdf" width="700px" height="2400px"></div>

Just change height:500px to whatever height you want the viewing box to be.

I’ve never actually tried to do this on wordpress before, so let me know if it works or not.

How are you uploading the theme? It should be as a zip file? And what method are you using to upload?

You can either add it directly into your-wordpress-directory/wp-content-themes and then unzip it, or use the wordpress uploader built into the interface. If you’re having problems with the way you’re doing it, maybe try the other way?

You can make a div have a scrollbar, so all you need to do it nest the embedded file within a div.

Then set the metrics of the div to whatever size you want (if you only want a vertical scrollbar, make sure it’s wide enough), and add the following properties to the div:

<div style='width:xxx; height:yy; overflow: scroll;'>

Hopefully that helps ??