Help please with a difference b/n Firefox & IE(Win)

Forum Moderators: not2easy

Message Too Old, No Replies

Help please with a difference b/n Firefox & IE(Win)

got a little unwanted margin showing beneath an image

Mr Bo Jangles

9:42 am on May 7, 2006 (gmt 0)

Hi all,
I've spent hours fiddling with this to try and see what is causing a margin/space of about 2px beneath the 74px image displayed in 'header' div.
It is fine in Firefox and the image sits nicely on the top 1px border of the subheader div, but in IE6 there is a gap.
Any ideas? I've pasted below what I believe are the relevant code extracts.

thanks...

CSS:

div#header h1{
height: 74px;
line-height: 0px;
margin: 0;
padding-left: 10px;
padding-bottom: 0px;
padding-top: 0px;
background: #EEE;
color: #79B30B;
font: normal small sans-serif;
}

div#subheader h1
{
height: 20px;
line-height: 20px;
margin: 0;
padding-left: 10px;
padding-bottom: 0px;
padding-top: 3px;
background: #E8E8E8;
color: #B01676;
border-top: 1px solid #5C5C5C;
border-bottom: 1px solid #5C5C5C;
font: normal small sans-serif;
}

HTML:

<div id="subheader">
<h1>
system time:
</h1>
</div>

birdbrain

10:00 am on May 7, 2006 (gmt 0)

Hi there Mr_Bo_Jangles,

add this rule to your stylesheet..
.

div#header h1 img {
display:block;
}

For an explanation of this problem check out this site...

Eric A. Meyer article [devedge-temp.mozilla.org]

birdbrain

Mr Bo Jangles

10:42 am on May 7, 2006 (gmt 0)

many thanks for your quick response 'birdbrain'.
I've tried that but it didn't correct the issue.
I also read the article (thank you) and it mentions doctype, and I'm using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

So, if I'm reading the article right, I should have avoided the particular issue the Eric was focussing on.

Any more thoughts please?
before I tear more hair please...

londrum

10:52 am on May 7, 2006 (gmt 0)

i haven't tried this, but i'm guessing it's just the whitespace in your code.
try writing:

Mr Bo Jangles

11:07 am on May 7, 2006 (gmt 0)

thanks 'londrom', but alas no it wasn't that.

I'm posting the complete CSS below just incase there is some other 'gremlin' in there causing this.

many thanks to those who have responded.

____________________________________

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
body {
margin: 0 0 0 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #505050;
font-size: 78%;
background: White;
line-height: 150%;
}
/*
p{margin:0 10px 10px}

a{display:block;color: #981793;padding:10px}
*/
/* --- font info --- */
html>body {
font-size: 0.78em;
}
h1, h2, h3, h4, h5, h6, p, td, li, dt, dd {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #222;
}

/* simplified Owen Briggs method for font-sizing */
/* --- fontsizing --- */

body h1 {
font-size: 1.2em;
font-weight: bold;
}
body h2 {
font-size: 1.3em;
font-weight: bold;
}
body h3 {
font-size: 1.2em;
font-weight: bold;
}
body h4 {
font-size: 1.1em;
}
body h5 {
font-size: 1.0em;
font-weight: bold;
}
body h6 {
font-size: 0.9em;
font-weight: bold;
}
body ol, body ul, body li {
font-size: 1.0em;
}
body p {
font-size: 1.0em;
}
body table {
font-size:1em
}
body td {
font-size: 0.9em;
}

/* ----------------- general ----------------- */
body a img {
border: 0;
color: inherit
}
a:link, a:visited {
text-decoration:none;
}
a:hover, a:active {
text-decoration:underline;
}
strong, b {
font-weight: bold;
}
/* lists */
ol { color : #cc66cc;
}
ul { color : #9999cc }

ul, ol {
margin-bottom: 12px;
margin-right: 48px;
margin-top: 12px
}
li {
margin: 12px 0
}
.ahem {
font-size:smaller;
margin:0;
display:none;
}
.nowrap {
white-space: nowrap;
font-size: 90%;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
} /* must be combined with nobr in html for ie5win */
.tiny {
color: #414141;
font-size: 0.9em;
margin-top: 15px;
}
.quote {
color: #761652;
line-height: 130%;
margin-top: 4px;
margin-bottom: 5px;
margin-left : 6px;
margin-right : 6px;
font-style : italic;
border : 1px dotted #999;
padding : 5px;
}
.listing-nonlink {
color: #333;
font-size: 0.9em;
line-height: 110%;
margin-top: 2px;
margin-bottom: 2px;
}
.alert {
color: #f00;
line-height: 100%;
margin: 0;
}
#systemalert {
margin: 22px 120px 0 0;
padding: 0 20px 0 20px;
background: #aaa;
}

#globalalert.amber {
color: #DF9200;
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
background-color: #DBDBDB;
border: 2px solid #FFA500;
}

#globalalert.red {
color: #D70000;
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
background-color: #DBDBDB;
border: 2px solid #D70000;
}

#globalalert.green {
color: #1F7820;
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
background-color: #DBDBDB;
border: 2px solid #1F7820;
}

div#header h1 img {
display:block;
}

.formtype1 p {
line-height: 180%;
margin-top : 6px;
color : #f08080;
}
.formtype1 h1 {
margin-bottom: 0;
margin-top: 0;
color: #6a5acd;
padding-right: 20px;
padding-left: 20px;
line-height : 110%;
}
.whiteboard {
border: 1px solid #4b0082;
padding: 8px 0 18px 10px;
margin: 0;
text-align: left;
background : #fff;
color : #4b0082;
}

div#content p{line-height:1.4}
div#content h1.tablename1 {
height: auto;
font-size : 1.0em;
line-height : 110%;
padding: 5px 0px 5px 0px;
margin-bottom: 4px;
margin-top: 0;
color : #6a5acd;
text-align: left;
}

/* -----------------tables-----------------*/
table {
background : #f7f7f7;
border : 1px solid #b7b8ba;/* Table thin border colour. #6a5acd in GreyCSS */
text-align: center;
border-collapse : collapse;
margin: 0 0 10px 0;
}
td {
padding:3px 5px;
border: 1px solid #cecfce; /* colour & style
of inner dividers in tables. #8c8ca6 in GreyCSS */
}
tr.table-row1 {
/*border : 1px solid #b7b8ba;
border-width : 1px 0;*/
background : #f7f7f7;/* colour of row 1 background in tables.
#b7b8ba in GreyCSS */
}
tr.table-row2 {
background: #EAE8E3; /* colour of row 2 background in tables.
#c4c7c6 in GreyCSS */
}
td.tableheadingtype1 {
background : #d6dbd6;/* Table heading background colour. #bac5d1 in GreyCSS */
margin: 0;
font-weight : bold;
color : #4839a6;/* Table heading text colour. #4839a6 in GreyCSS */
text-align:center;
font-size: 105%;
}
a.table1 {
color: #363636;
text-align: center;
text-decoration: none;
}
a.table1:link, a.table1:visited {
color: #363636;
}
a.table1:hover {
color: #ff1493;
text-decoration: underline;
}

/* -----------------Forms-----------------*/
form {
border : 1px dashed #999;/* colour & style
of border around forms. #999 & dashed in GreyCSS */
margin: 0 36px 10px 0;
padding: 12px 20px;
width:auto
}
.field {
}

input {
background: #cdc9d8;
border: 1px solid #999;
color: #333;
}
input.input100 { width:100%}
textarea {
background : #cdc9d8;
border : 1px solid #999;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
input:focus, textarea:focus {
background : #fff;
}
select {
background: #f5f5fa;
border: 1px solid #999;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
input, select, textarea {line-height:normal;}

.checks { background: #fff; border: 1px none }
.formbut { background: #ccc}

.formbut { background-color : #ccc }

a.prevresults {
font-size: 0.9em;
}

/* -----------------Help System content-----------------*/
.helpsys {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding-left : 0;
padding-right : 20px;
color : #dB7093;
margin-left: 10px;
}

.helpsys p {
line-height : 120%;
margin: 5px 30px;
color : #4a5962;
font-weight: normal;
}

.helpsys h1 {
margin-bottom : 0;
margin-top : 0;
color : #777d60;
line-height : 115%;
}

.helpsys a:link {
color : #534a62;
}

.helpsys a:visited {
color : #6f6383;
}

.helpsys a:hover {
color : #c71585;
}

/* -----------------Menu System content-----------------*/
div#menu{
background: White;
}
.quote {
color: #761652;
line-height: 130%;
margin-top: 0px;
margin-bottom: 5px;
margin-left : 16px;
margin-right : 3px;
font-style : italic;
border : 1px dotted #999;
padding : 5px;
}

div.navdiv p {
margin: 0 0px 0px 16px;
line-height: normal;
color: #333;
font-size: 0.9em;
}
div#menu p.navbutts {
margin: 0 0 2px 16px;
width: auto;
border: none;
}
div#menu p.navviz {
margin: 0 0 2px 16px;
width: auto;
border: none;
}
/* the colored box */
div#menu p.navbuttsalert {
margin: 0 0 2px 16px;
width: auto;
border: none;
background: #dda0be;
}
div#menu .navbutts a, div#menu .navbuttsalert a, div#menu .navviz a{
border : 1px solid #999;/* This colour for border around each
Nav Button #999 for'GreyCSS' */
display : block;
color :#333;/* This colour for Nav Button text #333 for'GreyCSS' */
padding : 3px 2px 3px 8px;
text-decoration : none;
width : auto;
font-weight:normal;
}
div#menu .navbuttsgreen a {
border: 1px solid #999; /* This colour for border around each
Nav Button #999 for'GreyCSS' */
display: block;
color: #32CD32; /* This colour for Nav Button text #333 for'GreyCSS' */
padding: 3px 2px 3px 8px;
text-decoration: none;
width: auto;
font-weight: bold;
}

div#menu .navbuttsred a {
border: 1px solid #999; /* This colour for border around each
Nav Button #999 for'GreyCSS' */
display: block;
color: #DC143C; /* This colour for Nav Button text #333 for'GreyCSS' */
padding: 3px 2px 3px 8px;
text-decoration: none;
width: auto;
font-weight: bold;
}

.navbutts a:link, .navbutts a:visited {
background : #f1f1f1;/* This colour for background
of normal Nav Buttons #f1f1f1 for'GreyCSS' */
color :#333;/* button text NON-hover* #333 in GreyCSS */
text-decoration : none
}
.navbutts a:hover {
background-color : #b5b1c3;/* This colour for HOVER
of normal Nav Buttons #b5b1c3 for'GreyCSS' */
color : #fff;/* button text in HOVER #fff in GreyCSS */
text-decoration : none
}
.navviz a:link, .navviz a:visited {
background : #cccccc;/* This colour for background
of NavVIZ(SUB-menu - used in Help area) Buttons #cccccc for'GreyCSS' */
color :#ffffff;/* button text NON-hover #ffffff in GreyCSS */
text-decoration : none
}
.navviz a:hover {
background-color : #cccccc;/* This colour for HOVER
of NavVIZ(SUB-menu - used in Help area) Buttons #cccccc for'GreyCSS' */
color : #ffffff;/* button text in HOVER #ffffff in GreyCSS */
text-decoration : none
}
.navbuttsalert a:link, .navbuttsalert a:visited {
background : #dda0be;/* This colour for normal state of
ALERT NavBut (used for WhiteBoard Alert) Buttons #dda0be for'GreyCSS' */
color :#333;/* button text in NON-hover #333 in GreyCSS */
text-decoration : none
}
.navbuttsalert a:hover {
background : #b5b1c3;/* This colour for HOVER
of ALERT NavBut Buttons #b5b1c3 for'GreyCSS' */
color : #fff;/* button text in HOVER #fff in GreyCSS */
text-decoration : none
}
.sidelogo {
padding: 5px 5px 5px 15px;
}

/* -----------------Extra Div-----------------*/
div#extra{
background: White;
}

/* -----------------Footer Div-----------------*/
div#footer{background: #333;color: #FFF;}
div#footer p
{
margin:0;
padding:5px 10px;
color: #FFF;
}

a.footer {
color : #FFF;
}

/* ----------------- Overall Control-----------------*/
div#wrapper{float:left;width:100%}
div#content
{
margin-left: 190px;
margin-right: 10px;
margin-top: 18px;
padding: 5px 10px 5px 10px;
border: 1px solid #999;
background: #eee;
}

div#menu
{float:left;
margin-top: 18px;
width:170px;
margin-left:-100%
}
div#extra{clear:left;width:100%}

DanA

11:17 am on May 7, 2006 (gmt 0)

Maybe
div#header h1 img { vertical-align:bottom;display:block;}
or
div#header h1 img { vertical-align:bottom;}
as IE leaves room for letter descenders

birdbrain

11:29 am on May 7, 2006 (gmt 0)

Hi there Mr_Bo_Jangles,

I've tried that but it didn't correct the issue.

It works for me, testing with IE 6.02/Windows XP SP2.

Perhaps you need to clear your cache.;)

Open IE > Tools > Internet Options > Delete Files > .....

birdbrain

Mr Bo Jangles

11:31 am on May 7, 2006 (gmt 0)

thanks 'DanA' good thought but didn't seem to do the trick. Sigh...

Mr Bo Jangles

11:43 am on May 7, 2006 (gmt 0)

Yep, indeed 'birdbrain' - problem solved thank you.
My feed back was a bit faulty because this isn't as simple a setup as I had to make out - it is a dynamic page and so I had to pull out all that stuff, and so that made my responses back to you 'helpers' flawed.

Once again, many thanks to all who responded - muchly appreciated!

birdbrain

11:52 am on May 7, 2006 (gmt 0)

Hi there Mr_Bo_Jangles,

Yep, indeed 'birdbrain' - problem solved thank you.

Thank God for that. ;)

Now, at last, I can go for my siesta. ;)

birdbrain