problems seeing sidebar in IE

  • Author
    Posts
  • #308470

    gpccexpo09
    Member

    Everything looks perfect in Firefox and Safari, then I check it out in IE and the right(secondary) sidebar disappears. I can take out the CCS for the secondary sidebar and it appears again but its it doesn’t display they way I would like it. Anyone know a trick or something to get IE to read my absolute positioning correctly? http://provexpo09.wordpress.com/

    CSS for the Sidebar

    div#secondary {
    display:block;
    z-index:99;
    width:211px;
    position:absolute;
    top:0;
    left:0;
    margin:285px 0 0 739px;
    padding:0;
    }

    #308689

    beemeister
    Member

    Absolute positioning in IE? Fun. :P

    Nice CSS by the way.

    Is that how you want it in FF and Safari. I can see the right sidebar there under the header.

    #308694

    gpccexpo09
    Member

    The way it is in FF and Safari is how I would like it to show up in IE.

    Absolute in IE is always a blast :)

    Tried relative that was sort of a joke. Floats are no go. Tried to get rid of positioning all together and just play with crazy margins but then the formatting of the content ended up all messed up.

    Thought everything was great then I checked it out on a PC and the sidebar appears to not even exist.

    #308697

    beemeister
    Member

    Can you post your css here? Put it in backticks code here

    #308698

    beemeister
    Member

    What I meant was:

    You can also put code in between backtick ( ` ) characters.

    #308700

    gpccexpo09
    Member

    is this what you mean? I’m new to the forum.

    body {
    background-image:url('http://www.aardvarkdesign.com/provChamber/expo_09/lines.gif');
    padding-top:0;
    padding-left:0;
    margin-top:0;
    margin-left:0;
    }
    
    #wrapper {
    width:950px;
    font-family:Arial, sans-serif;
    }
    
    #header {
    width:950px;
    height:220px;
    overflow:hidden;
    background-image:url('http://www.aardvarkdesign.com/provChamber/expo_09/header.jpg');
    background-repeat:no-repeat;
    padding:0;
    }
    
    div#container {
    font-family:Arial, sans-serif;
    font-size:11.75px;
    color:#666666;
    width:950px;
    margin:0;
    padding:0;
    }
    
    div#content {
    background-color:#ffffff;
    width:500px;
    margin:0 0 0 180px;
    padding:10px 16px 20px 0;
    }
    
    a:link {
    color:#336699;
    text-decoration:none;
    }
    
    a:hover {
    color:#336699;
    text-decoration:underline;
    }
    
    a:visited {
    color:#336699;
    text-decoration:none;
    }
    
    h2.entry-title {
    font-size:12px;
    font-weight:100;
    }
    
    #primary h3 {
    color:#fe9900;
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
    padding-bottom:5px;
    }
    
    div#primary {
    margin:0 0 0 -100%;
    }
    
    #primary.sidebar {
    background-color:#ffffff;
    width:150px;
    padding-top:10px;
    padding-right:0;
    }
    
    .sidebar {
    background-color:#ffffff;
    font-size:11px;
    }
    
    div#secondary {
    display:block;
    z-index:99;
    width:211px;
    position:absolute;
    top:0;
    left:0;
    margin:285px 0 0 739px;
    padding:0;
    }
    
    div#content#secondary.sidebar {
    margin:0;
    }
    
    #primary.sidebar ul li {
    list-style-type:none;
    padding-left:0;
    margin-left:0;
    }
    
    #primary.sidebar ul {
    list-style-type:none;
    padding-bottom:10px;
    margin-left:0;
    }
    
    #primary.sidebar ul li ul {
    list-style-type:none;
    padding-left:0;
    margin-left:0;
    }
    
    #secondary.sidebar ul li {
    list-style-type:none;
    margin-left:0;
    padding:0 10px 0 0;
    }
    
    #secondary.sidebar ul li ul {
    list-style-type:none;
    padding-left:10px;
    margin-left:0;
    }
    
    div#footer {
    font-size:10px;
    text-align:left;
    padding-left:10px;
    padding-bottom:10px;
    }
    
    #flickr_badge_wrapper {
    border:0;
    border-style:none;
    }
    #308702

    beemeister
    Member

    That is great! Thanks.

    #308703

    devblog
    Member

    I wouldn’t recommend using absolute positioning for your sidebar.

    For the type of layout you want to create (which can be really tricky):

    [primary][container][secondary]

    I’d recommend using floats and play with the margins. If it helps, take a look at my CSS code for one of my skins, who knows… it might point you to the right direction.

    http://sandboxskins.wordpress.com/2008/12/07/semmatic-for-sandbox/

    #308709

    devblog
    Member

    Here, extracted from that code, you might find this helpful:

    #container {
         width:100%;
         background:transparent;
         float:left;
         clear:both;
         overflow:hidden;
    } 
    
    #primary,#secondary {
    	float:left;
    	overflow:hidden;
    	width:180px;
    }
    
    #primary {
    	margin:0 0 0 -1000px;
    }
    
    #secondary {
    	margin:0 0 0 -200px;
    }
    #308710

    gpccexpo09
    Member

    Thanks I’ll try playing around with it some more.

    #308711

    beemeister
    Member

    Sweet dev! I was working on that…but man are you fast!

    #308713

    devblog
    Member

    I forgot to mention that in this selector:

    #primary {
    	margin:0 0 0 -1000px;
    }

    You’ll need to change the left margin to whatever width you’ve set your #wrapper. If your #wrapper has a width of 100%, then change the left margin value to “-100%”

    #308716

    devblog
    Member

    That kind of layout can be really tricky, especially when trying to make it look good in IE. I have the code already, so I thought it could save you guys some time and headaches.

    #308719

    beemeister
    Member

    dev – I have the code already, so I thought it could save you guys some time and headaches.

    Ah…the confession. Why reinvent the wheel?

    #308727

    gpccexpo09
    Member

    Trying to play around with the floats. I can get the margins to line up in FF but the sidebar appears halfway down the page in IE. And it is messing up the content in the sidebar and pushing it right. *sigh* (Can I leave work yet?)
    `body {
    background-image:url(‘http://www.aardvarkdesign.com/provChamber/expo_09/lines.gif’);
    width:950px;
    padding-top:0;
    padding-left:0;
    margin-top:0;
    margin-left:0;
    }

    #wrapper {
    width:950px;
    font-family:Arial, sans-serif;
    }

    #header {
    width:950px;
    height:220px;
    overflow:hidden;
    background-image:url(‘http://www.aardvarkdesign.com/provChamber/expo_09/header.jpg’);
    background-repeat:no-repeat;
    padding:0;
    }

    div#container {
    font-family:Arial, sans-serif;
    font-size:11.75px;
    color:#666666;
    width:950px;
    float:left;
    margin:0;
    padding:0;
    }

    div#content {
    background-color:#ffffff;
    width:500px;
    margin:0 0 0 180px;
    padding:10px 16px 20px 0;
    }

    a:link {
    color:#336699;
    text-decoration:none;
    }

    a:hover {
    color:#336699;
    text-decoration:underline;
    }

    a:visited {
    color:#336699;
    text-decoration:none;
    }

    h2.entry-title {
    font-size:12px;
    font-weight:100;
    }

    #primary h3 {
    color:#fe9900;
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
    padding-bottom:5px;
    }

    #primary,#secondary {
    float:left;
    overflow:hidden;
    }

    div#primary {
    margin:0 0 0 -100%;
    }

    #primary.sidebar {
    background-color:#ffffff;
    width:150px;
    padding-top:10px;
    padding-right:0;
    }

    .sidebar {
    background-color:#ffffff;
    font-size:11px;
    }

    div#secondary {
    display:block;
    margin:-69% 0 0 739px;
    }

    div#content#secondary.sidebar {
    margin:0;
    }

    #primary.sidebar ul li {
    list-style-type:none;
    padding-left:0;
    margin-left:0;
    }

    #primary.sidebar ul {
    list-style-type:none;
    padding-bottom:10px;
    margin-left:0;
    }

    #primary.sidebar ul li ul {
    list-style-type:none;
    padding-left:0;
    margin-left:0;
    }

    #secondary.sidebar ul li {
    list-style-type:none;
    margin-left:0;
    padding:0 10px 0 0;
    }

    #secondary.sidebar ul li ul {
    list-style-type:none;
    padding-left:10px;
    margin-left:0;
    }

    div#footer {
    font-size:10px;
    text-align:left;
    padding-left:10px;
    padding-bottom:10px;
    }

    #flickr_badge_wrapper {
    border:0;
    border-style:none;
    }`

    #308728

    gpccexpo09
    Member

    whops sorry

    body {
    background-image:url('http://www.aardvarkdesign.com/provChamber/expo_09/lines.gif');
    width:950px;
    padding-top:0;
    padding-left:0;
    margin-top:0;
    margin-left:0;
    }
    
    #wrapper {
    width:950px;
    font-family:Arial, sans-serif;
    }
    
    #header {
    width:950px;
    height:220px;
    overflow:hidden;
    background-image:url('http://www.aardvarkdesign.com/provChamber/expo_09/header.jpg');
    background-repeat:no-repeat;
    padding:0;
    }
    
    div#container {
    font-family:Arial, sans-serif;
    font-size:11.75px;
    color:#666666;
    width:950px;
    float:left;
    margin:0;
    padding:0;
    }
    
    div#content {
    background-color:#ffffff;
    width:500px;
    margin:0 0 0 180px;
    padding:10px 16px 20px 0;
    }
    
    a:link {
    color:#336699;
    text-decoration:none;
    }
    
    a:hover {
    color:#336699;
    text-decoration:underline;
    }
    
    a:visited {
    color:#336699;
    text-decoration:none;
    }
    
    h2.entry-title {
    font-size:12px;
    font-weight:100;
    }
    
    #primary h3 {
    color:#fe9900;
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
    padding-bottom:5px;
    }
    
    #primary,#secondary {
    float:left;
    overflow:hidden;
    }
    
    div#primary {
    margin:0 0 0 -100%;
    }
    
    #primary.sidebar {
    background-color:#ffffff;
    width:150px;
    padding-top:10px;
    padding-right:0;
    }
    
    .sidebar {
    background-color:#ffffff;
    font-size:11px;
    }
    
    div#secondary {
    display:block;
    margin:-69% 0 0 739px;
    }
    
    div#content#secondary.sidebar {
    margin:0;
    }
    
    #primary.sidebar ul li {
    list-style-type:none;
    padding-left:0;
    margin-left:0;
    }
    
    #primary.sidebar ul {
    list-style-type:none;
    padding-bottom:10px;
    margin-left:0;
    }
    
    #primary.sidebar ul li ul {
    list-style-type:none;
    padding-left:0;
    margin-left:0;
    }
    
    #secondary.sidebar ul li {
    list-style-type:none;
    margin-left:0;
    padding:0 10px 0 0;
    }
    
    #secondary.sidebar ul li ul {
    list-style-type:none;
    padding-left:10px;
    margin-left:0;
    }
    
    div#footer {
    font-size:10px;
    text-align:left;
    padding-left:10px;
    padding-bottom:10px;
    }
    
    #flickr_badge_wrapper {
    border:0;
    border-style:none;
    }
    #308736

    devblog
    Member

    When I was coding that skin my big mistake was to leave IE out of the picture… I thought that IE6 would render my code without much of a fuss… knowing the problems IE6 gives to developers/designers, I should’ve known better…. so I had to code my CSS almost from scratch, and while doing so, I uttered the nicest things I could think of about such magnificent browser.

    I thought that by sharing the code it would keep you guys from getting to a point where you’d be compelled to express your love towards IE as I did.

    #308739

    devblog
    Member

    gpccexpo09, it seems you’re using the old version of Sandbox. Try using the new one (Sandbox-10)

    Also, I’d recommend you not to use pixel units for font-size, use ’em’ or ‘%’ instead.

    If you want to know the em equivalent to pixels, this can be of help:

    http://sureshjain.wordpress.com/2007/07/06/53/

    #308740

    beemeister
    Member

    “I uttered the nicest things I could think of about such magnificent browser.”

    Hee hee…

    #308741

    gpccexpo09
    Member

    ahhhh I switched to Sandbox-10 and it killed it. Damn

The topic ‘problems seeing sidebar in IE’ is closed to new replies.