...

View Full Version : IE6 Issues, works in Ie7/FF



aldend123
05-08-2007, 06:19 AM
www.umassd.edu/wrc/index.html

I'm working on a website for an on campus organization as a form of financial aide and just "finished" a re-design for their site however I'm having some problems in IE6. I really wish I could get a screen shot at the least, but I don't have access to IE6 at the moment. With the end of the semester coming, I really wanted to get this up, but finals and end of semester homework assignments make time tight :-/

I'd love to just exclude Ie6 for now, however my bosses are still on IE6 and IMO, these are the people it needs to look best for.

In IE6, the Nav bar on the left's pink background will extend to the top of the browser.

I'll get a screen shot up ASAP.

Heres my CSS. CSS validated, and HTML validated for the most part aside from a nit pick here and there.

Heads up on the layout, its frames, one across the top horizontally, and then 3 across the bottom, one for each "area of content". The main content frame is then supplied via an iframe. It's not the simplest format, but it works... sorta:p

I also used a fair amount of inline CSS in the HTML tags, poor coding for the win! It's pretty much my first real website though, so hopefully my coding will improve in time.

Thanks for any help!:thumbsup:


body {
font-family: tahoma;
font-size: 12px;
}
div.tabmargin {
margin: 0px 15px 0px 20px;
max-width: 500px;
}
div.graybar {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #CCCCCC;
text-align: left;
}

/*____________________________________________________________________AboutUs*/
div.CONTACTBOX_title {
float: right;
margin: 0px 20px 7px 0px;
padding: 10px 2px 2px 2px;
background-color: #CCCCCC;
width: 200px;
text-align: right;

}
div.CONTACTBOX_body {
margin: 0px 0px 0px 0px;
padding: 3px;
background-color: #FFFFFF;
text-align: left;
}
div.LINEBOX_divbox {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #CCCCCC;
font-style: italic;
text-align: left;
}
hr.hr {
width: 100px;
color: #CCCCCC;
float: left;
}
img.meetstaff_img {
/*height: 150px;*/
width: 110px;
}
/*____________________________________________________________________Events*/
td.eventDate {
margin: 0px 0px 0px 10px;
vertical-align: top;
width: 40px;
}
tr.eventRow {
padding: 0px 0px 10px 0px;
}
table.eventTable {
margin: 5px 0px 0px 30px;
width: 500px;
}
div.eventMonth {
margin: 0px 0px 0px 25px;
width: 350px;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #CCCCCC;
}




/*_____________________________________________________________Announcements*/
p.eventslist {
font-family: Arial;
font-size: 11px;
color: #E356E2;
text-decoration: none;
margin: 10px 0px 0px 0px;
}
a.eventLINK {
font-family: Arial;
font-size: 11px;
color: #E356E2;
text-decoration: none;
margin: 10px 0px 0px 0px;
}
a.eventLINK:hover {
font-family: Arial;
font-size: 11px;
color: #9F009F;
text-decoration: underline;
margin: 10px 0px 0px 0px;
}
table.eventtable {
font-family: Arial;
font-size: 11px;
color: #E356E2;
text-decoration: none;
}
tr.eventrow {
/*padding: 10 0 0 0;*/
}
td.eventcell {
padding: 7px 0px 0px 5px;
border-color: #FCCFFF;
border-top-style: dotted;
border-top-width: 2px;
}
td.eventdate {
vertical-align: top;
padding: 7px 0px 0px 0px;
border-color: #FCCFFF;
border-top-style: dotted;
border-top-width: 2px;
}
a.eventlink {
text-decoration: none;
color: #E356E2
}
a.eventlink:hover {
text-decoration: underline;
color: #9F009F;
}

koyama
05-08-2007, 01:30 PM
In IE6, the Nav bar on the left's pink background will extend to the top of the browser.
What is causing this is a frame background bug in IE6 that may result in that a frame gets a horizontally 'striped' background. The stripe always seems to be 150px tall and is comprised by segments of the viewport. I'm not sure about how this stripe is put together, but it is not always a contiguous range of pixels from the viewport. When there are multiple frames, it gets more complicated. As far as I can tell, the bug is not yet well-described, but here are some reports. However, the explanations of what is going on is incomplete, but the fixes described are ok.


Repeating Body Backgrounds in Frames (IE) (http://www.stripytshirt.co.uk/features/browser-bugs/)
Frames and background images in IE6 (CSS Creator forum post) (http://www.csscreator.com/node/980)

It occurs when you for the body element of the framed document specify values for background-image and background-repeat: repeat-x, repeat-y, or no-repeat while not specifying a background-color.

It makes no difference whether you use the individual properties or the shorthand background property.

Example from your code:


<body style="background-image: url(./nav_bg_withbar.jpg); background-repeat: no-repeat; background-position: top left;">

The bug only occurs when the framed document is rendered in standards mode and not in quirks mode.

Fixes? The first source suggests that you specify background properties for both the html and body element. (However, I find that it suffices to specify background properties for the html element.) This is probably the best fix.

The second source explains that specifying a background-color does the trick as well. Note that this only works for background colors other than transparent.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum