CODEWITHSUNDEEP
cssinternet-explorer-7internet-explorer-6
chz
chz

Reputation: 387

CSS cross browser issue

IE6,7 are givimg me grieves on browser display. I didnt have prblems with Safari nor FF. I'm not a CSS expert and in need of advice for this column alignment issues on IE. And I don't know where to begin because I've tried messing around with the css files and the css browser selector javascript and still I can't get it to work on IE.

The problems I believe center around id doc, bd, yui-main, yui-b, box and box-titles. For unclear reasons, the sizes show differently in IE from other better browsers. The sizes width and height values are different.

<body>
  <div id="doc" class="yui-t2">
    <div id="bd">
      <div id="yui-main">   
        <div class="yui-b">
          <div id="header" class="yui-g">
            <a href="index.php">
:
:

unfortunately, the 2 css files are a little overwhelming over me to understand. I tried pasting it here but the format got out of whacked.

Could someone lend a helping hand ?

Any help is appreciated.

app.css

body {
  font-size: 85%;
  font-family: "georgia";
}

.yui-t2, #bd, #yui-main {
  z-index: -5;
}

.yui-b, .yui-g {
  z-index: auto;
}

div.yui-b div.box {
  color: #333333;
  border: 1px solid #c6e1ec; /* this controls the left boxes on front page */
  margin-top: 15px;
}

div.yui-b div p.box-title {
  /* background: #0590C7; 
  border-bottom: 2px solid #c6e1ec; */
  background: #6f6f6f; 
  border-bottom: 2px solid #c6e1ec;  
  color: #FFFFFF;
  display: block;
  font-size: 93%;
  font-weight: bold;
  margin: 1px;
  padding: 2px 10px;
}

div.yui-b div ul {
  margin: 0;
}

div.yui-b div ul li {
  border-bottom: 0px solid #fff;
  list-style-type: none;
}

div.yui-b div ul li a {
  color: #333333;
  display: block;
  text-decoration: none;
  padding: 3px 10px;
}

div.yui-b div ul li a:hover {
  background: #c6e1ec;
  color: #333333;
}

grids-min.css

body
 {text-align:center;}

#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7
  {margin:auto;text-align:left;width:57.69em;*width:56.301em;min-width:750px;}

.yui-b{position:relative;}
.yui-b{_position:static;}

#yui-main .yui-b{position:static;}
#yui-main
  {width:100%;}

.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main
  {float:right;margin-left:-25em;}

.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main
  {float:left;margin-right:-25em;}

:
:

more but format is bad over here at stackoverflow to make it readable.

I apologise for I don't wish to come across in this post as unhelpful or rude.

Sincerely

Upvotes: 1

Views: 303

Answers (2)

Spudley
Spudley

Reputation: 168853

There are many many possible IE6/7 issues. Particularly IE6.

First thing to check is does your HTML code include a valid <!DOCTYPE> declaration? If not, your page will go into quirks mode, which will make all versions of IE (but IE6 in particular) go nuts. Quirks mode is effectively an IE5 compatibility mode. It is badly broken, so make sure you have a doctype.

Second thing to do is read up on some of the IE issues that may be giving you problems, and on browser support for some of the features you may be using. There's a very good website called (appropriately enough) Quirksmode.org which has a comprehensive set of compatibility tables for a wide range of browser features.

The following sites may also help:

Google is your friend here too. ;-)

Next tip, try to narrow down your problem. Strip out the bits that are working until you end up with a page that demonstrates the problem with the minimum of other stuff getting in the way. Save that example to a site like JSFiddle. It'll be easier to work out the issue if you know exactly what the issue is.

Finally, if the remaining issues are minor display glitches that don't prevent the page being used, you should give yourself permission to simply ignore them. The market share for both IE6 and 7 has been dropping rapidly over the last year, and will continue falling. There's very little to be gained by spending too much time sweating over minor issues in these browsers.

See here for up-to-date browser usage stats: http://gs.statcounter.com/#browser_version-ww-monthly-200911-201011 (obviously if your site has significantly different demographics, you may need to pay more attention to IE6 and 7, but if that's the case you'll know already)

Upvotes: 1

user466764
user466764

Reputation: 1176

This is a useful resource for dealing with ie6 generally http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

Upvotes: 1

Related Questions