IE6 - a continual problem

  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

Hello all, I am yet again upon the second release of my site having trouble with IE6 displaying my layout correctly. Hereis the problem.

1. You will notice, if viewing in IE6, that all of the right hand content (which does not exceed the parent DIV even after padding and margins are included)is being forced down very oddly.
2. The rating forms under each album have their text turned upside down!?
3. .PNG transparency support in IE6 makes no sense to me.

Then there are the other minor issues on thispage.

1. Notice how the website submission form has space between it and the grey banner title div above it. These kind of pushdowns seem to occur a lot in IE6.

Now the great part in IE7, the DIVs all display correctly, however with the first page (listener page) the rating text is still upside down!

Firefox, Opera and Safari all display everything seamlessly....!?

Any suggestions?

EDIT: There is also a noticeable "cutoff" of the textureblack class DIV on the main page left hand side. I am to the point where I don't care about IE6 anymore, but I am still at a loss as to why the text in the rating area of the listener page is upside down in IE7
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

Well, the flipping problem is because you're using an IE filter in your css to flip the text:
Code: [ Select ]
.blueBackground {
    background-color: #13273B;
    border: 1px solid #333333;
    padding: 5px;
    filter: FlipV;
    margin-top: 10px;
    margin-bottom: 10px;
}
 
  1. .blueBackground {
  2.     background-color: #13273B;
  3.     border: 1px solid #333333;
  4.     padding: 5px;
  5.     filter: FlipV;
  6.     margin-top: 10px;
  7.     margin-bottom: 10px;
  8. }
  9.  

Get rid of the filter: FlipV; line and that will correct it. The reason it looks fine in FF is because the filter extensions are IE proprietary, and shouldn't be used at all because they're not standards compliant.
As for the spacing issues, I can't help there. I have IE7 and it looks fine.
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

Hehehehe.....I can't believe that code was in there!!!???? I know that sounds stupid being that I "wrote it" using the dreamweaver css interface, but I have no idea why I have a FlipV extension on a class that I use to color the tables background. Well that was an easy fix, now I feel silly - thanks for pointing that out!

I am not sure why IE6 ALWAYS gives me problems when I am making a two column layout - even with the facts that I have received before about how IE uses margin and padding. I added everything up and nothing exceeds the parent containers...? I think I am just going to leave it alone, being that a lot of people are starting to use FF and IE7.

Thanks again :)
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Have you fixed the issue? I see it exactly the same in IE6 and FF3 ...
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

No, the only issue I was able to fix was the FlipV overlook in that was messing with my form-labels and text. The layout is still showing problems for me in IE6 both on my listening page and on my home page. Occasionally I am seeing the DIVS in the right column being pushed down for no apparent reason esp. if there is a table in the right column or an un-specified size DIV Class - like when I have my sections marked of by the light grey of blue "banners."
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

maybe the text gets too wide ... does the text have padding assigned to it ... ?
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

Code: [ Select ]
 
 
#subNavigation p {
filter: alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
margin-right: 10px;
margin-left: 10px;
 
#bottomIndex p {
margin-right: 10px;
margin-left: 10px;
}
 
#innerContent p {
margin-right: 5px;
margin-left: 5px;
}
 
 
  1.  
  2.  
  3. #subNavigation p {
  4. filter: alpha(opacity=100);
  5. -moz-opacity:1.0;
  6. opacity:1.0;
  7. margin-right: 10px;
  8. margin-left: 10px;
  9.  
  10. #bottomIndex p {
  11. margin-right: 10px;
  12. margin-left: 10px;
  13. }
  14.  
  15. #innerContent p {
  16. margin-right: 5px;
  17. margin-left: 5px;
  18. }
  19.  
  20.  


These are the only rules, excluding the footer p, that specify margins for paragraph formats. I think ended up using margins because the padding of the parent container causes width issues on fixed width DIV's (which is what I am using on the left side. The right column looks even because there is a padding on the black parent DIV holding the two columns. When I add padding anymore it seems to display different across the DOM interpretation of different browsers so I try not to use it unless I have to on a parent DIV. I will look more closely at the code and see what's going on. I tried conceiving a fluid layout, but then I would have some issues with design that are over my head so I just used a fixed-centered container (as I usually do).

EDIT: Came back to me....when I attempt to use padding in cases like my home page on a parent DIV everything within that DIV is affected, including the headers at the top that I want to go all the way across the width of the DIV. I was also having problems with background pictures being affected by padding. Just thought I would throw it in there while I was thinking about it.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 56 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.