I'm only noticing this in safari 5, but on most page refreshes, the second and third floated divs in the middle page content don't render correctly. The image gets cut off, sometimes the google font text doesn't display, sometimes the button gets doubled. It's very inconsistent, but a few refreshes and the issue comes up at least once.
site is at dev.axiomllc.com. I can't for the life of me figure out what is going on. It even works in IE7.
What it should look like:
What it does look like:
turned out to be an issue with the way safari renders font-face within floated content. Switched from floated to inline-block and problems were solved.
Related
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
When this page begins loading www.newedenfaces.com everything looks good. But as soon as two big thumbnails in the center are finished rendering, the footer is being pushed down. Well not the footer itself, but the footer's contents, the footer background still remains where it should.
If this issue was consistent across all browsers I'd have easier time tracking down the problem, but since that's not the case I just don't know where to start.
My first instinct was the use ofthis.$el.append instead of this.$el.html. Nope. Ok, it must be the "sticky footer" then where I use the trick similar to Bootstrap's Sticky Footer. Nope. I am out of ideas.
Screenshot of the problem (does not happen in Chrome): Footer content is pushed down when page is fully loaded.
I'm developing a website in hebrew, and everything is fine in Chrome and Firefox (as expected), but I have an issue with IE.
When I place
direction:RTL;
unicode-bidi:embed;
the whole page gets shifted to the right, and a horizontal scrollbar appears.
On initial load of the page, IE loads it scrolled to the right side, so it looks good (no need for manual scrolling), but the horizontal scrollbar is there.
All the other elements are placed correctly and I can't find the issue. There is no element that would overflow outside the main wrapper, and the scrollbar is there only if direction:RTL is placed.
I can notice that the scrollbar appears near the end of the loading, but I don't know if there is some way to step through the loading of the page (something like breakpoint/debug/step).
I tested it on 3 different computers (IE8/XP, IE8/Win7, IE9/Win7, and also with http://netrenderer.com )
Some help/guidance would be greatly appreciated.
You can check it at:
http://southbeachsmoke.co.il/
http://southbeachsmoke.co.il/products/category/1
I've been working on a website for a little while now, doing most of my testing in Chrome, Firefox, and IE. As I'm wrapping things up, I've tried viewing it in Safari (on Mac, iPad, and iPhone). I've noticed that certain elements are misplaced in Safari. I've tried playing with the CSS, but I've had no luck.
The page can be viewed here - http://staging.princewebdesigns.com/gallais/
See specifically the logo (being pushed down into the banner), the font of the tagline in the banner (wrapping beyond the banner and extending too far to the left), the 'Featured Work' title wrapping, the project names wrapping, and the footer wrapping.
Here is how the page should look - http://staging.princewebdesigns.com/gallais/images/chrome.png
To see how it looks on my iPhone, change the link above to .../iphone.png
Any help is appreciated.
The issue is (I think) that you have your browser's text zoomed in.
I loaded the page in Safari 5.1 on Mac OS 10.7.3, and it loaded fine initially. When I zoomed normally, the layout stayed intact. As soon as I tried zooming just the text, the layout broke per your description.
That being said, you may want to think hard about how to make the layout more 'flexible' in the event a user does have their text size increased. In IE, for example, the default zoom is full page zoom, but a user can still increase their text size apart from zooming. It's worth testing your layout in those situations to make sure it doesn't completely derail. I'm not saying it has to be perfect, but still legible.
One idea is to try out different units. I've found that when declaring horizontal lengths (e.g. margin-left) using relative measurements works, but when declaring vertical lengths, (e.g. margin-top) using pixel measurements works better. For super critical items, like the site logo, positon:absolute may be a good route to try.
I'm currently redesigning a website and have run into an issue with horizontal scrolling when the page is viewed in a narrow browser window.
The header contains a logo, some text and a navigation bar and spans 100% of the page width, but the header content is centered with a fixed width of 940px. When shown properly, it looks like this:
However, if the browser window is resized to be narrower than the fixed width a horizontal scrollbar appears (as expected), but scrolling it 'cuts' the scrolled part out, producing the following result:
The work-in-progress site can be viewed live here, if the CSS/HTML can give you any hints as to what I'm doing wrong.
The easiest way to fix this problem is to add min-width:940px to the body tag and use an expression for ie6.
It works fine for me in Firefox 3.6.8, IE 8, and Chrome 5. What browser are you using? Looks like you are using Chrome.
Is the page being cached in your browser incorrectly? Try clearing your cache and then check the site, or try viewing it on another computer. The CSS for the header is straightforward and correct. Nothing there should be causing problems.