Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member
    Join Date
    Apr 2007
    Posts
    6
    Member #
    15052
    Hey, Im in the process of making my website IE7 compliant
    So in order to remove all <h > tag larger than <h6> (wierd but IE wont accept anything larger than <h6>)
    I made all my <h > tags <h? class="h?">...</h?>
    this has worked perfectly except for one problem
    It leaves huge gaps in my page
    for example http://www.eccentric-toast.com/when.html
    look espically at the left hand side navigation menu.
    Notice the huge amout of space!!

    feel free to look at my css http://eccentric-toast.com/style.css
    all
    .h
    are at the bottom under
    h6 .h?

    chances are its an errant word or something
    but i cant seem to find it
    Any help or advice is apprieciated
    Thanks in advance
    Xhristy

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    22 times
    <h6> is the deepest you can go, and <h1> is the highest level. If you have an <h6>, then you must also have an <h5>, <h4>...<h1>.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    It looks like you didn't define the margins for your heading tags - only for links inside the heading tags. Try setting the margins to 0...
    choosy developers choose gif!
    website | paintings | blog

  5. #4
    Junior Member
    Join Date
    Apr 2007
    Posts
    6
    Member #
    15052
    Right then problem solve
    thanks very much both of you

    It'll just take a couple hours and I'll be IE compliant

    w00t
    YAY

  6. #5
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Many browsers have different defaults - I remember how fustrated I was when firefox went on to shove inline images a few pixels upwards (which I had to counter with an image class to shove back down). Many things like paragraphs and headings also have default stuff.

    So here's the css to turn everything the same everywhere:
    Code:
    * {
      margin: 0;
      padding: 0;
      border: 0;
      font-family: sans-serif;
      font-size: 1em;
      font-weight: normal;
      font-style: normal;
      text-decoration: none;
    }
    Of course this kills some stuff which you may want to keep (like link underlines), so remove (or change) any you think necessary.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  7. #6
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    22 times
    http://developer.yahoo.com/yui/reset/

    I used it for the first time on a new site at work with great success. The design was so CSS-heavy that if I didn't use it, I might have taken double the time I need trying to get browser compatibility working.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  8. #7
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Side note, steax you use * and then define your styles.

    If I copied your code and changed * to html, body would that have the same effect?

  9. #8
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    No ... * applies to ALL elements. Here's a good article that explain this

    http://www.search-this.com/2007/03/1...gin-for-error/
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  10. #9
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Ok, with that done, can someone explain to me while such markup:

    HTML Code:
    <div id="wrapper">
    <img src="images/banner.jpg" />
    <div id="page">
        <p>Some text here...
        </p>
    </div>
    </div>
    Gives a small space between the banner image and the "page" div? I had to counteract that with a small nudge using a style="position: relative; top: 3px;", but is there another way? I've noticed it does the same on Opera too...
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  11. #10
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    This is a quirks mode / strict mode anomaly. Essentially it's caused by using the (correct) closing slash on the img tag.

    To quote this site http://www.quirksmode.org/css/quirksmode.html (the section on img display has the relevant information).

    An image has display: inline by default. Therefore it has a slight space below it, because the image is placed on the baseline of the text. Below the baseline there should be some more space for the descender characters like g, j or q.
    This space for the descender characters is where the 3px gap comes from. An easy way to resolve this is to declare display: block for the img tag but then, of course, this itself can cause problems.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:32 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com