• Resolved altexasgirl

    (@altexasgirl)


    I’ve got an DIV box functioning as a right sidebar in my wordpress theme, and although it looks fine when viewed in a full-size browser, if any windows are minimized it overlaps the main post content. Can any of you help me with this problem? Here is the code I currently have in my stylesheet:

    #right {
    position: absolute;
    top: 255px;
    right: 0px; /* Opera5.02 will show a space
    at right when there is no scroll bar */
    margin: 70px;
    padding: 10px;
    border: 1px solid #000;
    background: #fff;
    width: 120px; /* ie5win fudge begins */
    voice-family: ""}"";
    voice-family:inherit;
    width: 120px;
    }

    I tried changing the position to “relative”, but that totally messed it up. I’d really appreciate any help I can get with this! Thanks!

    You can see what I mean at http://onthebaseline.com

Viewing 8 replies - 1 through 8 (of 8 total)
  • I suggest you try to get it to validate first, right now there are too many errors effecting layout.

    Thread Starter altexasgirl

    (@altexasgirl)

    I checked the validation errors, and most of them dealt with the affiliate codes on the site. I’m working on validating those codes, but that should not affect the div box’s position, right?

    Thread Starter altexasgirl

    (@altexasgirl)

    Does anyone else know a way to fix this? Thanks!

    I just viewed it in firefox 1.5.0.4 on a Mac, and it appeared to be fine. Have you fixed this?

    Thread Starter altexasgirl

    (@altexasgirl)

    I just changed it to a float, but I’m running into a new problem of the div box looking fine in IE, but the margins are off in firefox and safari. I tried making it look right in firefox, but it overlapped in ie.

    Does anyone know how to change the settings depending on the browser? If not, I’ll just leave it because over 60% of my readers use Internet Explorer.

    IE interprets the box model incorrectly. Basically, you need to include a conditional comment, so that you can have separate rules just for IE.

    Basically, if you do something like this in your header.php file in your theme:

    <!--[if IE 6]>
    <style>
    div.logo {
    margin-left: 10px;
    }
    </style>
    <![endif]-->

    Then only the stuff in the style tags will be applied to ie6. You can also use the following

    <!--[if IE]>
    <!--[if IE 5.0]>
    <!--[if IE 5.5]>
    <!--[if IE 5]>
    <!--[if lt IE 7]>

    So, you can make your style.css work for firefox, then put the code bits that will work for Internet Explorer in your header.php file (within the head tags, but after where your style sheet is called) using the above conditional comment system.

    Oh, one reason you might not want to use just IE is because when IE7 comes out, it might not work right. Until it becomes final, we don’t really know how ie7 will render the css box model (and plenty of other things). For this reason, I generally refrain from using only IE. I’ll get specific, and start with IE6. Checks your logs to see if anyone is even using older than 6. You might not need to worry about ie5. You’ll notice that last one in the list uses a lt. Basically applies to lower than version 7. You can use that if the rules are good for every version of ie before 7.

    And I’ve finally found the page where Microsoft discusses the official way to do hacks to accommodate their browsers with conditional comments. http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

    Thread Starter altexasgirl

    (@altexasgirl)

    manstraw,

    Thanks so much for all of your help. I checked my log and almost everyone uses IE6 and I after adding the code, it renders perfectly in safari, ie, and firefox.

    I really appreciate all your help. Thanks again and God Bless!

    glad you’re sorted, you’re welcome!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Problem with DIV box overlapping post content’ is closed to new replies.