Need help? Check out our Support site, then


problems seeing sidebar in IE

  1. 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;
    }

  2. 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.

  3. 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.

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

  5. What I meant was:

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

  6. 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;
    }
  7. That is great! Thanks.

  8. 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/

  9. 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;
    }
  10. Thanks I'll try playing around with it some more.

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

  12. 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%"

  13. 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.

  14. 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?

  15. 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;
    }`

  16. 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;
    }
  17. 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.

  18. 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/

  19. "I uttered the nicest things I could think of about such magnificent browser."

    Hee hee...

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

  21. Sorry, I should have warned you. Stay with Sandbox...since you stared coding it for the original. Sandbox-10 does not have the three column skin you were basing your CSS on.

  22. ok, lunch time is coming so... let me see what I can do.

  23. Well, the code I posted was for sandbox-10... all it needs are some adjustments.

    lunch time is coming so, I'll see what I can do.

  24. Hmm...it worked for Sandbox. Must be similar enough.

  25. okay, try this:

    body {
    background:#eee url('http://www.aardvarkdesign.com/provChamber/expo_09/lines.gif') 0 0 repeat-y;
    font:normal 1em Arial, Helvetica, sans-serif;
    margin:0;
    }
    
    img#wpstats {
    position:absolute;
    top:-99px;
    }
    
    #wrapper {
    width:950px;
    height:100%;
    background:#fff;
    clear:both;
    overflow:hidden;
    font:normal .75em Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
    }
    
    #header {
    background:#fff url('http://www.aardvarkdesign.com/provChamber/expo_09/header.jpg') 0 0 no-repeat;
    width:950px;
    height:283px;
    display:block;
    overflow:hidden;
    margin:0;
    }
    
    #blog-title,#blog-description {
    display:none;
    }
    
    #menu {
    display:none;
    }
    
    #nav-above {
    display:none;
    }
    
    #container {
    width:100%;
    background:transparent;
    float:left;
    clear:both;
    overflow:hidden;
    }
    
    #content {
    background:#fff;
    width:500px;
    overflow:hidden;
    margin:0 0 0 202px;
    padding:10px;
    }
    
    #content h2 {
    font-size:1.5em;
    margin:0 0 15px;
    padding:0;
    }
    
    #content p {
    text-align:justify;
    }
    
    #content pre,#content code {
    font:normal 1em 'Courier New', Courier, Fixed, monospace;
    color:#039;
    }
    
    #content a {
    color:#5F6A86;
    text-decoration:none;
    }
    
    #nav-below {
    clear:both;
    overflow:hidden;
    margin:20px auto;
    }
    
    #primary,#secondary {
    float:left;
    overflow:hidden;
    background:transparent;
    padding:5px 10px;
    }
    
    #primary h3,#secondary h3 {
    color:#BDB6A3;
    text-align:center;
    font-size:1.2em;
    margin:10px auto 5px;
    padding:0;
    }
    
    #primary a,#secondary a {
    color:#9AABBC;
    text-decoration:none;
    }
    
    #primary {
    width:150px;
    margin:0 0 0 -950px;
    }
    
    #secondary {
    width:191px;
    margin:0 0 0 -213px;
    }
    
    #primary ul,#secondary ul {
    margin:0;
    padding:0;
    }
    
    #primary ul li,#secondary ul li {
    list-style:none;
    }
    
    #header,#footer {
    clear:both;
    }
    
    #footer {
    text-align:center;
    margin:0;
    padding:10px 0 0;
    }
    
    .skip-link {
    display:none;
    }

    This is some basic code, but the layout works. I tested it and it looks good in IE6 too.

    You, of course, will need to style other elements (i.e. link, etc)

  26. Hmm...it worked for Sandbox. Must be similar enough.

    Yes, they should but there are many things that changed. I mean, some of the elements have the same ID or Class attributes, but one of the elements that have "changed" significantly are the sidebars, so some selectors have to be redefined.

  27. I see.

  28. Hey Thanks for the help guys.... The blog is looking great!

Topic Closed

This topic has been closed to new replies.

About this Topic