Expression >
Forums Home
>
Expression Studio Forums
>
Expression Web and SuperPreview
>
Can someone tell me why my Contacts page jumps a few pixels to the right?
Can someone tell me why my Contacts page jumps a few pixels to the right?
- Site in progress is http://www.ultrasealwoodstabiliser.com
Occurs in both IE8 and Firefox. I can't see in the code why this is happening.
Thanks!
Answers
- It only jumps if the footer isn't displayed on the screen. On my monitor (20"), it doesn't jump if I have the viewport maximized (the footer is displayed on all pages). But if I shrink the height so that the viewport is 990px, all of the regular pages except Links (the tallest page) hop to the right by about 8px.
I see a couple of problems in your CSS. You are mixing size specification between px and %. When you have things like 1% padding, that's asking for problems, because the math doesn't always calculate to an even number, which can cause hopping. Get rid of all % settings for margins and use a fixed px width.
Also, you have on #environment a margin set to 3.5px auto. A monitor can't align to part of a pixel. Use whole numbers only.
Also, also, Calibri is a font available only in Vista and Office 2007. Nobody else has that font loaded on their computer, and you haven't given a font family to fall back on. You don't know what they'll be seeing if they have Win XP, Mac, etc.
Edit: I was looking at the CSS for problems and didn't notice nor think about the scroll bar issue, which is so very ubiquitous. Forest for the trees, and all, right? Thanks Ian for pointing out the forest.- Marked As Answer byrboutin1 Thursday, July 02, 2009 4:24 PM
- Edited byBill Pearson Thursday, July 02, 2009 5:35 PM
All Replies
- Didn't you already ask this question? I can't remember what was mentioned before, in the previous thread, about your jumping issues.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign - It works fine in FF for me - no jump at all.
Jim Didn't you already ask this question? I can't remember what was mentioned before, in the previous thread, about your jumping issues.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign
No, the last one was about an image that was moving within the page. My issue now is that an entire page is moving. I'm confused because it is the master layout, I can't figure out why one page would be different. I saw the previous post that someone saw no issue using FF. I'll check using a different computer.- I also see no jump in FF. If one page jumps for you and one does not compare the two pages to find the differences. Also, if the previous thread solved the image jumping issue then it may be a very similar situation why the entire content jumps.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign The only jump I see is in IE8 when viewed in a small browser window. The home page requires a vertical scroll, the contact page doesn't, so the content moves right to occupy the space previously taking up by the browsers vertical scroll bar. This doesn't happen in FF but does in Chrome.
Ian
MS MVP Expressionhttp://www.ew-resource.co.uk
http://www.fp-resource.co.uk
Ian Haynes- Proposed As Answer byIan HaynesMVPFriday, July 03, 2009 7:06 AM
- It only jumps if the footer isn't displayed on the screen. On my monitor (20"), it doesn't jump if I have the viewport maximized (the footer is displayed on all pages). But if I shrink the height so that the viewport is 990px, all of the regular pages except Links (the tallest page) hop to the right by about 8px.
I see a couple of problems in your CSS. You are mixing size specification between px and %. When you have things like 1% padding, that's asking for problems, because the math doesn't always calculate to an even number, which can cause hopping. Get rid of all % settings for margins and use a fixed px width.
Also, you have on #environment a margin set to 3.5px auto. A monitor can't align to part of a pixel. Use whole numbers only.
Also, also, Calibri is a font available only in Vista and Office 2007. Nobody else has that font loaded on their computer, and you haven't given a font family to fall back on. You don't know what they'll be seeing if they have Win XP, Mac, etc.
Edit: I was looking at the CSS for problems and didn't notice nor think about the scroll bar issue, which is so very ubiquitous. Forest for the trees, and all, right? Thanks Ian for pointing out the forest.- Marked As Answer byrboutin1 Thursday, July 02, 2009 4:24 PM
- Edited byBill Pearson Thursday, July 02, 2009 5:35 PM
- Thanks guys. I have A LOT to learn......
