Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

problems seeing sidebar in IE

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

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

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

  4. beemeister
    Member

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

  5. beemeister
    Member

    What I meant was:

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

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

  7. beemeister
    Member

    That is great! Thanks.

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

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

  10. gpccexpo09
    Member

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

  11. beemeister
    Member

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

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

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

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

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

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

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

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

  19. beemeister
    Member

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

    Hee hee...

  20. gpccexpo09
    Member

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

  21. beemeister
    Member

    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. devblog
    Member

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

  23. devblog
    Member

    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. beemeister
    Member

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

  25. devblog
    Member

    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. devblog
    Member

    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. beemeister
    Member

    I see.

  28. gpccexpo09
    Member

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags