Difference between IE7 and FF2

Discussion in 'CSS' started by yoda69, Jul 27, 2007.

0
  1. #1
    hey guys,

    I've a table which doesn't come out the same in the two different browsers.
    would appreciate it you take a look at this simple css code and see any major implications between the two.

    
/* MAIN TABLE */

.maintable {
line-height: 1.6em;
border-bottom: 1px solid #aaa;
border-collapse: collapse;
font-size: 1.3em;
}

.maintable th, .maintable td { padding: 0 .5em; }

.maintable th {
color: #222;
line-height: 1.8em;
background-color: #ADD8E6;
border: 1px solid #222;
text-align: left;
}

.maintable th a {
color: #000000;
text-decoration: underline;
}
.maintable th a:hover { text-decoration: underline; }


.maintable tr.d { background-color: #f0f1f2; }

.maintable tr:hover, .maintable tr.hovered {
background-color: #d0d7e2;
}

.maintable .n { font-weight: bold; }

.maintable td {
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
}

.maintable td a {
color: #000;
text-decoration: none;
}

.maintable td a:hover { text-decoration: underline; }

.maintable img {
float: left;
margin: .45em .3em 0 0;
}

.maintable img.ir { float: right; }
    Code (markup):
    tnx a million,
    Yoda
     
    yoda69, Jul 27, 2007 IP
  2. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #2
    The "hover" pseudo-class only works for <a> in IE, so tr:hover will not apply to IE, at least not IE6. Don't know if there are any other issues.

    How about a working demo or an explanation of what the difference is?
     
    krt, Jul 27, 2007 IP
  3. yoda69

    yoda69 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    well... in FF2 everything looks great. in IE7 however i've got several issues:

    1. font size is different in IE7 and its bigger
    2. it seems that the line-height is different and bigger in IE7
    3. not all borders appear on IE7, for instance the outer borders of the table-box which suppose to be 1px solid #222
     
    yoda69, Jul 27, 2007 IP
  4. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #4
    1 and 2 are related. Remember "em" values are relative to the browser font size. Maybe you have set the font size in IE to a larger than default value or other way round. Check View > Text Size.

    As for issue 3, I am not sure, the one in the ".maintable th" definition should be working fine.
     
    krt, Jul 27, 2007 IP
  5. yoda69

    yoda69 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    tnx for your reply man. that definately helped with 1 & 2. once i changed font size to px it went okay.

    about the third one..... my table code is this:

    
<TABLE class="maintable" BORDER=1 frame=box width=100% CELLPADDING=0 CELLSPACING=1 >
<TR bgcolor="lightblue">
<TH width="19%">Start Date</TH>
<TH width="40%">Title</TH>
<TH width="16%">Teacher</TH>
</TR>

......
</TABLE>
    Code (markup):
    The CSS code you know already.
    Problem is that in IE7 I cannot see the top-border.... which is supposed to be solid 1px #222 (black)

    I noticed that there are differences between IE and FF when you use CELLPADDING and CELLSPACING, i tried to take them out but it didn't work. Any ideas on that?

    tnx,
    Yoda
     
    yoda69, Jul 27, 2007 IP