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.
Related
I have a slideshow on my homepage that scales to 100% width. It works perfectly on my computer (I can even resize my browser windows all the way down, in both Firefox and Safari, and it works great) but it doesn't work on my iphone (it stays too wide and adds a lot of blank space to the right of the page content).
The slideshow is an iframe. I've tried scaling the iframe with html, putting it in a div and scaling the div with css, and I've tried this: http://css-tricks.com/snippets/html/responsive-meta-tag/, but nothing seems to be working. Does anyone have any ideas I can try?
Thanks!!
website: www.silvervinedesign.com
You have pixel widths defined for the styles of this element. Therefore, it won't be responsive.
If you inspect the source of this iframe (right click and choose "Inspect Element"), you'll find that the <ul> element containing the images is getting a style="width: 4778px;" applied to it. Each <li> child is also getting an explicit pixel width style applied. When I view the source of the iframe, these style tags are not present there.
That tells me you've got some javascript function which is setting this width. Looking at your source, I'm guessing the plugin responsible is galleria, but it's hard to tell.
I am pretty good with css, but can't figure out why my menu is being destroyed by IE7. Looks perfect in all other browsers I tested. First image link is correct. Second image link is how it looks in IE7.
http://www.asingularcreation.com/Forums/download/file.php?id=8368&mode=view/ie8+.jpg
http://www.asingularcreation.com/Forums/download/file.php?id=8367&mode=view/ie7.jpg
Here is the page: http://www.asingularcreation.com/calls-to-artists.php. Any help would be greatly appreciated.
You do not need to float (or clear) the menu container. It looks like it is causing IE7 to calculate the width incorrectly which forces the menu to flow down, underneath the sub-menu.
<div style="height:40px; line-height:40px; float:left; clear:both"><!--Main Menu --></div>
Removing the float and clear properties fixes the display in IE7 and also still works in Chrome and IE8 and IE9.
There is a lot of inline styles in the example page so I would also look at moving the CSS into an external file if possible.
I built and tested my site in Firefox but now when wanting to launch I realized that there is extra padding showing up between the menu and posts as well as borders on some of the images when viewed in IE9.
I have looked through all of the CSS and can't figure out what might be causing either of these problems. Any ideas would be great.
Here is the site: http://beautyintheweeds.com
Thanks!
Every browser has different default css rules. Use a css reset to bring everything to the same defaults.
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.
I've got a simple webpage with a centered background image around the main div. The background image renders fine in IE and Firefox, but on Webkit-based browsers (Chrome, Safari), the background image only partially renders when the page is initially loaded. It's almost as if the browser just quits trying to render it. If I resize the browser window, or click on any of the links on the page, the background image shows fully. Here's the site: http://www.jnrtunes.com.
I've tried various CSS hacks, preloading images, etc and nothing seems to fix the problem. Has anyone had similar issues? Is there a problem with my HTML or CSS? I'm a realtive noob to HTML/CSS, so any advice would be appreciated. Thanks!
For some reason, it's the overflow: auto on the #wrapper div that does it. Don't ask me why, but there seems to be your problem.