WordPress.com Forums » User Favorites: myweblogtv

gpccexpo09 on "problems seeing sidebar in IE"

gpccexpo09 — Tue, 23 Dec 2008 15:23:15 +0000

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

beemeister on "problems seeing sidebar in IE"

beemeister — Thu, 18 Dec 2008 22:54:43 +0000

I see.

devblog on "problems seeing sidebar in IE"

devblog — Thu, 18 Dec 2008 22:31:25 +0000

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.

devblog on "problems seeing sidebar in IE"

devblog — Thu, 18 Dec 2008 22:24:46 +0000

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)

beemeister on "problems seeing sidebar in IE"

beemeister — Thu, 18 Dec 2008 21:34:26 +0000

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

devblog on "problems seeing sidebar in IE"

devblog — Thu, 18 Dec 2008 21:33:10 +0000

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.

devblog on "problems seeing sidebar in IE"

devblog — Thu, 18 Dec 2008 21:31:26 +0000

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

beemeister on "problems seeing sidebar in IE"

beemeister — Thu, 18 Dec 2008 21:30:51 +0000

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.

gpccexpo09 on "problems seeing sidebar in IE"

gpccexpo09 — Thu, 18 Dec 2008 21:28:27 +0000

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

beemeister on "problems seeing sidebar in IE"

beemeister — Thu, 18 Dec 2008 21:18:20 +0000

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

Hee hee...

devblog on "problems seeing sidebar in IE"

devblog — Thu, 18 Dec 2008 21:16:20 +0000

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/

devblog on "problems seeing sidebar in IE"

devblog — Thu, 18 Dec 2008 21:08:30 +0000

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.

gpccexpo09 on "problems seeing sidebar in IE"

gpccexpo09 — Thu, 18 Dec 2008 20:50:02 +0000

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

gpccexpo09 on "problems seeing sidebar in IE"

gpccexpo09 — Thu, 18 Dec 2008 20:49:29 +0000

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

beemeister on "problems seeing sidebar in IE"

beemeister — Thu, 18 Dec 2008 20:38:36 +0000

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?

devblog on "problems seeing sidebar in IE"

devblog — Thu, 18 Dec 2008 20:36:38 +0000

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.

devblog on "problems seeing sidebar in IE"

devblog — Thu, 18 Dec 2008 20:33:01 +0000

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

beemeister on "problems seeing sidebar in IE"

beemeister — Thu, 18 Dec 2008 20:30:45 +0000

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

gpccexpo09 on "problems seeing sidebar in IE"

gpccexpo09 — Thu, 18 Dec 2008 20:26:49 +0000

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

devblog on "problems seeing sidebar in IE"

devblog — Thu, 18 Dec 2008 20:24:25 +0000

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

devblog on "problems seeing sidebar in IE"

devblog — Thu, 18 Dec 2008 20:19:25 +0000

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/

beemeister on "problems seeing sidebar in IE"

beemeister — Thu, 18 Dec 2008 20:10:17 +0000

That is great! Thanks.

gpccexpo09 on "problems seeing sidebar in IE"

gpccexpo09 — Thu, 18 Dec 2008 20:08:55 +0000

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

beemeister on "problems seeing sidebar in IE"

beemeister — Thu, 18 Dec 2008 20:00:57 +0000

What I meant was:

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

beemeister on "problems seeing sidebar in IE"

beemeister — Thu, 18 Dec 2008 20:00:23 +0000

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

gpccexpo09 on "problems seeing sidebar in IE"

gpccexpo09 — Thu, 18 Dec 2008 19:48:11 +0000

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.

beemeister on "problems seeing sidebar in IE"

beemeister — Thu, 18 Dec 2008 19:42:04 +0000

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.

gpccexpo09 on "problems seeing sidebar in IE"

gpccexpo09 — Thu, 18 Dec 2008 19:37:22 +0000

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

myweblogtv on ""position: fixed" for "scrolling" side menu works OK in FF but not in IE"

myweblogtv — Tue, 16 Dec 2008 06:00:20 +0000

This is just a suggestion, but I stay away from things that would require visitors to modify browser settings, such as changing to "quirks mode" in order to properly view my blog.

Well, I was hoping to find a solution involving conditional code inside my style sheet.

I'll keep thinking, and will post the answer here if I find one.

In any case, thanks to you guys for your responses, and if anyone else has some input then I'd be grateful. :)

thesacredpath on ""position: fixed" for "scrolling" side menu works OK in FF but not in IE"

thesacredpath — Tue, 16 Dec 2008 05:03:35 +0000

This is just a suggestion, but I stay away from things that would require visitors to modify browser settings, such as changing to "quirks mode" in order to properly view my blog.