 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 401
|
 Posted: Sun Jun 15, 2008 12:10 am Container div aligning to the left in FF |
 |
|
|
My container div is aligning to the left in FF after I added a background image to the body.v The image is 1024px is this too wide? Works great in IE7. Looked at the code and cannot see why it is doing this.
| Code: |
html body #container {
height: auto;
}
html {
height: 100%;
}
body {
text-align: center;
font: .88em helvicta, sans-serif;
background-image:url('images/sideback.gif');
background-repeat: repeat-y;
background-position: top center;
}
#container {
height: 100%;
background: #fff;
text-align: left;
border: 1px solid #F4F4F4;
margin: 0;
width: 800px;
}
h1 {
padding: 0;
margin-bottom: 0;
}
#header {
width: 800px;
background: url('images/stripe.gif');
height: 60px;
background-repeat: repeat;
}
#navigation {
width: 137px;
margin-top: 5px;
float: left;
margin-left: 2px;
}
#menu {
margin: 0 0 0 10px;
padding: 0 2px 0 10px;
font-size: 0.75em;
list-style-image: url('images/arrow.gif');
}
#menu a {
margin: 0;
color: #666;
border-bottom: 1px solid #00B72E;
padding: 3px;
display: block;
width: 95px;
}
a:visited {
color: #AA0080;
text-decoration: none;
}
#menu a:hover {
color: #AA0080;
text-decoration: none;
}
.vmenu {
font: bold 0.75em Verdana;
width: 100%;
}
.vmenu ul {
margin: 0;padding:0;
width: 800px;
float: left;
background: #fff url('images/hmenu.jpg') repeat-x center;
}
.vmenu ul li {display: inline;}
.vmenu ul li a {
float: left;
text-align: center;
width: auto;
text-decoration: none;
color: #666;
text-transform: uppercase;
padding: 4px 6px;
border-right: 1px solid #666;
}
.vmenu ul li a:visited {color: #666;}
.vmenu ul li a:hover {color: #AA0080;background: #fff;}
#search {margin-top: 2px;padding:0;}
#centercontent {
width: 475px;
margin: 46px 6px 0 25px;
padding: 3px;
float: left;
display: inline;
height: 646px;
}
|
Can anyone see the errors I must have?
This is the doc type <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
sticks464
Joined: 31 Dec 2006
Posts: 993
|
| Posted: Sun Jun 15, 2008 6:22 am |
|
|
|
Your container will align left unless you set the left and right margins to auto. IE is using the text-align to center. If you give the container text-align-left then IE will move the container to the left also. Earlier versions of IE use this style to center whereas modern versions use margins.
1024 is not too large however I would also give the body a background color to allow for higher resolutions and larger monitor sizes and give any whitespace that may occur a color. |
|
quartzy
Joined: 26 Dec 2007
Posts: 401
|
| Posted: Sun Jun 15, 2008 6:35 am re |
|
|
|
| hi sticks, thanks for getting back to me, I set the margins to auto and I set the height on the body and it now works. If I were to add a background colour the picture background will not show, in IE7 no one seems to know why, they just do not show, so I cant add a background colour. |
|
sticks464
Joined: 31 Dec 2006
Posts: 993
|
| Posted: Sun Jun 15, 2008 9:23 am |
|
|
|
You might try
background:#000 url('images/sideback.gif') repeat-y top center;
The style shorthand always works for me. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
