CSS and HTML

Discussion in 'OT Technology' started by Rommel, Oct 29, 2004.

  1. Rommel

    Rommel friends forever

    Joined:
    Jul 31, 2001
    Messages:
    36,867
    Likes Received:
    0
    Location:
    /yourself now
    For a pure CSS site where the whole layout is managed with css how do you guys go about doing it:

    Do you enclose it within a box (basically another div#box{width:600px;height:600px} so that you know everything will line up within it or can you just do it like a jigsaw. Which is the most practical?

    At the moment im trying the jigsaw approach and while it looks great on firefox it is out of place (by a few pixels) on IE. Is there a reason for this that can be fixed or am i just going to have to live with IE being crap.

    What do you guys recommend?
     
  2. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    usually it's firefox that doesn't follow the css guidelines. Despite the popular "hate ms" mentality, msie6 does a fine job with rendering css-compliant layouts.
     
  3. robx

    robx Guest

    I hope you're kidding...
     
  4. CompiledMonkey

    CompiledMonkey New Member

    Joined:
    Oct 26, 2001
    Messages:
    8,528
    Likes Received:
    0
    Location:
    Richmond, VA
    :ughd:
     
  5. ez4me2c3d

    ez4me2c3d Guest

    actually firefox is not 100% compliant so it does mess a few things up , but IE does take the prize for the majority of the problems.

    the best way i have found to code is to use containers. but to also keep in mind that most of your regular html is a container (each tag makes an element, which is a box) so use as few helper containers as possible.

    also, i keep all of my functional styling in one document and the graphical in another. this way if i want to change the graphical (colors and images) look and feel without messing around with layout, i can.

    not that my site is the example of all exmaples but take a look at how i achieved this layout.

    site http://aeholloway.com
    functional style http://aeholloway.com/css.v1/functional.css
    graphical style http://aeholloway.com/css.v1/graphical.css

    for a really nice example take a look at http://mezzoblue.com
     
  6. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    :werd: However, if you specify the URL for the spec in your doctype tag, Firefox will render it exactly according to the spec.
     
  7. robx

    robx Guest

    Maybe it renders it correctly according to spec because FIREFOX IS FOLLOWING STANDARDS and how it should be?
     
  8. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    If you don't give it the URL to the spec, it renders it correctly but in "loose" mode. However, if you specify the URL then it's exactly to spec and doesn't assume anything.
     
  9. Rommel

    Rommel friends forever

    Joined:
    Jul 31, 2001
    Messages:
    36,867
    Likes Received:
    0
    Location:
    /yourself now
    But surely if say IE has a different standard (slight size difference)for the pixels then because all the attributes will be subjected to this change it will still match.

    Can anyone shed some light on this for me?

    Heres the code at the moment

    Pretty simple stuff, and yes i have linked the stylesheet, i jsut didnt wanna clutter teh screen for you people
    Code:
    <body>
    <!--This is the whole site template-->
    
    
    <div id="banner"></div>
    <div id="sidecol"></div>
    <div id="content"></div>
    <div id="third"></div>
    <div id="base"></div>
    
    
    
    </body>
    Here is the CSS
    Code:
    body {background:pink;}
    div#panel {width:766px;}
    
    div#banner {background:white url("pictures/banner.png") no-repeat; width:761px; height: 121px;border-left: 5px solid white;border-top: 5px solid white;border-right: 5px solid white}
    
    
    
    div#sidecol{background: red url("pictures/bobo.gif") no-repeat; height:600px; width:123px;border-left:5px solid white;}
    
    
    
    div#content {background:white; height:600px; width:600px;position:absolute; top:134px; left:133px;}
    div#third   {background:blue url("pictures/bobo2.gif") no-repeat;  height:600px; width:42px; position:absolute; top:134px; left:732px; border-right:5px solid white;}
    
    div#base    {background:green; height:100px; width:761px; border-left:5px solid white; border-right:5px solid white; border-bottom:5px solid white;}
    
    
    
    
    /*
    *
    */
     
  10. Rommel

    Rommel friends forever

    Joined:
    Jul 31, 2001
    Messages:
    36,867
    Likes Received:
    0
    Location:
    /yourself now
    As you can see its pretty basic at the moment but i wanna figure out the little things before i get to the content and stuff. I wanna sort the problems out at the simple level
     
  11. Rommel

    Rommel friends forever

    Joined:
    Jul 31, 2001
    Messages:
    36,867
    Likes Received:
    0
    Location:
    /yourself now
    I don't really wanna work with percentages inside a panel, that would be a horrible solution to something i wanna do the right way

    can anyone tell my what something like this entails

    html>body #text #column1

    I know that text contains column 1 and column 2, what does the greater than symbol represent?
     
  12. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    To be honest, I gave up on trying to use DIVs. Tables are old-school and allow a little less control, but they're far easier to make render properly.
     
  13. Rommel

    Rommel friends forever

    Joined:
    Jul 31, 2001
    Messages:
    36,867
    Likes Received:
    0
    Location:
    /yourself now
    any help Compiled Monkey?
     

Share This Page