...

View Full Version : Resolved line-height or padding?



ohgod
10-27-2009, 06:49 PM
so i have a banner...


<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

#bannerlogo { /* Sets heading selector for logo text */
position: relative;
float:left;
margin-left: 17px;
}

and text with the following css

.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?

joda
10-27-2009, 07:29 PM
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.

SB65
10-27-2009, 07:40 PM
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.

ohgod
10-27-2009, 10:10 PM
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.

joda
10-27-2009, 10:30 PM
can you put any screen shot without links?

SB65
10-27-2009, 10:42 PM
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 (http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en) 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....

ohgod
10-28-2009, 02:42 PM
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...
7877

and then ie, with a bunch of unexplained spacing in front of the text that starts with "Hosted"
7878

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

SB65
10-28-2009, 03:27 PM
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.

ohgod
10-28-2009, 03:53 PM
as for the fonts, not sure why that is...

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:

#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.

SB65
10-28-2009, 04:07 PM
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".

SB65
10-28-2009, 04:14 PM
..which still doesn't quite do it.

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


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

ohgod
10-28-2009, 10:10 PM
YES

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

SB65
10-29-2009, 09:36 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum