Problems with IE 6 and 5

cfp700

Posted: 16 May 2008 07:42 AM

[ Ignore ]

Grad Student

Total Posts: 68

Joined 02-01-2008

Working through my first EE powered site, and truly am enjoying the capability of the system.

I have my index blocked out, and several interior pages started. I have 13 weblogs established for data.

I have tested the site in IE7, Firefox, Opera, Safari, etc, and although Firefox includes a few extra bits of white space, all is good.

Then I fired up a machine with IE 6. Holy crap. I’ve got a right column continually kicking out to the right (outside of the container/wrapper), and a left column over-riding my main content (center column).

(To get some help on this, let me know if I need to include a screen capture....)

Here’s the current index page:

FireNews.net (new index EE)

The footer at the bottom links to some of the interior pages, notably:

http://www.firenews.net/news/news_summary/
http://www.firenews.net/headlines/headlines_summary/

I’m guessing this is a CSS issue, but not sure where to start trying to fix this. 24% of my readers are on IE6 or earlier, so this is one not to be ignored.

Thanks for any suggestions.

Jeff

Profile

bluedreamer

Posted: 16 May 2008 01:23 PM

[ Ignore ] [ # 1 ]

Research Assistant

Total Posts: 347

Joined 06-24-2007

It’s most likely the use of position: relative/absolute

Try this…

#left_col {
width: 170px;
float: left;
padding: 0 10px;
margin-right: 10px;
}

#page_content {
float: left;
width: 390px;
}

#right_col {
float: right;
width: 160px;
}

Signature

Rob - http://www.blue-dreamer.co.uk/ - because I like blue!

Profile

»™ee«

Posted: 16 May 2008 02:19 PM

[ Ignore ] [ # 2 ]

Research Assistant

Total Posts: 649

Joined 02-28-2006

Looks like you got it fixed up then, looks ok here in IE6 now.
Give a shout if you find more quirk bugs.

Signature

Wee-kee- dee-kee!

Profile

cfp700

Posted: 16 May 2008 03:15 PM

[ Ignore ] [ # 3 ]

Grad Student

Total Posts: 68

Joined 02-01-2008

OK, I’m getting there (but still not error free).

To simplify things, I’ve taken out the margins and padding for now.

At least everything is being contained vertically correctly!

Let’s focus on the home (index.php) and the News Summary (news/news_summary) page:

Here’s what is rendering now on IE7:
Home: rendering correctly (!)
News Summary: right column is starting too low, aligning with the bottom of the page content. Should start at the top.

Here’s what is rendering now on IE6:
Home: big white space below page content, aligning with the bottom of the right column.
News Summary: right column is starting too low, aligning with the bottom of the page content. (same as IE7).

And just for giggles: It’s totally screwed in FireFox.

Here’s my code (now):

#left_col {
    width: 170px;
                float: left;
}

#page_content {
                float: left;
}

#right_col {
                float: right;
    width: 160px;
}

And here’s what it was before:

#left_col {
    width: 170px;
    position: absolute;
                padding-left: 15px;
                padding-right: 15px;
                margin-left: 0px;
    left: 0px;
    top: 0px;
}

#page_content {
    position: relative;
    margin-right: 160px;
    margin-left: 0px;
}

#right_col {
    width: 160px;
    position: absolute;
    right: -160px;
    top: 0px;
}

Profile

»™ee«

Posted: 16 May 2008 03:47 PM

[ Ignore ] [ # 4 ]

Research Assistant

Total Posts: 649

Joined 02-28-2006

There isn’t room for the right column and it’s breaking the layout.
I can’t find the property that is breaking the layout though, something’s too wide.
inside spot one wouldn’t need a margin left if it’s container was defined would it?
It’s container doesn’t have a defined width, not sure on that call.

Signature

Wee-kee- dee-kee!

Profile

grantmx

Posted: 16 May 2008 03:59 PM

[ Ignore ] [ # 5 ]

Research Assistant

Total Posts: 911

Joined 06-05-2007

Sounds like you need to start using IE Conditional Comments. Debugging for IE, FF and all of the others using just one stylesheet will make you go nuts.

BTW - Dont waist your time hacking or conditional coding for IE5 dude. Nobody is using it and if they are, shame on them.

Signature

Profile

»™ee«

Posted: 16 May 2008 04:08 PM

[ Ignore ] [ # 6 ]

Research Assistant

Total Posts: 649

Joined 02-28-2006

Right don’t bother with IE5, but if conditional hacks are required, sometimes the structure is just too complex.
Keep it Simple!

Signature

Wee-kee- dee-kee!

Profile

cfp700

Posted: 16 May 2008 05:12 PM

[ Ignore ] [ # 7 ]

Grad Student

Total Posts: 68

Joined 02-01-2008

I’m testing FF, IE6 and IE7.

Here’s where the code is now:

<!-- wraps all of the divs on the page -->
#wrapper {
    width: 760px;
    margin-left: auto;
    margin-right: auto;
}

<!-- container for everything BELOW the header/nav/search bars -->
#container {
    position: relative;
    width: 760px;
        background-color: #FFFFFF;
}

<!-- holds left column, middle, and right column. Essentially all the "white space" between the header and the footer ->>
#page_content {
                position: relative;
}

#left_col {
    width: 200px;
        float: left;
}

<!-- occurs on interior pages. hold main content of a page -->
#inside_spot_one {
    width: 400px;
    margin-left: 200px;
}

#right_col {
    width: 160px;
                float: right;
}

<!-- holds big photo on homepage -->
#spot_one {
        width: 410px;
        margin-left: 15px;
        margin-top: 15px;
        background-color: #FFFFFF;
}

<!-- holds "Headlines" between big photo and "Sponsors" on homepage -->
#spot_one_chaser {
    width: 160px;
    position: absolute;
    top: 0px;
    margin-left: 440px;
}

Here’s the results of testing (the errors are at least going down!)

Home Page:
FF - OK!
IE6 - ads result in too much white space below big photo
IE7 - OK!

Interior Page:
FF - ads start below END of “inside_spot_one” and end up beneath footer
IE6 - ads start below END of “inside_spot_one”
IE7 - ads start below END of “inside_spot_one”

One last note: the images I have in the right column are 160px wide. Could this be an issue?

Profile

cjm13

Posted: 17 May 2008 06:37 PM

[ Ignore ] [ # 8 ]

Summer Student

Total Posts: 17

Joined 05-17-2008

I use PHP to detect the browser and assign a stylesheet.

Profile

cfp700

Posted: 17 May 2008 09:03 PM

[ Ignore ] [ # 9 ]

Grad Student

Total Posts: 68

Joined 02-01-2008

Here is the fixed code. Works in all browsers now. Thanks for all the help!

#wrapper {
    width: 760px;
    margin-left: auto;
    margin-right: auto;
}

#container {
    position: relative;
    width: 100%;
                background-color: #FFFFFF;
}

#page_content {
                position: relative;
                width: 100%;
}

#left_col {
    width: 200px;
                position: absolute;
                left: 0px;
                top: 0px;
}

#inside_spot_one {
    margin-right: 160px;
    margin-left: 200px;
}

#right_col {
    width: 160px;
                position: absolute;
                right: 0px;
                top: 0px;
}

#spot_one {
    width: 410px;
                top: 0px;
                margin-left: 15px;
                margin-top: 15px;
                background-color: #FFFFFF;
}

#spot_one_chaser {
    width: 160px;
    position: absolute;
    top: 0px;
    margin-left: 440px;
}

Profile

‹‹ SWFObject help Problems with <div> heights wraping weblog feeds in firefox ››

Username		Remember Me?
Password		forgot password?

Post Marker Legend
	New posts	Hot Topic with new posts	New Poll	Moved Topic	Sticky topic
	No new posts	Hot Topic with no new posts	Old Poll	Closed Topic	Announcements

Visitor Statistics
The most visitors ever was 1149, on July 16, 2007 10:33 AM
Total Registered Members:	61009	Total Logged-in Users:	18
Total Topics:	73779	Total Anonymous Users:	11
Total Replies:	398022	Total Guests:	460
Total Posts:	471801