Basic CSS help please

Discussion in 'CSS' started by BRUm, Oct 2, 2006.

  1. #1
    Hi,

    My site is all messed up, and it's due to the damn css button I'm trying to make. If someone would be so kind as to just point out what's wrong, I'll give you $100 worth of CPCads advertising points when the site is finished :)

    Here's the problem:

    [​IMG]

    Here is the the page in question. It is messed up at the bottom. And this is when the very first form box is this:


    Without the above CSS the box is just an image like the other form boxes, and the layout is now fine:

    [​IMG]

    I'm so frustrated :mad: , please help.

    Thanks,

    Lee.
     
    BRUm, Oct 2, 2006 IP
  2. BRUm

    BRUm Well-Known Member

    Messages:
    3,086
    Likes Received:
    61
    Best Answers:
    1
    Trophy Points:
    100
    #2
    No one know what's wrong with the CSS?
     
    BRUm, Oct 2, 2006 IP
  3. BRUm

    BRUm Well-Known Member

    Messages:
    3,086
    Likes Received:
    61
    Best Answers:
    1
    Trophy Points:
    100
    #3
    C'mon, where are all the CSS gurus? :(
     
    BRUm, Oct 3, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    I've seen this post several times, but I guess I'm just slow. What, exactly, is messed up? Where's a link to the document? Then there is the table thingie. I don't do tables for layout, so that put me off.

    You do have an error or two.
    
    style="border-style:solid; border:none; border-width:0px; background:url('images/signup_10.gif'); width:170; height:23;"
    Code (markup):
    would work better as
    
    style="border: 0 none; background-image: url(images/signup_10.gif); 
           width: 170[color=red]px[/color]; height: 23[color=red]px[/color];"
    Code (markup):
    cheers,

    gary
     
    kk5st, Oct 3, 2006 IP
  5. BRUm

    BRUm Well-Known Member

    Messages:
    3,086
    Likes Received:
    61
    Best Answers:
    1
    Trophy Points:
    100
    #5
    Hi gary,

    Thanks a lot for your help, no one else seems to have. But I've tried your advice and it seems to have not worked either :(

    Here's the URL of the messed up page (In internet explorer) www.cpcads.net/signup.php

    Thanks,

    Lee.
     
    BRUm, Oct 4, 2006 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    I don't think, and I could be wrong, this is a css issue. It appears to be strictly a table rendering thing—html/IE bugginess. I haven't done table layouts for more than three years, so the knowledge of browser peculiarities has faded.

    You might try removing the whitespace between </tr> and the following <tr> in your markup. I do recall IE being bad about whitespaces.

    Further, add a complete and proper DTD. You're in quirks mode, where all manner of ugliness occurs; especially in IE.

    Other than that, I got nuthin'.

    cheers,

    gary
     
    kk5st, Oct 4, 2006 IP
  7. BRUm

    BRUm Well-Known Member

    Messages:
    3,086
    Likes Received:
    61
    Best Answers:
    1
    Trophy Points:
    100
    #7
    Cheers mate, I'll take a look at all of that. One question, if you don't use tables, what do you use?

    Thanks,

    Lee.

    EDIT: I just tried this on the page:

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    Code (markup):
    And it made it a lot worse :confused:
     
    BRUm, Oct 4, 2006 IP
  8. eli03

    eli03 Well-Known Member

    Messages:
    2,887
    Likes Received:
    98
    Best Answers:
    0
    Trophy Points:
    175
    #8
    using image slice is causing the problem. why not use pure css/table without image spacing ?

    problem: The problem why css dont work , because slicing of layout is not correct you only need to get the important part of the image not all.



    The border can be done using css so you dont need an image to do this.
     
    eli03, Oct 4, 2006 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    I use well formed, well structured and semantic (x)html plus css for the presentation. Check my playpen pages (see the sig line). Go to the form demo for a look at a table-free form layout.

    That would be due to browsers following the rules better(?), that is they will more closely render what you actually wrote rather than what you meant. ;)

    cheers,

    gary
     
    kk5st, Oct 4, 2006 IP
  10. BRUm

    BRUm Well-Known Member

    Messages:
    3,086
    Likes Received:
    61
    Best Answers:
    1
    Trophy Points:
    100
    #10
    OK, If I gave someone the source, would you be able to sort it out? I'm willing to pay.

    Thanks,

    Lee.
     
    BRUm, Oct 5, 2006 IP
  11. eli03

    eli03 Well-Known Member

    Messages:
    2,887
    Likes Received:
    98
    Best Answers:
    0
    Trophy Points:
    175
    #11
    if you have the psd file i can code it for free, let me know. :)
     
    eli03, Oct 6, 2006 IP
  12. sabian1982

    sabian1982 Notable Member

    Messages:
    2,028
    Likes Received:
    161
    Best Answers:
    0
    Trophy Points:
    210
    #12
    why not style an <hr> tag to use a specific image ie the image that is currently split into 4ish images...?
     
    sabian1982, Oct 6, 2006 IP
  13. BRUm

    BRUm Well-Known Member

    Messages:
    3,086
    Likes Received:
    61
    Best Answers:
    1
    Trophy Points:
    100
    #13
    elio3 I have the .psd :) Thanks a lot. I'll PM you for your email later on.

    Thanks,

    Lee.
     
    BRUm, Oct 7, 2006 IP