div problem in IE…

Resolved Bare
(@bare)

14 years ago

I have been trying to run down a problem in my column lengths (sidebar and narrowcolumn) in my WP theme. I am using a slightly modified Kubrick (default) in which I have mostly just modified the CSS. You can trace the progression of my problem in this thread:

http://wordpress.org/support/topic/381982?replies=7

And there is another thread linked in that one from when the problem began.

So I finally got my columns to both run the same length, so if the sidebar was longer the narrowcolumn lengthened and vice-versa. I code in FireFox and I just decided to check my progress in IE8 using compatibility mode. I fixed one small display issue, but was left with the glaring problem that my sidebar will not lengthen and it somehow cuts off my narrowcolumn (content) if it runs longer. You can see my problem (in any IE besides 8) here:

http://tech.bareasschoppers.com/power-commander-pc3-maps/

If you scroll down you can see my content is chopped off.

Since IE is such a common browser, and many of my visitors have not switched to IE8 I really need to find a solution to this that works.

Any help to resolve this issue is G-R-E-A-T-L-Y appreciated, I obviously cannot finish the site until this is resolved.

Viewing 11 replies - 1 through 11 (of 11 total)

Thread Starter Bare
(@bare)

14 years ago

OK, still no replies here but I’ve been doing my homework (or trying to)…

I tried suggestions from here:

http://positioniseverything.net/explorer/unscrollable.html

And here:

http://positioniseverything.net/explorer/guillotine.html

And neither of those solutions fixed my issue.

Does anyone have any clue on this? This is a really big problem and I just can’t seem to find a solution…

Please, please help if you know how. Thanks!
Mark / t31os
(@t31os_)

14 years ago
Curious question, does IE behave differently if you remove..
```
body {
	height: 100%;
}
```
Moving on from the above query, i’d seriously consider using some IE conditional statements so you load additional CSS to fix the older IE issues..

Something like this after your regular style.css call.
```

```
Info on IE conditions: http://www.quirksmode.org/css/condcom.html

Then in the new IE stylesheet you simply redeclare the problem definitions (assuming you know what they are at this point)..

Simply for example:
```
body { height:auto }
```
Styles declared last will take priority, and since only IE will run the above conditional statement it’s the only browser that will load those new definitions.
Thread Starter Bare
(@bare)

14 years ago

OK, I was unaware of that body style altogether. I checked it using Firebug and found that it’s pulling that from a stylesheet associated with my NextGen gallery. Do you believe it’s possible that this plugin stylesheet is causing my problem? I understand how stylesheets are called and how they function, I was just surprised to see it being implemented on my front page since the front page isn’t even a NextGen gallery. Regardless, I commented out that line and tried it and found no difference in either browser. I actually have a series of IE problems that need resolution, this is just the first and most noticeable of the bunch.

As for the conditional CSS, I was beginning to realize the need to tackle that. The more I get into this and check cross-browser compatibility, the more I find problems that I believe cannot be fixed without conditional CSS. My problem is, being still fairly new to CSS, I haven’t learned all the quirks yet. I understand styling, and I feel I have a good grasp on reading CSS, but reading and understanding is a far bit from writing the code from scratch – especially when commands work “sometimes” depending on browser. I have a feeling I’m in for a lot more work on this front…

So as things stand right now the problem still exists. Using Firebug I can’t find anything else to troubleshoot and it already took me awhile (and a bit of help from the members on here) just to get everything to display properly in Firefox. Until WordPress I honestly had no idea how much disparity there is between browsers…

I’ll continue to hack through this and if I get results I’ll certainly post, in the meantime if anyone is familiar with this problem or a way to solve it I would be very appreciative.

Let me specifically thank you, t31os_, for your time.

Mark / t31os
(@t31os_)

14 years ago

You’re welcome.. 😉

To narrow down your IE issues(assuming you test away from your live site), open you main stylesheet and cut a portion of code(say 5-6 defintions), save, reload the page, see if there’s any change in behaviour/display in IE, no? undo the changes, move onto the next portion, rinse and repeat.

You can certainly do it in bigger chunks, i do tend to find that the quickest way when trying to troubleshoot IE issues if i can’t track down a particular problem. I usually start in big chunks and work my way down… but it’s simply a process of elimination.

Thread Starter Bare
(@bare)

14 years ago

I was having trouble sorting this out in IE because I had no developer tools for IE. I was being a little dense, I suppose being new to this level of troubleshooting CSS, and ignoring the obvious – there had to be developer tools for IE.
So a quick google search later netted me the IE developer tools and now I’m plugging away through the CSS directly in IE. It’s certainly not as precise as Firebug, but it’ll get the job done.

With that said, can I ask you a few specific questions..? In turning things off and on in IE I find that my content-wrapper class (this is the div I created to wrap my column and sidebar) if I turn off “overflow: hidden;” it shows my content that is being cut off. The problem is that the content appears, but my footer stays in place (on top of it) AND my page becomes like a mile long – well past the end of the content… I then turn off 2 settings in my #sidebar ID, the padding-bottom: 32767px and margin-bottom:-32767px. This reduces the page from a mile long and puts the footer where it should be, the only problem is that it cuts off my content-wrapper div which I was using to give a white background to both the sidebar and content. If you read the link I posted in the very beginning of this thread you’ll see that the padding and margin calls were added to rectify this same problem in Firefox…

I’m confused at what to do or how to fix this between the 2 browsers. I now feel confident in stating that this is a CSS interpretation difference between the browsers, but not a IE “bug” like the links I posted above. I imagine I need to add some IE specific conditions to resolve this, I’m just not totally sure what to add for IE or remove for Firefox… What would I even search for on Google or otherwise?.. I feel like this is a very specific problem related to columns, wordpress, CSS, etc so I’m not sure where to begin.

I’ll continue to search, but if anyone has any knowledge that might be able to guide me I’d be thankful! =)

Thread Starter Bare
(@bare)

14 years ago

OK, I think this may be my solution:

http://www.codeproject.com/KB/HTML/relatively_simple.aspx#two-cols

It’s a lot to change and it’s late right now, but I plan to try it tomorrow… It appears like it should work across browsers since it has some conditional formatting for IE only.

I’ll try this tomorrow and report back, if anyone knows this to be a waste of time please say so and save me the hassle, otherwise I’ll find out myself.

Thanks!

Mark / t31os
(@t31os_)

14 years ago

I’ve never used any special tools for IE, like i said further up, i tend to cut out pieces to find problematic styles, i find that process is pretty easy and quick to do when working locally.

Different people deal with the browser quirks in different ways, some like to load additional stylesheets alongside the main one to fix IE, other’s load another stylesheet in place of the main one, written for IE, it’s all just a matter of preference and what you find works best for you. I havn’t written template/theme type code for years myself(other than modifications), so i can only really give you general advice(anything more might not necessarily be totally accurate).

Some interesting artciles, some a little dated now but still useful:
http://www.alistapart.com/articles/fauxabsolutepositioning/
http://www.alistapart.com/articles/multicolumnlayouts/
http://www.alistapart.com/articles/fauxcolumns/

Usually when people discuss code that works across browsers, the terms usually referred to are “Cross Browser {enter word here}”, where “enter word here” can be any number of things, css, templates, styling, testing, tools… etc.. (sure you get the idea) .. 😉

Thread Starter Bare
(@bare)

14 years ago

I’m slowly sifting through all this data trying to find the best way to implement my stuff. I can say that this link:

http://www.alistapart.com/articles/multicolumnlayouts/

Is just about what I had done originally, the problem was that it did not scale like I wanted it to across different browsers. The key words are “like I wanted it to”, in order to implement that method it seems you need to know in advance which column will always be longer.

As much as I hate to say it, I think the simplest all-around solution I’ve found is this one:

http://www.alistapart.com/articles/fauxcolumns/

Which uses a tiled image to create the background, then I just float my content on top. I was really hoping to do it with CSS, but I think that it may just be easier to resolve (especially for cross-browser support) by making the image and calling it a day. I hate to resort to the image route because it feels like I’m “giving up” on the CSS route, but this is a surefire solution that shouldn’t break regardless of browser.

Thanks again for the links and the ideas, I’ll post something more when I finally finish and hopefully it’ll be enough info to help anyone else with the same dilemma.

Mark / t31os
(@t31os_)

14 years ago

The faux method is a very popular way to do it, lots of people use that approach, and i’m not sure i’d call it a non-css method, you’d use CSS to position and style the elements that make up the page still, how is that not css? 😉

The faux method is in my opinion the favoured approach, and i’ve not seen a better one to replace it, i suggested that very approach to solve a problem a user was having with the content and sidebar heights not matching up, it would be my choice if i were creating a theme/template design. Obviously there are times when it’s not suited, like if you had a variable width theme, but there are ways to work with those to with a little creative thinking.

Note the first paragraph on the faux columns page following figure 3, in regards to IE, and also the comments in the paragraph that follows.

More on the IE box model issue:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
Thread Starter Bare
(@bare)

14 years ago
Man, that first link there is really great. It not only really helped to understand and visualize some of the problems I was having (I had sorta figured it out through trial and error), but it helped me to understand a lot of how and why CSS is setup like it is. Good stuff…

Now, to tell how I finally resolved this issue. It took a lot of googling, a lot of reading the information you provided and just a little bit of work. I feel much better about this than I originally thought I would, mostly because it resolves issues I was having across multiple browsers – but also problems within varying versions of browsers.

For starters, I made my horizontal image that I wanted to tile behind my columns. My page content is 960px wide broken down from left to right it is made up of by a 240px left sidebar, a 1px “border” and then a 719px content area. So I simply made an image 960px wide by 1px tall, I colored the left 240px gray, the 1px border black and the 719px content area white. Obviously you can use whatever colors you like.

My code then looks like this:
```
#content-wrapper {
	background: #fff url('images/middle-bg.gif') repeat-y;
	overflow:hidden;
	width:960px;}
.narrowcolumn {
	float: right;
	padding: 0 10px 20px 10px;
	width: 700px;}
#sidebar {
	padding: 3px 10px 10px 10px;
	width: 220px;}
```
My #content-wrapper ID is just a div that I wrap everything in, it opens at the end of my header.php and closes at the beginning of my footer.php to make it simple (thanks to nebulus for that). As you can see it calls my background image and tiles it vertically.

The .narrowcolumn and #sidebar are common WP titles so I assume most people know what they are and what they do. The only unusual thing I changed was adding the 3px pad to the top of my #sidebar, this was because without the search box there (I moved it into my header), there was a gap which I didn’t like aesthetically.

This link was my partial guide:

http://www.alistapart.com/articles/fauxcolumns/

The rest I figured out by quick trial and error.

Thanks again to everyone who’s helped with this, not just t31os_ but also people like nebulus who helped me with earlier issues that helped me to get to this point.
Mark / t31os
(@t31os_)

14 years ago

You’re welcome .. 😉

I did like the 456bereastreet article myself, was an eye opener for me on the IE box model issue, glad you found it helpful.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘div problem in IE…’ is closed to new replies.

div problem in IE…

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics