SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: width:"99%"; ?

  1. #1
    SitePoint Zealot LunaC's Avatar
    Join Date
    Feb 2001
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    width:"99%"; ?

    So far I have my site looking fine in Opera, NS6, NS4.7, IE 5&6...

    The only problem is that to do one of the things I wanted I had to write 2 div widths like:
    width:"99%";
    Which doen't validate. (Neither do MS filters, but I'm ignoring that unless anyone knows of a reason not to use them.)

    Without the quotes it messed everything up in all browsers but IE. (What I'm doing is having a div inside a table cell, that div has a slight shadow in IE so it needs a space along the side to show the shadow)

    So my questions are:
    How bad is it to do this?
    Will it break a browser on a Mac?
    Is there a better way to do it?
    (Other than dropping tables altogether, wish I could but a large percentage still use NS4.7 & they don't deal well with the layout I want using css )

    This is the site in case you need to take a peek at it, Webweaver
    and the CSS (I put it in a text file so it may be easier to view)
    Styles for older browsers
    New Browser's CSS

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you'll look at section 6.2 of this page, titled "Percentage units," you'll see that the correct way to do things is to write the value and the unit without quotes. Any browser that supports CSS level 1 (pretty much every recent browser) will support this notation fine.

  3. #3
    SitePoint Zealot LunaC's Avatar
    Join Date
    Feb 2001
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, they should show it correctly without the quotes, but the divs overflow out of the table cell if I write width:99%; & the stuff on the far right gets pushed beyond the browser window with both Netscape 6 & the most current mozilla beta.

    With the quotes it doesn't. It looks as it should.

    IE & Opera seem to work well either way.

    Here's a test page:
    http://webweaver.nu/test.shtml

    The only things in the test page's code I changed was adding a border=0 (so you could see where it's overflowing) and included style="width:99%;" to both those divs to overwrite the quoted ones from the main .css file.

    Try it in NS6 or Mozilla then compare to IE or Opera, you'll see what I mean.

    edit -> I just noticed it's not as obvious on a higher resolution... erm... also noticed my logo needs to be a bit smaller to fit those
    Last edited by LunaC; Jul 23, 2002 at 23:21.

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using margins instead. i.e.:
    Code:
    margin: 0 1% 1% 0;
    And don't quote it! :-)

    Also, a layout like yours could probably be replicated with CSS that works in NS easy enough.

    ~~Ian
    Last edited by Ian Glass; Jul 24, 2002 at 05:33.

  5. #5
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    also in your css file if you want to stop older browsers from reading that part of teh file use this

    Code:
    / * / * /
    before and

    Code:
    / * * /
    after (without space of course)

    I found it much easier to use css for older version of NS using this approach (if I could remember I would tell who I got this great tip off - but I can't )

    Sarah
    Regular user

  6. #6
    SitePoint Zealot LunaC's Avatar
    Join Date
    Feb 2001
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the help, I really do appreciate it

    I tried the margin size, it looked great except that it took out the shadows in IE (I guess that it needs useable space for those and a margin is a margin... a space that can't be filled.)

    The tip about hiding with those comment-like tags is great! I'm using the @import atm to hide from older browsers... that way would be much easier.

    I tried that to see it maybe luck would be on my side and NS6 & Mozilla would ignore them to, but they were too smart for that

    So I guess my choices are:
    1) Remove the shadows & the width tag altogether
    2) Leave it as it is (invalid but working)
    2) Write it properly and have NS6 & Mozilla mis-read it.

    I reported the bug to mozilla since it is valid to have a % width tag there (without quotes), so hopefully they will be able to fix that in later releases.

    (Oh, and I had written the whole thing in CSS at first, but I have too many NS4 people using that site... my mother being one of them That poor old browser just can't do the 3 column layout properly. My next redesign I'll give up on NS4. Tables are more hassle than they're worth now.)


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
  •