7 replies [Last post]
phoenix808
Offline
newbie
Last seen: 18 years 10 weeks ago
Joined: 2004-03-20
Posts: 5
Points: 0

http://www.denyingphoenix.com/ ... after the #left div ends, it seems to throw the bkg off by 1 pixel.

Any idea why? I'm racking my brain here...

The css is at http://www.denyingphoenix.com/styles-site.css.

What the heck am I doing wrong?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 29 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Going crazy, w/ only 1 pixel!

Hi

Your first clue is that this is an IE problem (it doesn't happen in Moz).

I have had this happen to me too, so I know what caused it for me.

Before I go through that though, you use margin:0 auto; to align for moz, which works fine. IE Mac also uses margin to center, and not text-align, and it NEEDS this as margin-left:auto & margin-right:auto (for some reason it can't cope with them your way). Just thought I'd warn you!

Now to the problem. First. Remove the text-align:center from the body. This should put the design to the left in IE. Has the 1 pixel jog gone?

IF it has, it is because when IE uses text-align to center things, the next container seems to go wrong sometimes. The way I got round this was to center the body, have a pagecontainer with a width for mozilla and centered here for mozilla etc, with text-align:left for IE win (I found it didn't matter to IE what the width was, it even worked at Innocent. The inside this I had my real container with the content, which had width again (same as the false outer container) but no centering.

Then IE suddenly lost the will to mess me around.

Trevor

phoenix808
Offline
newbie
Last seen: 18 years 10 weeks ago
Joined: 2004-03-20
Posts: 5
Points: 0

Going crazy, w/ only 1 pixel!

Thanks a ton Trevor. Unfortunately it didnt work by just removing that from the body.

I have my body tag center, with a "wrapper" (container) in there that specifies a width. then my $left div specifies a width as well, like you said you did...and no do.

Any more help. Anyone? Sad

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Going crazy, w/ only 1 pixel!

I'm not sure where the 1px problem is? Is it the white border line in the header? About 2px high.

Also, your text overflows into the right hand navigation/sidepanel if viewed in Firefox (OS X and XP) and in Safari.

The next sentence is true. The previous sentence is false. Discuss...

phoenix808
Offline
newbie
Last seen: 18 years 10 weeks ago
Joined: 2004-03-20
Posts: 5
Points: 0

Going crazy, w/ only 1 pixel!

Ok, i was wrong.

The pixel is off at the bottom. If you find the last line of text on the left column, it's below that. The bkg image shifts to the right...at least in IE6.x for PC (all i've tested right now)

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Going crazy, w/ only 1 pixel!

Good eyesight!

The fact that the text is overlapping the right-hand section is related to the 1px break of the background.

You've specified a width in your CSS, on the #left div. However, the width states only 490. Not 490px or 490em or whatever. The browser is probably confusing itself to what unit to use. Setting it to 490px still breaks the background, but I managed to get it up to 380px. Here's the code to replace below (tidy up a bit):

/* ---( main body column )----------------------------- */

div#left 
      {
      width: 380px;
      margin: 0 290px 20px 25px;
      padding-top: 42px;
      text-align: left;                          
      }

html>body #left 
      {
      width: 490px;            
      height: auto;
      } 
div#left div.entry
      {
      margin-bottom: 14px;
      }

Let me know if it's okay? Wink

The next sentence is true. The previous sentence is false. Discuss...

phoenix808
Offline
newbie
Last seen: 18 years 10 weeks ago
Joined: 2004-03-20
Posts: 5
Points: 0

Going crazy, w/ only 1 pixel!

Pure genuis. You're a sanity saver! Thanks so much. Smile

phoenix808
Offline
newbie
Last seen: 18 years 10 weeks ago
Joined: 2004-03-20
Posts: 5
Points: 0

Going crazy, w/ only 1 pixel!

Oh criminey...it seems to come back whenever the right column extends past (or even darn close) the content in the #left div. Any clue?

I've shortened the right hand div so that it's not a problem, but if i lenthen it, it comes back. ???