Excrutiating MARGIN headache

[Doctor_Varney]

Hi, wonder if any of you guys could put me back on the wagon?

I can't get my margins to do what I want them to do. Either an H1 is dragging an inline image down with it, or there's no effect.

Here... I have posted a few guides so you can help me.

What I am trying to achieve:
(Photoshop layout)
http://www.joolzfx.com/test_area/joolzfx/design/vis-margin-goal.jpg

What I am actually getting:
http://www.joolzfx.com/test_area/joolzfx/markup_iv.html

And my current stylesheet, which is here:
http://www.joolzfx.com/test_area/joolzfx/style/sheet4.css

You'll notice I've kept all my HTML in one place. This is intentional. I plan to seperate it all out and make seperate pages, before publishing.

Many thanks. I hope someone can help me. I am running out of fingernails...:mad:

V

[oesxyl]

Hi, wonder if any of you guys could put me back on the wagon?

I can't get my margins to do what I want them to do. Either an H1 is dragging an inline image down with it, or there's no effect.

Here... I have posted a few guides so you can help me.

What I am trying to achieve:
(Photoshop layout)
http://www.joolzfx.com/test_area/joolzfx/design/vis-margin-goal.jpg

What I am actually getting:
http://www.joolzfx.com/test_area/joolzfx/markup_iv.html

And my current stylesheet, which is here:
http://www.joolzfx.com/test_area/joolzfx/style/sheet4.css

You'll notice I've kept all my HTML in one place. This is intentional. I plan to seperate it all out and make seperate pages, before publishing.

Many thanks. I hope someone can help me. I am running out of fingernails...:mad:

V

try to add to the div with id 'index' a overflow: auto;

regards

[Doctor_Varney]

Thanks for responding, Oesxyl! I'll try it and let you know...

Cheers,

V

[Doctor_Varney]

Nothing. Basically, I want a margin to occur between the "Welcome" graphic and the text which reads: "Make-up for:".

It's particularly frustrating because it should be as simple as popping in a margin, either top or bottom of one of the elements - yet no dice!?

This is something to do with that right float I have going on with the two images above, isn't it? I can just smell it...

But what's the answer to this layout? Divi up the column? Insert a gif spacer? I'm sure I shouldn't have to...

V

[ninnypants]

It looks correct to me in FF3, Opera, and safari

[Doctor_Varney]

Overflow:auto DID work, in the end. Thank you, Oesxyl.... Only I am stumped as to why or how.

V

[oesxyl]

Nothing. Basically, I want a margin to occur between the "Welcome" graphic and the text which reads: "Make-up for:".

It's particularly frustrating because it should be as simple as popping in a margin, either top or bottom of one of the elements - yet no dice!?

This is something to do with that right float I have going on with the two images above, isn't it? I can just smell it...

But what's the answer to this layout? Divi up the column? Insert a gif spacer? I'm sure I shouldn't have to...

V
- id values must be uniq that's first issue.
- invalid markup:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.joolzfx.com%2Ftest_area%2Fjoolzfx%2Fmarkup_iv.html
- I just modify in firebug the line:

<div id="index" style="overflow:auto;"><!-- Index -->

and the gap seems to be gone.

regards

[Doctor_Varney]

It certainly did solve the gap problem.

So I stopped messing with the floats and added a margin-top value in addition to the margin: 1em 0 0 28px; on the H1.

Many thanks for that, sir!

It also seems to have solved the problem of the first bullet of the ul disappearing in IE (but not the mystery of why).

V

[oesxyl]

It certainly did solve the gap problem.

So I stopped messing with the floats and added a margin-top value in addition to the margin: 1em 0 0 28px; on the H1.

Many thanks for that, sir!

It also seems to have solved the problem of the first bullet of the ul disappearing in IE (but not the mystery of why).

V
you are welcome, :)
if you validate the page, make ids uniq, put a doctype, will be more easy for you develop, :)

I want to say that the site is very fine, :) you are an artist, :)
best regards

[Doctor_Varney]

You are really too kind... Thanks! I'm a lousy coder, though. :D

V

[oesxyl]

You are really too kind... Thanks! I'm a lousy coder, though. :D

V
it's anyway better then having my artistic skill, :)

regards