Is this an IE bug or am I doing something wrong?

HTML & CSS
1

Hello All:

I am fixing a site where the gradient background I created is not going all the way to the top in IE 8. It seems to work in IE 6 and 7 but not in 8 or Firefox.

You can see what I mean here at this link

http://www.kardwelldev.com/customplayingcard

Here is the css that I am using for just that blue gradient behind the cards,

#frontpage {
width:435px;
margin:0px;
padding:0px;
position:relative;
background-image: url(“http://www.customplayingcards.com/images/front-page-bg.jpg”);
background-repeat: no-repeat;
}

When I do a position of Absolute, it seems to fix the issue however, IE 6 gets all screwed up then.

Is there a bug in IE 6 for the margin or somthing?

Thanks for any help or advice on this,

Paul

2

Hi, I’m noteven seeing a #frontpage element in the HTML (even did ctrl+f).

You are not having a complete doctype at hte top of your pages and as such IE is in qiurks mode. You need a full doctype :slight_smile:

3

My doctype says

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

That is a full doctype… right?

and the frontpage element is a div on line 24 or thereabouts…

4

You must have given a wrong link then. On this page your doctype is below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

You may be running into cache issues but not me since I have never been to this site before :slight_smile:

5

DOH… yes that is not the page I am having trouble with. LOL

This is the real link, http://www.kardwelldev.com/customplayingcards/

6

Hi, if you are referring to that little space, it’s because the <h1> inside #frontpage has a 5px top margin (5px all around but the top margin is the problem). It is causing a margin collapse of the #frontpage. Giving the #frontpage a 1px border or pading will fix this issue :slight_smile:

#frontpage{padding-top:1px;}

Read about margin collapse here :).

7

hrmmm,

I did try that by setting the margin to top earlier today with a 0px but I did not see it doing anything.

Let me try again and see,

8

It’s collapsing margins and ie8 and Firefox are doing it right :slight_smile:

Remove the top margin and use padding as follows:


h1.frontpage {
width:437px;
font-family: arial, sans-serif;
font-size:20pt;
color:#003399;
font-weight:bolder;
text-align:left;
[B]margin:0 5px 5px;
padding:5px 0 0;[/B]
}
9

uhg… everytime I think I know what I am doing I get into these stupid nits that blow me away. LOL

Fixed of course now… thanks guys for all your help with this,

Paul

10

You’re welcome :). Collapsing margins can be tricky to see sometimes but in due course you will find it quite easy to recognize and fix :).