SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jan 2004
    Location
    Near Portsmouth, UK
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Good, Firefox Bad!

    Well, I've designed the basic layout for my new page.

    I'm having a couple of problems that I know you gurus (!) can help with.

    CSS
    Code:
     html,body {margin:0;padding:0}
     
     BODY 
     {
     background-color: #f4FFFF;
     background-position: 0% 0%;
     background-repeat: no-repeat;
     font-family: Verdana, sans-serif;
     font-size: 12px;
     color: #000000;
     text-align:left;
     } 
     a
     {
     color: #FFFFFF;
     text-decoration: none;
     }
     a:hover 
     {
     text-decoration: none;
     color: #FFFFFF;
     }
     a:visited 
     {
     text-decoration: none;
     color: #FFFFFF;
     }
     #logo
     {
     position: float;
     margin:auto;
     width:100%;
     left: 0px;
     padding: 10px;
     top: 0px;
     border: 1px Solid;
     }
     * html #logo {height:50px}
     
     #right
     {
     position:absolute;
     top:80px;
     right:5px;
     padding: 5px;
     width: 150px;
     height: 60px;
     border: 1px Solid;
     }
     #left 
     {
     position: absolute;
     left:5px;
     padding: 5px;
     width: 150px;
     top: 80px;
     border: 1px solid;
     text-align:left;
     }
     
     #content 
     {
     position: float;
     margin-top:0px;
     margin-left:175px;
     margin-right:175px;
     padding: 5px;
     min-height: 100px;
     text-align:center;
     border: 0px Solid;
     }
     * html #content {height:400px;}
     
     #footer
     {
     position: float;
     margin:auto;
     width:100%;
     left: 0px;
     padding: 10px;
     top: 0px;
     border: 1px Solid;
     }
    HTML:
    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <html>
     <head>
     <LINK href="layout.css" rel=stylesheet type=text/css>
     <title>Page Title</title>
     </head>
     <body>
     
     <div id=logo> Logo</div>
     <div id=right>menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br></div>
     <div id=left>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br>
     menu item 1<br>
     menu item 2<br></div>
     
     <div id=content align="center">
     This will be the main page for the Mini Club Website.<br>
     asdkufyhafsd; yiawevronawevfyonaevwfyounawef vyounavwef#awe <br>
     awevaevwfpoaevwfpmawevfmue vfawuimoea wvfuiomawevfumievawf<br>
     This is just padding to find out what happens with the text.  I hope that it will hit the margin and roll to the next line.
       We'll see!!!!
     </div>
     <div id=footer>
     footer
     </div>
     </body>
     </html>
    Now the problems:

    1. This is good in IE. In Firefox it's jumbled - the footer is half way up the main content.

    2. I would like to add individual sections down the left and right side of the page so that I can declare individual PHP includes (for content) into their own DIVs. Anyone got an idea of how to do this please?

    If it helps, I am aiming for the sections down the left and right as in this site: http://62.254.205.205/hc/

    Thanks in advance for your help folks!

    Collin

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You got that mixed up! IE Bad, Firefox Good!

    You should validate your document and CSS, it will give you insight as to what's wrong with your code. For one, position: float; doesn't mean anything.

    http://www.w3schools.com/css/pr_class_position.asp
    http://www.w3schools.com/css/pr_class_float.asp

    There's all kinds of CSS layouts for the taking that have varying degrees of stability. I've compiled a few in my link directory:

    http://www.xdevdesign.com/search.php...t=all&type=all

  3. #3
    SitePoint Member
    Join Date
    Jan 2004
    Location
    Near Portsmouth, UK
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sport the newbie at this!

    Thanks xDev, I'll have a play.

    Colli

  4. #4
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, our resident CSS guru Paul O'B has a whole whack of near perfect CSS layouts for the taking, here:
    http://www.pmob.co.uk/temp/3colfixedtest_4.htm

  5. #5
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul is definately your man, we have him chained to a computer to output our CSS Complaint code, we pay him in scraps of food and torture him with propriety tags and code that only works in IE.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Thanks xdev for the link (btw your site looks good )

    Collin, heres your code tidied up a bit and the columns floated so that they stay in the flow and push the footer down.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Page Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    BODY 
     {
     margin:5px;
     padding:0;
     background-color: #f4FFFF;
     font-family: Verdana, sans-serif;
     font-size: 12px;
     color: #000000;
     text-align:left;
     } 
     a
     {
     color: #FFFFFF;
     text-decoration: none;
     background-color: #f4FFFF;
     }
     #logo
     {
     padding: 10px;
     border: 1px solid #000;
     min-height:50px;
     }
     * html #logo {height:50px}
     
     #right
     {
     float:right;
     width: 160px;
     margin:10px 0;
     text-align:left;
     }
     #left 
     {
     float:left;
     margin:10px 0;
     width: 160px;
     text-align:left;
     }
     .columninner {
      padding:0 5px;
     border:1px solid #000;
     margin-bottom: 10px;
     }
     #content 
     {
     margin-left:175px;
     margin-right:175px;
     padding: 5px;
     min-height: 100px;
     text-align:left;
     }
     * html #content {height:400px;}
     
     #footer
     {
     clear:both;
     margin-top:10px;
     padding: 10px;
     border: 1px solid #000;
     }
    p {margin-top:0}
    </style>
    </head>
    <body>
    <div id="logo"> Logo</div>
    <div id="right"> 
      <div class="columninner"> 
    	<p>Right content goes here : Right content goes here : Right content goes 
    	  here : Right content goes here : Right content goes here : Right content 
    	  goes here : Right content goes here : Right content goes here : Right content 
    	  goes here : </p>
      </div>
      <div class="columninner"> 
    	<p>Right content goes here : Right content goes here : Right content goes 
    	  here : Right content goes here : Right content goes here : Right content 
    	  goes here : Right content goes here : Right content goes here : Right content 
    	  goes here : </p>
      </div>
    </div>
    <div id="left"> 
      <div class="columninner"> 
    	<p>Left content goes here : Left content goes here : Left content goes here 
    	  : Left content goes here : Left content goes here : Left content goes here 
    	  : </p>
      </div>
      <div class="columninner"> 
    	<p>Left content goes here : Left content goes here : Left content goes here 
    	  : Left content goes here : Left content goes here : Left content goes here 
    	  : </p>
      </div>
      <div class="columninner"> 
    	<p>Left content goes here : Left content goes here : Left content goes here 
    	  : Left content goes here : Left content goes here : Left content goes here 
    	  : </p>
      </div>
    </div>
    <div id="content"> 
      <p> This is the centre content : This is the centre content : This is the centre 
    	content : This is the centre content : This is the centre content : This is 
    	the centre content : This is the centre content : This is the centre content 
    	: This is the centre content : </p>
      <p> This is the centre content : This is the centre content : This is the centre 
    	content : This is the centre content : This is the centre content : This is 
    	the centre content : This is the centre content : This is the centre content 
    	: This is the centre content : </p>
      <p> This is the centre content : This is the centre content : This is the centre 
    	content : This is the centre content : This is the centre content : This is 
    	the centre content : This is the centre content : This is the centre content 
    	: This is the centre content : </p>
    </div>
    <div id="footer"> footer </div>
    </body>
    </html>
    Hope that helps.

    Paul

  7. #7
    SitePoint Member
    Join Date
    Jan 2004
    Location
    Near Portsmouth, UK
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh so simple when you know how! I was looking at a much more complicated solution.

    Paul & xDev (I like your site too!) many many thanks for your help!

    Ian - If you're paying this guy with "scraps" of food, they must be scraps of {insert favourite food here}!

  8. #8
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What can I say, the tortore system works
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Ian

    What can I say, the tortore system works
    lol - Feels like torture sometimes

  10. #10
    SitePoint Member
    Join Date
    Jan 2004
    Location
    Near Portsmouth, UK
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Me again!

    Not a problem, thought you might like a laugh:

    Discussing the layout with a friend and he made this suggestion:

    id reconmend using tables, it will make life easier when you start getting more and more content on. but its upto you. that stylesheet seems to do its job quite wel..
    ....

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Discussing the layout with a friend and he made this suggestion:
    Cross him off your list of friends right now

  12. #12
    SitePoint Member
    Join Date
    Jan 2004
    Location
    Near Portsmouth, UK
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do use "Friend" in the "loosest" sense of the word...


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
  •