SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 32
  1. #1
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another 3-panel layout question

    OK, so I'm making the classic header, navbar, content layout. What I'm doing is taking one of my really old sites and changing it over from frames to all-CSS. You can see the original here:

    Edit:

    Well, you can't see the original anymore, I've overwritten it


    And the new attempt:

    Edit:

    I've moved this site over to replace the old one now...


    http://www.numbera.com/rome/

    The style sheet for that page is located at:

    http://www.numbera.com/rome/styles/victori.css

    So far things look good, but I have one problem: I want the red bar with the column (the navbar) to extend to the bottom of the page, always. No matter how big their browser window is. However, instead it stops right after the menu UL. No good. What can I do to get it to keep going?

    Also, I tried doing that silly drop-cap thing, but the text dosen't align very well. I just used a first-letter pseudoclass and float:left... I figured that would work.

    If anybody has suggestions, I'd very much appreciate them. Thanks!
    Last edited by dalangalma; Jun 5, 2003 at 07:33.
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  2. #2
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I suppose it's worth noting that the navbar is wider in IE6 than in Moz. What gives?
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  3. #3
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are several ways to do what you need, but in your case i believe that the easier way to do it is if you put this:
    Code:
     background-image: url(../images/colback.gif);
     background-repeat: repeat-y;
    in the css of the body instead of the #menu.

  4. #4
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, a good idea. Of course this runs into problems when the menu is wider on one browser than another. Also, the colback.gif file is a transparent gif - the red is part of the #menu. Something I could fix, but I'd rather just know how to get the div to extend down there.
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  5. #5
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My guess is that for one reason or the other IE6 is running in quirk mode. Which means that it will act lik it is IE5.5.

    That in turn means that it will render a faulty box model and you'll need the famous box model hack. You'll need this if you want your site to look the smae in IE5.x anyhow. Or alternatively you could stay away from borders and padding and try to use margins as much as possible.

    As to make a div stretch all the way down... As far as I know that can only be achieved with some Javascript. Sitepoint uses this method. I think they got their code from www.cross-browser.com. With this keep in mind that over 10% of users don't have Javascript enabled.

    Alternatively, you could set the body's background to the 'short column' background and make the short column background transparent.

    There's all sorts of possibilities... Experiment and try to think 'outside the table'. The problem with changing to CSS is not so much learning new tricks and techniques (which one needs to do off course) but to change ones thinking about what a webpage is about... a road I'm still on myself.

    A link for inspiration: The Zen Garden

    Good luck with it!

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  6. #6
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I can't imagine why it would be in quirks mode. I have this doctype: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  7. #7
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    More problems. This time with the drop-caps. First, I found this bug: http://www.sitepointforums.com/showt...hreadid=110182 , and I still can't figure out how to get the drop caps to align with the top line of text, and have the text wrap around it.
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  8. #8
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is that even a valid DOCTYPE?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  9. #9
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there any way to detect whether IE is in quirks mode?
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  10. #10
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://tantek.com/CSS/Examples/boxmodelhack.html
    If the box model is messed up, then IE6 is in quirks mode. It may be doing that because you try to use XHTML1.1, which I see now.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  11. #11
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why would XHTML1.1 put it in quirks?
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  12. #12
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have another page, at http://magus.res.cmu.edu/ where the left column is different widths in IE and Moz. This one uses the box model hack to define the correct sizes for old browsers, but there still is a discrepancy. Why does this happen?
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  13. #13
    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)
    Are you using the xml prologue :

    <?xml version="1.0" encoding="iso-8859-1"?>

    This will put IE6 into quirks mode.

    Paul

    Edit:

    No you're not . I should have looked at your page first

  14. #14
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wish there was some DOM property or something that I could ask about what mode it's in.
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  15. #15
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  16. #16
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    Edit:

    No you're not . I should have looked at your page first
    Cool, I see we have edit tags now!

  17. #17
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. So the problem might be that I'm serving as text/html instead of text/xml. How can I change that? I can associate file extensions with mimetypes, but all my sites are served from ASPX, whether they're XHTML or not.
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  18. #18
    SitePoint Member
    Join Date
    Aug 2001
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry! Double post
    signature

  19. #19
    SitePoint Member
    Join Date
    Aug 2001
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JustLurkin77
    Type the following into your browser's address bar and press enter (note: there should not be a space between java and script):

    Mode
    Code:
    javascript:alert(document.compatMode);


    "BackCompat" = Quirks mode
    "CSS1Compat" = Standards mode
    signature

  20. #20
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From that nice link:

    IE 6.0 does not use the standards-compliant mode when rendering well-formed and valid XHTML documents served as text/html, even if CSS Enhancements in Internet Explorer 6 says so. The XML declaration confuses the engine which is to detect the document type. In order to switch to the standards-compliant mode, the DOCTYPE declaration must be the first statement at the top of the document, there must not be any markup or processing instructions before it.

    How can I get my ASPX pages to send the application/xhtml+xml mime type?
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  21. #21
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried out that wonderful javascript, and it says I'm in CSS1Compat mode.... but the width still dosen't match up. I've modified my page to better show the difference between how wide I want the bar and how wide it is being drawn - the link box should line up with the background (give or take the 2px for border).
    Last edited by dalangalma; May 25, 2003 at 20:48.
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  22. #22
    SitePoint Member
    Join Date
    Aug 2001
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn’t try serving your pages as application/xhtml+xml until you’ve got them displaying perfectly as text/html. When served as application/xhtml+xml, one open tag or improperly nested tag, will cause an XML parse error and your pages will not display at all. Internet Explorer (all versions/platforms) and Netscape 4 will prompt for download when pages are served under this mime type. A few developers do test for browser application/xhtml+xml acceptance and send their content accordingly, but Gecko based browsers are the only major Window’s browsers that send application/xhtml+xml in their accept headers. You’ll end up serving text/html to IE and Opera anyway.
    signature

  23. #23
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. Well, it's still all messed up, even though I'm in standards mode.
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/

  24. #24
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes here is a good link on serving xhtml documents as text/xml text/html or application/xhtml+xml:
    http://www.xml.com/lpt/a/2003/03/19/dive-into-xml.html
    Has a php and cgi examle of how to check for acceptance but nothing for ASP.
    -dk
    - Confused? Have another drink.

  25. #25
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *sigh* It just seems that every time I use a UL for my navbar links in any of my pages, I get this extra space in IE, and I just can't account for why.
    Web Design:
    http://www.numbera.com/
    Free Web Design Resources and Software:
    http://brh.numbera.com/


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
  •