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

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

    CSS problem (I think) with a site


    Hi all,

    Could you guys go here, please:

    http://www.bartlett-family.net/jonathan

    username:
    password:

    Basically, the site looks ok in IE 6, but terrible in NS and Opera (both version 7.x, latest releases). I'm deperately trying to figure out why. I have had the html file AND the CSS file validated by W3C, so I KNOW there is nothing wrong with syntax anywhere in either file. It's obviously just something I am doing wrong. What is causing this site to look so bad in NS and Opera?

    Also, at resolutions higher than 1024 x 768, the image of the kid centers below the text in the middle of the page. That's great, it's exactly what I want. However, if either the browser window is shrunk (restored down from being maximized), OR if the viewers desktop resolution in 1024 x 768 or lower, the image overlaps the text. How can I stop this from happening? I always want the image in the same place, no matter what window size, resolution, and/or monitor size. Always below the text.

    I have made similar posts to this before and am making headway. I really do want to thank all of you who have helped before! Thanks so much, and any further help is appreciated!

    Chris
    Attached Files
    Last edited by cjwsb; September 26th, 2003 at 09:24 AM.
    Pop, pop, fizz, fizz, oh what a relief it is!
  2. #2
  3. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Location
    Sacramento, CA
    Posts
    1,710
    Rep Power
    14
    I'm assuming you fixed it? It looks fine in Mozilla Firebird.
  4. #3
  5. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    I have never tested the site in FireBird, only in NS 7.01, Opera 7.11, and IE 6. It looks good in FireBird? What is going on here?!

    Chris

    PS. What's the difference with Mozilla and Mo FireBird?
    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
    37
    Ok, I just installed Mozilla FireBird for the first time. First things first: THIS BROWSER IS FAST!!! Holy crap! I love it already!

    Ok, back to Earth... The page looks exactly the same as it does in Mozilla ("regular"), NS, and Opera... Bad. Am I the only one seeing this? The image is supposed to be below the text, not overlapping it. Right now, in Opera, NS, Mo, and Mo FB the image is only of my son's mouth. The entire top part of the image is cut off, and what is there is overlapping the text. What is going on here? It looks fine with IE, which is the crappiest browser of 'em all!!!

    Please help!

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  8. #5
  9. Senior Member
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    1,614
    Rep Power
    14
    I havent looked at it in mozilla or opera.. no need to .. because the problem comes from not using tables to format your page.

    Code:
    <table width="100%" border="1" cellspacing="0" cellpadding="10">
      <tr> 
        <td colspan="3">&nbsp;</td></tr>
      <tr> 
        <td rowspan="2" width="10%" valign="top">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td rowspan="2" width="10%" valign="top">&nbsp;</td></tr>
      <tr> 
        <td align="center">pic</td>
      </tr>
    </table>
    I left the border on so you can see the format
    webM

    for $i(0..20){for($j=0;$j<=$i;$j+=2){print pack(qq{H2},
    substr(qq{5f5745424d415354415f},$j,2));}print qq{\n};};
  10. #6
  11. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    Damn... You aren't called webmasta for nothing... That did it. I inserted that code in there, copy and pasted a mess of my old code into it and, BAM! It looks great in all browsers now. Outstanding!

    I added a <div class ="header"> in the html file right above the start of the table so the top of the page is now the color red (among other CSS attributes). When I had it set up before (with all <div>'s, the sides were blue. I cannot get that working again... When I add other <div>'s, it's not doing anything, like it's not even calling the class. I attached my NEW CSS file to this post so you can see what's going on. Thank you so very, very much!

    Chris
    Last edited by cjwsb; September 25th, 2003 at 09:23 PM.
    Pop, pop, fizz, fizz, oh what a relief it is!
  12. #7
  13. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    Sorry, forgot to attach the css. Here it is, the new one.
    Attached Files
    Pop, pop, fizz, fizz, oh what a relief it is!
  14. #8
  15. Senior Member
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    1,614
    Rep Power
    14
    Add the class to the respective table cells
    <td colspan="3" class ="header"><h1>Jonathan Walker Bartlett</h1>
    Same as for the navigation.. you may have to play with the css achieve desired results.
    webM

    for $i(0..20){for($j=0;$j<=$i;$j+=2){print pack(qq{H2},
    substr(qq{5f5745424d415354415f},$j,2));}print qq{\n};};
  16. #9
  17. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    That did it! I just couldn't find the right placements for the (class = "whatever"s). I didn't even think about putting them INTO the table cell themselves. Thanks!

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!

IMN logo majestic logo threadwatch logo seochat tools logo