Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE6 Issues, works in Ie7/FF

    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

    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!
    Code:
    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;
    			}
    Code:
    /*_____________________________________________________________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;
    			}

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by aldend123 View Post
    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.


    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:
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •