SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css+xhtml+p (paragraph) not working

    Hi there,

    after quite some time, i've started making websites again (simply because programming in C++ and perl became fun again ... so my design skills and the know how of CSS+XHTML kinda went down the drain.

    the problem i am having is aligning the footer to be after the navigation bar (vertical list on the left) and the contents section.

    If i were to use tables, this would not be a problem . However using divs/css it is.

    heres the initial site, mading using tables and CSS to color/position it:
    http://ozarion-server.homelinux.net/...ject/index.php

    This layout breaks if I were to view it in IE 5.x/6/7 but works fine in Firefox.

    Then i made another layout using divs:
    http://ozarion-server.homelinux.net/test/index.php

    Which works fine in both firefox and ie (Yay) but, in firefox, for some reason, if i use the <p> tag for text, it breaks. yep. contents moves down and nav does something totally crazy. Footer goes into a world of its own, yet, it works fine in IE...what gives? AM I missing something?

    Been trying to find out ways to fix it but having no luck.

    can someone please be kind and tell me what i am doing wrong?

    thanks to that kind soul...and to you, for reading this .

    cheerio

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you give us a link to a page that doesn't work in Firefox so we can see the problem?

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there,

    thanks for replying, hmmm the second link does not work in firefox, if you click on say about us, you can clearly see the break.

    i've posted an image of the breaks, just so you can see .

    btw, the link that breaks is the about us, and every other page that as the <p> tag in it.
    Attached Images Attached Images

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The global reset will fix your problem

    Code:
    * {
      padding: 0;
      margin: 0;
    }
    However, you don't really need to use the height's in the way that you're using them.

    An easier solution would be to use faux columns

    http://www.alistapart.com/articles/fauxcolumns/

    Also, Paul explained to me yesterday about the problem with the way you're applying the heights:

    Code:
    #left { 
    	float:left;
    	width:15&#37;;
    	background-color: #EEFBFD;
    	min-height:650px; /* for modern browsers */
    	height:auto !important; /* for modern browsers */
    	height:650px; /* for IE5.x and IE6 */
    	border-left: 1px solid #000;
    	border-right: 1px solid #000;
    }
    A much better solution would be

    Code:
    #left { 
    	float:left;
    	width:15%;
    	background-color: #EEFBFD;
    	min-height:650px; /* for modern browsers */
    	border-left: 1px solid #000;
    	border-right: 1px solid #000;
    }
    * html #left {
            height: 650px;
    }
    Although faux columns would be a much better solution in my opinion.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The effect you are seeing is normal margin collapse behaviour, which IE gets wrong. A small top padding on #center will sort that out.

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm very weird, it does not seem to work

    which is not cool, does anyone know how to do a layout like that,

    with a basic header, a nav column on the left, content on the right, footer at the bottom??

    i've been reading so many tutorials, borrowing code from places to try and get things working but it does not work at all?

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ?? Applying the top padding fixes the About Us page :
    Code:
    #center { 
    	margin-left:15%;
    	vertical-align: top;
    	background-color:#F5FBFE; 
    	min-height:650px; /* for modern browsers */
    	height:auto !important; /* for modern browsers */
    	height:650px; /* for IE5.x and IE6 */
    	border-right: 1px solid #000;
    	padding-left: 20px;
    	padding-top: 1px;
    }

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,527
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    alkaif]
    which is not cool, does anyone know how to do a layout like that,
    Yes everybody above has been given you advice but you don't seem to be listening.

    As csswiz said above its a very bad idea to use heights to equalize your column as your content is never likely to be the same size on all pages and limits you to that size forever. Also think about what happens when someone re-sizes the text?

    It's much easier to use the background image trick as shown in the faux column link above.

    The margin collapse effect was explained to you above also so read up on it here. Its quite a complicated subject but has an important effect on how things actually work together.

    with a basic header, a nav column on the left, content on the right, footer at the bottom??
    Here are some links you might find useful.

    http://www.pmob.co.uk/pob/equal-columns.htm
    http://www.pmob.co.uk/temp/2colblog.htm
    http://www.pmob.co.uk/temp/2colwaz.htm
    http://www.pmob.co.uk/temp/2col-toggle2.htm
    http://www.pmob.co.uk/temp/2column_simple_1.htm

    Hope that helps


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
  •