Yet more weird CSS problems...

[Clare]

There are some interesting anomalies that I cannot find a solution or explanation for.

Unlike the main header, which I discussed a while ago here, the secondary header (byline) was reasonably well-behaved. However, for some reason although the exact same CSS style attributes are called up for h2 on each page, they seem to render slightly differently.

If you look at the page, despite removing any padding from the left and right sides, on some pages there is a slight indent from the right-hand side of the page, cutting into the header space defined by its background color. On others, this is not in evidence. It seems to change depending on the text underneath. A bit like this (here's hoping this works):

IF THE HEADER BACKGROUND IS THIS LONG, THEN

it is because the text underneath it does not extend
beyond the end of a box the same width.

IF THE HEADER BACKGROUND IS AS LONG AS THIS, WHICH

is slightly more, it is because a slightly longer word in the
text below it has stretched the outer boundary of the box a
bit more.

It is also changed by altering the font size or the screen resolution. Is there a way around this? Why does this happen, even when the text underneath the byline is in a different div? I know it is hardly a major error, but I do like to try to get to the bottom of why they happen if I can.

I said "some" problems at the top, but while I was writing this I found a solution to my navigation bullet point dead space in my brand new copy of The CSS Anthology. I'm off to try it out!

[DaveWoods]

Do you have a link to the problem or the full HTML and CSS available?

It sounds like you're probably floating elements which means that they'll only fill as much space as is required unless you provide a width.

If you want them to fill the page or only fill a certain size then you'll need to provide a width or use display: block to get the element to fill 100% (if it isn't already a block level element).

If this doesn't help though, please provide a link or the full code

[Clare]

This is the problem - I am doing the "pretty" bits while someone with a LOT more expertise than me is doing the harder bits. He is also supposed to be organising the domain/hosting side, so it isn't online yet.

I'd love to be able to show you the whole code so that I could have a bit of extra info, but there is such a lot of it, and I don't want to leave anything relevant out when I send you it. If I can't get anywhere with your suggestion, I'll let you have a squint at the whole thing via a PM if necessary.

Things may all change - I just got the CSS Anthology today, so I may find that if I use some of the ideas I like in there it clears up this initial bugbear. Though I suspect I may end up biting off even more of something I hadn't a hope of chewing!

[DaveWoods]

It does certainly sound as though it's because you're relying on the content to provide the width without explicitly setting it yourself so I'd certainly explore that route first.

If it's an inline element then you'll need to either float it first or change it into a block as you can't apply width or height to an inline element.

If you can't provide the fullcode then try putting a little demo together which shows the problem and post that as you'll then be able to apply it to this problem on the full page

[Clare]

You were right - I needed the display: block command to make it work the way I wanted it. I knew that the new book would answer the problem, and you and the book tied for getting me there...

In fact, the biggest problem now is that there are loads of new things I want to try, but the work is currently with the bloke who's doing the difficult bits. I can't really tinker any further until he starts putting things on the web.

I might start a personal site on my "free with your ISP" website space. I just hope that there is enough room to play with all the cool new features!

[Dan Schulz]

Off Topic:

Clare, you could always go with www.awardspace.com for free hosting just to experiment with - if the site takes off, you can still keep the free hosting while adding your own domain name (rather than switching hosts). It also has support for PHP and MySQL (though I heard one, note - one, complaint that the MySQL database is overloaded or "down" at times).

[Clare]

Off-topic reply:

That is really useful info, Dan. Thanks. So far, I'm just at the chin-scratching "what to put on my personal website as content?" stage!

More - and you'll probably groan at this - I have been sent the online link to the main website I was trying to help design, and apart from adding a database and some commands in ASP.NET (which I have yet to learn), there is only my basic work on it that I did ages ago.

I was also told to try Visual Web Developer, which has a WYSIWYG editor in it as well as ASP.NET, and I'm a bit overwhelmed! Watch out for more distress calls, hopefully logged in the appropriate threads...