7 replies [Last post]
hit-squad
Offline
Regular
Last seen: 13 years 32 weeks ago
Joined: 2006-10-02
Posts: 13
Points: 0

Im currently working on a website and Im using an attached style sheet with my seperate sections of css in which i refer to in my html using

tags.

I have constructed the site with a wrapper so that everything is contained in it and as i havent specified a height it should just auto adjust to the size of the content within it. Ive put all my spereate containers (divs) inside the wrpaper div tags but its not working. Is it because of padding ive got on inner containers to space it from the edge of the wrapper and if so what should i do?

cheers

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Based on the information

Based on the information presented it's impossible to say! please post code or better a link to the page working live. (ensure markup code is validated for errors and has a full DTD )

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

hit-squad
Offline
Regular
Last seen: 13 years 32 weeks ago
Joined: 2006-10-02
Posts: 13
Points: 0

The site is up

The site is up here

http://www.polkafrome.co.uk you can view the html source

and the css is here http://www.polkafrome.co.uk/styles2.css

Basically In dreamweaver I have everything inside the wrapper and it has a white bg but when i put stuff inside it with padding it just doesnt seem to be inside it

heres a screenshot of whats happening - the yellow border shows the boundary of the wrapper

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Thing is what DW view shows

Thing is what DW view shows is irrelevant never use DW for judging the rendering of your code, only ever trust to that which will actually be presenting your work i.e a browser, looking at the site in IE and FF I see nothing much wrong, the layout seems to render pretty much the same in as much as I can judge how you expect things to look.

As to your screencaps I'm not sure what they are meant to be showing me other than DW proprietary interface.

You do have a number of bad nesting of elements which must be cleared up , using FF and the HTML-Tidy extension will highlight these errors as you go, always validate your markup frequently.

You have one odd div (#blank)last in the markup which is forcing the page to extend due to it's fixed height/width of 800px, not sure what that is about.

One last point I jump up and down in frustration whenever I see that kludgey old MM swap pre doo dah script it's an absolute dinosaur and should have died years ago it has no place in pages simple CSS can dealing with image swapping and combined states of image deal with pre-loading problems.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

hit-squad
Offline
Regular
Last seen: 13 years 32 weeks ago
Joined: 2006-10-02
Posts: 13
Points: 0

Thats cool yeah it does look

Thats cool yeah it does look fine in a browser at the moment but when i dont specify height on my wrapper it doesnt snap to the content.

ill upload what it looks like without any specified height on the wrapper: http://www.vectorsesh.com/site

The reason the blank is in there is to extend the page as on some pages the scrollbar is need thus making pages appear to jump. This way there is a scrollabr on every page.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It doesn't 'snap to' as your

It doesn't 'snap to' as your missing one of the points of floats they are meant to be removed from the flow thus they do not act on their parent containers you need to add overflow:hidden to #wrapper3 or display:table
and IE will also need fixing with Holy hack height 1% filtered from other browsers or you could use display:inline-block along with overflow:hidden but Opera will need #wrapper3 re-setting to display:block afterwards. If you look to the links on the left of the page you will also spot a link and technique to aid in this matter. Also remove the fixed height from #left. Unless you have very specific reason never state heights for elements let content dictate height always, at least nearly always.

You need to scoot over to P.I.E and read up on float behaviour so that you understand these tricky beasts.

You have problems with ID's as well; an ID may only be used once per page you have used an anchor ID twice change it to a class.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

To force a scrollbar, don't

To force a scrollbar, don't mess with the content. Do something like this:

html {
    height: 100%;
    padding-bottom: 1px;
    }

Hugo's suggestions are demonstrated at Enclosing Float Elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

hit-squad
Offline
Regular
Last seen: 13 years 32 weeks ago
Joined: 2006-10-02
Posts: 13
Points: 0

lifesavers

this place is wicked thanks guys youve sorted me out