Jump to content
  • 0

проблема с Firefox - переносит текст на строку вниз

DolbyRoom

Asked by DolbyRoom,

 Share

Question

DolbyRoom Explorer

DolbyRoom

Posted
Posted

Ребята,

Посмотрите на http://members.dodo.com.au/~rouslan/ninawebsite/index.html

Внизу над баннером, где навигационный текст (текстовая эмуляция кнопок), этот текст, часть его переносится на строку вниз в Mozilla Firefox 3 (чего мне не надо), но в Internet Explore 7 все работает и выглядит хорошо.

Не могу найти в чем проблема, смотрел и в CSS и в HTML.

Может кто-нибудь из опытных подскажет?

Эта проблема просто выводит меня из себя.

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" />

<script LANGUAGE="JavaScript">

home2= new Image(69,24);

home2="buttons/home2.gif";

whypilates2= new Image(149,24);

whypilates2="buttons/whypilates2.gif";

studio2= new Image(79,24);

studio2="buttons/studio2.gif";

schedule2= new Image(110,24);

schedule2="buttons/schedule2.gif";

fees2= new Image(49,24);

fees2="buttons/fees2.gif";

testimonials2= new Image(150,24);

testimonials2="buttons/testimonials2.gif";

findus2= new Image(84,24);

findus2="buttons/findus2.gif";

<!-- // Start of Mouseover Script

browserName = navigator.appName;

browserVer = parseInt(navigator.appVersion);

var version = "n2";

if ((navigator.appCodeName == 'Mozilla') && (navigator.appVersion.substring(0,1) > 2)) {version = "n3+";}

if ((navigator.appCodeName == 'MSIE') && (navigator.appVersion.substring(0,1) > 3)) {version = "n3+";}

if (version == "n3+") {

home = new Image(69,24);

home.src = "buttons/home.gif";

home2 = new Image(69,24);

home2.src = "buttons/home2.gif";

whypilates = new Image(149,24);

whypilates.src = "buttons/whypilates.gif";

whypilates2 = new Image(149,24);

whypilates2.src = "buttons/whypilates2.gif";

studio = new Image(79,24);

studio.src = "buttons/studio.gif";

studio2 = new Image(79,24);

studio2.src = "buttons/studio2.gif";

schedule = new Image(110,24);

schedule.src = "buttons/schedule.gif";

schedule2 = new Image(110,24);

schedule2.src = "buttons/schedule2.gif";

fees = new Image(49,24);

fees.src = "buttons/fees.gif";

fees2 = new Image(49,24);

fees2.src = "buttons/fees2.gif";

testimonials = new Image(150,24);

testimonials.src = "buttons/testimonials.gif";

testimonials2 = new Image(150,24);

testimonials2.src = "buttons/testimonials2.gif";

findus = new Image(84,24);

findus.src = "buttons/findus.gif";

findus2 = new Image(84,24);

findus2.src = "buttons/findus2.gif";

}

function imagechange(OffImg,OnImg) {

if (version == "n3+") {

document.images[OffImg].src = eval(OnImg + ".src");

}}

</SCRIPT>

</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;

}

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Vlad Explorer

Vlad

Posted
Posted

Незачем приводить весь код целиком, если ссылка на сайт есть. Не ленивые, зайдем.

В чем проблема разбираться не стал, но лечится добавлением white-space: nowrap к нужному диву.

Link to comment
Share on other sites
  • 0
DolbyRoom Explorer

DolbyRoom

Posted
  • Author
Posted
Незачем приводить весь код целиком, если ссылка на сайт есть. Не ленивые, зайдем.

В чем проблема разбираться не стал, но лечится добавлением white-space: nowrap к нужному диву.

Спасибо Vlad!

Лечение помогло, но с этим появилась новая проблема - этот текс в Firefox теперь не по центру, пробовал div align center и text-align center - не помогло. Как теперь от этого вылечиться, можете подсказать?

Я извиняюсь за привод кода целиком, буду знать на будущее.

С уважаением.

Link to comment
Share on other sites
  • 0
DolbyRoom Explorer

DolbyRoom

Posted
  • Author
Posted

Не понял, это задавать в CSS или в Source?

В CSS я задал

text-align:center;

не работает

margin: 7px auto; мне необходимо чтобы мой div bbuttons отступал вниз на 7 пикселей.

вообще вот как вест код для этого дива выглядит

#bbuttons {

background-color: #6ae066;

width:900px;

height:30px;

position:relative;

margin: 7px auto;

text-align:center;

color: #61328f;

font-size: 14px;

text-decoration:none;

font-weight:bold;

white-space:nowrap;

}

далее в source пишется

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

раньше как-то все это выравнивалось по центру, а сейчас нет

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted (edited)

а так?

<div align="center" style="padding-top: 5px; text-align:center;">
<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>

Edited by Searcher
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept