9 replies [Last post]
literayz
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2006-03-07
Posts: 5
Points: 0

www.showtimetack.us - code
www.showtimetack.us/site.css - css file

I think I followed all the rules for getting this to center correctly using auto margins. For some reason the header piece just wants to stay 1px to the left of my centered background tile in IE but in FF it looks good.

Can anyone help me or give me a hint of what I am doing wrong?

Thanks

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 22 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

<div> won't line up in both IE and FF?

I am viewing it in FF1.5 and IE6 and do not see a difference.

- r

literayz
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2006-03-07
Posts: 5
Points: 0

ok here is a screenshot to help explain my problem.

thank you ragamuffin for taking a look.

I have posted a screenshot so that you can see what I am seeing. I have checked on my three computers now and this seems to be occuring on each one.

they are xp pro, win2000 and xp home.

anymore comments or advice are gladly welcomed since i am a complete noob to full css layouts =)-

thanks

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 4 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

<div> won't line up in both IE and FF?

looks the same to me as well.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

literayz
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2006-03-07
Posts: 5
Points: 0

<div> won't line up in both IE and FF?

did you look at my screenie Deuce?

I don't understand why it would display differently for for me inside the same browser :?: Shock

Maybe you guys could just tell me what you would suggest based of the screenshot and not the actual site. Then i can play with any ideas and see if i can make it look the same for you and for me.

Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 3 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

<div> won't line up in both IE and FF?

Like the others, I can't replicate the issue. The only thing I can think of is a rounding error. What happens if you drag the window's width a tiny bit at a time? If it's not that, I got nuthin'.

A man tells his doctor, "It hurts when I lift my arm, what should I do?"

The doctor says, "Don't lift your arm."

So, don't look at the page on your machine. Laughing out loud (sometimes, I just slay me Tongue) Until someone can replicate your results, it's an anomaly. Don't sweat it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

literayz
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2006-03-07
Posts: 5
Points: 0

<div> won't line up in both IE and FF?

kk5st wrote:
What happens if you drag the window's width a tiny bit at a time? If it's not that, I got nuthin'.

YES YES YES :!:

Ok when I reduced the browser window and dragged a little bit at a time it fluctuates between being right on and being 1px off as shown in my screenshot. This seems to just depend on random size of the browser window.

so kk5st what is this rounding issue you speak of? Can you explain this further or point me to the correct resource?

Thanks very much

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 3 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

<div> won't line up in both IE and FF?

Rounding errors are due mostly to the question floor? ceil? IOW, round up or down? When the width is even, there's no prob, but when the width is odd, say 201px, is center at 100px (round down) or 101px (round up)?

First, a little opinion. Treat it as the treasure of great value that it is, and worth every nickel you paid. Don't try to fill a page to the bottom of the viewport if there's not content to fill it naturally. That's a holdover from print design and has no place on the web. The printed page has a top and a bottom. The web page doesn't. There is no height to a web page. It's as long or as short as it needs to be. Let the document end at its natural end.

I say that to excuse my ignorance as to the best way to deal with this. My thought is that since you're using xhtml, the html and body elements are styleable. Set the background color on html and set the body to 790px, the width of your bg image. Center the body with {margin: 0 auto;} and center your container in that. If the body shifts a px one way or the other, it won't matter because it'll take the container with it.

Be sure to set html {height: 100%;}, and body {min-height: 100%; _height: 100%;}.

Of course, that's not tested.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

literayz
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2006-03-07
Posts: 5
Points: 0

<div> won't line up in both IE and FF?

Here is how I resolved my issue.

I removed all heights on my main elements like body, html, #container etc...

I only did this while testing a different way of coding the page which I quickly scrapped.

I am not sure I really understand why the rounding issue was an issue at all with this design since the width of the container is 760px wide which of course is an even number so it should not have to round up or down according to Gary's explanation.

Eventually what I did was to just give the page body a 1px left margin. This seems to have fixed my issue in IE5, 5.5, 6, FF1.5 and NN 7+. Would anyone be willing to look at the page in Opera or on Mac/IE?

One more thing Gary, how did you know I was a print designer :?: Cool

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 3 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

<div> won't line up in both IE and FF?

It's not so much whether the inner (centered) box has an even value, it's actually whether the difference between the inner and outer containers is evenly divisible. That's why as the window widened or narrowed, you would get the shift.

All trained designers are print oriented. There are no schools of design for the web. There are some that claim to be, but it's just rehashed print stuff. That, and I try to fix too much stuff from designers who just don't yet get it. They can't leave the print paradigm behind.

You may rightly assume I'm not a designer—you design it, I'll build it and let you know where your design sucks. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.