Jump to content
Sign in to follow this  
hashmoder

Snapshots of IE6, IE7, IE8. Minor issues with sidebar article links.

Recommended Posts

hashmoder

Hello guys. Amazing theme. I love it!!! I believe pictures will explain better than words. I have taken 3 snapshots of one of my articles in IE6, IE7 and IE8. This particular article has long text/titles to the previous and next articles, especially when the words on both sides wrap and/or clash with each other. IE6 snapshot... IE7 snapshot... IE8 snapshot... Although it says "everything appears to be fine" in the IE8 snapshot, but I do not like how the long title-links of the previous/next articles clash with other, thus pushing the one on the right down one line. Perhaps there's a way to make them fit in two columns, so each one on both sides wrap evenly? Here's the link to that specific article as you see in the pictures (for reference I guess)... http://www.hashmoder.com/2010/02/27/malcolm-mclaren-madam-butterfly/ ---- Hashmoder

Share this post


Link to post
Share on other sites
cmunns

There is no set width for those page navs so they are pushing everything off. Try adding custom css `.post-nav .previous a,.post-nav .next a {width:300px;}` Let me know if that works out

Share this post


Link to post
Share on other sites
hashmoder

Thanks for your prompt reply and suggestion. I added the css code you suggested and the results worked out 90%. Have a look at the snapshots: --IE8 --IE7 --IE6 The width worked out very well, but in IE7 the left side of the content is pushed or cut-out. IE6 still has no sidebar, but should I care about IE6 at this point? Then I've increased the "padding-bottom" value from 35px to 50px in the css code. And the results worked out beautifully. Have a look... --IE8 --IE7 --IE6 Ta-daaaaa! Finally the content in IE7 is not pushed away. IE8 no issues. IE6 still no sidebar, but, then again, I shouldn't care about it at this point. Here's the full css code...

/* next & previous post navigation */
	.post-nav {
		clear: both;
		padding-bottom: 50px;
		margin-top: 15px;
		font-size: 95%;
	}
	.post-nav a, .post-nav a:visited {
		color: #999999;
		text-decoration: none;
	}
	.post-nav a:hover {
		color: #000000;
		text-decoration: none;
	}
	.post-nav .previous a {
		float: left;
		padding-left: 20px;
		background: url(images/post-nav-previous.gif) no-repeat left center;
	}
	.post-nav .next a {
		float: right;
		padding-right: 20px;
		text-align: right;
		background: url(images/post-nav-next.gif) no-repeat right center;
	}
	
	.post-nav .previous a,.post-nav .next a {
		width:300px;
	}
	

Thanks again for your help.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×