SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    IE issue with my headings...

    Hi guys,

    Here is the link it looks great in Firefox but in IE, the headings are right snug with the navigation, how can I fix this...

    http://david-mitchell.ca/about/david-mitchell/

    Also in Firefox my blog heading look perfect but in IE it doesnt show the notepad icon next to it, check and see these two pages...

    http://david-mitchell.ca/whats-new-in-ward-11/

    http://david-mitchell.ca/category/blog/

    Thanks,

    Mike

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Hi guys,

    Here is the link it looks great in Firefox but in IE, the headings are right snug with the navigation, how can I fix this...

    http://david-mitchell.ca/about/david-mitchell/

    I haven't checked deep in your code yet but it looks like you are relying on the default margins for your h2 title. IE doesn't apply top margins by default but all other browsers do.
    Code:
    .entry h2.title{margin-top:.8em}
    This will apply to other elements such as all headings,p,ol,ul etc.

    IE just applies a bottom margin and most browsers apply a top and bottom margin by default. Note that the margin amounts vary wildly by browser so you should set them explicitly to your needs.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    For the missing image you will need haslayout on the element.

    e.g.
    Code:
    h2.entry-title{min-height:0}/* ie7*/
    * html h2.entry-title{zoom:1.0}/* ie6*/

  4. #4
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks PAul,

    I sent the min-height:0 in my ie7 css but now take a look the g's, p's etc are getting cut off in IE7, any reason why?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I just checked all 3 pages in IE7 and compared to FF..I didn't see anything being cut off? Which page and where are you seeing it exactly?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Yes I can see it and it seems to be that you haven't allowed enough line-height on the h2.

    Try this.
    Code:
    h2.entry-title {line-height:1.1}

  7. #7
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect thanks


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
  •