XHTML/CSS Woes

[tam]

Hey All,

Im currently making a website for a friend of mine. Over the past, ive tended to use HTML 4 with a lot of tables to get the look I want. This time however, I decided to play around with the new XHTML and CSS (well its all the rage these days ). Ive been progressing fine, however ive noticed a large amount of space at the bottom of my webpage, for reasons that are unknown to me.

http://kiss.mi-anus.co.uk

Most things on that beta are just div layers with relative placement. Ive also thrown in an iframe. Can someone please tell me whats causing all this space at the bottom? The CSS can be viewed by using the validator link at the top, and the html via notepad, firebird, vim, kitchen sink etc

Cheers,
Tom

 

[Shovel]

In Firebird I actually have a big gap at the top - under the validation links?

You need to be careful with relative positioning: Because it takes the <div> out of the page (therefore any parent <div> doesn't get sized to accomodate it, it just exists as a start point) you can find that layers overlap in ways you don't expect. TechNation also suffers for this and a little javascript is used to resize the content to match the height of the side menu. Maybe you need something similar?

I can't offer much more. The Firebird "Web Developer" plugin may be of some use to you here, it highlights each <div> as a box so you can see where things have ended up. It's rather useful.

I'm afraid I can't offer much more from just looking at the code - it is late after all.

 

[Shovel]

The only other thing would be to remember that relative positioning is worked out from the position of the parent:

e.g. if I have a <div> positioned 300px down the page and put within that another <div> relatively positioned 300px - the second div will appear 600px down from the top of the page.

Looking at the code, I wonder if you need a containing <div> for the <iframe> et al? It doesn't seem quite right that the <iframe> isn't nested in anything at all. That might be something to try.

Do bear in bind that as convenient as iframes are, they can be limiting from a layout point of view, sizing them any any other way but fixed is a pig to get flowing. Maybe you'd be better with a simple inclusion PHP script to load page content, if your host supports that.

 

[tam]

Yeah. Theres meant to be a big gap, ive left it there to place some sort of header graphic inside. I just looked at it in firebird, and there are even more problems :/ The menu text appears to be overlapping the actual layer, and some of the layers are slightly bigger. Rather frustrating

 

[Shovel]

Welcome to the world of standards compliance

There are some rather irritating differences between the way that Internet Explorer renders web pages and the way that everything else does. Generally speak it's easiest to develop for Firebird first, and then hack it a bit to get IE working - though make sure that you check it in both browsers as you go, cause the bigger a problem the more drastic fixing it may turn out to be.

For the time being, I'd recommend using containing <div> tags in each of your vertical sections, like this:

------------------------------------------
                                      Standards Links
------------------------------------------
Graphic Header

------------------------------------------

Page Body


------------------------------------------
Footer
------------------------------------------

You should then be able to absolutely position any horizontal presentation using "position: absolute" within those containers.

If you're plannning something of fixed size (which if you're using an iframe I'd assume you are) then you actually have an advantage, since you can force the container layers to be a specific size. If you decide to create a flowing layout then you'll need to have a little bit of javascript which dynamically sizes up the containers when the page loads, regardless of what content has been loaded.

Reason: Containers which have content in them (e.g. <div>Welcome to my website!</div>) are sized automatically by their content. However, <div>s that contain a <div> that is also relatively or absolutely position do not get resized. Therefore you can find that in the case of my suggestion, the 'footer' section might appear 1 pixel underneath the top of the 'body', despite their being nested <div>s with a fixed position overlapping. When you first see it you think that something isn't working, but it's simply a rule of CSS that you need to be aware of, and knowing it saves a lot of heartache later (experience talking now).

I hope that makes sense, it's quite hard to explain sometimes. The way in which it is resolves is a simple JavaScript function that grabs the height of your left hand content (within the body) and the height of the right hand content and then sets the containing body <div> to be that height. Everything below it then just pops down the page.

 

[Jonty]

Did you ever get any further with this tam? Only your link is seemingly unavailable. Just curious, that's all.

Kind Regards