I seem to be getting some strange display errors with a website which I do not know how to fix. Thing is most of the time the site displays correctly but... about 2 times out of 10 it doesn't. So best way for me to explain this is to make a little picture
Now the left side of the image is what the site looks like correctly but the right side where things are stretched which happens sometimes when you visit that page. So anyone able to help me out on this one?
There is no difference in the source code and I have validated the site and all I got was the usual errors telling me things like I can't use the "valign" property and I need <p> tags in certain places.
I have actually done this check on nearly every page on the site and every time the site messes up there is actually a form button which seems to occasionally make a gap below itself. I don't know how this will work out but I'm going to try and give forms a bottom margin of 0 and see if that makes a difference.
Ok making the margin 0 on forms seems to have worked but my only other issue is the fact that I gave images a -3px bottom margin to take away that white space on the bottom but this seems to only work when it feels like it so I need to seek an alternative method of doing this. I've done some searching and there seem to be a few methods around this problem. Although making the image a block element would seem the obvious one it is no use for when I want text next to the image so what's the best thing to do in this situation?
You can use the 'Inspect Element' and layout features to figure out how the dimensions are being set.
There could be some very subtle CSS collision.
Other options would be to put some style tags after all the CSS, setting margins, borders, padding, and background - which will let you see the dimensions, then you can backtrack through the CSS until you see what's happening.
If it was a simple problem, I'm sure you would have resolved it by now. These are brute force ways to pursue it.
The Following User Says Thank You to wirehopper For This Useful Post:
Weird display errors
but my only other issue is the fact that I gave images a -3px bottom margin to take away that white space on the bottom but this seems to only work when it feels like it so I need to seek an alternative method of doing this. I've done some searching and there seem to be a few methods around this problem. Although making the image a block element would seem the obvious one it is no use for when I want text next to the image so what's the best thing to do in this situation?
Linear Mode
