Hi,

I'm hoping someone can help me with this IE and centering issue I'm having ~

Website is viewing fine one moment in Firefox, then next in IE, (I have been trying to fix it!) the header image/div looks to be off a few pixels. I've tried using display:inline and a few others fixes I've found via Google, but to no avail. :(

If you view this site in both IE and Firefox, you'll see what I mean.

Thank you so much, I'll appreciate any help I can get with this!

Jennifer :)

8 answers

1
point

The crop of your heading image is not centralized with the borders, so seems like you had to use margin-left:-16px etc to make sure it is centralized. It will be a lot simpler in css, if you just cut the graphic such that the left and right sides outside the borders are equal widths. Then it will just be a matter of centering them like:

background:url(<path_to_image>) top center;

You dont need to specify the height of #body_top just replace that with overflow:hidden so that the element expands to include the floated child elements.

Also note that when you use "padding" and add a "width" to the same element then the total width of the element is width+padding.

It is quite useful to use the firebug firefox extension to see the boxmodel for each element.

Answered about 10 years ago by Divya Manian
1
point

Current header HTML of your template looks like this:

<div id="body_page">
 <div id="page">
  <div id="header">
   <h1>
    <a href="#">Example.com</a><span class="description">tag line</span>
   </h1>
  </div>
 </div>
<div class="clear"></div>

<div id="body">

Since you don't even seem to use the #page style, it should be cleaned out and removed. Take that along with the DIV you're using to clear out the line as you won't be needing that either. You should have this instead:

<div id="body_page">
 <div id="header">
  <h1>
   <a href="#">Example.com</a><span class="description">tag line</span>
  </h1>
 </div>

<div id="body">

Logically your page is also broken up into 3 sections. The header, the main content and the footer. Right now you could go back and edit the background images to be centered for their respective sections. Or you can set the container DIVs to the same width and fix the position of the background images.

#header{
    background:url("images/header.png") no-repeat 15px 0;
    margin:0 auto;
    width:1000px;
    height:200px;
}

#body{
    margin:0 auto;
    padding:0;
    width:1000px;
}

#footer{
    background:url("images/footer.png") no-repeat 34px 0;
    margin:0 auto;
    width:1000px;
    height:21px;
}

Note in the above CSS the slight adjustment of the x-axis positioning of the background images. This is because you can't easily set them as background-position:top center with the images as they are. So a little fudging is necessary to shift them within the bounds and display as if they all line up.

The footer was also out of alignment and brought back in in the CSS. Setting them all to have margin:0 auto allows them to center horizontally on the page.

Remove an extra DIV down the bottom of the page, just before the footer section. This extra DIV is one too many and threw and invalid markup error.

Answered about 10 years ago by Blayne Ridlit
0
points

Please don't go by the screen-shots on here as they're not the same!

Wordpress always gets the best of me. :|

Answered about 10 years ago by Jennifer
0
points

Take the float off of #body_top and set margin: 0 auto;

Might also need to set #page width to match #body_top.

Answered about 10 years ago by Ben Shoults
0
points

Thank you Ben ... when I remove the float: left from #page_top, my header disappears altogether! Any idea why this may be happening?

Thanks again

Answered about 10 years ago by Jennifer
0
points

Thank you so much everyone ... it's coming together nicely now. The only problem I'm having now is with IE (of course) both the header and footer are each a pixel off to the left more than they should be. :|

Answered about 10 years ago by Jennifer
  • If the background is off by just a pixel too much to the left, decrease the background numbers to something like 14px and 33px or until they line up for you. Blayne Ridlit about 10 years ago
  • Correction, increase the numbers if they're too much on the left so that you end up pushing them just a bit to the right. Blayne Ridlit about 10 years ago
0
points

Thank you RE, however, when I do that ... it's messed up in Firefox ... it's so frustrating how things are viewed differently on IE.

Answered about 10 years ago by Jennifer
0
points

instead of positioning the text in the header with padding on the H1, try using a margin on the <a> and <span> instead.

I always avoid horizontal padding as much as possible - it saves a lot of heartache...

Answered about 10 years ago by Tony Crockford