Safari/Chrome loading unwanted whitespace

[ashafer 0]

Hello, I have just gotten my background image in-line with the navigation bar (appears correctly in Firefox), but when it loads in Safari/Chrome a white space appears to the right of the nav bar. I am a bit of a beginner so hopefully this is just an easy fix. Below is a link: http://www.allenshafer.com/wordpress Thanks guys! -allen

[bryan-hadaway 3]

It's the bg image: http://www.allenshafer.com/wordpress/wp-content/uploads/2010/12/WebBackground4.png Instead of `repeat` let's try `repeat-x` Thanks, Bryan

[ashafer 0]

Hey Bryan, That didn't seem to fix the issue, current code I have for background image is: body.fixed_width {background:url("http://www.allenshafer.com/wordpress/wp-content/uploads/2010/12/WebBackground4.png'>http://www.allenshafer.com/wordpress/wp-content/uploads/2010/12/WebBackground4.png") repeat scroll 0 0 transparent; } and I tried changing to: body.fixed_width {background:url("http://www.allenshafer.com/wordpress/wp-content/uploads/2010/12/WebBackground4.png'>http://www.allenshafer.com/wordpress/wp-content/uploads/2010/12/WebBackground4.png") repeat-x scroll 0 0 transparent; } I tried "repeat-x" along with "repeat-1" and "repeat-2", and none corrected the error... Am I modifying the wrong repeat command or making some other mistake? Thanks for the help -allen

[catrina 103]

Have you considered editing the background so that it's wide?

[ashafer 0]

Hi Katrina, Thanks for the suggestion, the current background is 1305 ?— 1183 and I have edited to be wider at 1593 ?— 1183, and the problem remained Unfortunately since I am a beginner I really have no idea on how to troubleshoot this browser compatibility issue, is the code specific to safari or chrome that I am overlooking? -allen

[catrina 103]

I think it does have to do with Safari/Chrome since I don't see the problem in Firefox, as well. Perhaps an approach different from using a repeated background image would fix the problem (as long as you'd be willing to do that).

[ashafer 0]

Thanks, I am definitely willing to try any approach. I have just changed the background image to one that better shows where the unwanted white space is coming from. And below is the code I used to align the original background image with the navigation bar: .fixed_width #page { margin: 11px auto 0; } .fixed_width #page, .fixed_width #footer { width: 796px; } #column-main .mcolumn-pad { padding-left: 15px; padding-right: 10px; } I am guessing it was this code that created the whitespace somehow in safari/chrome, but it was also this code that allowed me to align the gray bar in the original background image to the navigation bar. Any help on how I can get this image: Original background image to align with the navigation bar in all browsers. (editing the image is something I can easily do, but the issue for me is having the background image meet the sides of the navigation bar) Any help is greatly appreciated Thanks, allen

[cmunns 16]

Why do you need an image in this case in the first place? Can't you just apply background-colors using CSS?

[ashafer 0]

Is it possible to create a gray stripe in the background that matches with the navigation bar using CSS? If so please let me know the code necessary to do this, my only knowledge of how to do this is using a background image that has the necessary gray stripe and aligning it with the page. The below image is what I am trying to accomplish in all browsers (this screen shot was taken in firefox): The current background image (if it is not dotted then I have updated since posting) I have in place is to show where the background image creates whitespace between the nav bar and background in safari and chrome: Website I really just need someone to help me figure out how to make the above screen shot how the page looks in all browsers. Again I am a beginner so please do not assume that I have gone through all the simple resolutions to this issue, most likely I am not aware of them. Thanks for all the help

[bryan-hadaway 3]

It looks like you've decided to go with a different approach altogether, did you still need help with this? Thanks, Bryan

[ashafer 0]

Yes I definitely still need help, the other background I have put up is only for demonstration purposes to more easily see the disconnect between the nav bar and the background on the right side. Any help would be greatly appreciated

[cmunns 16]

Oh I see. Well you would want to use the fullwidth design mode if you are trying to get the nav bar to go all the way across then we can go from there

[ashafer 0]

Okay, so after using the inspect element tool in Chrome, I think I have figured out the code that is affecting firefox but not safari and chrome, but I still do not know how to resolve the issue: #primary-nav li a { padding: 5px 22px; } For some reason it appears this padding only affects firefox, is there a different code to increase the padding for the navigation buttons in Safari/Chrome?

[ashafer 0]

I apologize for this second post, but hopefully this info helps narrow down the problem for someone with a better grasp of all this than myself. This code makes the nav bar perfect in Firefox: #primary-nav li a { padding: 5px 22px; } While this makes it correct in Chrome/Safari (and too wide in firefox): #primary-nav li a { padding: 5px 25px; } Please help me resolve this, it has become a pretty frustrating issue...

[Andrew 207]

Hi Allen, Upgrade the theme to version 1.2.0 and use design control to handle this for you... it should work better.

[ashafer 0]

Hey Andrew thanks for the update advice! This worked perfectly, great job on the update!