SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Css issues with linux but not with windows

    hey guys, i know this issue may look easy, but to me it's not. ok in the two images, you'll notice with the image within internet explorer on windows, how the image and the textarea frame match up just perfectly, but on linux the image stretches out more than the textarea frame.

    the image dimensions are 355 px for the width and 55 px for the height, and for the textarea dimensions are 5 rows and 41 cols. so howcome it shows the way it should on windows but not on linux.

    i have no idea how i can fix this issue within css or regular html, as i have tried in vain, to come up with a solution but so far no success.

    so could someone kindly give me some pointers as to what i can do, so that the image and the textarea align up perfectly in linux, just as they do in windows?

    thanks in advance
    Attached Images Attached Images
    i love php

  2. #2
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by i_like_php
    hey guys, i know this issue may look easy, but to me it's not. ok in the two images, you'll notice with the image within internet explorer on windows, how the image and the textarea frame match up just perfectly, but on linux the image stretches out more than the textarea frame.

    so could someone kindly give me some pointers as to what i can do, so that the image and the textarea align up perfectly in linux, just as they do in windows?
    First, don't design to IE, design to a decently compliant browser like Firefox or Opera. IE will lie to you.

    Firefox on Linux is better than IE on windows for compliance with the standards.

    Second, we really can't help much unless we see your code, *all* of it, not just some. Ideally, provide a link.

    Thirdly, IE requires a correct DOCTYPE to render in standards mode. If you don't know what that is start seaching Google and reading books - check out the local library for books on html, xhtml, and CSS. Make sure they were written in the last two years, though, to be on the safe side.

    Without a proper DOCTYPE renders widths and heights differently and incorrectly, among other things.

    Fourthly, make sure your html/xhtml is valid. You can't expect any browser to render html according to the CSS standard unless and until your html or xhtml is valid. Learn to use the validator at the W3C.
    Ed Seedhouse

  3. #3
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you take a closer look, in linux the width of each text is narrower than it is in IE, and since the width of the textarea is defined in cols meaning the number of characters per row, linux would have no doubt to havea narrower width.

    Personally I've never tried tweaking web pages for linux, so I am unsure if my guess at the solution would work, try to give an id to the textarea and give it a pixel width in css and just altogether delete the cols attribute from html.
    In search of the clouds...and maybe some work

  4. #4
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok the code in question here is the info in the webpage document....

    HTML Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="/css2/delay-css.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>TEST:</title>
    </head>
    <body>
    <p>
    <br /><br />
    <a href="test.php"><img src="/images/blank-tester.jpg" alt="logo" /></a>
    <br />
    <textarea rows="5" cols="41" name="textarea">blah abafssg. gsfgfgfgfdgfgfd.gfdsjg.
    ssljkjdsfk kfjsd kdsj dfk;js sakjsdf ds;sd fdkslf dklfd f dskf jklfdsjfk sdaksd dsfj ds;s kfklfjd.</textarea>
    <br />
    &copy; 1995-2006 <a href="/"><img src="/images/feed.gif" title="site has an rss feed" alt="rss" /></a>
    </p>
    </body>
    </html>
    now what's in the css file

    HTML Code:
    body {
    background-color : #22437f; 
    color : #fff; 
    font-size : 0.7em; 
    font-family : arial, century-gothic, sans-serif, helvetica; 
    margin : 0; 
    padding : 0; 
    text-align : center; 
    }
    a:link {
    color : #6495ed; background-color : #22437f;
    font-family : arial, helvetica, sans-serif; 
    font-weight : bold; 
    text-decoration : none; 
    } 
    a:visited {
    color : #a6a48b; background-color : #22437f;
    font-family : arial, helvetica, sans-serif; 
    font-weight : bold; 
    cursor : pointer; 
    } 
    a:visited {
    text-decoration : none; 
    } 
    a:active {
    color : #666666; background-color : #22437f;
    font-family : arial, helvetica, sans-serif; 
    font-weight : bold; 
    text-decoration : none; 
    } 
    a:hover {
    text-decoration : underline; 
    font-family : arial, helvetica, sans-serif; 
    font-weight : bold; 
    color : #ffff00; background-color : #22437f;
    }
    img {
    border: 0;
    }
    now that you see the actual code for the html file and css file, perhaps this will now allow you to better understand what it is i am trying to do...
    i love php

  5. #5
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse
    First, don't design to IE, design to a decently compliant browser like Firefox or Opera. IE will lie to you.

    Firefox on Linux is better than IE on windows for compliance with the standards.

    Second, we really can't help much unless we see your code, *all* of it, not just some. Ideally, provide a link.

    Thirdly, IE requires a correct DOCTYPE to render in standards mode. If you don't know what that is start seaching Google and reading books - check out the local library for books on html, xhtml, and CSS. Make sure they were written in the last two years, though, to be on the safe side.

    Without a proper DOCTYPE renders widths and heights differently and incorrectly, among other things.

    Fourthly, make sure your html/xhtml is valid. You can't expect any browser to render html according to the CSS standard unless and until your html or xhtml is valid. Learn to use the validator at the W3C.
    1st off my code shows perfectly fine whether i use firefox,opera, or ie 7 on windows, so it's just not IE that displays the page that way, all of the browsers on windows does.

    secondly, i am very much aware that ie isn't the browser to use for designs and etc... that's why i use ff and opera strictly for design and testing and ie i use it just to test.

    the doctype is being designed using the xhtml strict standard. the page completely validates as strict whether it was transitional or strict the issue was still there, so it has nothing to do with the doctype because i've tried those and neither seemed to eliminate the problem.

    third, the code has been posted so check within the thread and you'll see what i am talking about
    i love php

  6. #6
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by i_like_php
    1st off my code shows perfectly fine whether i use firefox,opera, or ie 7 on windows, so it's just not IE that displays the page that way, all of the browsers on windows does.
    Well your use of the xml header puts IE into quirks mode where it renders widths and heights incorrectly. IE won't render boxes to the standard unless there is nothing before the doctype.

    Yes, that's a bug in IE - a known bug.

    the doctype is being designed using the xhtml strict standard.
    But the xml header renders the doctype meaningless to internet explorer. Get rid of it and get your code valid if it isn't already, and then take a look.
    Ed Seedhouse

  7. #7
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    has anyone noticed my post...I think I made it really clear on why the width isn't consistent...
    In search of the clouds...and maybe some work

  8. #8
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kefeso
    has anyone noticed my post...I think I made it really clear on why the width isn't consistent...
    i already tried that and still no change to the actual frame that contains the text. so maybe i should just remove it altogether, or perhaps give it another crack at it

    Quote Originally Posted by Ed Seedhouse
    Well your use of the xml header puts IE into quirks mode where it renders widths and heights incorrectly. IE won't render boxes to the standard unless there is nothing before the doctype.

    Yes, that's a bug in IE - a known bug.

    But the xml header renders the doctype meaningless to internet explorer. Get rid of it and get your code valid if it isn't already, and then take a look.
    1.ed i just added the xml header tag a day ago, but the issue was well before that tag was even insterted. like i said on all the browsers on windows things show up just fine, whether it's firefox,opera, or internet explorer, so i know it's not the tag.

    it's just not showing right whenever i view the site on a linux box as you can see in the linux image screenshot attached to this thread.

    did you not get it earlier when i said my page validates as xhtml strict, so the page validates as i want i just want this small issue resolved before i scrap it, because it seems to be more hell than what it is worth.
    i love php

  9. #9
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by i_like_php
    1.ed i just added the xml header tag a day ago, but the issue was well before that tag was even insterted.
    I can only look at the code you actually post. The fact, and it is a fact, remains that IE will not render widths and heights correctly with the xml header there. Well, if you avoid all borders and all padding it will, but that's a lousy way to design.

    did you not get it earlier when i said my page validates as xhtml strict,
    Well I saw what you wrote, but very often people claim things that turn out not to be true when tested. So having been burned I tend to be skeptical unless I can check it for myself which, since you don't give a link, I can't easily do and, being lazy, I won't do unless it is easy to do.

    i just want this small issue resolved before i scrap it, because it seems to be more hell than what it is worth.
    Well that's a clue, in my opinion, that something is basicly wrong with your whole approach. HTML and CSS ain't that hard if you use the semantic design approach in the first place.

    Perhaps someone who isn't as lazy as me will wade through your posted code and come up with an answer for you.

    But your claim that your code renders correctly on all windows browers and incorrectly on all linux browsers is an extraordinary one and to believe extraordinary claims I usually ask for extraordinary evidence. In my experience Firefox, for one, renders pretty much identically on all the OS's it is compiled for. If FF is rendering differently on a linux box than a windoze box then, in my experience, something is wrong with your linux box, not necessarily with your html.

    But I could be wrong - often have been in fact.
    Ed Seedhouse

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I don't know anything about linux but as Kefeso has already said the font size is actually different in linux in your image (its 1px smaller assuming your images are to scale.) I'm not sure its the same font either but irrespective of that the size of the textarea will be different as it is based on the no of cols in the textarea cols attribute.

    I just uploaded your code to browsercam and could only test firefox on Linux (because thats all they have) and the results seem to be the same as the ie on linux picture that you showed with the textarea being much smaller.

    I applied a width to the textarea.
    Code:
     textarea{width:342px}
    And now the width is consistent in firefox linux and other browsers. I would assume that ie on linux will also be the same width but you said you have already tried this therefore I would suggest you try again before you give up

  11. #11
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Paul O'B
    I don't know anything about linux but as Kefeso has already said the font size is actually different in linux in your image (its 1px smaller assuming your images are to scale.) I'm not sure its the same font either but irrespective of that the size of the textarea will be different as it is based on the no of cols in the textarea cols attribute.

    I just uploaded your code to browsercam and could only test firefox on Linux (because thats all they have) and the results seem to be the same as the ie on linux picture that you showed with the textarea being much smaller.

    I applied a width to the textarea.
    Code:
    textarea{width:342px}
    And now the width is consistent in firefox linux and other browsers. I would assume that ie on linux will also be the same width but you said you have already tried this therefore I would suggest you try again before you give up
    that did the trick there! man it's funny how leaving out something so small almost make you lose your mind lol. now it shows just right on firefox and opera on linux
    i love php

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I would assume that ie on linux will also be the same width
    IE on Linux?
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE on Linux with most of the time Linux installed fonts:
    http://www.tatanka.com.br/ies4linux/page/Main_Page

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not IE on Linux. That's IE on Wine.
    Birnam wood is come to Dunsinane

  15. #15
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    they do have an ie version for linux, but as someone else pointed out, it requires wine and cabextract.
    i love php

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not a Linux version. It uses Wine, which is a Windows emulator.

    You can run IE on Linux using Wine, but there is no native Linux version of IE (AFAIK).
    Birnam wood is come to Dunsinane


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
  •