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 Coder
    Join Date
    Nov 2007
    Posts
    21
    Thanks
    7
    Thanked 0 Times in 0 Posts

    IE sidebar problem

    Hi,

    Could some one please look at this at tell me why the side bars don't sit right in IE7 please?

    http://www.sipedia.co.uk

    Thanks very much

    Simon

  • #2
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    the text-align property on the div is interpreted by ie as the positioning of the div itself. Why is it not centered then? The unset width of the div is interpreted to mean 0, the left edge of the div is centered. Give the container div an id, set the style to position:absolute and use a script to position it. The one i've included as an example is cross platform, just put it in the body onload event.

    <script type="text/javascript">
    function on_loadhandler()
    {
    if (window.innerWidth) {
    w = window.innerWidth;
    h = window.innerHeight;
    }
    elseif (document.documentElement && document.documentElement.clientWidth) {
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
    }
    elseif (document.body) {
    w = document.body.clientWidth;
    h = document.body.clientHeight;
    }
    document.getElementById("rightBar").style.left = (w-widthOfRightDiv-someMarginFromRight) + "px";
    document.getElementById("rightBar").style.top = "0px";
    //You can stretch the bar with the value in "h" as well if you really want to.

    }
    </script>
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    21
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi Mike,

    Thanks for that, won't have a chance to try that out until tonight but thought I'd say thanks in advance. I'll let you know how I get on!

    Simon

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    21
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi,

    I've been playing around with that code for an hour now on my locally hosted version and can't get it to work. It just sticks everything to the left of the screen and reduces my footer whatever i set the box width to. Thank for the suggestion but I know nothing about js so i'm sure i'm implementing it wrong

    is there any way i could just use a different style sheet for IE with something like

    <!--[if IE]> <style type="text/css">@import "IE-override.css";</style> <![endif]-->

    ?

    I found that on a site and have no idea how to implement it so any help would be great, i tried it once but it didn't appear to don anything

    sorry to be a pain

    Thanks again

    Simon

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    You need to make another css page called IE-override.css and place your IE rules in it.

    in your head when you call in the css files, put it AFTER the main css file so IE will "override" any previous rules:

    like:
    Code:
    <link href="layout.css" rel="stylesheet" type="text/css" media="screen">
    
    <!--[if lte IE 6]>
    <link href="layout-ie.css" rel="stylesheet" type="text/css" media="screen">
    <![endif]-->
    If you need to specify various editions of IE you can easily.

    http://www.quirksmode.org/css/condcom.html
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    New Coder
    Join Date
    Nov 2007
    Posts
    21
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply, i'm still having issues though. I've implemented this in my wordpress header file as follows:

    Code:
    	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
    
    	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
    
    	<style type="text/css" media="screen">
    		@import url( <?php bloginfo('stylesheet_url'); ?> );
    		<!--[if IE]>
    			@import url( <?php bloginfo('stylesheet_directory'); ?>/iehack.css" );
    		<![endif]-->
    	</style>
    
    	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    I have changed it to a
    Code:
    @import
    as the other one didn't work so I thought I'd copy how wordpress does it on the line above. When i view the source in FF the iehack.css import link shows up correctly.

    The iehack.css file is there and is how i want it, it shouldn't show the website logo and the side bars should be floated left and right (naughty i know but i'm just trying to get it to work at the moment) but when loaded in IE nothing changes at all

    Any more ideas and help would be great

    Thanks again

    Simon
    Last edited by swisspolo; 01-23-2008 at 09:13 PM.

  • #7
    New Coder
    Join Date
    Nov 2007
    Posts
    21
    Thanks
    7
    Thanked 0 Times in 0 Posts
    All sorted with some php

    thanks for the help


  •  

    Posting Permissions

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