SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast Clare's Avatar
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    28
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Yet more weird CSS problems...

    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!
    Last edited by Clare; Oct 16, 2007 at 12:17. Reason: Clarity

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Enthusiast Clare's Avatar
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    28
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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!
    Last edited by Clare; Oct 16, 2007 at 14:10. Reason: Anyone else get this whole teh and taht problem?

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Enthusiast Clare's Avatar
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    28
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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!

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  7. #7
    SitePoint Enthusiast Clare's Avatar
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    28
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •