SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1 pixel width problem (IE and Opera fine, Firefox has a problem)

    Hey guys,

    Wondering if you could help me. I have a PHP header include then the main page itself, both contain 2 tables.

    In the header it goes like this...

    HTML Code:
    <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" CLASS="header">
    and in the main page it goes like this...

    HTML Code:
    <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" CLASS="main">
    The CSS looks like this...

    Code:
    .header { 
      width:748px;
      margin-left:auto; 
      margin-right:auto;
      border-top-width : 1px;
      border-left-width : 1px;
      border-right-width : 1px;
      border-bottom-width : 0px;
      border-color : #BCBCBC #BCBCBC #FFFFFF #BCBCBC;
      border-style : solid;
      font-size: 11px;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
      padding: 0px;
    }
    
    .main {
      width:748px;
      margin-left:auto; 
      margin-right:auto;
      border-top-width : 0px;
      border-left-width : 1px;
      border-right-width : 1px;
      border-bottom-width : 1px;
      border-color : #FFFFFF #BCBCBC #BCBCBC #BCBCBC;
      border-style : solid;
      font-size: 11px;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
      padding: 0px;
    }
    Nothing much different from between the two. Both should be 748 pixels wide etc... The header and the main page tables both match in IE and Opera, however in Firefox 1.5 the main page table seems to shrink by 1 pixel. If I set the width of the "main" class to 749 pixels it displays how it should in Firefox, however it increases in size for IE and Opera.

    Check it out...

    http://stephenhill.lincoln.ac.uk/clu...test/index.php

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any help would be appreciated.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bump

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol, a third bump. Please somebody!

  5. #5
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use some ie star hacking.

    Code:
      .main {
        *width:748px;
        width: 749px;
        margin-left:auto; 
        margin-right:auto;
    border-width: 0 1px 1px 1px;
    border-color : #FFFFFF #BCBCBC #BCBCBC #BCBCBC;
        border-style : solid;
        font-size: 11px;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        padding: 0px;
      }
    DoesItMatter
    - anyone seen my underwear?

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nah Im afraid that doesn't do it mate...

    My css now looks like...

    Code:
    .header { 
      *width:749px;
      width: 748px;
      margin-left:auto; 
      margin-right:auto;
      border-top-width : 1px;
      border-left-width : 1px;
      border-right-width : 1px;
      border-bottom-width : 0px;
      border-color : #BCBCBC #BCBCBC #FFFFFF #BCBCBC;
      border-style : solid;
      font-size: 11px;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
      padding: 0px;
    }
    
    .main {
        *width:749px;
        width: 748px;
        margin-left:auto; 
        margin-right:auto;
    border-width: 0 1px 1px 1px;
    border-color : #FFFFFF #BCBCBC #BCBCBC #BCBCBC;
        border-style : solid;
        font-size: 11px;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        padding: 0px;
    }
    ...and now IE and Firefox don't work.

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    rendering differences

    I think the problem may have someting to do with using 7 nested tables for layout. Some of the table cells have deprecated attributes. Hacking the CSS for IE may work, but you should consider writing clean mark-up if you really care about cross-browser rendering. Have you checked out the page in Safari, Opera, etc??

  8. #8
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this should work

    Code:
    .main {
    	width: 750px;
    	margin-left:auto; 
    	margin-right:auto;
    border-width: 0 1px 1px 1px;
    border-color : #FFFFFF #BCBCBC #BCBCBC #BCBCBC;
    	border-style : solid;
    	font-size: 11px;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	padding: 0px;
    }
    DoesItMatter
    - anyone seen my underwear?

  9. #9
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague
    I think the problem may have someting to do with using 7 nested tables for layout. Some of the table cells have deprecated attributes. Hacking the CSS for IE may work, but you should consider writing clean mark-up if you really care about cross-browser rendering. Have you checked out the page in Safari, Opera, etc??
    My page worked fine in IE and Opera, however not in Firefox and Safari (just checked).

    My page also validates as W3C compliant. In my header table I have set the widths of every table cell and in the main content I have also set the width of every table cell.

    I have also tried your code inter4design, and it still doesn't work.

  10. #10
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    poorly written mark-up

    Valid mark-up is good, but it isn't everything.
    HTML Code:
    <TD><IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="8" ALT="Spacer"></TD>
    and yes, deprecated attributes will still validate. Maybe try adding
    Code:
    img {margin: 0;border: 0;}
    to your CSS so your spacers don't muss up your layout. IMO it would be easier to scrap the tables for divs rather than to hunt through the haystack and pull straws, I know you've put in time and effort to get the page this far, but some times it's wise to cut your losses and chalk it up as a learning experience.
    Last edited by Mittineague; Apr 3, 2006 at 18:20.

  11. #11
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still doing the same mate... I can't understand it.

    If I put *width: 1000; in, Firefox doesn't even increase the width of the main content table at all. Which is worrying.

    I realise it would be better doing it with divs but with so much php going on and the fact that my hand in for this is in a months time, I dont have that luxary unfortunately.

  12. #12
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to use CSS to style a table or the contents of a table you should not be using deprecated markup to specify your table attributes at all - even if it passes validation. You are co-mingling the old skool with the new and should not expect consistent results.

    It might be a pain to remove your hardcoded non css padding etc., but it shouldn't be - that is what using CSS is all about - truly seperating layout and style from content.

    Any formatting in your page will take precident over a linked stylesheet. When your CSS is not in "competition" with or choking on old skool table code, it will work very well for you.

    To even out the default padding and margins on elements you might try using the universal/wildcard selector:
    Code:
    * { margin: 0; padding: 0; }
    This can help equalize out how your page displays across browsers.

  13. #13
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I even tried like you said and specified the width in the pages and not the css however still nothing.

    Ive got it working in 100% correctly in IE, Firefox and Safari, however in Opera it's 2 pixels bigger, but to be honest unless you look very closely its not noticeable. I don't know why it's still doing this and you guys don't seem to know either so Il just chalk it down to one of life's unanswerable questions!

  14. #14
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    uk
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hilly_2005
    If I put *width: 1000; in, Firefox doesn't even increase the width of the main content table at all. Which is worrying.

    I realise it would be better doing it with divs but with so much php going on and the fact that my hand in for this is in a months time, I dont have that luxary unfortunately.
    Hi, It looks like you've probably got this covered now - but just thought I'd point out that people here have been giving you strange advice...

    The * selector bug is used to target IE specifically and shouldn't really be used as shown in above examples. The correct method of using this is the following:
    Code:
    .main {
    	width: 750px; /* This sends the width to FF / Gecko */
    }
    * html .main {
    	width: 748px; /* This sends the width ONLY to IE */
    }
    However, there's a lot of discussion going on whether this should be used, so instead I do it the other way around and target FF/Gecko specifically instead like so:
    Code:
    .main {
    	width: 748px; /* This sends the width ONLY to IE */
    }
    html > body .main {
    	width: 750px; /* This sends the width to FF / Gecko */
    }
    Therefore - using the star selector bug as advised above of course wouldn't affect Firefox... Like I said - you've probably got this covered now, but just thought I'd point it out

    Having had a quick squint at your problem I would assume it's probably to do with the tables / Images / Divs hybrid which is why people may have had problems in locating the cause of the problem. If I had more free time I'd go in and try to help - although like already said, it would be a strong recommendation to move to a tableless layout.

    I know you have a deadline but this layout could probably be re-created in a couple of hours using CSS and a lot less code.

    Then again - it's your project and I don't know what other commitments you may have.

    Good Luck anyway!

  15. #15
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    uk
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    P.s. You could also use shorthand CSS to cutdown on the amount of code used in your stylesheet.

    Originally you had:
    Code:
    .header { 
      width:748px;
      margin-left:auto; 
      margin-right:auto;
      border-top-width : 1px;
      border-left-width : 1px;
      border-right-width : 1px;
      border-bottom-width : 0px;
      border-color : #BCBCBC #BCBCBC #FFFFFF #BCBCBC;
      border-style : solid;
      font-size: 11px;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
      padding: 0px;
    }
    
    .main {
      width:748px;
      margin-left:auto; 
      margin-right:auto;
      border-top-width : 0px;
      border-left-width : 1px;
      border-right-width : 1px;
      border-bottom-width : 1px;
      border-color : #FFFFFF #BCBCBC #BCBCBC #BCBCBC;
      border-style : solid;
      font-size: 11px;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
      padding: 0px;
    }
    which could be cut down to this:
    Code:
    .main {
      width:748px;
      margin:0 auto; 
      padding:0;
      border:1px solid #BCBCBC;
      border-top:none;
      font-size: 11px;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
    .header { 
      width:748px;
      margin:0 auto;
      padding: 0px;
      border:1px solid #BCBCBC;
      border-bottom:none;
      font-size: 11px;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
    or even this:
    Code:
    .main, .header {
      width:748px;
      margin:0 auto; 
      padding:0;
      border:1px solid #BCBCBC;
      border-top:none;
      font-size: 11px;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
    .header { 
      border:1px solid #BCBCBC;
      border-bottom:none;
    }

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by whintersby
    However, there's a lot of discussion going on whether this should be used, so instead I do it the other way around and target FF/Gecko specifically instead like so:
    No thats' wthe wrong way to do it I'm afraid.

    If IE6 and under is the browser that's in question then the perfect way to target them is by using the star selector hack or via conditional comments. Why bother any other browser with a hack.

    When you use the child selector to target gecko you are in fact targetting all browsers that may (or may not use the child selector) so you can never be 100% sure that other browsers are being targetted correctly. (remember ie7 understands the child selector also)

    I should clarify that the universal selector "*" is perfectly valid when used in the right context and is recognised by all browers.

    e.g.

    * {margin:0;padding:0} is perfectly valid and will reset all padding and margins to zero.

    Only when you add html to it does it become a hack because it is a nonsense declaration . * html

    For * html to mean anything then html would need to have a parent which it doesn't and therefore all good browsers ignore it (including ie7). Ie6 and under however just parse it as though the universal selector was missing.

    Quote Originally Posted by Hilly
    however in Opera it's 2 pixels bigger, but to be honest unless you look very closely its not noticeable. I don't know why it's still doing this and you guys don't seem to know either so Il just chalk it down to one of life's unanswerable questions!
    These are the questions I specialise in lol

    If you remove the text-decoration statement from .main then opera will render the borders inside the table and not outside it and it will then match up with other browsers.

    Code:
    .main {
    width:750px;
    margin-left:auto; 
    margin-right:auto;
    border-top-width : 0px;
    border-left-width : 1px;
    border-right-width : 1px;
    border-bottom-width : 1px;
    border-color : #FFFFFF #BCBCBC #BCBCBC #BCBCBC;
    border-style : solid;
    font-size: 11px;
    /* text-decoration: none; remove this */
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px;
    }
    Hope that helps

  17. #17
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    uk
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    No thats' wthe wrong way to do it I'm afraid.
    Like I said - there's been lots of debate

    There was a discussion a couple of months ago involving Tantek saying that maybe it is a better idea to target "good" browsers rather than the broken ones? The *html and head>body hacks achieve the exact same thing so to be honest I'm not even sure myself which will be the best way forwards?

    With IE7 having fixed the *html bug I was of the opinion that head>body would be the best way to go. Conditional comments are a great solution in theory, but in practise it is a pain to test.

    P.s - Great fix for Opera there Paul, I would've never guessed that

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    was of the opinion that head>body would be the best way to go
    Well I suppose it is a case of six of one and half a dozen of another

    The child selector isn't supported by all other browsers although the browsers that don't aren't worth bothering about anyway. However there is one sticking point and that is ie5. IE5 will sometimes display styles when the child selector is used as though the selector isn't there which you need to be careful of. If you have html > body with a space (which is allowed) then ie5 will parse the style in error. use html>body without a space.

    Try this in ie5 and you will see what I mean .
    Code:
    html > body {background:red}
    As * html has been discontinued in ie7 then it is 100% safe to use to give styles to ie6- (and is an easier way than maintaining a separate stylesheet) as you mentioned. Why construct complicated rules for good browsers because the code will always be there but eventually the hacks can be removed when old browsers die.

    In the end its a matter of choice but as along as a logical system is implemented and followed rigidly then it will be easier to maintain and make changes in the future

  19. #19
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    uk
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nooooooo! Now you've got me all confused which hack to use again!!!

    Thanks for the heads-up on the head[space]>[space]body problems - I've been working on IE5 quite a lot recently but hadn't noticed any problems, so will make sure to check more thoroughly now when using this hack.

    You've got me debating whether to migrate back to the * html hack now

    Thanks Paul.

  20. #20
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    No thats' wthe wrong way to do it I'm afraid.

    If IE6 and under is the browser that's in question then the perfect way to target them is by using the star selector hack or via conditional comments. Why bother any other browser with a hack.

    When you use the child selector to target gecko you are in fact targetting all browsers that may (or may not use the child selector) so you can never be 100% sure that other browsers are being targetted correctly. (remember ie7 understands the child selector also)

    I should clarify that the universal selector "*" is perfectly valid when used in the right context and is recognised by all browers.

    e.g.

    * {margin:0;padding:0} is perfectly valid and will reset all padding and margins to zero.

    Only when you add html to it does it become a hack because it is a nonsense declaration . * html

    For * html to mean anything then html would need to have a parent which it doesn't and therefore all good browsers ignore it (including ie7). Ie6 and under however just parse it as though the universal selector was missing.

    These are the questions I specialise in lol

    If you remove the text-decoration statement from .main then opera will render the borders inside the table and not outside it and it will then match up with other browsers.

    Code:
    .main {
    width:750px;
    margin-left:auto; 
    margin-right:auto;
    border-top-width : 0px;
    border-left-width : 1px;
    border-right-width : 1px;
    border-bottom-width : 1px;
    border-color : #FFFFFF #BCBCBC #BCBCBC #BCBCBC;
    border-style : solid;
    font-size: 11px;
    /* text-decoration: none; remove this */
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px;
    }
    Hope that helps
    Paul....thank you, thank you, a million thanks you's. I didn't realise it would be just as simple as removing the text decoration. I removed that and uploaded it and hey presto it works in Opera, IE, Firefox and Safari.

    My next project is going to be completely css based hopefully, but I have to admit Il have to read up a lot more on it (Ive got the Sitepoint CSS book sitting on my shelf ready to read!), because Ive only dabbled in it here to get the positioning of the tables inside the .main table.

    But I must recognise that layouts are now moving from tables into CSS, I guess that my first experience in using it for positioning threw me off because it was hard to get things to go where I exactly wanted them too, but Im hoping that the more I practice the more it'll become second nature, here's hoping!

    Oh and cheers guys for keeping the discussion going, because Ive learnt a lot from you guys talking to each other, now I know how to really use CSS hacks (should I need them!).


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
  •