text wrap problem in firefox - HTML Forums

TextileA · 12-23-2008, 02:44 AM

Hey people,
take a look at http://members.dodo.com.au/~rouslan/...ite/index.html
on the bottom navigation buttons line I have text being wrapped (which I don't want) in FireFox 3.x, but in Internet Explore 7 everything looks fine.
I couldn't find anything wrong in html source or css.
It's just driving me nuts.
Can you help me solve this, please?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="kogarah pilates artform">
<meta name="description" content="Art Form Pilates studio in Kogarah NSW Sydney Australia provides pilates lessons to people in surrounding areas">
<title>Kogarah Pilates - Art Form Pilates</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />

</head>

<body>
<div id="container">
<div id="banner">
<div id="bannerimg"><a href="index.html"><img src="art_form_pilates.gif" class="center" alt="logo" border="0" /></a>
</div>
</div>
<div id="buttons">

<div align="center" style="padding-top: 5px"><a href="index.html" onMouseover="imagechange('home','home2')"
onMouseout="imagechange('home','home')"><img src="buttons/home.gif" border="0" name="home" width="69" height="24" alt="home"></a><img src="buttons/dot.gif" width="30" height="24" alt="."><a href="whypilates.html" onMouseover="imagechange('whypilates','whypilates2')"
onMouseout="imagechange('whypilates','whypilates')"><img src="buttons/whypilates.gif" border="0" name="whypilates" width="149" height="24" alt="why pilates?"></a><img src="buttons/dot.gif" width="30" height="24" alt="."><a href="studio.html" onMouseover="imagechange('studio','studio2')"
onMouseout="imagechange('studio','studio')"><img src="buttons/studio.gif" border="0" name="studio" width="79" height="24" alt="studio"></a><img src="buttons/dot.gif" width="30" height="24" alt="."><a href="schedule.html" onMouseover="imagechange('schedule','schedule2')"
onMouseout="imagechange('schedule','schedule')"><img src="buttons/schedule.gif" border="0" name="schedule" width="110" height="24" alt="schedule"></a><img src="buttons/dot.gif" width="30" height="24" alt="."><a href="fees.html" onMouseover="imagechange('fees','fees2')"
onMouseout="imagechange('fees','fees')"><img src="buttons/fees.gif" border="0" name="fees" width="49" height="24" alt="fees"></a><img src="buttons/dot.gif" width="30" height="24" alt="."><a href="testimonials.html" onMouseover="imagechange('testimonials','testimonials2')"
onMouseout="imagechange('testimonials','testimonials')"><img src="buttons/testimonials.gif" border="0" name="testimonials" width="150" height="24" alt="testimonials"></a><img src="buttons/dot.gif" width="30" height="24" alt="."><a href="findus.html" onMouseover="imagechange('findus','findus2')"
onMouseout="imagechange('findus','findus')"><img src="buttons/findus.gif" border="0" name="findus" width="84" height="24" alt="find us"></a>

</div>
</div>

<div id="contentheaderbutton"></div>
<div id="contentheaderbutton">
<div id="contentheaderbutton2"><img src="buttons/home.gif" alt="logo" border="0" />
</div>
</div>
<div id="top">
</div>
<div id="contentindex">

<div id="text" align="justify">
<p>Welcome to Art Form Pilates web site!</p><br />
<p>The Pilates Method of body condiioning is a unique system of strengthening and stretching exercises developed over ninety years ago by Joseph Pilates. It strengthens and tones muscles, improves posture, flexibility and balance.</p>
<br />

<p>Life wreaks havoc on our bodies. People grow more and more imbalanced in the course of daily living. We are right or left handed, we swing a golf club or tennis racquet on one side, and we carry our bags on one shoulder and our children on one hip. Our routines and habits cause us to constantly overuse some muscles and underused others which can result in chronic pain or injury.</p><br />

<p>Pilates is a corrective system of exercise proving a workout where you will gain strength in a balanced way, so that tight, tense areas are stretched and weak ones strengthened. You will feel more relaxed and less stressed.</p><br />

<p>Art Form Pilates offers personal and group equipment training, mat classes utilizing small apparatus, classes for pregnancy.</p><br />

<p>Our staff of certified instructors provide clients with professional, compassionate and individual attention.</p><br />
</div>
<div id="mainimg"></div>

</div>

<div id="bottom">
</div>

<div id="contentheaderbutton"></div>

<div id="bbuttons">

<div align="center" style="padding-top: 5px">
<a href="index.html">HOME</a> • <a class="yellow" href="whypilates.html">WHY PILATES</a> • <a href="studio.html">STUDIO</a> • <a href="schedule.html">SCHEDULE</a> • <a href="fees.html">FEES</a> • <a href="testimonials.html">TESTIMONIALS</a> • <a href="findus.html">FIND US</a></div>

</div>

<div id="banner">
<div id="bannerimg"><a href="index.html"><img src="art_form_pilates.gif" class="center" alt="logo" border="0" /></a>
</div>
</div>
<div align="center" id="copyright">copyright © 2008-2009 Art Form Pilates. Website design Rouslan Tchernov</div>

</div>
</body>
</html>

CSS

* {
margin: 0px;
padding: 0px;
}
body {
padding-top: 0px;
background-image: url(bg.jpg);
color: #f9fdcd;
font-family: verdana, arial, sans-serif;

text-align: left;
letter-spacing: 1px;
}
a {color: #61328f;font-size: 14px; text-decoration:none; font-weight:bold;}
a:hover {color: #e9fd09;}

.more{float: left;}
.clear{clear:both;}
p{ margin: 0px 0px 0px 0px;line-height: 16px;font-size: 14px;}
#container {
margin: 7px auto;
width:900px;
top:50px;
}
#banner {
background-color: #6ae066;
width:900px;
height:90px;
position:relative;
}
#bannerimg {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
display:inline;
text-align:center;
}
#buttons {
background-color: #6ae066;
width:900px;
height:30px;
position:relative;
margin: 7px auto;
}
#contentheaderbutton {
background-color: #6ae066;
width:900px;
height:24px;
position:relative;
}
#contentheaderbutton2 {
width:auto;
height:24px;
margin: 0px 0px 0px 65px;
float:left;
}
#top {
background-image:url(top.gif);
width:900px;
height:23px;
position:relative;
}
#contentindex {
background-image: url(contentbg.gif);
background-repeat:repeat-y;
width:900px;
height:483px;
position:relative;
}
#contentwhypilates {
background-image: url(contentbg.gif);
background-repeat:repeat-y;
width:900px;
height:1120px;
position:relative;
}
#contentstudio {
background-image: url(contentbg.gif);
background-repeat:repeat-y;
width:900px;
height:483px;
position:relative;
}
#contentschedule {
background-image: url(contentbg.gif);
background-repeat:repeat-y;
width:900px;
height:483px;
position:relative;
}
#contentfees {
background-image: url(contentbg.gif);
background-repeat:repeat-y;
width:900px;
height:483px;
position:relative;
}
#contenttestimonials {
background-image: url(contentbg.gif);
background-repeat:repeat-y;
width:900px;
height:483px;
position:relative;
}
#contentfindus {
background-image: url(contentbg.gif);

background-repeat:repeat-y;
width:900px;
height:483px;
position:relative;
}
#text {
width:450px;
margin: 5px 0px 0px 70px;
float:left;
display:inline;
}
#mainimg {
background-image: url(mainimg.gif);
width:296px;
height:481px;
float:right;
margin: 5px 65px 60px 0px;
display:inline;
}
#bottom {
background-image:url(bottom.gif);
width:900px;
height:23px;
position:relative;
}
#bbuttons {
background-color: #6ae066;
width:900px;
height:30px;
position:relative;
margin: 7px auto;
color: #61328f;
font-size: 14px;
text-decoration:none;
font-weight:bold;
}
#copyright {
background-color: #6ae066;
width:900px;
height:15px;
position:relative;
margin: 7px auto;
color: #61328f;
font-size: 60%;
}
/*-------------links------------*/
.yellow {
color: #e9fd09;
font-size: 14px;
text-decoration:none;
font-weight:bold;
hover: #61328f;
}
a.yellow:hover {
color: #61328f;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

TextileA · 12-23-2008, 04:03 AM

thanks to Vlad from another forum I managed to sort out this problem by adding in css white-space:nowrap; code, however with that another problem came up, also in Firefox - this text does not align center anymore.
I've tried div align center and text-align center, didn't work.
Anyone knows a solution for this?

coothead · 12-23-2008, 06:38 AM

Hi there TextileA,

this is not a white-space problem.

First, change this...

Code:


#mainimg {
	background-image: url(mainimg.gif);
	width:296px;
	height:481px;
	float:right;
	margin: 5px 65px 60px 0px;
	display:inline;
}

...to this...

Code:


#mainimg {
	background-image: url(mainimg.gif);
	width:296px;
	height:481px;
	float:right;
	margin: 5px 65px 0 0;
	display:inline;
}

Second, add the highlighted attribute here...

Code:


#bbuttons {
	background-color: #6ae066;
	width:900px;
	height:30px;
	position:relative;
	margin: 7px auto;
	color: #61328f;
	font-size: 14px; 
	text-decoration:none; 
	font-weight:bold;
       clear:both;
}