6 replies [Last post]
vikette
Offline
Regular
Last seen: 11 years 25 weeks ago
Timezone: GMT+1
Joined: 2004-07-16
Posts: 16
Points: 0

In the Mozilla browsers, I'm getting a 1 px space between the header and "underheader" divs. The blue page background colour is showing through.

I've validated everything and closed up all my HTML, measured and remeasured the div and img heights, adjusted padding and margins to "0", etc. What on earth am I doing wrong?

Sample page:
http://paris.uib.no/Personnel/Technau.php

Style sheet:
http://paris.uib.no/styles/main.css

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

1 px space between divs

here's a clue ...

.clear {
clear: both;
margin: 0;
padding: 0;
height: 1px;
overflow: hidden;
visibility: hidden;
}

you can stick clear:both on #underheader and scrap the .clear div between #header and #underheader.

Do everyone a favour next time, save a copy of the page detached from its template before posting the link. Its a real pain to copy a page into DW and to have to remove all the template crap.

Smile

vikette
Offline
Regular
Last seen: 11 years 25 weeks ago
Timezone: GMT+1
Joined: 2004-07-16
Posts: 16
Points: 0

1 px space between divs

O.k. .... I'm a bit unclear on a concept then. A clear div must contain ¤something¤, right(?) (1px was recommended somewhere). If it's hidden, why does the space show?

Should I use display: none as with the .printHeader? Or maybe use content:  instead of height?

briski
briski's picture
Offline
Elder
London
Last seen: 7 years 22 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

1 px space between divs

FF is doing what you are telling it to!

It's giving a height of 1px to the clear div.
You have set overflow to be hidden so anything content that is more than 1px will be hidden.

Also you have set visibility to hidden which I think you think should make it dissapear - but from the CSS spec we can see it just makes it invisible, it should still effects the layout, as it does in FF.

Quote:
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout.

All in all there should according to your rules be a 1px space between the two main divs - and there is!

What Chris wisely suggests is deleting this div all together and adding clear: both to the underheader which should do the same thing and not leave you with an annoying line in FF.

I.E.

.underHeader {
width: 100%;
margin: 0;
padding: 0;
text-align: left;
background: white;
height: 11px;
clear: both;
}

You should not need these empty divs for such a simple thing.

vikette
Offline
Regular
Last seen: 11 years 25 weeks ago
Timezone: GMT+1
Joined: 2004-07-16
Posts: 16
Points: 0

1 px space between divs

Thanks for the advice and clarification. I adjusted as directed and it worked beautifully.

You're right, I was working under the false assumption that "visibility:hidden" and "display:none" were essentially synonyms (but then MSIE didn't do much to convince me otherwise).

BTW Chris - I do appreciate your expertise and taking the time to answer, but statements like "here's a clue" and "do everyone a favor" seem to imply that my question is obvious and annoying. Before posting my question, I did all the right things ... validated my HTML and CSS, tried a coding variations, searched the forum for similar questions, etc. Can only imagine how discouraged a complete newbie to CSS would be with that kind of response.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

1 px space between divs

Sorry.

Your templated page got me off on the wrong foot. lt really is a poor idea to post a templated page to a forum. You can't guarantee the problem doesn't reside in the uneditable parts of the code and anyone who drops your code into dreamweaver is immediately confronted with a mass of code which they can't do anything with. Normally, I would ignore pages like that, but I my curiousity was piqued (you weren't using any positioning, so where could the 1px gap have come from?), so I stuck with it. It is very easy to detach a template (Modify|Templates|Detach from Template).

I did post a smiley at the bottom - AND the solution. Smile

vikette
Offline
Regular
Last seen: 11 years 25 weeks ago
Timezone: GMT+1
Joined: 2004-07-16
Posts: 16
Points: 0

1 px space between divs

The smiley wasn't lost on me ... nor was the solution.

Will know to detach from template next time. Cool