CSS Forum

**animefox** · 11:13 PM

Im failry new to CSS and ran into an alignment problem:

This is the page http://microeffects.com/new/index5.shtml and there is the corresponding CSS http://microeffects.com/new/template.css. The problem is the white border around the whole page, it's shifted to the left in IE and Firefox. I tried changing some values, but I somehow can't get it perfectly aligned. A trick or tip would be appreciated.

Thanks,
AnimeFox

**LadynRed** · 11-15-2007, 04:53 PM

First of all, your DOCTYPE is in the wrong place. You've got it stuck in the <head> and it needs to be the FIRST THING on the page.

I'm also seen TWO <head></head> sections.
You've got a closing </div> without an opening <div>

You're also using and XHTML DOCTYPE but your using deprecated code like this:
<p align="center"> - that's what CSS is for and XHTML won't like it in the markup.

**animefox** · 11-15-2007, 11:13 PM

Quote:

Originally Posted by LadynRed

First of all, your DOCTYPE is in the wrong place. You've got it stuck in the <head> and it needs to be the FIRST THING on the page.

I'm also seen TWO <head></head> sections.
You've got a closing </div> without an opening <div>

You're also using and XHTML DOCTYPE but your using deprecated code like this:
<p align="center"> - that's what CSS is for and XHTML won't like it in the markup.

1. corrected doctype
2. never had two head sections
3. dont have a closing w/o opening div
4. not using <p align="center">

and 5. still have the background problem.

thanks,
animefox

**davemies** · 11-16-2007, 05:24 AM

4. not using <p align="center">

erm, yes you are! have a look at your own source

and you still have 24 errors
http://tinyurl.com/3cls3m

**chrishirst** · 11-16-2007, 05:38 AM

given that your page extension is .shtml

included pages should NOT be complete pages with <html><head><body> sections
They should simply be the code that makes up that page segment.

**LadynRed** · 11-16-2007, 02:37 PM

Yes, that would explain the duplicate <head> sections I was seeing in the rendered pages.

As for the <p align="center" thing.. it shows up here:

Quote:

That is one UGLY mess for an image swap ! That's what you get when you use FrontPage.

If your PNG images are supposed to be transparent they won't work in IE6 w/o a bit of scripting to force it.

There's nothing wrong with your background, it's the placement of your #header and #header-menu that's off. You've told it to center those, and it did, which is exactly the problem. Fix your CSS to this and it will fix it.

Quote:

#header-menu {
/*margin: 0 auto;
text-align: center;*/
margin-left: 18px;
width: 695px;
height: 30px;
background: url('i/header-top.png');
background-repeat: no-repeat;
}

#header {
/*margin: 0 auto;
text-align: center;*/
margin-left: 18px;
width: 695px;
height: 200px;
background: url('i/header.png') no-repeat;
border: 1px solid red;
}