We'd like to remind Forumites to please avoid political debate on the Forum... Read More »
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

bronzie
Posts: 108 Forumite
in Techie Stuff
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
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
0
Comments
-
Unfortunetly I haven't a clue with CSS, hate using it for the tables- why have the image links turned into text?0
-
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:0 -
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 problemIf no-one expected shirts to be ironed then we'd all have time for more important things:T0 -
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.0 -
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:T0 -
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)0 -
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
BronzieIf no-one expected shirts to be ironed then we'd all have time for more important things:T0 -
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.”0
This discussion has been closed.
Confirm your email address to Create Threads and Reply

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