Issues with float: right;

blumchen · 09-07-2012, 01:56 AM

Hi there, I was hoping you folks would be so kind as to help me with something?

I'm setting up a series of wordpress sites on my new host, and one of them is using a modified version of the Easel theme. So just to get that out of the way; most of this code isn't mine and it's not compliant. I've thrown a few hacks in there to make things worse, while I've been butchering his theme to look the way I want it to.

So anyway, there's these previous/next links above and below the comic pages, which look fine in Firefox, but in IE, instead of the previous link being on the left and the next link being on the right, they're both scrunched together on the left. I tried reverting to his default css and they space apart okay, but the next link is too low, they're not even at all, and I'm really not sure how to fix it.

This is how it looks in Firefox and is what I want, so I can start stylizing.

And these are the issues I'm having with IE
Image 1 & Image 2

My style sheets are
style.css and style-default.css and the website itself is here

The relevant div is called blognav but I'm sure there's something else conflicting elsewhere that's causing the issue.

I'd be really grateful to anyone who tries to help. I've overcome a few roadblocks on my own, but this one has me stumped, and I don't know if I broke something while butchering the original CSS or if it was always this way.

Thank you thank you thank you!

Sammy12 · 09-07-2012, 02:51 AM

First and foremost, you should probably stop editing the page as any changes I recommend will become obsolete if you change the code around.

You should first try to get it closer to something in the picture. Add this anywhere in your css:

Code:

.entry {
      margin-top: 0 !important;
}
.menu {
      float: none !important;
}
#menu-chapters {
      overflow: hidden; *zoom: 1;
}
.blognav-next {
      float: right !important;
}

blumchen · 09-07-2012, 03:05 AM

The last edit I made to the theme was before my post here. I tried adding the adjustments you gave me just now, but they don't seem to be having any effect ;[

Sammy12 · 09-07-2012, 04:05 AM

You probably made a @media error somewhere in the CSS file, meaning everything below that error will not work. Try putting the fixes towards the top.

EDIT: on line 1087 you started

Code:

@-moz-document url-prefix() {

but I don't think you ever ended it. Here's your code:

Code:

@-moz-document url-prefix() {
.blognav-previous {padding-top: 0px;}

If you wanted the @-moz... there, it should have a closing bracket:

Code:

@-moz-document url-prefix() {
.blognav-previous {padding-top: 0px;}
}

I would personally delete the @-moz-document url-prefix() { since it doesn't seem to be doing anything.
In fact, you either have to delete it or close it somewhere or else all the css below it will not work.

Code:

@-moz-document url-prefix() { /* delete */
.blognav-previous {padding-top: 0px;}

Once you've done this, you can leave the fixes at the bottom.

blumchen · 09-07-2012, 04:36 AM

Thanks, I went ahead and closed that - I'm hesitant to delete it for the time being since it does currently have a purpose

Code:

.blognav-previous {
	float: left;
	margin-right: 6px;
	padding-top: 6px; ! IE
}
@-moz-document url-prefix() {
.blognav-previous {padding-top: 0px;} ! Mozilla specific.
}

I also moved the adjustments you've given up to the top and they did help space things out, this is what it looks like in IE however

Really appreciate your help

Sammy12 · 09-07-2012, 04:43 AM

In what version of IE? I don't see that problem in ie6-9. Maybe try closing ie and reopening?

I do see a slight inconsistency in ie6-ie8. This is fixed by adding:

Code:

.blognav-prev {
     float: left;
}

however, this inconsistency is the next button being moved slightly downward about 8px.

blumchen · 09-07-2012, 05:04 AM

I think I'm on IE 8 (Not an IE user).

Adding the blogprev to the rest of the adjustments at the top seems to have finally gotten everything right and proper.

Thank you so, so much