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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Basic layout is already effected by bugs! Anyone explain please?

    Hi.

    www.thunderin.co.uk/shaun/v3

    This is a basic layout. The only content is in the header so far and it consists of an image and some text, a heading.

    In Firefox 2 it looks exactly as I want it but in others...

    In IE7 the text of the heading is so big it outgrows the heading div. Unless I set the text size to smallest but isn't the default the middle size?

    In IE7 the next div, the mainnav, butts up tight against the header instead of the gap I have in FF.

    In Opera 9.10 the logo rises up out of it's div completly and the text is also larger, but not so big as IE.

    I know there are bugs. Can anyone point out to me exactly WHAT bugs these are so I can implement workarounds before I get any further?

    Oh yes, I know it fails validation on the image attributes. To be strict how can I get the text next to the image WITHOUT the " align="left" "?

    Many many thanks?

    Mike.

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    For the text in the div, you might want to play around with the CSS overflow property.

    This bit of CSS should get the text next to the image

    CSS Code:
    Code:
    img#header_image
    {
    float:left;
    }
    HTH
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    I couldnít really be bothered to study your stylesheet as reading it is really nasty with all those tab spaces between the property and the value. A single white space is sufficient and easy to read:
    Code:
    selector {
      property1: value;
      long-property: value2;
    }
    Next: You h1 has a percent unit. Different browsers have a different default font sizes, especially for headlines. Percents are relative, that means the default size is kept and just scaled to whatever you tell it which results in different font sizes remaining differently in different browsers, just that they are rescaled.
    One of the easiest things is to set the body font size to 62.5% and then use em as units. Why 62.5%? Because that makes 1em equal 10px, 1.5em = 15px etc. Itís easy to work with and keeps the font size equal in all browsers while maintaining scalability in IE.

    Another headline thing that isnít so obvious: Headlines have a default top and bottom margin, and they interact with other margins (so called collapsing margins). Thatís probably why in Opera the logo freaks out (on first sight).

    Secondly: Use float: left; instead of align="left" then your page will validate as strict HTML.
    Code:
    #header img {float: left;}
    That are the things that I would suspect without having tried everything.

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by whizard View Post
    For the text in the div, you might want to play around with the CSS overflow property.
    Thanks, first thing on my list of todo's.

    Quote Originally Posted by whizard View Post
    This bit of CSS should get the text next to the image

    CSS Code:
    Code:
    img#header_image
    {
    float:left;
    }
    HTH
    Dan
    And again. Thanks from a HTML newbie.

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    I couldnít really be bothered to study your stylesheet as reading it is really nasty with all those tab spaces between the property and the value. A single white space is sufficient and easy to read:
    Hi and thanks for taking the time to look.

    I have NoteTabPro set to a tab size of just 2 so it looks much tighter on my screen than it might otherwise.

    Quote Originally Posted by VIPStephan View Post
    Next: You h1 has a percent unit. Different browsers have a different default font sizes, especially for headlines. Percents are relative, that means the default size is kept and just scaled to whatever you tell it which results in different font sizes remaining differently in different browsers, just that they are rescaled.
    One of the easiest things is to set the body font size to 62.5% and then use em as units. Why 62.5%? Because that makes 1em equal 10px, 1.5em = 15px etc. Itís easy to work with and keeps the font size equal in all browsers while maintaining scalability in IE.
    I was following a guideline I read somewhere else, in theory allowing a user to scale the text as much as they like if they have sight problems. At least, I thought I was. Thanks for this way. I'll play with it this afternon and see what transpires.

    Quote Originally Posted by VIPStephan View Post
    Another headline thing that isnít so obvious: Headlines have a default top and bottom margin, and they interact with other margins (so called collapsing margins). Thatís probably why in Opera the logo freaks out (on first sight).
    I've heard of IE collapsing margins by removing the smaller of the two when they butt together, didn't know Opera had similar.

    Quote Originally Posted by VIPStephan View Post
    Secondly: Use float: left; instead of align="left" then your page will validate as strict HTML.
    Code:
    #header img {float: left;}
    That are the things that I would suspect without having tried everything.
    Again, a big thanks for taking the time to look at a wannabe's attempt. Much apprecieated.



  •  

    Posting Permissions

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