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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    kb1
    kb1 is offline
    New Coder
    Join Date
    Mar 2007
    Posts
    65
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Why my h1, h2, h3 are in wrong placement?

    Hello

    Tried to change all my custom-named css classes for my headings into the proper h1, h2, h3 respectively...but when I did, these headings are all placed down lower then they should be - look at the text Company at the top of the left menu bar - the text should be exactly in the center of the sky blue rectangle box (not at the bottom of it as is now) and the thin white line should be exactly at the bottom of the blue rectangle, not some distance away as is now ..have a look at

    http://www.iwics.com/Company/siteMap.shtml

    I think the same issue for heading 1 as well...see how the h1 seems placed way down lower from the blue bar on top - too much white space on top of the h1 before the text starts

    http://www.iwics.com/Company/team_europe.shtml

    Here are the headings css - is there a problem?

    h1 { color: #0a4c89; font-size: 24px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; line-height: 28px; text-decoration: none }
    h2 { color: #003366; font-size: 17px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; text-decoration: none }
    h3 { color: #0a4c89; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none }

    Thanks for any help

    KB

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    A picture's worth......................

    This is a screen shot from my PC - IE7, latest version.

    Can't quite see what you mean.

    Frank

    EDIT: I can see what you mean looking at the other url.

    Your html is all about tables which are not considered the proper way to position anything other than tabular data.
    Postiioning is done with CSS.

    Perhaps these sites can help you.

    http://www.positioniseverything.net/
    http://www.brainjar.com/css/positioning/

    Frank
    Attached Thumbnails Attached Thumbnails Why my h1, h2, h3 are in wrong placement?-screenhunter_01-sep.-24-17.22.jpg  
    Last edited by effpeetee; 09-24-2007 at 05:37 PM. Reason: added url
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    kb1 (09-24-2007)

  • #3
    kb1
    kb1 is offline
    New Coder
    Join Date
    Mar 2007
    Posts
    65
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks for reply - interesting...your screen shot shows the text "COMPANY" (upper left light blue rectangle over the left menu bar) as correctly placed, but still the white line under that blue rectangle is supposed to be exactly under the rectangle, not some distance away as is now...also your screen shot shows the text "IWICS site map" as being even further down away from the blue bar above it than is supposed to be...

    On my Safari, FireFox, Opera browsers (latest mac), the text COMPANY always appears at the bottom of the blue rectangle, not centered as it should be, and the white line is always too far away from the blue rectangle as well...the h1 text is too far also from the blue bar above it.

    I know there are usually cross browser issues with css but actually when I had what are now my h1, h2, h3 headings named as .subhead, .heading and .sectionHead everything worked perfectly...But I thought I needed to make them all h1, h2, h3 for proper css...and now I get these issues. Thoughts?

    KB

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Headlines as well as lists, forms, paragraphs and a few other elements have a default margin which you explicitly need to remove (with CSS) if necessary.

  • Users who have thanked VIPStephan for this post:

    kb1 (09-24-2007)

  • #5
    kb1
    kb1 is offline
    New Coder
    Join Date
    Mar 2007
    Posts
    65
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thank you both for the very helpful links and default margin business...that's what I thought re: the margins - so being still not an expert coder, my question is: Do I simply declare something like "margin: .5 em" or 0px, ect?

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    h1 {margin: [whatever you like];} Pixels, ems, percent, centimeters, inches… everything’s allowed.

    I’d suggest, however, to be a little more specific with your selector as the one above will count for all h1s and you might wanna keep the default in some cases.

  • Users who have thanked VIPStephan for this post:

    kb1 (09-24-2007)

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Changing the padding to zero, appears to be in the right direction, at least on my PC

    Frank


    <td class="LTNavBarBG">
    Code:
    <table width="100%" cellspacing="0" cellpadding="0">
    
    <tbody>
    <tr>
    <td>
    <h2>Company</h2>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    kb1 (09-24-2007)

  • #8
    kb1
    kb1 is offline
    New Coder
    Join Date
    Mar 2007
    Posts
    65
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks for all the replies...with both of your help, I think I've finally corrected the headings - see any page

    www.iwics.com

    I've not yet tested any of this on PC, only mac browsers, but it works on mac.

    Here's the code that seems to work:

    h1 {
    color: #0a4c89;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    line-height: 28px;
    text-decoration: none;
    margin-top: auto;
    margin-bottom: 20px;
    }
    h2 {
    color: #003366;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-decoration: none;
    margin: auto;
    }
    h3 {
    color: #0a4c89;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    margin: auto;
    }
    ==============

    BTW, how do I add code properly to these forum posts?

    KB

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    [code][/code] (or by clicking the '#' button in the reply window)

  • #10
    kb1
    kb1 is offline
    New Coder
    Join Date
    Mar 2007
    Posts
    65
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Great - thank you

    kb

  • #11
    kb1
    kb1 is offline
    New Coder
    Join Date
    Mar 2007
    Posts
    65
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Well - having just checked the work on PC browsers, only IE 6/7 still doesn't display the h1, h2, h3 correctly - all other browsers PC/MAC work...any thoughts on a fix for IE?

    www.iwics.com

    KB

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    These are screen shots from my PC for your interest.
    No1 left-IE7
    No2 right - Firefox2

    Frank
    Attached Thumbnails Attached Thumbnails Why my h1, h2, h3 are in wrong placement?-screenhunter_01-sep.-25-19.17.jpg   Why my h1, h2, h3 are in wrong placement?-screenhunter_02-sep.-25-19.21.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    kb1 (09-25-2007)

  • #13
    kb1
    kb1 is offline
    New Coder
    Join Date
    Mar 2007
    Posts
    65
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks again for the screen shots - yes that's exactly what I'm talking about...FF looks great, IE 7 (and 6) no good...the h1 title on the index page - "ODMA™ - Revolutionary, etc" - is too low on IE but more importantly, on all other pages, the white line is still "pushed down" as is the h2 title "Company" or News or Technology" whatever, in the blue rectangle box on top the left nav menu bar. And only IE pushes down all h1 titles on all pages as well.

    Must be IE doesn't respond to my margin declarations but what to do? All other browsers work great, PC/MAC.

    KB

  • #14
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    I think the original reply had it right--the difference you're seeing might have something to do with the default margins and padding applied in various browsers.

    I almost always include a resetting stylesheet (like the popular YUI reset.css) or simply add a * { margin: 0; padding: 0; } declaration to the top of my stylesheet. This overheads a little bit more work having to manually specify padding on things like <ul>s and <p>s, but it definitely affords you the most cross-browser control with markup rendering.

  • #15
    kb1
    kb1 is offline
    New Coder
    Join Date
    Mar 2007
    Posts
    65
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks for thoughts - is there a way I can add some IE only declaration to my CSS so I won't have to manually specify padding on something else? If so, what is the code?

    Thanks
    KB


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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