5 replies [Last post]
level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 36 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

I having a problem to adjust the position: absolute: some how because it aligned little off on different browsers.. The real problem you can see is the "click here to sign up now!" button next by sun guy pointing on it. it aligned different postions on different browsers.

Im trying to figure out why. and trying to fix it for couple hours. so ill be appericated if someone can give me a hint or something to able get that thing fixed . it got sure give me tic tacs now lol Smile
thanks..

website preview url links not working only front page:
azdesertfire.net/index.php

CSS code:
@charset "UTF-8";

body {
font-family: Helvetica, Arial;
background-color: #E4E4D4;
margin: 0px;
}

div, h1, h2, p, form, label, input, textarea, img, span{
margin:0; padding:0;
}

ul{
margin:0;
padding:0;
list-style-type:none;
font-size:0;
}
.spacer{
clear:both;
font-size:0;
line-height:0;
}
.clear {
clear: both;
}

#header {
background-color: inherit;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: center bottom;
height: 395px;
position: relative;
width: 748px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#logo {
width: 748px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: right;
padding-bottom: 5px;
padding-right: 5px;
}
#header .display {
position: absolute;
left: 0px;
top: 37px;
width: 721px;
height: 183px;
}
#header .pad {
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
float: left;
}
#header ul {
width: 748px;
background-image: url(../images/nav.jpg);
margin: 0px;
padding: 0px;
height: 34px;
display: inline;
list-style-type: none;
float: left;
position: absolute;
}
#header .countdown {
position: absolute;
left: 6px;
top: 192px;
width: 736px;
height: 28px;
background: #333333;
}
#header ul li {
display: inline;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#header ul li a, a:visited {
text-decoration: none;
color: #FEFEF8;
font-size: 12px;
display: block;
float: left;
padding-top: 14px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
clear: right;
font-weight: normal;
}
#header ul li a:hover, a.link {
background-image: url(../images/nav_r.jpg);
background-repeat: repeat-x;
background-position: center top;
background-color: transparent;
font-weight: normal;
color: #FFFFFF;
}
#header a.signup {
height: 42px;
width: 241px;
position: absolute;
left: 448px;
top: 234px;
background: url(../images/signup.jpg) no-repeat center center;
clear: both;
}
#header a.signup:hover {
background-color: transparent;
background-image: url(../images/signup2.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#contentpad {
width: 748px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.padding25 {
padding-top: 7px;
padding-bottom: 7px;
}
#contentpad .main .right {
float: right;
background-image: url(../images/spon_bkg.jpg);
width: 234px;
}
#contentpad .main .right p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 9px;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 5px;
text-align: center;
}
#contentpad .main .right .bottom {
background-image: url(../images/spon_bot.jpg);
height: 13px;
}
#contentpad .main .left {
background-image: url(../images/hello_bkg.jpg);
float: left;
width: 502px;
}
#contentpad .main .left p {
padding-right: 20px;
padding-left: 20px;
font-size: 12px;
line-height: 15px;
padding-bottom: 5px;
}
#contentpad .main {
clear: both;
float: none;
}
#footer{
width:748px;
height:60px;
color:#fff;
position:relative;
background-color: #2A2929;
background-image: url(../images/footer_bot.jpg);
background-repeat: no-repeat;
background-position: center bottom;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#footer ul{
width:407px;
position:absolute;
left:8px;
top:4px;
}
#footer ul li{
float:left;
color:#D4D4C6;
background-color:inherit;
font:normal 11px/19px Arial, Helvetica, sans-serif;
}
#footer ul li a{
color:#AAAA9E;
background-color:inherit;
font:normal 11px/19px Arial, Helvetica, sans-serif;
padding:0 7px;
text-decoration:none;
}
#footer ul li a:hover{
color:#E4E4D4;
}
#footer p.copyright{
font:normal 11px/19px Arial, Helvetica, sans-serif;
color:#D76E08;
background-color:inherit;
position:absolute;
left:504px;
top:6px;
width: 244px;
}
#footer p.counter {
position: absolute;
left: 16px;
top: 32px;
width: 234px;
font-size: 11px;
color: #666666;
}
#footer p.design{
position:absolute;
left:583px;
top:39px;
width: 165px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #585555;
height: 21px;
}
#footer p.design a{
color:#585555;
text-decoration:none;
}
#footer p.design a:hover{
color:#567A86;
}

Website code:

<?php include('includes/config.php'); ?>

<?php echo SITE_NAME; ?>
" />
" />

Welcome to AZDF "Arizona Desert Fire" youth basketball camp.

AZDF Youth Basketball Camps for Kids 8-18 The Great Sports Training Experience

Your kids will grow and learn about more than just a basketball at an AZDF Basketball Camps' session. While they practice ball-handling, dribbling, and shooting, they will also learn about self-esteem, teamwork, and the value of hard work

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut congue. Nullam ullamcorper tellus ac lectus. Nunc adipiscing suscipit nibh. Morbi sit amet tortor. In ac felis. Proin nibh dui, cursus in, fermentum a, sodales sit amet, purus. Mauris consectetuer rhoncus pede. Duis sed nulla. Cras dignissim eros sit amet augue. In hac habitasse platea dictumst. Vivamus fringilla elit id augue.

Mauris a tortor. Nunc varius. Curabitur at est sed velit blandit molestie. Aenean vitae dui vel quam mattis nonummy. Nullam vitae eros ut pede adipiscing hendrerit. Fusce nisl urna, luctus sed, accumsan nec, pellentesque a, libero. Maecenas facilisis. Sed sollicitudin. Phasellus id arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent nisi. Fusce ut libero non lacus

Sponsor image here

Sponsor image here

Sponsor image here

Sponsor image here

Sponsor image here

Sponsor image here

Sponsor image here

----------------------------------------
Regards,
Nick

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 11 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Can you be more specific?

Can you be more specific? I've looked in Firefox and IE6 (usually the culprit in misplaced AP elements), and see no difference. Which browsers render differently, and how so? Screen dumps?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 36 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

Heres more specific.. The

Heres more specific..

The button box says "Click here to sign up!!" that is orange box. It positioned differently on each browser. like it cant be centered by to the a Sun guy with his finger that is pointing to this button.. it acts out little strange on safari, opera broswer.

in the dream weaver editor it dont look like by what you see on browser its like aligned pretty high top to able make center. instead setting right postion to stay with same position without slipping little left or bottom.. like its has been padded but its not.

hope u get it Smile Thanks.

kk5st wrote:
Can you be more specific? I've looked in Firefox and IE6 (usually the culprit in misplaced AP elements), and see no difference. Which browsers render differently, and how so? Screen dumps?

cheers,

gary

----------------------------------------
Regards,
Nick

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 11 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Like the chief of police

Like the chief of police brought to court in "Alice's Restaurant", I'm gonna need 8×10 color photos with circles and arrows. Here are four screen dumps from Firefox, Opera, IE and Konqueror. I can't tell the difference.

cheers,

gary

AttachmentSize
firefoxdump.gif 61.33 KB
ie6dump.gif 63.5 KB
konquerordump.gif 61.1 KB
operadump.gif 64.26 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 36 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

How did you test your coding

How did you test your coding and websites like screen dumps.. Well i use MAC not Windows.. but after seeing the dumps. it looks fine its so strange.. ... you're missing out safari dumps Smile

Poupluations of user use 1. firefox 2.IE 3.Safari 4 Opera so Did you seen the dump of safari? Smile

kk5st wrote:
Like the chief of police brought to court in "Alice's Restaurant", I'm gonna need 8×10 color photos with circles and arrows. Here are four screen dumps from Firefox, Opera, IE and Konqueror. I can't tell the difference.

cheers,

gary

----------------------------------------
Regards,
Nick

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 11 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Quote:so Did you seen the

Quote:
so Did you seen the dump of safari? Smiling

I don't have Mac. Konqueror(Linux) uses the KHTML rendering engine. Safari uses the Webkit rendering engine, which is derived from KHTML. Both engines are updated from each other, though Apple tends to be slow releasing their patches.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.