I was working on a layout for someone when all of a sudden Moz started acting up about it. I checked it in IE and everything was fine (not a good benchmark to test things by I know), so then I tested it in Opera and Netscape and they had the same problem.
Perplexed by this I checked my code, I couldn't see anything that was obviously wrong so I did what every web-developer does when there is something wrong, I put borders around everything. I found that by putting a 1px border around a certain element the layout snapped back into place (as I imagined it should have done without the border).
I stripped down the layout to just two div tags and some coloured backgrounds and I have put two different versions of the page in a zipped folder for you to take a look at. The white background div tag should be centred vertically inside the black div tag, I used a top margin to do this.
I know that this isn't just some browser bug because it's like this in three different browsers so can anyone tell me what I'm missing out on here?thats really odd... I did notice however, that if you left-float #pleh div, you don't need the border fix. I'm not sure if this helps you or not.
EDIT:
though I don't know if this would work on your larger example.In the layout I just used position:relative to get it to work, I usually like to use the margins to position stuff with because they don't leave a gap where the element used to be, in this case it didn't matter though
I could have used the float:left fix I suppose. The #pleh div in the layout is actually an h1 tag and it's inside another div tag #main which is floated right.
I used #pleh because I just needed a random id to reference the element with. (Just in case you were wondering.
)understandable, I ususally use #gobilygook, but i'm not sure why...Over the years I made it a habit to always put nbsp in DIVs if they are otherwise empty. Only trouble is, nbsp will be a blank space the size of whatever your font spec is. If you don't spec a font size, it'll be like 11 or 12 px, which'll throw off many a design.
So stick a nbsp in a div that doesn't have content, then make sure the font-size is 1px. Zero hasn't worked well for me in the past. I'll post a link in a sec.
OK, here:
<!-- m --><a class="postlink" href="http://www.johnbarrick.com/test/without_border_fix.html">http://www.johnbarrick.com/test/without_border_fix.html</a><!-- m -->
BTW, I've seen this on anchor tags too, so stick a nbsp or 1x1px spacer in. Empty tags can collapse. If anyone knows how to keep this from happening please share.
Perplexed by this I checked my code, I couldn't see anything that was obviously wrong so I did what every web-developer does when there is something wrong, I put borders around everything. I found that by putting a 1px border around a certain element the layout snapped back into place (as I imagined it should have done without the border).
I stripped down the layout to just two div tags and some coloured backgrounds and I have put two different versions of the page in a zipped folder for you to take a look at. The white background div tag should be centred vertically inside the black div tag, I used a top margin to do this.
I know that this isn't just some browser bug because it's like this in three different browsers so can anyone tell me what I'm missing out on here?thats really odd... I did notice however, that if you left-float #pleh div, you don't need the border fix. I'm not sure if this helps you or not.
EDIT:
though I don't know if this would work on your larger example.In the layout I just used position:relative to get it to work, I usually like to use the margins to position stuff with because they don't leave a gap where the element used to be, in this case it didn't matter though
I could have used the float:left fix I suppose. The #pleh div in the layout is actually an h1 tag and it's inside another div tag #main which is floated right.
I used #pleh because I just needed a random id to reference the element with. (Just in case you were wondering.
)understandable, I ususally use #gobilygook, but i'm not sure why...Over the years I made it a habit to always put nbsp in DIVs if they are otherwise empty. Only trouble is, nbsp will be a blank space the size of whatever your font spec is. If you don't spec a font size, it'll be like 11 or 12 px, which'll throw off many a design.So stick a nbsp in a div that doesn't have content, then make sure the font-size is 1px. Zero hasn't worked well for me in the past. I'll post a link in a sec.
OK, here:
<!-- m --><a class="postlink" href="http://www.johnbarrick.com/test/without_border_fix.html">http://www.johnbarrick.com/test/without_border_fix.html</a><!-- m -->
BTW, I've seen this on anchor tags too, so stick a nbsp or 1x1px spacer in. Empty tags can collapse. If anyone knows how to keep this from happening please share.