#1
  1. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    36

    HTML & CSS site sizing problem


    Hi all,

    I am fairly new to HTML and CSS in general, but I know the basics. Can you guys help?

    I am building a website for my family (nothing major) and one of the areas is for my son. I am building it now. It's here. Oh, you'll need a username and password to get in there:

    username:
    password:

    Sorry, I wanna keep out the riff-raff. You guys have been great for questions of mine in the past, and I trust the peeps on this site!

    Anyway, the first thing I was wondering is this: Is it possible to have the image resize through CSS to fit the area it's in? If not, that's ok, not a big deal. One thing that is really bugging me, though is this. In IE, the page does not fit on one screen, although I would like it to, and there's no reason why it shouldn't. In IE, it is scrollable downward. What's more strange is that in NS and Opera, it can't scroll down, but it can scroll left and right! Also, in NS, all 8 links are on the left, instead of 4 on each side. In Opera, the layout is fine (except for the scrolling), but there's no image! There's no image in NS, either! There are none of these problems in IE (except that the window can scroll down). I have attached my CSS file to let you all take a gander. Can you explain it? I'm sure it's pretty easy, but I just don't see it...

    Also, as you'll see, I am not doing anything "hardcore" in CSS. I think this is all pretty basic stuff, so why does it act so very differently between browsers? Is the CSS support really this bad in NS and Opera? It can't be! I have found a few things I can "set" in Opera and NS on how to handle CSS, but it didn't really make any differences.

    Can I get the image to fit and fill up the area it's in?
    How can I get this site to fit on one screen on almost ANY size monitor?
    How can I get this working uniformly on all browsers?

    That's really what I'd like to know! Thanks a million guys! I appreciate any help!

    Chris
    Attached Files
    Last edited by cjwsb; September 24th, 2003 at 07:15 PM.
    Pop, pop, fizz, fizz, oh what a relief it is!
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    What version of IE are you testing in? IE 5.X has a broken box model, so if you tested it there, it's going to look different in the newest Opera and NS. Note that's IE that's messed up, not Opera/NS.

    This is how a browser is suppose to handle things:
    http://www.w3.org/TR/CSS21/box.html

    This offers some workarounds to IE5's broken box model (as well as some other good reads)
    http://www.glish.com/css

    What I've noticed in your CSS is that you have an element with 100% width and 30px padding. This makes the element's total width 100%+60px (how it should be, but IE5 messed that up), which causes a horizontal scroll bar in the newest browsers. What you really want is something like this:
    Code:
    #header
      {
      width: 90%;
      padding: 5%;
      }
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  4. #3
  5. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    36
    Using IE 6, NS 7.01, Opera 7.11. Weird, though, because IE 6 looks the best of all of 'em, and works with all the style sheets I have ever done so far, the other two haven't... IE is NOT my problem... Weird. I will try what you suggest and let you know. Thanks!

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  6. #4
  7. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    36
    Wait, I just did that... I realize, though, that it will only shorten the header. The header isn't the main problem, the overall height of the page is. That DID fix the left and right scrolling problem in NS and Opera, but it looks bad in IE now because the header is shortened width-wise... And they all 3 now want to scroll downwards! Ugh... Web design... Any other thoughts? Thanks!

    Chris
    Last edited by cjwsb; September 24th, 2003 at 07:52 AM.
    Pop, pop, fizz, fizz, oh what a relief it is!

IMN logo majestic logo threadwatch logo seochat tools logo