I have a strange problem with CSS backgrounds. I have an image thats 750px wide, and am using css to place a 750px wide background image that repeats on the Y right down the page.
Therefore putting a white box behind a image that sits top center.
However the background center and text-align center seem to be in two different places, if you look you'll notice that the image is one more pixel to left and the white is one more pixel to the right. so not right in the center, it does the same if the image size is changed to 749 pixels instead of 750px also ??? How can i get them to both align and why are they not?
Second problem is any idea how to get rid of the white space between the header image and the menu bar below? I want them to run smooth together but I cant for the life of me figure out how - ive minus padding and minus borders and everything !
Obviously you are looking at this in Internet Explorer, as FireFox renders it fine. ALWAYS develop using Firefox as the main browser, and check in IE.
You will never get IE to adhere to any standards without a proper doctype at the start of teh page - I would suggest html 4.01 strict
Code:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WORK IN PROGRESS</title>
If you start your css with
Code:
* {
margin: 0;
padding: 0;
}
this will zero out all default browser applied margins and paddings for a known start point - you then apply whatever margins etc you need.
I am having the same exact problem. The background image is shifted 1px to the right in IE. I am using * to set margin and padding to 0. The background image is attached if anyone can take a look.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<STYLE type=text/css>
* {
MARGIN: 0;
PADDING: 0
}
BODY {
FONT-SIZE: 12px;
FONT-FAMILY: arial,helvetica,sans-serif;
background: url(background.gif) repeat-y 50% 0
}
#wrapper {
BORDER: #bbb 1px solid;
PADDING: 10px;
MARGIN: 0px auto;
WIDTH: 900px
}
#header {
BORDER: #bbb 1px solid;
PADDING: 10px;
HEIGHT: 80px
}
#content {
MARGIN-TOP: 10px;
PADDING-BOTTOM: 10px
}
#content DIV {
BORDER: #bbb 1px solid;
PADDING: 10px;
FLOAT: left;
}
#content-left {
WIDTH: 180px
}
#content-main {
MARGIN-LEFT: 10px;
WIDTH: 500px
}
#content-right {
MARGIN-LEFT: 10px;
WIDTH: 134px;
}
#footer {
BORDER: #bbb 1px solid;
PADDING: 10px;
MARGIN-TOP: 10px;
FLOAT: left;
MARGIN-BOTTOM: 10px;
WIDTH: 878px
}
#bottom {
CLEAR: both;
TEXT-ALIGN: right
}
</STYLE>
</HEAD>
<BODY>
<DIV id=wrapper>
<DIV id=header>Header</DIV>
<DIV id=content>
<DIV id=content-left>
<P>Menu Item</P>
<P>Menu Item</P>
<P>Menu Item</P>
<P>Menu Item</P>
<P>Menu Item</P>
</DIV>
<DIV id=content-main>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</P>
</DIV>
<DIV id=content-right>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem</P>
</DIV>
</DIV>
<DIV id=footer>Footer text and links can go all the way along here... text text
text text text text...</DIV>
<DIV id=bottom></DIV>
</DIV>
</BODY>
</HTML>
This is a center calculation rounding error in IE. You will notice that if you vary the width of the browser, the background jumps between being correct or 1 pixel out, so the final exact position of the background will depend on user window size. IE does seem to handle it if the centered wrapper is an odd pixel width whilst the backround is an even width - playing with that may help you.
Many thanks, that saved me hours! I played around with it, making the background an odd number, and the image even you can get it to centre perfectly in all browsers.
Many thanks once again, would have spent ages until you thought of that!
Reply With Quote
Bookmarks