Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Site should start at top but doesn't

    Hi there,
    in the very early stage of designing a site I have tested the existing code in several browser to avoid late and nasty surprises, but there is already one:

    The top element should start at the very top of the page (No border, padding, margin or whatever kind of space). In IE it does, which is fine, in ALL other browsers i t doesn't :there is a black space on top of the top element which I can't get rid of.
    I am used to the situation that all broesers work fine and IE is messing up, but here it seems to be the other way round.

    What have I coded incorrectly? Can anybody help to stick the page to to top edge of the browser? I am grateful for any comments.

    It looks like this:

    http://www.learn-german-thoroughly.de/newsite.php

    The css is attached. It is very simple; nearly naked, but already causing problems. Please help if you can.

    Thanks a lot!
    Attached Files Attached Files

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    take display: inline-block out from * on line 4 of css

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, that was not only a quick response - it was also a very good one!
    Thanks!
    Have just tried it, and now it looks as it should in all browsers. Brilliant.

    Could you also give me a quick hint why this is the case; I (being beginner) don't fully understand it. That would be splendid!

    Anyway, thanks a lot for the help

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    because * is setting to all elements, including the <head>, therefore you set the <head> to display: inline-block. Now it has a height on your page. You don't need inline-block to all elements and I would actually advice you to not use it in the future, since I believe the browser support is not safe to use it freely

  • #5
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Very good point; I wasn't aware that * includes the header as well and was therefore stupidly wondering what this 'something' at the top might be.... now I know.
    Thanks again; I'll see if I can proceed without display: inline block.
    Good night.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    forgot to post this in my previous post

    <head> is by default display: none;, changing it to inline-block gives it a space on the page


  • #7
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    899
    Thanks
    0
    Thanked 118 Times in 117 Posts
    Quote Originally Posted by SuperSriver View Post
    Very good point; I wasn't aware that * includes the header as well and was therefore stupidly wondering what this 'something' at the top might be.... now I know.
    Thanks again; I'll see if I can proceed without display: inline block.
    Good night.
    you could do:
    Code:
    body * {display:inline-block;}


  •  

    Posting Permissions

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