By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,645 Members | 1,226 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,645 IT Pros & Developers. It's quick & easy.

Blank Space.... It just wont Go!

P: n/a
Help!

Some of you may remember me from a few weeks ago when I was first starting
to play with CSS and made rather a large mess..

Never the less I stuck with it and have put a site together, simple it my
be, correct I doubt, but none the less it is beginning to come together.

I am however stuck here....

http://www.locodocs.co.uk

My problem is the white gap between the mid-blue bar on the left and the
footer.

This is from the body section of the page, but I hate it I want the footer
to come up and meet the bottom of the bar. The blue bar itself is a margin
from the footer with column on top for the small text which will eventually
for the comments for such things as last updated etc. If I change the
background to the body text (currently white) it all changes including "the
gap"

I have tried fiddleing with the bottom margins and padding to no avail.

The .css file is here www.locodocs.co.uk/styles/web-d.css

Another curious thing is that when I try it from the server it is present in
IE6 and Firefox, but when I use firefox on the local file, it isn't there!

Any Ideas how to eradicate it?

BTW sorry the CSS needs tidying - excuse my notes :-S
Tom
Feb 28 '07 #1
Share this Question
Share on Google+
12 Replies


P: n/a
In article <TB******************@newsfe7-gui.ntli.net>,
"Tom Burton" <th***********@freezingcoldmail.comwrote:
Help!

Some of you may remember me from a few weeks ago when I was first starting
to play with CSS and made rather a large mess..

Never the less I stuck with it and have put a site together, simple it my
be, correct I doubt, but none the less it is beginning to come together.

I am however stuck here....

http://www.locodocs.co.uk

My problem is the white gap between the mid-blue
Your problems are much much more than this. Starting with your
font-size at 0.65em. Please read:

<http://www.htmldog.com/guides/htmlbeginner/>

--
dorayme
Feb 28 '07 #2

P: n/a
On 2007-02-28, Tom Burton <th***********@freezingcoldmail.comwrote:
Help!

Some of you may remember me from a few weeks ago when I was first starting
to play with CSS and made rather a large mess..

Never the less I stuck with it and have put a site together, simple it my
be, correct I doubt, but none the less it is beginning to come together.

I am however stuck here....

http://www.locodocs.co.uk

My problem is the white gap between the mid-blue bar on the left and the
footer.
That white gap is a function of several collapsed margins-- the top
margin of the h6 inside #footer, the top margin of #footer (which is
zero), the bottom margin of #content (also zero) and the bottom margin
of the last <pin #content.

You can get rid of it by setting margin-top:0 on h6, and
padding-bottom:1px on #content.

That way the <p>s margin is still there, but stays inside #content.

You could use the same trick with #footer: give it 1px of top padding,
but then your h6 overflows it (since you've set a height on #footer).

Finally instead of bottom padding on #content you could add
style="margin-bottom: 0" to the last <pinside it, but that would make
the <pend rather abruptly before the footer.

[...]
Another curious thing is that when I try it from the server it is present in
IE6 and Firefox, but when I use firefox on the local file, it isn't there!
Don't know why that should be.
Feb 28 '07 #3

P: n/a
>My problem is the white gap between the mid-blue

Your problems are much much more than this.
Thankyou

Yes I have read that guide and used it many times - you will see if you look
at my post about 14days ago I was delighted to find it, the problem is that
I am A an inquisitive kinda guy who says, I wonder what happens if it
do.....

*makes a load of none standard changes -- then some more ---- then some
more*

What you see published is something of a bastardised meddled with poked and
prodded version.

It is my intention to get it sorted out, the .css file is a bombsite which
is annoying me, but I might as well get the playing/learning done first.

I understand this not delight the purists, but what I know is pretty much
self taught, and that's how I learn!

<g>

Tom
Feb 28 '07 #4

P: n/a
>snip<
That white gap is a function of several collapsed margins-- the top
margin of the h6 inside #footer, the top margin of #footer (which is
zero), the bottom margin of #content (also zero) and the bottom margin
of the last <pin #content.

You can get rid of it by setting margin-top:0 on h6, and
padding-bottom:1px on #content.

That way the <p>s margin is still there, but stays inside #content.

You could use the same trick with #footer: give it 1px of top padding,
but then your h6 overflows it (since you've set a height on #footer).
DOH, thank-you, i think it had driven the sense out of me having been at it
of a couple of hours. - Annoying thing is i fixed it the other day (using
much the same method) then we had a power cut zapping my file.
>
Don't know why that should be.
works now.

:-)

Tom
Feb 28 '07 #5

P: n/a
On 28 Feb, 09:25, "Tom Burton" <thomasburt...@freezingcoldmail.com>
wrote:
I understand this not delight the purists, but what I know is pretty much
self taught, and that's how I learn!
So why ask us? You've ignored pretty much every bit of standard
advice the group hive-mind ever offers, so what more can you expect?

Feb 28 '07 #6

P: n/a
dorayme wrote:
>
Your problems are much much more than this. Starting with your
font-size at 0.65em.
Well, he's got 0.65em on his #column_l, .9em on body (they multiply,
right?), and then 0.6em on his h6 inside of #column_l.

No wonder the <h6text (a *heading*) looks like ant droppings to me.

--
John
Feb 28 '07 #7

P: n/a

"Andy Dingley" <di*****@codesmiths.comwrote in message
news:11*********************@a75g2000cwd.googlegro ups.com...
On 28 Feb, 09:25, "Tom Burton" <thomasburt...@freezingcoldmail.com>
wrote:
>I understand this not delight the purists, but what I know is pretty much
self taught, and that's how I learn!

So why ask us? You've ignored pretty much every bit of standard
advice the group hive-mind ever offers, so what more can you expect?
Nothing, it was ohhhh so simple an easy, then I messed about with it....

Yea bad idea....

All I can say is thanks for your input and before judging, give me a few
weeks/months and hopefully I'll have a more compliant coherent piece.

As others have pointed out there are Oh so many things that are wrong, such
as the headings being used for stuff they shouldn't. I know that you know
that, and what I intend to do now is strip it back and start off from the
bare bones.

But none-the-less thanks for your advice, both in this thread and the
previous one, it has not been ignored nor I hope do you feel you have wasted
your time.
Feb 28 '07 #8

P: n/a
Tom Burton wrote:
Help!
A few suggestions, though you may be already aware of them.

FF has DOM inspector under the tools menu. I think this may
be an option when you install FF. If you don't have it,
reinstall FF and request this be installed.

The DOM inspector lets you look at the DOM hierarchy. If the
DOM inspector & your web page are both visible, clicking on
an element in the DOM inspector causes the web page to flash
a border around the element you have clicked.

A drop down menu on the right side of the DOM inspector lets
you examine the CSS rules - both browser and author
settings, and where (which files) the rules are located.

It's a great tool.

Another feature of FF is the JS console. Open another tab
and use this URL

chrome://global/content/console.xul

The JS console reports javascript and CSS errors as you load
different web pages. You can often click on an error and
the console takes you to the line where the error occurred.

I'm always amazed at the CSS and javascript errors that are
reported on major websites. As an example, go to Google
news and then look at the JS console after.

My third suggestion has to do with the way the CSS rules
are defined. There are 3 common ways.

1) a separate external stylesheet - the one you're familiar
with.

2) embedding CSS rules within a style tag in the header like so:

<style type="text/css">
<!--
BODY { font-family: sans-serif; font-size: 10pt }
-->
</style>

3) creating a rule within the element declaration itself.
This usually overrides previous CSS rules established
elsewhere. An example ...

<div class="whatever" style="border:thin dotted navy">
blah blah blah
</div>

The last method is a great diagnostic technique for actually
'seeing' the margins and padding that are being applied to a
block element. I will often use different colors for block
elements that contain other block elements.

Another advantage of the last method is its immediacy (or
specificity). Let's say that you are creating a table less
web page and you have a rule like this.

DIV.stack { float: left; clear none }

Suppose that you have 6 divs in a row like this, they all
stack nicely from left to right, like a 1 x 6 table. But
you want a 2 x 3 layout.

So the 3 div element might look something like this.

<div class="stack" style="clear:left"... </div>

So you only have one general rule (a stack class) instead of
two, and you selectively override general rules only when
you need to. Your CSS style sheets will be smaller and
simpler and development will be faster.

Hope this helps.

Cheers
Jim Sontag
Feb 28 '07 #9

P: n/a
"Tom Burton" <th***********@freezingcoldmail.comwrites:
"Andy Dingley" <di*****@codesmiths.comwrote in message
news:11*********************@a75g2000cwd.googlegro ups.com...
>On 28 Feb, 09:25, "Tom Burton" <thomasburt...@freezingcoldmail.com>
wrote:
>>I understand this not delight the purists, but what I know is pretty much
self taught, and that's how I learn!

So why ask us? You've ignored pretty much every bit of standard
advice the group hive-mind ever offers, so what more can you expect?

Nothing, it was ohhhh so simple an easy, then I messed about with it....

Yea bad idea....
No! Messing around - good idea! You can't learn anything without trying new
things.

Not checking the result for errors after messing around - bad idea! You can't
learn from mistakes if you don't know what they are.

Do you have FireFox? If not, get it - you need to test with multiple browsers
anyway. Then, install the Web Developer extension. It makes submitting your
HTML and CSS code to the W3C validators into a matter of one mouse click.

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net
Feb 28 '07 #10

P: n/a

"Sherm Pendley" <sp******@dot-app.orgwrote in message
news:m2************@local.wv-www.com...
"Tom Burton" <th***********@freezingcoldmail.comwrites:
>"Andy Dingley" <di*****@codesmiths.comwrote in message
news:11*********************@a75g2000cwd.googlegr oups.com...
>>On 28 Feb, 09:25, "Tom Burton" <thomasburt...@freezingcoldmail.com>
wrote:

I understand this not delight the purists, but what I know is pretty
much
self taught, and that's how I learn!

So why ask us? You've ignored pretty much every bit of standard
advice the group hive-mind ever offers, so what more can you expect?

Nothing, it was ohhhh so simple an easy, then I messed about with it....

Yea bad idea....

No! Messing around - good idea! You can't learn anything without trying
new
things.

Not checking the result for errors after messing around - bad idea! You
can't
learn from mistakes if you don't know what they are.
Yup...... Tommie Tit-Head.

Do you have FireFox? If not, get it - you need to test with multiple
browsers
anyway.
Yup & Yup.
Then, install the Web Developer extension. It makes submitting your
HTML and CSS code to the W3C validators into a matter of one mouse click.
I wasn't aware of this - but I am now I think another poster has posted the
same thing the - DOM inspector as referred to by ''Diogenes''?

I have now submitted both to the W3C validators with the "This page is Valid
etc" response... But that accounts for little really if the content is still
pants.

Thanks for you time and responses.

Tom - Learning Fast.
Feb 28 '07 #11

P: n/a
"Tom Burton" <th***********@freezingcoldmail.comwrites:
"Sherm Pendley" <sp******@dot-app.orgwrote in message
news:m2************@local.wv-www.com...
>Do you have FireFox? If not, get it - you need to test with multiple
browsers
anyway.

Yup & Yup.
>Then, install the Web Developer extension. It makes submitting your
HTML and CSS code to the W3C validators into a matter of one mouse click.

I wasn't aware of this - but I am now I think another poster has posted the
same thing the - DOM inspector as referred to by ''Diogenes''?
Nope - the DOM Inspector is very useful too, but it's built-in.

I'm referring to the Web Developer extension, which adds a toolbar with all
sorts of useful goodness on it:

<https://addons.mozilla.org/firefox/60/>
I have now submitted both to the W3C validators with the "This page is Valid
etc" response... But that accounts for little really if the content is still
pants.
It's not the whole journey, that's true, but it's a great first step!

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net
Feb 28 '07 #12

P: n/a
Sherm Pendley wrote:
I'm referring to the Web Developer extension, which adds a toolbar with all
sorts of useful goodness on it:

<https://addons.mozilla.org/firefox/60/>
I wasn't aware of this myself - excellent add-on.

Thanks Sherm!

Cheers
Jim
Feb 28 '07 #13

This discussion thread is closed

Replies have been disabled for this discussion.