SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict dotancohen's Avatar
    Join Date
    Aug 2005
    Location
    Haifa
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox,Opera- good. IE- wide

    I'm pretty much a CSS newbie, so please bear with me. I just switched (most) of my font tags to CSS, and now IE gives me a huge font that makes my pages too wide for a 800 or ever 1024 width screen. Could someone take a peak at the source code of http://lyricslist.com and see why IE makes the letters so big? Opera and Firefox are making the page nice, from what I can see. If anyone can confirm that it looks good in Firefox, Safari (I don't have access to a mac) and Opera, I would appreciate it.

    Thanks, guys! I Always appreciate you!

    Dotan Cohen
    http://x-christmas.com

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They look the same to me in Opera 8.02 and IE6. Are you sure you haven't accidentally set View/Text Size to 'Largest' in IE?
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict dotancohen's Avatar
    Join Date
    Aug 2005
    Location
    Haifa
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    They look the same to me in Opera 8.02 and IE6. Are you sure you haven't accidentally set View/Text Size to 'Largest' in IE?
    That's the first thing that I checked... It is in normal(translated).

    What size screen resolution do you have? Do you get a horizontal scroll bar?

  4. #4
    SitePoint Zealot Linn Hastur's Avatar
    Join Date
    Jun 2005
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dotancohen
    That's the first thing that I checked... It is in normal(translated).

    What size screen resolution do you have? Do you get a horizontal scroll bar?


    Lokks the same in IE6, FF 1.0.2 and Moz 1.6. - no horizontal scrollbar - with default value for text size.
    Resolution: 1024*768.


    L.H.

    J'ai décidé d'être heureux, c'est bon pour la santé !
    I decided to be happy, it is good for health!
    (Voltaire)

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I run at 1280x1024, using a browser window that is 1024 pixels wide. No scroll bar.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Addict dotancohen's Avatar
    Join Date
    Aug 2005
    Location
    Haifa
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was just informed that it is only big in IE 5.5, which is apparently 'normal' for that version. As I run linux at home, I will need to wait till I get back to the niversity to check if this is true. How can I control text size across different browser (IE) versions?

    Dotan Cohen
    http://IE-only.com

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    * html body { /* IE only */
      font-size: 80%; /* IE5 */
      f\ont-size: 100%; /* IE6 */
    }
    You may need to hide this from IE/Mac (don't use any comments inside the block!):
    Code:
    /* Hide from IE/Mac \*/
    * html body { ... }
    /* Stop hiding */
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Addict dotancohen's Avatar
    Join Date
    Aug 2005
    Location
    Haifa
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AutisticCuckoo,
    I'm not sure that I follow you. How could I hide code from one browser? Was 'f\ont' supposed tpo be 'font'? I'm not sure if what you suggest is taking advantage of misbehaviour of the browser or not. Will IE 5.5 read what is between /* and */ but other browsers will ignore that?

    I would just test, but I am at home and don't have access to IE at the moment (linux box).

    Thanks.

    Dotan

  9. #9
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Three hacks have been used here...
    1. MacIE5 CSS Hack
    2. Star html Selector Bug
    3. Tan hack
    What Tommy suggested was this
    Code:
    /* \*/
    * html body {
      font-size: 80%;
      f\ont-size: 100%;
    }
    /* */
    Simon Pieters

  10. #10
    SitePoint Addict dotancohen's Avatar
    Join Date
    Aug 2005
    Location
    Haifa
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not too sure that I want to start with hacks. I don't want to ruin the site for standards-compliant browsers while coding for broken ones. So, I'll leave it the way it is and add a link to download Firefox. I'm happy that I am doing my best to create a standards-compliant site. If user chooses to use a non-standards compliant browser, well, then let them have that horizontal scrollbar! Or is this considered a bad attitude? I know that not everyone in the world can upgrade. But I think that there are more people that CAN upgrade (but have little reason too, as webmasters are bending over backwards to code for their broken browser) than that can't. And maximum, they have a horizontal scrollbar, that's all. I'll just save myself a headache and give those IE 5 users another reason to upgrade. Here is text that I put on the http://lyricslist.com homepage:
    The designers of LyricsList recommend the use of standards-compliant web browsers, such as FireFox. This ensures that you see the page as the designers intended it. Thank you and enjoy the site!

    Or am I being unreasonable? Right now, IE 5.5 makes up about 5% of my visitors. Thanks for advising me.

    Dotan Cohen
    http://lyricslist.com

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whether or not to cater for broken browsers is up to you. If you can avoid it, be happy and move on. Many of us can't, for economic and/or legal reasons.

    The point with CSS hacks is that they circumvent known problems in bad browsers by taking advantage of other errors in those browsers. Good hacks do this without affecting any other browsers, and they are still valid CSS.

    The most well-known hack is probably the 'star HTML' hack:
    Code:
    * html XXX {...}
    This is valid CSS that should never match any element (there is no element above <html>). However, Microsoft Internet Explorer (both for Mac and Windows) think that there is, so this is equivalent to the following rule, but only for IE:
    Code:
    XXX {...}
    IE5 uses a broken box model, while IE6 in 'standards' mode adheres to the W3C specification (at least as far as the box model is concerned). This means that you'll sometimes need to serve different values to IE5 and IE6. The backslash hack allows you to do that. IE5 does not interpret an escaped character in a property name correctly, but IE6 does. So by setting 'font-size:80%' you're targeting both of them. Then, by setting 'f\ont-size:100%' you override that value for IE6. Note that you cannot put the backslash in front of the letters a-f, because that will be interpreted as a hexadecimal escape.

    Finally, IE5/Mac has a much better rendering engine than its Windows sibling. It still has the 'star HTML' bug, though, so many of the IE/Win hacks need to be hidden from IE/Mac. To do this, you can use the escaped comment hack. It uses a parsing bug only found in IE/Mac (afaik). If the '*/' sequence that ends a comment is preceded by a backslash, IE/Mac doesn't understand that it has reached the end of the comment. Therefore, in the above example, the whole rule will appear as one big comment to IE/Mac. The comment after the rule is there so that IE/Mac will finally find a '*/' sequence that it recognises.

    Is there a risk with using any of these hacks? In this example, I'd say no. We'll have to hope that future versions of IE will be more standards-compliant, rather than less. The escaped letter hack is safe, because it's valid CSS and it will override the incorrect rule preceding it. The escaped comment hack is safe, because it only affects IE/Mac which is no longer developed.

    The star HTML hack can be a bit dangerous; not in this example, but in others. For instance, this is a common hack that fixes several IE/Win bugs:
    Code:
    * html XXX {height:1%}
    It relies on the fact that IE5/Win and IE6 incorrectly treats 'height' as 'min-height'. But what if IE7 or IE8 fixes that rendering bug while not fixing the star HTML parsing bug?

    In other words you need to be careful when using hacks, and think about the possible consequences. Hacks are inherently evil, but today they are unfortunately a necessary evil for many sites.
    Birnam wood is come to Dunsinane

  12. #12
    SitePoint Addict dotancohen's Avatar
    Join Date
    Aug 2005
    Location
    Haifa
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand now what iS the purpose of the hacks. I just don't like the idea. Truth is, I'm thinking about pulling the CSS and going back to <font> tags and whatnot.

    Taking advantage of one problem to fix another is like making three lefts when you can't make a right. But you can't always be sure that there is nobody on your left that you're going to hit. At least with font tags, I know that the site looked good across all browsers, and my users could resize to their hearts content. And print.

    Dotan
    http://lyricslist.com

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A much better way would be to learn to design in a way that doesn't require (many) hacks. For instance, learn not to specify padding or borders on an element with explicit dimensions.

    Using presentational markup and other deprecated practices can never be a good thing. Don't knock the modern ways just because you haven't had time to learn it all yet.
    Birnam wood is come to Dunsinane

  14. #14
    SitePoint Addict dotancohen's Avatar
    Join Date
    Aug 2005
    Location
    Haifa
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    A much better way would be to learn to design in a way that doesn't require (many) hacks. For instance, learn not to specify padding or borders on an element with explicit dimensions.

    Using presentational markup and other deprecated practices can never be a good thing. Don't knock the modern ways just because you haven't had time to learn it all yet.
    The requirment of hacks was not added by me, it was added by the people who wrote the software that does not comply to the CSS standards. I agree with you that I should not design sites that require hacks. I just wish that the folks who wrote the software (specifically, Internet Explorer in this case) would not require hacks to get standard (or at least consistant) behaviour.

    In your opinion, does the fact that I want my text to be about the same size in IE5.5 as it is in IE 6.x, opera, firefox, and konquerer require a hack?!? If the text in IE 5.5 comes out twice as big as in every other browser, am I at fault or is the software designer at fault? Who is requiring the hack here?!?

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree completely with you, and it wasn't my intention to say that you'd done anything wrong. What I meant was that after a while you'll learn to avoid certain things so that you won't need very many hacks to circumvent the bugs in various browsers.

    The responsibility is definitely with the browser manufacturers. To some extent, it's also with the users: if all who could do so would switch to a more standards-compliant browser, or at least upgrade to the latest version of what they're using, things would be easier for us.

    But the real world is what it is, and we'll have to make things work in it. I guess that's why they pay us the big bucks ... :lmao:
    Birnam wood is come to Dunsinane

  16. #16
    SitePoint Addict dotancohen's Avatar
    Join Date
    Aug 2005
    Location
    Haifa
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    I agree completely with you, and it wasn't my intention to say that you'd done anything wrong. What I meant was that after a while you'll learn to avoid certain things so that you won't need very many hacks to circumvent the bugs in various browsers.

    The responsibility is definitely with the browser manufacturers. To some extent, it's also with the users: if all who could do so would switch to a more standards-compliant browser, or at least upgrade to the latest version of what they're using, things would be easier for us.

    But the real world is what it is, and we'll have to make things work in it. I guess that's why they pay us the big bucks ... :lmao:
    Wow my post sounded hostile. Upon re-reading it I realized that, but it was not my intention.

    I'm actually not frustrated anymore. I said "hell with them" and whoever wants to use that broken browser, will see a broken page! If they don't realize that the browser is broken, then no harm done. If they know that it is broken and don't do anything about it, then no harm done to me.

    By the way... where do I sign up for the big bucks?

    Thanks, Cuckoo. You just witnessed my half-yearly rant. Now that I've got it all out I'm going to quit my shock therapy.

    Dotan


Bookmarks

Posting Permissions

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