Prev: "Unknown error" when trying to save Flash Text
Next: How do you tell the browser what to load first?
From: peterFrosta on 19 Jun 2008 12:32
Hello all,
I'm having a problem in Firefox where text within a header cell, which
displays properly in IE, is wrapping onto another line. You can see what I'm
talking about at www.studio109plc.com .. the "JIM ROUNSEVELL ARCHITECTURE +
PHOTOGRAPHY" is supposed to be 1 line, like in IE. In FF it's making 2. I
have no idea how to fix this, anyone have suggestions?
Thanks,
Peter

CODE ON PAGE:
<table width="900" border="0" cellpadding="0" id="h1">
<tr>
<th width="564" scope="col">&nbsp;</th>
<th width="330" scope="col"><span class="style1"><a
href="Profile/resume.html">jim rounsevell</a> <a
href="approach.html">architecture</a> + <span id="tdPhotoActive"><a
href="Photography/photography.html">photographY</a></span></span></th>
</tr>
</table>

CSS FOR TABLE HEADER/OVERALL TABLE:
#h1 {
text-align: left;
font-weight: bold;
text-transform: uppercase;
font-size: 11.5px;
letter-spacing: 1.5px;
vertical-align: middle;
background-color: #474F49;
height: 30px;
width: 900px;
margin-top: 40px;
}
#tableLayoutMain {
background-color: #474F49;
height: 400px;
width: 900px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
border-top-style: solid;
border-bottom-style: solid;
text-align: justify;
vertical-align: top;
}

From: Roy Reed on 19 Jun 2008 12:41
peterFrosta wrote:
> Hello all,
> I'm having a problem in Firefox where text within a header cell, which
> displays properly in IE, is wrapping onto another line. You can see what I'm
> talking about at www.studio109plc.com .. the "JIM ROUNSEVELL ARCHITECTURE +
> PHOTOGRAPHY" is supposed to be 1 line, like in IE. In FF it's making 2. I
> have no idea how to fix this, anyone have suggestions?
> Thanks,
> Peter
>
> CODE ON PAGE:
> <table width="900" border="0" cellpadding="0" id="h1">
> <tr>
> <th width="564" scope="col">&nbsp;</th>
> <th width="330" scope="col"><span class="style1"><a
> href="Profile/resume.html">jim rounsevell</a> <a
> href="approach.html">architecture</a> + <span id="tdPhotoActive"><a
> href="Photography/photography.html">photographY</a></span></span></th>
> </tr>
> </table>
>
> CSS FOR TABLE HEADER/OVERALL TABLE:
> #h1 {
> text-align: left;
> font-weight: bold;
> text-transform: uppercase;
> font-size: 11.5px;
> letter-spacing: 1.5px;
> vertical-align: middle;
> background-color: #474F49;
> height: 30px;
> width: 900px;
> margin-top: 40px;
> }
> #tableLayoutMain {
> background-color: #474F49;
> height: 400px;
> width: 900px;
> border-top-width: 1px;
> border-bottom-width: 1px;
> border-top-color: #FFFFFF;
> border-right-color: #FFFFFF;
> border-bottom-color: #FFFFFF;
> border-left-color: #FFFFFF;
> border-top-style: solid;
> border-bottom-style: solid;
> text-align: justify;
> vertical-align: top;
> }
>

<table id="h1" width="900" border="0" cellpadding="0">
<tbody><tr>
<th scope="col"><span class="style1"><a
href="Profile/resume.html">jim rounsevell</a> <a
href="approach.html">architecture</a> + <span id="tdPhotoActive"><a
href="Photography/photography.html">photographY</a></span></span></th>
</tr>
</tbody></table>

#h1 {
text-align: right;
font-weight: bold;
text-transform: uppercase;
font-size: 11.5px;
letter-spacing: 1.5px;
vertical-align: middle;
background-color: #474F49;
height: 30px;
width: 900px;
margin-top: 40px;
}

Add 'padding-right: Xpx;' to the style if you don't want the text at the
r/hand edge of the cell.

Roy
From: peterFrosta on 19 Jun 2008 14:12
thanks for the help! it's no longer wrapping.

the reason i had initially put 2 cells in the header table instead of 1 was
because i wanted the JRA+P title to align with the left-hand side of the text
columns. interestingly enough, in firefox designating the title to align to
the right and putting the "letter-spacing: 1.5px;" makes everything spread
evenly and align to the left. however, now in IE the text is crammed to the
right and doesn't align with the rest of the text.

why would this work in FF but not IE? does a letter spacing of non-integer
pixels not register with IE or something?

any further suggestions as to how i can get the title to spread evenly in both
IE + FF would be greatly appreciated!!!

From: Roy Reed on 19 Jun 2008 14:21
peterFrosta wrote:
> thanks for the help! it's no longer wrapping.
>
> the reason i had initially put 2 cells in the header table instead of 1 was
> because i wanted the JRA+P title to align with the left-hand side of the text
> columns. interestingly enough, in firefox designating the title to align to
> the right and putting the "letter-spacing: 1.5px;" makes everything spread
> evenly and align to the left. however, now in IE the text is crammed to the
> right and doesn't align with the rest of the text.
>
> why would this work in FF but not IE? does a letter spacing of non-integer
> pixels not register with IE or something?
>
> any further suggestions as to how i can get the title to spread evenly in both
> IE + FF would be greatly appreciated!!!
>

Non-integer letter-spacing works OK for me in IE7 and Firefox, right or
left-aligned.

Roy
 | 
Pages: 1
Prev: "Unknown error" when trying to save Flash Text
Next: How do you tell the browser what to load first?