CSS - adding a break tag

Hello,
I am having a situation where I want to a split the long word into two by adding a break between them but when I add a <BR> tag its loosing its original positioning. Please can someone advise If I can use some sort CSS style attributes to fix this?
Thanks
S
URL.txt
LVL 8
newbie27Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JF0Commented:
can you give an example?
0
blueraven07Commented:
When you're adding the <br /> tag, is the entire nav bar breaking? It looks like you're CSS is using the <a> tag to assign the layout. If you want to break up individual tabs, you'll need to use floating <div> tags, and assign the CSS to them, not the <a> tags
<!-- Instead of: -->
<a id="ctl00_lnkCandles" class="toptab_cand_off menuitem" href="ProductRange.aspx?RangeID=CAND" style="display:inline-block;color:Black;height:25px;width:96px;">Therapy Candles</a>

<!-- Add a <div> around it: -->
<div class="toptab_cand_off menuitem"><a id="ctl00_lnkCandles" href="ProductRange.aspx?RangeID=CAND" style="display:inline-block;color:Black;height:25px;width:96px;">Therapy<br />Candles</a></div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
newbie27Author Commented:
Hi JF0
Example is in the attached URL.txt file above.

blueraven07
thansk for your input, let me try your suggestion...

thanks
s
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

newbie27Author Commented:
hello again,
when i use this

<div class="toptab_persit_off menuitem"><asp:HyperLink ID="lnkPersonaliseIt" runat="server" NavigateUrl="ProductRange.aspx?RangeID=PERS" Height="25px" Width="95px" Text="Personalise<br/>It" ToolTip="Personalised Gifts" ForeColor="Black"></asp:HyperLink></div>

I am only getting "Personalise" being displayed ....

Please advise

0
David S.Commented:
The second line of text is hidden because the tabs aren't tall enough for the second line to not overflow. It sounds like you're describing an IE7 bug where overflowing content is incorrectly hidden.
0
Michel PlungjanIT ExpertCommented:
try
Psycho<wbr />analysis
0
raj3060Commented:
Use taller images.
Can you post css code for tabs?
0
newbie27Author Commented:
please have the HTML and CSS attached

 <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">                                    
                                    <tr>
                                        <td valign="middle" align="right">                                        
                                            <table>
                                                 <tr>
                                                   <td valign="middle" align="right">
                                                        <asp:HyperLink ID="lnkPersonaliseIt" runat="server" NavigateUrl="ProductRange.aspx?RangeID=PERS" CssClass="toptab_persit_off menuitem" Height="25px" Width="95px" Text="Personalised It" ToolTip="Personalised Gifts" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image4" runat="server" ImageUrl="~/images/spacer.gif" Width="1px" Height="1px" /><asp:HyperLink ID="lnkGrowIt" runat="server" NavigateUrl="ProductRange.aspx?RangeID=GROW" Text="Grow It" CssClass="toptab_grow_off menuitem" Height="25px" Width="48px" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image5" runat="server" ImageUrl="~/images/spacer.gif" Width="2px" Height="1px" /><asp:HyperLink ID="lnkPaperAnimationKits" runat="server" NavigateUrl="ProductRange.aspx?RangeID=3" Text="Paper Animation Kits" CssClass="toptab_paper_off  menuitem" Height="25px" Width="124px" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image9" runat="server" ImageUrl="~/images/spacer.gif" Width="2px" Height="1px" /><asp:HyperLink ID="lnkPersonalisedClassics" runat="server" NavigateUrl="ProductRange.aspx?RangeID=CLASSIC" Text="Personalised Classics" CssClass="toptab_classic_off menuitem" Height="25px" Width="124px" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image7" runat="server" ImageUrl="~/images/spacer.gif" Width="1px" Height="1px" /><asp:HyperLink ID="lnkLearnIts" runat="server" NavigateUrl="ProductRange.aspx?RangeID=LEAR" Text="Master the art of..." CssClass="toptab_classic_off menuitem" Height="25px" Width="110px" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image6" runat="server" ImageUrl="~/images/spacer.gif" Width="1px" Height="1px" /><asp:HyperLink ID="lnkCandles" runat="server" NavigateUrl="ProductRange.aspx?RangeID=CAND" Text="Therapy Candles" CssClass="toptab_cand_off menuitem" Height="25px" Width="96px" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image8" runat="server" ImageUrl="~/images/spacer.gif" Width="1px" Height="1px" /><asp:HyperLink ID="lnkMugs" runat="server" NavigateUrl="ProductRange.aspx?RangeID=MUGS" Text="Crayon Mugs" CssClass="toptab_mugs_off menuitem" Height="25px" Width="76px" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image10" runat="server" ImageUrl="~/images/spacer.gif" Width="1px" Height="1px" /><asp:HyperLink ID="lnkStamps" runat="server" NavigateUrl="ProductRange.aspx?RangeID=STAMP" Text="The Stamp Collection" CssClass="toptab_classic_off menuitem" Height="25px" Width="124px" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image11" runat="server" ImageUrl="~/images/spacer.gif" Width="1px" Height="1px" /><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="ProductRange.aspx?RangeID=GROW" Text="Craft It" CssClass="toptab_grow_off menuitem" Height="25px" Width="48px" ForeColor="Black"></asp:HyperLink>
                                                       <%--<asp:HyperLink ID="lnkPersonaliseIt" runat="server" NavigateUrl="ProductRange.aspx?RangeID=PERS" Text="Personalise It" CssClass="toptab_off menuitem" Height="25px" ToolTip="Personalised Gifts" Width="123px" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image4" runat="server" ImageUrl="~/images/spacer.gif" Width="2px" Height="1px" /><% If SessionData.Language = "UK" Then%><asp:HyperLink ID="lnkGrowIt" runat="server" NavigateUrl="ProductRange.aspx?RangeID=GROW" Text="Grow It" CssClass="toptab_off menuitem" Height="25px" Width="123px" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image5" runat="server" ImageUrl="~/images/spacer.gif" Width="1px" Height="1px" /><%End If %><asp:HyperLink ID="lnkPaperAnimationKits" runat="server" NavigateUrl="ProductRange.aspx?RangeID=3" Text="Paper Animation Kits" CssClass="toptab_wide_off menuitem" Height="25px" Width="149px" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image7" runat="server" ImageUrl="~/images/spacer.gif" Width="1px" Height="1px" /><asp:HyperLink ID="lnkLearnIts" runat="server" NavigateUrl="ProductRange.aspx?RangeID=LEAR" Text="Learn It" CssClass="toptab_off menuitem" Height="25px" Width="123" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image6" runat="server" ImageUrl="~/images/spacer.gif" Width="2px" Height="1px" /><asp:HyperLink ID="lnkCandles" runat="server" NavigateUrl="ProductRange.aspx?RangeID=CAND" Text="Therapy Candles" CssClass="toptab_off menuitem" Height="25px" Width="123px" ForeColor="Black"></asp:HyperLink><asp:Image ID="Image8" runat="server" ImageUrl="~/images/spacer.gif" Width="2px" Height="1px" /><asp:HyperLink ID="lnkMugs" runat="server" NavigateUrl="ProductRange.aspx?RangeID=MUGS" Text="Crayon Mugs" CssClass="toptab_off menuitem" Height="25px" Width="123px" ForeColor="Black"></asp:HyperLink>--%>
                                                   </td></tr>
                                             </table>
                                        </td>
                                    </tr>
                                    </table>
.menuitem {
	display:table-cell;
	font-weight:normal;
	font-size:7.5pt;
	text-decoration:none;
	padding: 0px 0px 0px 0px;
	text-align: center;
	vertical-align:top;
	margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    background-repeat: no-repeat;
	background-position: 0px 0px;
	line-height:20px;
}

.toptab_on {
    color: White;
	background-image: url(../images/Top-Tab-Over.gif);
}
.toptab_off 
{
    color: black;
    font-weight: bold;
	background-image: url(../images/Top-Tab.gif);	
}

.toptab_wide_on {
    color: White;
	background-image: url(../images/Top-Tab-Wide-Over.gif);
}
.toptab_wide_off 
{
    color: black;
    font-weight: bold;
    width:30px;
    white-space:pre-wrap;
	background-image: url(../images/Top-Tab-Wide.gif);	
}

.toptab_persit_on {
    color: White;
	background-image: url(../images/Top-Tabpersonaliseit-red.jpg);
}
.toptab_persit_off 
{
    color: black;
    font-weight: bold;
	background-image: url(../images/Top-Tabpersonaliseit.jpg);	
	white-space:pre;
}

.toptab_grow_on {
    color: White;
	background-image: url(../images/Top-Tabgrowit-red.jpg);
}
.toptab_grow_off 
{
    color: black;
    font-weight: bold;
	background-image: url(../images/Top-Tabgrowit.jpg);	
}


.toptab_paper_on {
    color: White;
	background-image: url(../images/Top-Tabpkits-red.jpg);
}
.toptab_paper_off 
{
    color: black;
    font-weight: bold;
	background-image: url(../images/Top-Tabpkits.jpg);	
}


.toptab_classic_on {
    color: White;
	background-image: url(../images/Top-Tabpclassics-red.jpg);
}
.toptab_classic_off 
{
    color: black;
    font-weight: bold;
	background-image: url(../images/Top-Tabpclassics.jpg);	
}

.toptab_mao_on {
    color: White;
	background-image: url(../images/Top-Tabmastertheartof-red.jpg);
}
.toptab_mao_off 
{
    color: black;
    font-weight: bold;
	background-image: url(../images/Top-Tabmastertheartof.jpg);	
}

.toptab_cand_on {
    color: White;
	background-image: url(../images/Top-Tabtherapycandles-red.jpg);
}
.toptab_cand_off 
{
    color: black;
    font-weight: bold;
	background-image: url(../images/Top-Tabtherapycandles.jpg);	
}

.toptab_mugs_on {
    color: White;
	background-image: url(../images/Top-Tabcrayonmugs-red.jpg);
}
.toptab_mugs_off 
{
    color: black;
    font-weight: bold;
	background-image: url(../images/Top-Tabcrayonmugs.jpg);	
}

.toptab_crafit_on {
    color: White;
	background-image: url(../images/Top-Tabcraftit-Red.jpg);
}
.toptab_crafit_off 
{
    color: black;
    font-weight: bold;
	background-image: url(../images/Top-Tabcraftit.jpg);	
}

Open in new window

0
Mark_FreeSoftwareCommented:
from the .menuitem css class, remove the line that says:
line-height: 20px;
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.