The Amazing Expanding Margin

problems with top margin increasing when links are used

[Eric_Jarvis]

I've just finished a template and it's exhibiting a very strange behaviour...when a link is clicked it adds 100 pixels or so to the top margin of the page...I had a couple of html errors which I've now removed...the style sheets also validates at w3c

anyone ever encountered something like this before?

and is it OK to post a link to the test page?

[agerhart]

yes I think that it is okay to post the link to the test page.......as long as it is a test

[Brett_Tabke]

Sounds like an inheritance issue. Are you accidently applying the same style to different elements? eg: body {padding: 10px} td {padding: 10px} table {padding: 10px} etc...

[NFFC]

You have a <blockquote> before the first table.

[Eric_Jarvis]

the test page is

[befrienders.org...]

the style sheet is

[befrienders.org...]

thanks Brett, I'll look for inheritance issues...it's a problem that occurred between first and second draft of the template

frustrating since both the html and css validate :(

[Eric_Jarvis]

NFFC...have I?...the old site has blockquotes and tables...the test template should be entirely free of both

currently the links lead out to the old site...to get back to the template requires the back button...I should have mentioned that, I just changed it to see if genuine links made a difference (they don't)

[Key_Master]

Hello Eric_Jarvis,

I used to run into this problem with some browsers when using the margin-bottom attribute. Once I removed them and used margin-top in other areas to get the effect I wanted the problem went away.

[Key_Master]

Remove the width attribute in div.bi and you will see the problem:

div.bi { color: #ffffff; font-family: arial, helvetica, sans-serif; background: #0066cc; margin-bottom: 1.5em; margin-top: 0; float: left; border-top: 1px solid #eeeeff; border-bottom:1px solid #000099; border-right: 1px solid #eeeeff; border-left:1px solid #000099; }

[Eric_Jarvis]

brilliant...thanks

interestingly somebody else found that taking out the float on the language box did it too...neither of those changed between the first draft that was OK and the second that was a problem...so whatever it is involves at leat three different factors :)

I can live with the language bar floating to the top...it's where I wanted it in the first place

[Eric_Jarvis]

done...all fixed...it turned out to be a surplus float: left; in the div.bi specification...I think it counts as a fault in IE5 though

whatever...I'm now a happy bunny

and Graham Parker on at Dingwalls tonight as well...sometimes life is just perfect

thanks to all who helped