Width Control

HTML & CSS
1

SitePont Members,
I was in an Apple store visiting mywebsite on Safari On a 27" monitor and my site came up fine. Ten minutes before I was in BestBuy on Safari On a 27" monitor and my site came up hyperstretched so each paragraph was only 2 lines vertically. I guess the difference was versions of Safari. How do I fix this.

For <Body> I have
body{line-height:1.15;font-family:arial,sans-serif;font-size:105%;margin:0;padding:4%}
Is there max width controll in CSS?

Thanks,

Chris

2

Chris, please post a link to your site and ideally screenshots of the hyperstretched and normal views so we know what we’re looking for.

Did you happen to note the versions of Safari being used on the demo systems?

3

I can’t get you the screen shot of the hyperstretched rendering, I saw it in a store. I don’t know what version(s) of Safari I was on. I might have to go back, although I got a feeling both were on the same version.the version in the stare . The subject of my site has nothing to do with programming, so how do I post a link without google finding it?

Thanks

4

Longhand?

www dot mysite anotherdot com (or some such scheme)

We can work with that as long as a login and password are not required.

5

Google ignores links in this forum anyway, as they are all no-follow. So there’s no danger from an SEO point of view posting it here. (Not that I think there’s be an issue even if the links were do-follow. Linking is not a sin! It’s the nature of the web. It’s just doing lots of if for no good reason that could be a problem.)

6

Ok the site is actualcures.com.

7

Yes indeed. You can do something like this:

#content {
  max-width: 1240px;
  margin: 0 auto;
}

If you remove float: left; from Content and use the code above instead, the content will center on the screen but not grow wider than 1240px; (You can choose any width, of course.)

8

Ralph,
What would I do about the margin-top:30px I have in there.
Content{position:relative;float:left;width:100%;overflow:hidden;background-color:#3F3F7F;margin-top:30px;padding:10px 0}

I think that controls the distance between the header image and the content.
I was thinking maybe

margin:30px auto 0

Can you do that? Top I think has to be 30, left and right - auto, bottom - zero.

Thanks Ralph,

Chris

9

Yes, that’s absolutely fine. :slight_smile:

10

It’s up. I’ll have to go back to the store.

Thanks Ralph

11

I have a 27" iMac, and I can assure you that it’s working well. :slight_smile:

12

If anyone is interested, I went back to Best Buy and it works fine now. An employee said the OS is “Lion” and not the latest “Mountain Lion”. So it was a previous version of Apple’s OS likely with a previous version of Safari that didn’t correct for no max-width.

13

The versions aren’t that different. :slight_smile: