www.webdeveloper.com
Results 1 to 14 of 14

Thread: CSS Compatibility is a lie?

  1. #1
    Join Date
    Feb 2003
    Location
    Boston
    Posts
    52

    CSS Compatibility is a lie?

    I'm feeling like it is a lie at this point. This is the first site I'm actually trying to complete in CSS versus tables and frames and so far CSS seems a hell of a lot less compatible then tables and frames. I'm working on this site now and it seriously looks different in every browser I've viewed it with (on mac: Netscape, Safari, IE5 on win: IE6) and with each one there seems to be a different problem. My main gripes right now are:

    1. I don't want the horizontal scroll bar to show at all under any circumstance.

    2. The buttons need to be in place, not running off to the right of the interface.

    3. The background for the content div needs to line up, it's in a different place in every browser I viewed!

    I've been working on this for awhile now and I'm really starting to get frustrated. I'm thinking about converting it back to tables and an IFRAME but I really don't want to go back and do all that work. I want to believe CSS is legit but so far it seems a load of crap to me, or at least you have to know it inside and out before you can even think about using it.

    If you can help me with these problems please let me know, I've posted a .zip file with the files
    here with all the required files for you to go at it. Thanks in advance from a frustrated newb.

  2. #2
    Join Date
    Mar 2003
    Location
    The Lone Star State
    Posts
    1,126
    Welcome to the world of CSS. Cross browser compatability is sometimes difficult to achieve, but it can be done. As for the horizontal scroll bar just add overflow-x:hidden; As for the other two things I don't have time right now to deal with them.
    "If at first you do suceed, try not to look astonished."
    I have 50 gmail invitations at my disposal, if you want one pm me with your First and Last name and your email address
    HTTPGuru

  3. #3
    Join Date
    Feb 2003
    Location
    Boston
    Posts
    52

    already have that

    I already have overflow-x: hidden; in the code and it still isn't working.

  4. #4
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004

    1. Replace this (in your #contents styles):
      Code:
      scroll-x: hidden;
      scroll-y: auto;
      overflow: scroll;
      overflow-x: hidden;
      With this:
      Code:
      overflow: auto;
    2. Don’t absolutely position them, that can be pretty sketchy. I would shoot for putting all the buttons in one flash file, instead of one file for each button. Is this possible? If not, place the flash buttons in a list, float the list items.
      Code:
      <ul id="nav">
         <li><!-- Flash code here --></li>
         <li><!-- Flash code here --></li>
         <li><!-- Flash code here --></li>
         <li><!-- Flash code here --></li>
         <li><!-- Flash code here --></li>
      </ul>
      Style the list accordingly.
    3. The background position looked fine for me (Firebird 0.7, IE 6, Windows), but setting the background-position property to fixed can cause some odd problems.


    Some other things I noticed:
    • Why are you using an incomplete doctype? That’ll throw browsers into Quirks Mode, which is not fun at all.
    • Why is all the text wrapped in an H1 tag? Certainly that all isn’t a top-level heading. Wouldn’t a few well-placed P tags be more appropriate?

    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  5. #5
    Join Date
    Feb 2003
    Location
    Boston
    Posts
    52

    thanks

    Hi thanks for the help, I'll try this stuff out tomorrow night after work. I had the text in a header because I wanted to make it it's own thing where I could specify different paramters of it (like margins and stuff which I didn't do yet cause I don't know how).

    I can probably make the flash buttons into one complete flash file pretty easily. If it's only one should I still put it in a list?

    Thanks.

  6. #6
    Join Date
    Dec 2003
    Location
    UK
    Posts
    1,141
    For CSS i find building the site in firefox first then going back for IE etc is easier ive found less errors doing it this way.

  7. #7
    Join Date
    Nov 2003
    Location
    Cyberspace, last time I checked.
    Posts
    166
    Design in Moz w/ Webdeveloper Toolbar.

    I'm working on a site (Totally CSS) and it looks great in every browser/screen res.
    /(bb|[^b]{2})/i

    => Pedro's Blog (Blog.Ability) <=
    Yup, it's bust again!

  8. #8
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    One reason you're having so much trouble is you have an incomplete doctype so all the browsers are running in quirks mode. The number one requirement for a standard page is a full doctype.

  9. #9
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004

    Re: thanks

    Originally posted by xdementia
    I had the text in a header because I wanted to make it it's own thing where I could specify different paramters of it (like margins and stuff which I didn't do yet cause I don't know how).
    I’m not sure I understand. CSS wise, an H1 tag is basically the same as any other. Semantically, however, an H1 tag and a P tag are very different. The tag you use should always be the most semantically appropriate tag. In this case, you have a bunch of paragraphs, thus they should be marked up with P tags.

    Originally posted by xdementia
    I can probably make the flash buttons into one complete flash file pretty easily. If it's only one should I still put it in a list?
    If it is possible, I would recommend placing the buttons into one complete file. However, if you do, a list is not necessary, as now we have only one element, rather than several (which, semantically, should be placed in a list, since it’s a list of menu bottons) of them.
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  10. #10
    Join Date
    Feb 2003
    Location
    Boston
    Posts
    52

    lists

    Hey,

    Thanks, the overflow thing works, I guess I just had too much junk there.

    As for the flash buttons I want to try the the list thing first before I go ahead and start putting everything into one file.

    How do I get them to line up side by side in the list instead of on top of eachother (which it seems to be doing by default).

  11. #11
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    Try the following CSS (the list will have the ID nav).
    Code:
    #nav {
       padding: 0;
       margin: 0;
       list-style: none;
    }
    #nav li {
       display: inline;
    }
    Something like that.
    Last edited by Paul Jr; 10-03-2004 at 10:32 PM.
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  12. #12
    Join Date
    Aug 2004
    Location
    United Kingdom, Northamptonshire
    Posts
    109
    For CSS i find building the site in firefox first then going back for IE etc is easier ive found less errors doing it this way.
    All the sites I have done have first been done in firefox then I check on all the rest, I have never really had a problem with compatability just with IE everything else seems to be fine (netscape,Firefox,opera,Konqueror)I then have to mess around getting IE to look the same.

    Not sure if your site does this on firefox or any other browsers as I have only got Konqueror at the moment but when scrolling it splits and looks really glitched. Just to let you know case it didnt do it in others

  13. #13
    Join Date
    Feb 2003
    Location
    Boston
    Posts
    52

    bumping it up

    bumping this old thread of mine up again because I am nearing completion but still have one major issue here I can't seem to fix: the background position compatibility. Seems to be in a different place in every browser I view it in. I'm gonna try to just make it its own div and throw it in there as an image but don't know if it'll work. if you have any suggestions for keep in the right position let me know. Here's a basic list of the problems I am running into right now:

    1. The "background-position:" tag is so damn confusing I can't tell what I'm doing in it. I end up just typing in random percentages for the values of this and hoping for the best. The only way I've managed to line this up is with a lot of guesswork.

    2. Seems like some browsers (Safari) don't even respond to to the background-position: element. But either way it seems like they all treat the values differently.

    3. Seems like it makes a big difference if the scrollbar is there or not. Sometimes if it's there it will screw up the alignment.

    That's it for now. Thanks in advance.

  14. #14
    Join Date
    Aug 2004
    Location
    US
    Posts
    544

    Re: bumping it up

    Originally posted by xdementia
    bumping this old thread of mine up again because I am nearing completion but still have one major issue here I can't seem to fix: the background position compatibility. Seems to be in a different place in every browser I view it in. I'm gonna try to just make it its own div and throw it in there as an image but don't know if it'll work. if you have any suggestions for keep in the right position let me know. Here's a basic list of the problems I am running into right now:

    1. The "background-position:" tag is so damn confusing I can't tell what I'm doing in it. I end up just typing in random percentages for the values of this and hoping for the best. The only way I've managed to line this up is with a lot of guesswork.

    2. Seems like some browsers (Safari) don't even respond to to the background-position: element. But either way it seems like they all treat the values differently.

    3. Seems like it makes a big difference if the scrollbar is there or not. Sometimes if it's there it will screw up the alignment.

    That's it for now. Thanks in advance.
    if you want it aligned on a specific spot on the page (not % wise as it sounds you dont) then use px. background-position: 10px 30px; that will place it 10 px from the left and 30px from the top. try using it this way and see if you get what you want

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles