I am about to go suicidal - I need some CSS help!

Discussion in 'CSS' started by skunker, Jan 19, 2008.

  1. #1
    skunker, Jan 19, 2008 IP
  2. dadaas

    dadaas Well-Known Member

    Messages:
    1,298
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    160
    #2
    well i dont have IE, show IE screen.
     
    dadaas, Jan 19, 2008 IP
  3. Spider-Man

    Spider-Man Banned

    Messages:
    2,684
    Likes Received:
    211
    Best Answers:
    0
    Trophy Points:
    0
    #3
    At 1280x1024 resolution using Firefox v2, I see alignment faults all over the place, and it appears even worse in IE.

    Perhaps try the w3c online css validator? Not sure if that will help or not, but it'll help tidy the code up anyway.
     
    Spider-Man, Jan 19, 2008 IP
  4. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #4
    You have overlapping divs somewhere. FF's web developer toolbar with Outline All is showing crossing lines on the column in question. At the bottom, its the main right div. Don't know which it's overlapped with. Um, you really should look to change the filename for that page. IE wouldn't let me save it(as html,only as a jpg) to inspect the code so all the help I can give you is what I see from FF. And thanks for the popups.
     
    shallowink, Jan 19, 2008 IP
  5. div

    div Well-Known Member

    Messages:
    404
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    135
    #5
    I didn´t look trough the whole stylesheet but one thing is sure you´ve used padding and margin in the same div that is a well known bug in IE. I think there was something called boxmodul hack that shall help you or you just do it like that that you always have 2 boxes one for margin width / height and the other one for padding
     
    div, Jan 19, 2008 IP
  6. Spider-Man

    Spider-Man Banned

    Messages:
    2,684
    Likes Received:
    211
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Roflcopter!

    For starters, in your new attempt to clean the code up, you've removed all forms of formatting making it much more difficult to read. Your code should be written like this:

    <body>
    <div>
    <p> blah blah blah, my website is the best</p>
    </div>
    </body>

    Obviously I don't suggest making a site with one single div, but if you're still lost for the missing div, try popping the code into dreamweaver. Although I personally think there's nothing more subtle than notepad;)
     
    Spider-Man, Jan 19, 2008 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Code tags buddy, I think you meant this:
    
    <body>
         <div>
              <p> blah blah blah, my website is the best</p>
         </div>
    </body>
    
    Code (markup):
    I'm just trying to figure out what's up with the quintuple carriage returns between each line in the CSS. Bad character encoding?

    In any case, cleaning up the 47 validation errors would be a good START... which proper indentation as Spider-man suggested would help with greatly. Does make me DAMNED glad I use a browser with a built in pop-up blocker though.
     
    deathshadow, Jan 20, 2008 IP
  8. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You can use a CSS IE6 hack.

    _width: x px;

    Where x is your width. It will only make it that width in IE6. IE6 tends to have a pixel problem.
     
    LeetPCUser, Jan 21, 2008 IP
  9. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #9
    The above is NOT preferred. You do NOT want to feed a different width, but instead find out why it's going overboard.. usually its a case of double margins on floated elements with horizontal margins set that is fixed by display:inline;.

    Feeding a width in IE6 might make it work temporarily, but it will only cause problems later on if you modify your page and somehow fix the sidebar and wonder why it's all different in IE6. And I'm not even sure the _ works in IE7.. personally I've never resorted to such a hack.
     
    soulscratch, Jan 21, 2008 IP
  10. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Usually browser specific hacks are a was of time and resources. Stay away from them as much as possible.
     
    ChaosFoo, Jan 21, 2008 IP
  11. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I have tried the _ and it only overrides IE6. This is primarily because Microsoft actually created IE7 to render semi-close to Mozilla. IE6 is the only real problem when programming websites.
     
    LeetPCUser, Jan 22, 2008 IP
  12. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #12
    It's ugly, not valid, and you never know what'll happen with a future browser. I suggest just trying to fix the spacing issues by not using padding and avoiding ie6's box model.. set margins on inner elements and use display:inline on floated elements with horiz. margins.
     
    soulscratch, Jan 22, 2008 IP