5 replies [Last post]
rulzgz
Offline
Regular
Last seen: 14 years 2 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

I've a little problem with Internet Explorer positioning a div with a logo into a header div.

A image should be better to understand my problem:

Free Image Hosting at <a href=www.ImageShack.us" />

And here is my code:

<?xml version="1.0" encoding="UTF-8"?>


antramos







contenido




body { background-color: #959595; margin: 0px; padding: 0px; }

#contenedor {
position: relative;
min-height: 100%;
min-width: 860px;
width: 100%;
margin: 0px;
text-align: center;
}

#header {
margin: auto;
height: 75px;
padding: 0px;
background-color: #FFFFFF;
border-bottom: none;
border-top: none;
border-left: solid 1px;
border-right: solid 1px;
width: 80%;
position: relative;
background-image: url(img/header_bg.jpg);
background-repeat: repeat-x;
background-position: center;
}

#contenido {
margin: auto;
margin-bottom: 0px;
height: 100%;
padding: 0px;
background-color: #FFFFFF;
border-bottom: none;
border-top: none;
border-left: solid 1px;
border-right: solid 1px;
width: 80%;
position: relative;
}

#logo {
float: left;
padding-left: 25px;
}

jnh
Offline
newbie
Last seen: 14 years 27 weeks ago
Timezone: GMT+8
Joined: 2006-11-20
Posts: 7
Points: 0

Hi

Hi there!

I'm really not quite sure whether it is the background that doesn't align with the image or the image doesn't align with the background. Anyway, I'd assume it's the former. Have you tried background-position: top center; for the #header?

cheers, =D
jnh

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 23 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

First things first, remove

First things first, remove this line:

<?xml version="1.0" encoding="UTF-8"?>

With it in place you are tripping IE into Quirks mode where conformity with CSS specs is very quirky! and trying to fix things up even more of a chore, you may also find it fixes matters.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rulzgz
Offline
Regular
Last seen: 14 years 2 weeks ago
Joined: 2005-06-17
Posts: 19
Points: 0

Thanks for your replys, i

Thanks for your replys, i have erased two lines of my code and works fine now Smile

first i delete from the css file:
background-position: center;

And it works fine with that.
And according to Hugo i've removed the first line of my .html file.

Thanks 4 your support

jnh
Offline
newbie
Last seen: 14 years 27 weeks ago
Timezone: GMT+8
Joined: 2006-11-20
Posts: 7
Points: 0

Hi again! May I know if

Hi again!

May I know if both the lines of codes you deleted are the cause of the odd display. Or just one of them? =D

cheers,
jnh

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 23 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Likely the background

Likely the background position was the ultimate culprit as in only describing the one keyword would mean that both axis would take center

Describing 'top' would probably have sorted things although it would seem that default position 'left top' was all that was needed.

The prolog will cause problems rendering CSS properties and should never be used at this level ( nor often with true XHTML) Whether it was a cause of problems with backgrounds it's hard to tell, but also irrelevant, it should be removed first then if one checked I guess we could see if it was a contributing factor.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me