12 replies [Last post]
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I've created a mock-up of whats going on with a project i'm working on. It is located here. For some reason or another, when there is a verticle scrollbar present, my #content shifts over 1px to the right in FF and to the left in IE. This 1px line is my faux column on my body. the parent container is set to margin: 0 auto. My body background set to repeat-y center;.This example has two pages. the first with the scrollbar, and the second without. What is causing this 1px shift? :shrug:

skoizumi
skoizumi's picture
Offline
Enthusiast
Last seen: 12 years 9 weeks ago
Timezone: GMT-7
Joined: 2009-01-14
Posts: 74
Points: 3

How about setting background

How about setting background on #container instead of body?

Shinya Koizumi
--------------------
I work at kmishn.com
Web Development
Web Design

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

because #container's height

because #container's height will depend on content. I need it to be a faux col. on body to achieve the desired affect.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 5 years 8 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

If we're talking about the

If we're talking about the green box lining up with the orange box - it appears to be okay on FF3.0.5 on Mac (used the ruler 'n all Triumph Smile)

But I'm really replying to say I took a look around PB while I was there - I've always like your style, only wish I was that graphically adept/talented - but the Rednecks is a HOOT!! Laughing out loud (PS - "1" appears to be missing)

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Both pages have the same

Both pages have the same problem. Try resizing either page very slowly and you'll see the problem come and go. I believe it's the way the browsers center the background in an uneven viewport - some round up, some down. I'm not sure, but it seems a different method is used for the body than other elements, hence the difference of 1px.

As to fixing, I don't know of a definitive answer (hoping someone else will chime in). You might try using an image 1px smaller, or setting the container's width to 800.1px seems to correct things.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Turns out Steve Wittens has

Turns out Steve Wittens has done some extensive testing. It seems to be the way browsers render background images as compared to normal elements. It also seems every browser has an issue.

My previous suggestion of upping the container's width a bit doesn't work for IEs (in my quick testing).

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 5 years 8 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Thanks for showing us that

Thanks for showing us that site Wolfie. I am now so depressed with my paint-bucket/colour-fill button I'm just going to go away and mope mightily Sad

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

sorry

sorry Smee Wink

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Smee wrote: But I'm really

Smee wrote:

But I'm really replying to say I took a look around PB while I was there - I've always like your style, only wish I was that graphically adept/talented - but the Rednecks is a HOOT!! Laughing out loud (PS - "1" appears to be missing)

Thank you very much Smee! That Pixel Behavior ( PB ) site was a real pain-in-the-rear to make. That was my first attempt at CSS driven design, so it was also a wonderful learning experience. I'm more od a designer then a coder. I only know how to produce static sites. I know nothing about back-end or server-side coding. I just ordered a book on Joomla! to learn about CMS. Today, thats what the clients want. Smee, I do not understand the following comment

Smee wrote:

(PS - "1" appears to be missing)

wolfcry911 wrote:

Turns out Steve Wittens has done some extensive testing. It seems to be the way browsers render background images as compared to normal elements. It also seems every browser has an issue.

Wolf,
that was a great link! It appears this has been an ongoing issue. I think I've come up with a sloppy solution. Maybe if I create a container that shares the same height as my logo, and position it absolutely at the top of the screen. This should cover up the body background image thus taking care of the 1px line. This will not, in fact, fix anything, but put a band-aid over it. My content area will still be shifted 1px.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 5 years 8 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Wolfie - I should think so!

Wolfie - I should think so! Smile

Cupid/Toejam - what are we going to call you? Cupid sounds a bit odd so I think I'm settling for Toejam...where did you get it anyway?

Quote:

I only know how to produce static sites.

I think everyone here would agree this is not A Bad Thing Smile The "1" comment was my mistake - it was so late to the party (1,2,3 etc) I thought it was missing, but it isn't.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 32 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

To some extent the desire

To some extent the desire for pixel perfection is a pipe dream and not necessarily achievable or desirable (then again there are designs that do achieve this and look great). Amongst those that have been working with CSS and standards for a while there was always the general admonishment that pixel perfect layouts were never a good idea and not really what CSS-P was about, and this problem with browsers tends to lend weight to that argument.

Cupid can I attempt to steer you away from Joomla, it's the wrong choice it's an awful CMS producing rubbish code at the best of times, I have taken to avoiding any posts that have problems and are using Joomla to drive the site.

Wordpress can work as a pretty good CMS and Drupal - although quite complex - is a very robust and good choice for portal/CMS type websites.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Smee wrote: Cupid/Toejam -

Smee wrote:

Cupid/Toejam - what are we going to call you? Cupid sounds a bit odd so I think I'm settling for Toejam...where did you get it anyway?

Smee,
I Like to think of off-the-wall words and ideas to make people wonder if there is anything wrong with me. It's funny! So, I came up with Cupids_Toejam to use as my yahoo email addy about 8 years ago. It's stuck with ever since.

Hugo wrote:

Cupid can I attempt to steer you away from Joomla, it's the wrong choice it's an awful CMS producing rubbish code at the best of times, I have taken to avoiding any posts that have problems and are using Joomla to drive the site.

Wordpress can work as a pretty good CMS and Drupal - although quite complex - is a very robust and good choice for portal/CMS type websites.

Hugo,
Like I said, I know very very little about any of this. I use Wordpress for my Blog/Articles on my Pixel behavior site. Since I know nothing of PHP, or CMS, that blog was the most challenging thing I've ever had to do with website creation. I hated every second. To be honest, I'm still not sure what the hell is going on. Thinking about diving back into all that Wordpress quicksand, gives me hives all over my body. There must be something, or somewhere I can go to better understand this technology. I simply HATED dealing with PHP, and Wordpress. GGRRRR :curse:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 32 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I've noted the other thread

I've noted the other thread running on the cms subject, as for Wordpress it is perhaps simpler than you think yet I understand that initial frustration as I went through that with Drupal in an early version, and felt I simply couldn't face doing another project using it.

I tend to gauge the worth of a blog/cms by how easy it is to take a site and convert over, that is I expect to be able create a static site , design and layout, then be able to simply add in the required WP loop and other functionality in the layout areas that have been designated, WP does actually make this pretty simple, one critical factor is whether one attempts to generate all pages from the one main file or make use of the template pages functionality, to generate from one file means that you have a whole heap of code to wade through and things are significantly harder to understand, using template pages means in effect that you could have all the full posts display using a particular file; if your static layout had a markedly different page layout for single posts then you could simply take that page rename it to single.php , remove unnecessary elements such as the replaced with the WP call for header then drop the WP loop in the position you require; your markup and styling remains unchanged from the original.

Working this way is a lot simpler, until one is comfortable with exactly what is going on and all the necessary examples are to be found in the default themes folders.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me