Welcome to WebmasterWorld Guest from 54.145.173.36

Forum Moderators: incrediBILL

Message Too Old, No Replies

The Amazing Expanding Margin

problems with top margin increasing when links are used

   
2:31 pm on Aug 1, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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?

2:36 pm on Aug 1, 2001 (gmt 0)

WebmasterWorld Senior Member agerhart is a WebmasterWorld Top Contributor of All Time 10+ Year Member



yes I think that it is okay to post the link to the test page.......as long as it is a test
2:39 pm on Aug 1, 2001 (gmt 0)

WebmasterWorld Administrator brett_tabke is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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...
2:43 pm on Aug 1, 2001 (gmt 0)

WebmasterWorld Senior Member nffc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You have a <blockquote> before the first table.
2:46 pm on Aug 1, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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 :(

2:55 pm on Aug 1, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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)

5:42 pm on Aug 1, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

6:23 pm on Aug 1, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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; }

9:52 am on Aug 2, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

11:33 am on Aug 2, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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