2 replies [Last post]
b_electro
b_electro's picture
Offline
Regular
Last seen: 9 years 24 weeks ago
Timezone: GMT-6
Joined: 2007-05-01
Posts: 50
Points: 20

Problem: div container that holds "Services" page shifts X,Y coordinates when navigating through tabs, on Firefox/OS X, when text size is set to normal. If you click thru the tabs you'll see what I mean- the service page jumps. Small issue maybe but a huge pet peeve of mine: http://www.janewalksspot.com/services.html

I need to figure out what's messing up the formatting on the services page. And I know, the table could probably be built/styled better but that's why I'm posting in the newbie forum! :rolleyes: Thanks, B.

Jane Walks Spot | Services & Fees

#wrapper {
width: 1000px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
}

#nav {
float: left;
width: 960px;
margin: 0;
padding: 10px 0 0 40px;
list-style: none;
background: url(img/nav_bg.gif) repeat-x bottom left;
}

#nav li {
float: left;
margin: 0;
padding: 0;
font-family: "Lucida Grande", sans-serif;
font-size: 75%;
}

#nav a {
float: left;
display: block;
margin: 100px 1px 0 0;
padding: 4px 8px;
color: #333;
text-decoration: none;
border: 1px solid #9B8748;
border-bottom: none;
background: #F9E9A9 url(img/off_bg.gif) repeat-x top left;
}

#quote {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 100%;
line-height: 110%;
color: #617218;
font-weight: bold;
font-style: italic;
text-align: center;
}

#image {
float: right;
padding-bottom: 20px;
}

.header {
background-image: url(img/jws_header.gif);
background-repeat: no-repeat;
background-position: right;
background-color: #F47D07;
float: right;
}

.leftcolumn {
float: left;
width: 520px;
padding-top:20px;
padding-left:40px;
padding-bottom: 20px;
}

.rightcolumn {
float: right;
width: 400px;
padding-top:40px;
padding-right:20px;
padding-bottom: 20px;
padding-left: 20px;
}

h1 {
margin: 0 40px 0 0;
float: right;
}

.body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 130%;
line-height: 160%;
color: #333333;
font-weight: normal;
}

.box {
width: 379px;
float: right;
background-image: url(img/div-bottom.gif);
background-repeat: no-repeat;
background-position: left bottom;
font-family: "Lucida Grande", sans-serif;
font-size: 75%;
clear:both;
}

.box h3 {
margin: 0;
padding: 6px 8px 4px 10px;
font-size: 130%
color: #333
border-bottom: 1px solid #E0CFAB;
background: url(img/h3-bg.gif) no-repeat top left;
}

.box ul {
margin: 0;
padding: 14px 10px 14px 10px;
list-style: none;
}
.box li {
margin: 0 0 6px;
padding: 0;
}

.footer {
clear: both;
width: 990px;
padding: 5px;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 100%;
color: #FFFFFF;
background-color: #f47d07;
}

body {
font-size: small;
margin: 0;
padding: 0;
background-image: url(img/grass.jpg);
}

#nav a:hover, body#services #t-services a {
color: #333;
padding-bottom: 5px;
border-color: #727377;
background: #fff url(img/on_bg.gif) repeat-x top left;
}

#tablewrapper {
margin-top:20px;
border: 1px solid #617218;
width: 510px;
overflow: hidden;
}

h2 {
display: block;
font-weight: bold;
text-align: center;
font-size: 100%;
margin: 0px 10px;
}

h5 {
display: inline;
font-weight: bolder;
text-align: left;
font-size: 100%;
color: #617218;
}

h4 {
display: block;
text-align: center;
font-weight: normal;
font-size: 100%;
vertical-align: top;
}

table {
font-family: "Lucida Grande", sans-serif;
font-size: 75%;
}

table td {
margin: 0;
padding: 8px 0px;
border-bottom: 1px solid #c2d474;
}

.indent {
margin-left: 10px;
}

Services

1 Dog
(Once/Twice/Three TImes A Day)

2 Dogs
(Once/Twice/Three Times A Day)

Small dog strolls
Up to 4 small dogs walking together for 50 minutes. For dogs 30 lbs and under who are friendly with other small dogs. Ask about off-leash options during your initial meeting.

$20/30

$30/40

Playgroup in the park
Up to 4 dogs play on approved regional park trails for 50 minutes. For well socialized dogs who will come when called or walk on a long leash.

$20/30

$30/40

Solo Strolls
30 minute on-leash walk near your home. Modified options available for elderly pets. For dogs who need to be walked solo or only with dogs in their own family.

$20/30

$30/40

Evenings and weekends
Walks and cat-sitting on weekends. 1 hour visit includes feeding and dog walk or cat litterbox scoop. $12 each additional hour. Perfect for anxious pets when you're away. Rates may vary.

$25/35/45

$30/40/45

Back To School Special: Buy 4 Days Get 1 Free!

  • Purchase 4 days of the same service get a free additional day of the same service. More explanatory copy here. More explanatory copy here. More explanatory copy here. More explanatory copy here. More explanatory copy here. Offer valid through November 30, 2007.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 36 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I don't reall see the jump

I don't reall see the jump you're talking about but is it because some pages have a vertical scrollbar and others don't? If that's the case, you need to force the scrollbar in FF and others with:

html { min-height: 100% }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

b_electro
b_electro's picture
Offline
Regular
Last seen: 9 years 24 weeks ago
Timezone: GMT-6
Joined: 2007-05-01
Posts: 50
Points: 20

BOOM! You got it! Dude,

BOOM! You got it! Dude, thanks. I also found this article on Community MX about getting rid of page shift: http://www.communitymx.com/content/article.cfm?cid=528A0