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 13 of 13
  1. #1
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts

    line-height or padding?

    so i have a banner...

    Code:
    <div id="banner">
    <img id="bannerlogo" border="0" alt="Logo" src="/dana-na/auth/url_0/imgs/CVGlogo2.png"/>
    <div class="bannertext">THIS IS SOME TEXT</div>
    </div>
    i have an image with the following css
    Code:
    #bannerlogo {                   /* Sets heading selector for logo text */
      position: relative;
      float:left;
       margin-left: 17px;
     }
    and text with the following css
    Code:
    .bannertext {                   /* Sets general heading info for banner */
      font-size:20px;
      font-weight:bold;
      padding-left: 11.3em;
      color:#FFFFFF;
      height: 60px;
      line-height: 300%;
    }
    as usual, everything looks fine in firefox... but in ie the div with the text is shifted over to the right a bunch more and it causes a line break....

    so what width wise is hosing me here? what is causing it to sit so far out to the right vs how it displays in ff?
    Last edited by ohgod; 10-28-2009 at 10:11 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2009
    Location
    Earth - sometimes sky :-)
    Posts
    121
    Thanks
    51
    Thanked 2 Times in 2 Posts
    Ok,
    I would try to put the banner tag into a different div element.
    something like this:

    <div id="banner"><img id="bannerlogo" border="0" alt="Logo" src="/dana-na/auth/url_0/imgs/CVGlogo2.png"/></div>

    <div class="bannertext">THIS IS SOME TEXT</div>

    so you have a better control over the div's and you can put your div where you wish.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    so what width wise is hosing me here? what is causing it to sit so far out to the right vs how it displays in ff?
    I can't see anything from the code your provide - and it renders the same in FF3 and IE7 on a brief copy/paste test. Do you have a link to your page? There must be some other factor causing the difference.

  • #4
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    it's a secure page, so i'm sorry to say a link isn't an option. trust me... i'd love nothing more than another set of eyes on it...

    what's killing me is that it renders fine in ff3. i'm using firebug to check the layout and i can't see anything else interfering. the spacing wasn't an issue until i tried to implement line-height to vertically align the text i think...

    i'm aware that different browsers will interpret spacing a bit differently, bit it seems extreme in this case. that said... if i read correctly line-height is based on a percentage of the text size or something like that. so i imagine if it's interpreting it funny it would be off by quite a bit. but, without a tool tl really examine the layout in ie i'm not really sure what to do. i've been tinkering with trial and error but haven't hit it yet.

  • #5
    Regular Coder
    Join Date
    Apr 2009
    Location
    Earth - sometimes sky :-)
    Posts
    121
    Thanks
    51
    Thanked 2 Times in 2 Posts
    can you put any screen shot without links?

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    it's a secure page, so i'm sorry to say a link isn't an option. trust me... i'd love nothing more than another set of eyes on it...
    No worries. Can you post the rest of your code/css, or at least a bit more of it?

    What's your css for #banner? I'm wondering if it's a hasLayout issue that's affecting IE.

    The IE Developer Toolbar isn't half as good as Firebug - but it might give you a bit of a clue. If you do load it up, have a look at #banner and see if it has hasLayout set (shown as -1 in the dev toolbar). If it doesn't that might be the problem. I'm guessing really here though...

    I took all the code you posted and pasted it straight into an empty document - and IE7 and FF3 looked the same to me....

  • #7
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    hasLayout is nowhere in the css that i can find


    so then... first you'll see ff3, with the text that starts with "Hosted" lining up horizontally with the text that reads "Welcome". this is good, and the peasants rejoiced...
    line-height or padding?-ff3.jpg

    and then ie, with a bunch of unexplained spacing in front of the text that starts with "Hosted"
    line-height or padding?-gdie.jpg

    sorry i blacked a good bit out, but you'll be able to see what i mean

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hi there

    First thing I notice from your screenshots is that the font is different in IE -it's larger and sans-serif, whereas in FF3 it's smaller and looks like TNR. What is the css that's controlling this? Can you post your css for #banner?

    Re hasLayout - you won't see it in css anywhere, because it's a proprietary property that IE 7 and under sets based on other css properties. The absence of it can sometimes cause issues.

  • #9
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    as for the fonts, not sure why that is...
    Code:
    p,h1,h2,h3,pre { 		/* Sets common properties of these */
      font-family:Arial, Verdana, Helvetica, sans-serif;
    }
    that's what i have in the css as far as fonts, dunno.

    for banner:
    Code:
    #banner { 			/* Styles the top banner */
      background-color:#336699;
      border-top:1px solid #000000;
      border-left:1px solid #000000;
      border-right:1px solid #000000;
      background-image: url('/dana-na/auth/url_15/imgs/banner2.gif');
      background-repeat: repeat-x;
      voice-family: "\"}\"";
      voice-family: inherit;
      margin-bottom: .5em;
      height: 60px;
    }
    #banner h1 { 			/* Sets heading selector for banner */
      font-size:18px;
      color: #FFFFFF;
      padding:10px 10px 10px 10px;
      margin:10px;
      font-weight: bolder;
      
    }
    not that i see h1 getting used, but what the heck.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Aha!!!

    Nothing to do with your latest post, but the padding-left on #bannertext is 11.3em, so if the font-size is larger in IE it's going to be further over to the left anyway - so that may well be the source of the problem.

    Try adding <h1> tags around "THIS IS SOME TEXT".

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    ..which still doesn't quite do it.

    Try replacing padding-left with margin-left, so you have:

    Code:
    .bannertext {                   /* Sets general heading info for banner */
      font-size:20px;
      font-weight:bold;
      margin-left: 11.3em;
      color:red;
      height: 60px;
      line-height: 300%;
    }

  • Users who have thanked SB65 for this post:

    ohgod (10-28-2009)

  • #12
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    YES

    now.... for bonus points... explain why that made the difference, please

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Well, prior to applying the h1 tags, it doesn't look like there was anything setting the font size of the text within the header, and hence IE was setting a larger font size and the padding-left was larger.

    But even with this sorted the text is still further over in IE - using the IE Dev Toolbar I could see that IE was applying the padding from the right hand edge of the logo, whereas FF was applying it from the left of #header. Changing the padding to margin made both browsers consistent, with the margin applied from the left of #header as expected.

    Glad it's fixed, anyway.


  •  

    Posting Permissions

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