4 replies [Last post]
JAGNikJen
JAGNikJen's picture
Offline
Regular
Fort Worth, TExas
Last seen: 12 years 37 weeks ago
Fort Worth, TExas
Joined: 2006-10-20
Posts: 33
Points: 0

I am reworking a web site, taking it from tables to CSS, using divs for positioning. I'm more than a beginner, but I wouldn't classify myself as quite intermediate yet, either. (Excuse the CSS mess - I do plan on cleaning it up later.)

In both Mozilla Firefox and IE6, I am getting extra spacing between two divs. I've checked and double checked that my margins and padding are at zero where applicable, I've validated my HTML and my CSS, but I'm still getting that space. I've tried to specify height, min-height, & max-height, but that just makes the space different sizes rather than eliminating it. I've cleared the float, too, but that didn't fix it, either.

The problem comes after the daytime dallas skyline image and the law firm's address. The following text area should butt right up underneath the image & address, but instead there's a space before the text area with the alternate background color begins.

My other question is why does Mozilla Firefox put space around the container div when IE6 allows the container div to be flush against the top, bottom and left side of the browser window?

Any insight would be greatly appreciated.

Thanks,

Jen FitzGerald

AttachmentSize
default.htm_.txt4.51 KB
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 41 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi You need to zero your

Hi

You need to zero your basic elemtns, as each borwser has different default settings. I always put this at the start of my css:

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px; } input,select{ margin:0; padding:0; }

Next, you need a FULL doctype. Check out the link in my sig. It has two parts.

Let me know how you get on.

JAGNikJen
JAGNikJen's picture
Offline
Regular
Fort Worth, TExas
Last seen: 12 years 37 weeks ago
Fort Worth, TExas
Joined: 2006-10-20
Posts: 33
Points: 0

Woo Hoo

Fixing the doc type didn't help, but zeroing out the basic elements did.

Thank you, thank you.

Nother question: Why won't the 'vertical align: middle' work in either Firefox or IE6?

Jen

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 41 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

But, whether it solved your

But, whether it solved your problem or not, ALWAYS use a full doctype. That article explains why.

Without looking agin at your code, for the vertical align to work there has to be a line-height to the element too. Often, I find it has to be the element itself with the vertial align and the tag it is in with the line-height.

But, just experiment with line-height.

JAGNikJen
JAGNikJen's picture
Offline
Regular
Fort Worth, TExas
Last seen: 12 years 37 weeks ago
Fort Worth, TExas
Joined: 2006-10-20
Posts: 33
Points: 0

That was it...

Thanks so much.

I played with the line-heights as you suggested and it worked.

I appreciate your help.

Jen