1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

My website, small problem

Discussion in 'HTML, Graphics & Programming' started by Six6siX, 19 Jun 2006.

  1. Six6siX

    Mobster

    Joined: 25 Nov 2004

    Posts: 4,787

    Location: Hertfordshire

    Link here Click!

    Everything working ok, but my main problem is the home page doesn't display correctly in Firefox. All other pages are fine... :confused:

    All pages display correctly in IE. Can anyone spot my error?

    Also, any other comments appreciated. :)
     
  2. iCraig

    PermaBanned

    Joined: 21 Apr 2004

    Posts: 13,314

    Location: Wolverhampton

    First things first, place a global margin and padding value at the top of your CSS

    Code:
    * {
      margin: 0px;
      padding: 0px;
    }
    
    This will reset any elements you haven't styled further down your CSS. For example, some elements have different default settings in different browsers.

    This will often muck up layouts, especially in those in which every pixel counts.
     
  3. Six6siX

    Mobster

    Joined: 25 Nov 2004

    Posts: 4,787

    Location: Hertfordshire

    Ok, done that and it basically sets everything to the far left of the screen...do I need to center everything that hasn't been set now?

    Why would FF display all pages except index correctly?
     
  4. iCraig

    PermaBanned

    Joined: 21 Apr 2004

    Posts: 13,314

    Location: Wolverhampton

    Yes, you need to style your DIVs now so that they are back how they were. You'll be secure in the knowledge then that it isn't padding or margins (the most common demon) that is screwing with your layout.

    Do you have different elements on your index page?
     
  5. Augmented

    Soldato

    Joined: 18 Oct 2002

    Posts: 5,464

    Location: London Town

    The problem is caused by the cols attribute of the <textarea> on your front page. 110 is too large a value for the width of the containing element. Reduce the value to make it fit.

    However, a better option would be to not use a <textarea> for that purpose. A <textarea> is a "multi-line text input control" (from W3C Spec), designed for forms. It is not just for the creation of a simple display box that scrolls when content overflows. If you want a scrolling box, use a <div> to contain those <p>aragraphs and set its overflow property to scroll. Use the CSS width/height properties where relevant.
     
    Last edited: 19 Jun 2006
  6. Six6siX

    Mobster

    Joined: 25 Nov 2004

    Posts: 4,787

    Location: Hertfordshire

    Thanks for the replies :)

    I've managed to fix the wierd alignment issues by getting rid of the text input box and replacing it with the div, as suggested and used the overflow. (Is the implementation correct?)

    However, trying to use the global values in the css and then adjusting the individual items to fit, isn't going that well...the elements don't seem to shift where I want them to go. I'm not sure what it is I'm doing wrong, but I'll give it another go later.

    Oh, and somewhere along the line, the footer at the bottom of each page is distorting (getting taller/smaller/moving up the page etc) - but again only in FF.

    edit: just to clarify, the footer moves up the page (doesn't stay at the bottom) in FF, and changes size (but stays at the bottom) in IE.