SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Crossbrowser visibility + some issues

    Hi there guys, been a while.

    I'm making a site for a lawyer ans I'd like to have some advice from you guys.
    In attachment you will find the css-style and the template code.
    I'm trying to work with tables where I usually work with div-tags, because I heard somewhere that tables are better positioned crossbrowser. Is that so?
    I wanted to have some advice from you guys, how to improve this site crossbrowser.
    I'm using a fillimages to have them repeat without being stuck to specific widths.
    However on my footerfill I want the footer against the lefttriangle and aligned to the bottom of the page.. I however don't seem to find the mistake in the tablespecs nor the css-rule to fill it up until the left triangle, + my margin is 0 and still I see a margin in the footer (image 1Chrome).
    As you can see on image 2Firefox, on Firefox my footer is getting repeated, I think this has to do with the valign = middle which firefox can't read? How do I get this straight? How to add this good to my CSS without adapting a lot of the site?
    3rd "issue": As you can see in my code, I made my menu in 1 td with nbsp's. I did that because I couldnt get the positioning clean if I added a Ul or other td's to the table. Is this a justified way with the nbsp's? Any other option?

    Note: this is still a draft, so any other advice, tips would be helpful!

    Thanks a lot in advance guys!
    footerchrome.jpg footerfirefox.jpg template.txt css.txt
    Kind regards
    Maxx-iT

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Maxx-iT View Post
    I'm trying to work with tables where I usually work with div-tags, because I heard somewhere that tables are better positioned crossbrowser. Is that so?
    No, it's not so. Tables were never meant to be used for layout, and table layouts have long since been recognized as a poor choice for page layout ... especially now that CSS is supported in all browsers. So going back to this is retrograde, I'm afraid.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So what do you recommend? Without redesigning the entire site and rewriting the css...
    Is it workable with tables like this crossbrowser? Or just retro?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    My advice would be to start again, but I can understand if you don't want to. I've had a look at your files, but tables layout are not my thing, so I'm not sure I can give much advice. But the first thing you need to do is include a doctype at the top of the page. Even this will do:

    Code:
    <!DOCTYPE html>
    But there needs to be something there to stop the browser going into "quirks mode".

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip.
    If I'd rewrite, div-tags are the way? Any advice on widths and positioning to make it good-looking crossbrowser. Can I basically (simplified) replace the table/tr/td-tags and replace them by divtags? And the properties I added now to the tables make them the same in my css-file for the divtags?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Not much appears on screen with the code you've given, so it's hard to advise. But divs etc are a lot more efficient than tables, so don't just replace all the table bits with divs, as it may be overkill. what would be handy is if you could post a screen shot of the basic layout you want.

    You needn't worry about cross browser layout problems. Standard HTML markup with CSS is totally cross-browser compliant, and has been for years now. IE6 and 7 are the only ones that require close scrutiny—but only if you try to get fancy. They are fine otherwise .. and besides that, they are dead and buried now anyway. IE7 has about a 1% user base, and IE6 far less. I ignore them totally now.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is basically what I want:
    entire sit.jpg

    Still need to adapt colours, photos, but the basic layout should be this.. It's over the entire width of the page and has a steady height.
    Problems I have encountered (cross-browser) by using divtags on horizontal sites is not the width (it's always 100%) but setting the height in a good form (do I use px or % all the way) AND added to that how does it look like (with percentages) if browser is windowed or put half screen or so.
    Notice also in the footer the red rectangle-footer which is not connected to the lefttriangle. Which obv is what we want! This might be sorted out by the correct css-rule with divs?

    Thanks for the advice Ralph!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Maxx-iT View Post
    It's over the entire width of the page
    That can make the site hard to read on wider screens, so it might be worth adding a max-width setting.

    and has a steady height.
    Not exactly sre what you mean by that, but height can be trickier with divs and CSS ... although he best approach is to let the content set the height ... which save a lot of needless hassles. All the same, there are methods for keeping the footer always at the bottom of the screen, if that's what you meant.

    how does it look like (with percentages) if browser is windowed or put half screen or so.
    That's something you need to plan for, that's all.

    Notice also in the footer the red rectangle-footer which is not connected to the lefttriangle.
    That's not difficult to fix, either, but again, does take some careful thought.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Can you post a link to a test site?

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    The trouble shows up in Firefox, too, if you widen the window enough. :-)

    Based on the example posted...

    Add the two entries shown in red to your css:
    Code:
    .menutext p {
        min-width:600px;
    }
    
    p {
        color:#0070c0;
        margin:0px;
    }
    In the html,

    Add a !DOCTYPE to the top of the page. I suggest either:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    or
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Line 55: change the width value from 90% to 100%.
    Code:
    <td valign="top" width="100%">
    Line 62: has a stray </span> tag which can be deleted.

    </span></a></td>

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks you guys for the replies, I've tried to rewrite an entire bunch and tried to put divs in it. I will post the test site tomorrow(hosting is just activated). In attachment you have a screenshot of the acual site as it is now (still need to change colours and stuff), as the basic layout should be.
    My adatepd CSS and template code is also in it. Would you mind checking it out and possibly clean a little bit of the errors I made? Any tips to change something?
    sitepreview.jpg css.txt template.txt
    Thanks!

  12. #12
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just found out a little mistake, if you watch to the image in my previous post, you can see in the header that under the logo (in white) there appears to be 1px headerfill or something. This cause the alignment of the menu to be not exactly straight onto the right part( the guy's head) off the header. It should appear as this is an uninterrupted line, but now it isn't.
    Just checked my css, but didn't find out where the error is..
    Any help?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Still a lot of tables in there. Without the images, it's hard to see what's going on here. Is it possible to post this online? If you have a website, you could post this as a test page.

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah I agree, but at least now the entire page isn't a table. I have now 3 tables, I just couldn't get the header and footer placed in a correct way with the divs. It took me a while to place them as they are now inside the divs. With those images and fillers I didn't see another option (in my abilities, I must say).
    I used a table in the content aswell because I wanted to make a distinction between the left and right part (and leave some options open for maybe a jquery slideshow of images in the left part) and again it was easier to place that with a table.
    I'm currently at work, but when I arrive home, I will put the site online on my page so you can have a look. I you have a look, can you tell me where I went wrong, or what can be better. And how on earth I can get the header and footer correct with divs :-).
    p.s. Problem of previous post has been fixed by now.

    Thanks!

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, let us know when it's online.

  16. #16
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok guys, managed to upload the site. Adapted the colours a bit, but still needs some change. http://www.advocaat-kvd.be/
    I know the lawyer I'm making the site for has requested this lay-out, but in my opinion it's a bit too boring.
    I added some shadows to the menu and content to make it a bit more pleasing, but do you have any other tips to make this more appealing?
    And if you care to help me out cleaning the code?

    Thanks heaps!

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Cool, is there an actual problem you want help with, or are you really just asking for a review at this point?

  18. #18
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmz, lets say a review, but if you encounter any problems in the code and any other tips to "enlighten" the site, let me know please.

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Maxx-iT View Post
    hmmz, lets say a review
    OK, no problem, but the CSS forum isn't for reviews. There's a forum specifically for reviews:

    http://www.sitepoint.com/forums/foru...-amp-Critiques

    But before posting there, please read these guidelines:

    http://www.sitepoint.com/forums/show...sting-a-review

    So please post there for a review. If you have any questions about the actual code, like how to do something specific, that can go here.

  20. #20
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks for the tip, will do!

    You in particular have any (CSS-) tips for making it a bit more attractive?

    Thanks for everything


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
  •