Home  >   Forum Home  >  ExpressionEngine Community Forums  >  HTML, CSS, and Design Help  >  Thread
   
 
Problems with IE 6 and 5
 
cfp700
Posted: 16 May 2008 06:42 AM   [ Ignore ]  
Grad Student
Avatar
Rank
Total Posts:  69
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 12:23 PM   [ Ignore ]   [ # 1 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  417
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
 
 
Crssp-ee
Posted: 16 May 2008 01:19 PM   [ Ignore ]   [ # 2 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  814
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!
Who’s that drivin’ the bus -next stop the weekend!
™T.Gee. (Q n’ A -w/ way more Q’s than A’s) wink
Profile
 
 
cfp700
Posted: 16 May 2008 02:15 PM   [ Ignore ]   [ # 3 ]  
Grad Student
Avatar
Rank
Total Posts:  69
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
 
 
Crssp-ee
Posted: 16 May 2008 02:47 PM   [ Ignore ]   [ # 4 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  814
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!
Who’s that drivin’ the bus -next stop the weekend!
™T.Gee. (Q n’ A -w/ way more Q’s than A’s) wink
Profile
 
 
grantmx
Posted: 16 May 2008 02:59 PM   [ Ignore ]   [ # 5 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1055
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.  cool smirk

 Signature 

grantmx | designs - design | development | photography | consulting | ee pro profile
Profile
 
 
Crssp-ee
Posted: 16 May 2008 03:08 PM   [ Ignore ]   [ # 6 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  814
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!
Who’s that drivin’ the bus -next stop the weekend!
™T.Gee. (Q n’ A -w/ way more Q’s than A’s) wink
Profile
 
 
cfp700
Posted: 16 May 2008 04:12 PM   [ Ignore ]   [ # 7 ]  
Grad Student
Avatar
Rank
Total Posts:  69
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 05: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 08:03 PM   [ Ignore ]   [ # 9 ]  
Grad Student
Avatar
Rank
Total Posts:  69
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 ››
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 1149, on July 16, 2007 09:33 AM
Total Registered Members: 64926 Total Logged-in Users: 38
Total Topics: 81886 Total Anonymous Users: 29
Total Replies: 440192 Total Guests: 225
Total Posts: 522078    
Members ( View Memberlist )
Newest Members:  milesw,  kakihara,  Aurels,  bhairab,  Eric Gun,  kevo,  vitya.melnik,  alinm24,  Derek Sunder,  simple_think
Active Members:    Andrew Weaver,  arcoiris,  Bas1c,  Burly Chassis,  Carlo,  Christian Schulte,  CodysPlace.com,  communicatedesign,  Crucial,  D.ILyin,  dolmance,  Dom.S,  e-man,  Flatulent Badger,  Ingmar Greil,  ITWY,  joemo,  kenny2,  lithiumdave,  Lyle Anderson,  Mark Bowen,  markgledhill,  MaxUp,  octimizer,  P.J.,  Paul Bell,  Paul Frost (orienteer),  pcmeissner,  Robb Ottenhoff,  robt,  sakana,  Sean C. Smith,  ssk06,  Steve Abraham,  stillmovingdesign,  The Spotlight Kid,  Tomas B.,  Traverse
Powered By ExpressionEngine
ExpressionEngine Discussion Forum - Version 2.1.1 (20081028)
Script Executed in 0.6022 seconds
Atom Feed   RSS 2.0