problems seeing sidebar in IE

  • Unknown's avatar
    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;
    }

  • Unknown's avatar
    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.

  • Unknown's avatar
    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.

  • Unknown's avatar
    beemeister · Member ·

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

  • Unknown's avatar
    beemeister · Member ·

    What I meant was:

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

  • Unknown's avatar
    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;
}
  • Unknown's avatar
    beemeister · Member ·

    That is great! Thanks.

  • Unknown's avatar
    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/

  • Unknown's avatar
    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;
}
  • Unknown's avatar
    gpccexpo09 · Member ·

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

  • Unknown's avatar
    beemeister · Member ·

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

  • Unknown's avatar
    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%”

  • Unknown's avatar
    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.

  • Unknown's avatar
    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?

  • Unknown's avatar
    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;
    }`

  • Unknown's avatar
    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;
}
  • Unknown's avatar
    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.

  • Unknown's avatar
    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:

    Convert em,px,pt and % in css

  • Unknown's avatar
    beemeister · Member ·

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

    Hee hee…

  • Unknown's avatar
    gpccexpo09 · Member ·

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

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