Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Vancouver
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Issues with float: right;

    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!
    Last edited by blumchen; 09-07-2012 at 01:57 AM. Reason: Formatting

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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;
    }
    Last edited by Sammy12; 09-07-2012 at 02:55 AM.

  • Users who have thanked Sammy12 for this post:

    blumchen (09-07-2012)

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Vancouver
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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 ;[

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.
    Last edited by Sammy12; 09-07-2012 at 04:15 AM.

  • Users who have thanked Sammy12 for this post:

    blumchen (09-07-2012)

  • #5
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Vancouver
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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
    Last edited by blumchen; 09-07-2012 at 04:37 AM. Reason: more info

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.
    Last edited by Sammy12; 09-07-2012 at 04:49 AM.

  • Users who have thanked Sammy12 for this post:

    blumchen (09-07-2012)

  • #7
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Vancouver
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •