We're aware that some users are experiencing technical issues which the team are working to resolve. See the Community Noticeboard for more info. Thank you for your patience.
📨 Have you signed up to the Forum's new Email Digest yet? Get a selection of trending threads sent straight to your inbox daily, weekly or monthly!

style sheet problems

Options
After the helpful response to yesterdays web related question I thought i'd ask one more. I have been asked to update a site on behalf of a charity, I decided to create a css file for it which looks ok (I think) but i noticed yesterday that when you increase the size of the text it causes the parts (header, centerregion and footer) to separate.

I'm not sure why this is happening, they are all contained within a #main container which I would have kept them together.

Current site:http://www.navtifoundation.org/index.htm
Test page:http://vega.soi.city.ac.uk/~gx878/natvi/homepage.htm
Style sheet:http://vega.soi.city.ac.uk/~gx878/natvi/web.css

Any help appreciated
Bronzie
If no-one expected shirts to be ironed then we'd all have time for more important things:T

Comments

  • samhale
    samhale Posts: 413 Forumite
    Unfortunetly I haven't a clue with CSS, hate using it for the tables- why have the image links turned into text?
  • x2o
    x2o Posts: 123 Forumite
    I'm not the greatest when it comes to websites but have you tried using a table set at "0" and then working in it to creat a set place for your items.

    I never find div's that great but as I said I'm not great with all that stuff lol.
    Kind Regards
    x2o :cool2:
  • bronzie
    bronzie Posts: 108 Forumite
    Well I am trying to stay awayy from tables ideally.

    If you are referring to the display:table-row, then I have tried other variations like display:inline but they havent worked either...same problem
    If no-one expected shirts to be ironed then we'd all have time for more important things:T
  • Halloway
    Halloway Posts: 1,612 Forumite
    Try replacing the 'display: table-row;' with 'margin: 0 auto;'

    In Firefox the navigation links are displayed flush left and the above change fixes this. I can't say how it looks in IE though.
  • bronzie
    bronzie Posts: 108 Forumite
    Halloway wrote: »
    Try replacing the 'display: table-row;' with 'margin: 0 auto;'

    Thansk for that, In Firefox the navigation links are displayed flush left and the above change fixes this. I can't say how it looks in IE though.

    That fixes it in FF but in IE problem persists, would rather it was the other way around or better yet worked in both. This stuff is never simple.
    If no-one expected shirts to be ironed then we'd all have time for more important things:T
  • trcooke
    trcooke Posts: 309 Forumite
    Your page rendering is somewhat of a mess, as is the CSS. A clue at the top of your html source code suggests you're using Microsoft Office to do this. Is this so? Office, as with many other WYSIWYG tools, generates some crazy and generally complicated and unnecessary html and css. It makes it very hard to see where you went wrong.

    You say that because everything is contained within your #main area then it should stay together. This isn't so. You have defined no style to your #main div apart from a suggested font-style so the div will grow and shrink to fit everything in it. I suggest that you go back to basics with your div styles and go through it logically and methodically to ensure you understand everything that's going on and ultimately get the correct results.

    When I am starting a new web page I will 'zero out' the browsers default styles using the following CSS:
    body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote !!
        padding: 0;
        margin: 0;
    }
    
    h1, h2, h3, h4, h5, h6, pre, code !!
        font-size: 1em;
    }
    
    a !!
        text-decoration: none;
    }
    
    a img !!
        border: none;
    }
    
    This gives you a blank canvas to work with and ensures that all the style applied to the page is your own and you're not trying to manage different browsers interpretation of your html elements.

    My last snip of advice is that your page here is not very complicated so I'd recommend creating your html and css manually instead of using Office. You'll get better more consistent results in the end.

    ( Note: The !! in the code should be an opening brace. Not sure why it won't display them properly)
  • bronzie
    bronzie Posts: 108 Forumite
    Thanks for the advice trcooke, I will do that.

    I'm using Microsoft Web Expression so that might explain the MS code generally I use Dreamweaver but thought I'd give it a go.

    Thanks again
    Bronzie
    If no-one expected shirts to be ironed then we'd all have time for more important things:T
  • PZH
    PZH Posts: 1,599 Forumite
    Part of the Furniture Combo Breaker
    You could try CSS-Tricks website. Very good tutorials, great downloads and also a user forum with good advice.
    “That old law about 'an eye for an eye' leaves everybody blind. The time is always right to do the right thing.”
This discussion has been closed.
Meet your Ambassadors

🚀 Getting Started

Hi new member!

Our Getting Started Guide will help you get the most out of the Forum

Categories

  • All Categories
  • 350.9K Banking & Borrowing
  • 253.1K Reduce Debt & Boost Income
  • 453.5K Spending & Discounts
  • 243.9K Work, Benefits & Business
  • 598.7K Mortgages, Homes & Bills
  • 176.9K Life & Family
  • 257.1K Travel & Transport
  • 1.5M Hobbies & Leisure
  • 16.1K Discuss & Feedback
  • 37.6K Read-Only Boards

Is this how you want to be seen?

We see you are using a default avatar. It takes only a few seconds to pick a picture.