...

View Full Version : Banner Alignment problem in Firefox



dmarkuze72
04-05-2011, 07:43 AM
Hi,

Quick question for anyone who may be able to help:


Our banner at the top (the blue & black lines) of the website appears uneven in firefox but fine in IE.


The website in question is www.usedcomputershop.com . Is there any way to make the banner appear even in both browsers?

Thanks

oesxyl
04-05-2011, 07:51 AM
Hi,

Quick question for anyone who may be able to help:


Our banner at the top (the blue & black lines) of the website appears uneven in firefox but fine in IE.


The website in question is www.usedcomputershop.com . Is there any way to make the banner appear even in both browsers?

Thanks
cross-brwosers problems usualy comes from invalid markup:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.usedcomputershop.com%2F

fix them first, then validate css and if is not solved and have problems post.

best regards

dmarkuze72
04-05-2011, 09:18 AM
cross-brwosers problems usualy comes from invalid markup:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.usedcomputershop.com%2F

fix them first, then validate css and if is not solved and have problems post.

best regards

Hi

Thanks for the help.

I am somewhat new to all of this. I tried to fix it up as much as possible. It says that CSS code has to be altered. I don't remember this problem existing before. Any ideas?


script below:


* {
font-family: verdana;
}
a:link, a:visited, a:active {
color: #040404;
font-size: 11px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:link IMG, a:visited IMG, a:active IMG, a:hover IMG {
border: 0px;
margin: 0px;
paddnig: 0px;
}
a.bannerAnchor:link, a.bannerAnchor:visited, a.bannerAnchor:active, a.bannerAnchor:hover {
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
}
a.bannerNav:link, a.bannerNav:visited, a.bannerNav:active, a.bannerNav:hover {
color: #FFFFFF;
font-size: 10px;
font-weight: bold;
}
a.footer:link, a.footer:visited, a.footer:active, a.footer:hover {
color: #777777;
font-size: 9px;
}
a.footerNav:link, a.footerNav:visited, a.footerNav:active, a.footerNav:hover {
color: #000000;
font-size: 9px;
}
a.redAnchor:link, a.redAnchor:visited, a.redAnchor:active, a.redAnchor:hover {
color: #A2393F;
}
b {
color: #040404;
font-size: 11px;
font-weight: bold;
margin: 0px;
padding: 0px;
}
body {
background: #E7E7E7;
margin: 0px;
padding: 0px;
}
form {
margin: 0px;
padding: 0px;
}
div {
background: #FFFFFF;
padding: 0px;
margin: 0px;
text-align: left;
}
div.col1Title {
background: #AAB5BA;
border-bottom: 1px solid #768B90;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 22px;
}
div.col1Body {
background: #F4F3F3;
padding-bottom: 6px;
padding-left: 8px;
padding-right: 8px;
padding-top: 12px;
}
div.col1BodyTestimonials {
background: #EFEEF1;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
}
div.col1HR {
background: #EFEEF1;
height: 1px;
padding-bottom: 0px;
padding-left: 7px;
padding-right: 7px;
padding-top: 0px;
margin: 0px;
}
div.colHeading1 {
background: #52778E;
border-bottom: 2px solid #FFFFFF;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 8px;
}
div.colHeading2 {
background: #3B6792;
border-bottom: 2px solid #FFFFFF;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 8px;
}
div.footerNavHeading {
background: #BCC8CC;
border-bottom: 2px solid #FFFFFF;
padding-bottom: 5px;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
text-transform: capitalize;
}
div.footerNavNestedHeading {
background: #BCC8CC;
border-bottom: 2px solid #FFFFFF;
margin-top: 8px;
padding-bottom: 5px;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
text-transform: capitalize;
}
div.footerNavTitle {
font-size: 9px;
font-weight: bold;
padding-bottom: 0px;
padding-left: 9px;
padding-right: 7px;
padding-top: 8px;
}
div.footerNavBody {
padding-bottom: 0px;
padding-left: 19px;
padding-right: 15px;
padding-top: 2px;
}
div.footerNavNoTitleBody {
padding-bottom: 0px;
padding-left: 19px;
padding-right: 15px;
padding-top: 8px;
}
div.listingBorder {
width: 566px;
}
div.subHeading {
background: #BCC8CC;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 8px;
}
h1 {
color: #FFFFFF;
font-family: arial;
font-size: 22px;
font-weight: bold;
margin: 0px;
padding-bottom: 0px;
padding-left: 12px;
padding-right: 0px;
padding-top: 0px;
}
h1.bannerListing {
color: #000000;
font-family: verdana;
font-size: 11px;
font-weight: bold;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 5px;
padding: 0px;
}
h1.listing {
color: #FFFFFF;
font-size: 16pt;
font-weight: bold;
margin: 0px;
padding: 0px;
}
h1.textListing {
color: #000000;
font-family: verdana;
font-size: 11px;
font-weight: bold;
margin-bottom: 0px;
margin-left: 4px;
margin-right: 4px;
margin-top: 5px;
padding: 0px;
}
h2 {
color: #FFFFFF;
font-size: 11px;
font-family: verdana;
font-weight: bold;
margin: 0px;
padding: 0px;
}
h3 {
color: #3B6792;
font-family: verdana;
font-size: 13px;
font-weight: bold;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 3px;
}
input {
color: #000000;
font-size: 10px;
margin: 0px;
padding: 0px;
}
input.textSearch {
height: 18px;
padding: 1px;
width: 125px;
}
input.submitSearch {
font-weight: bold;
height: 17px;
line-height: 11px;
margin-bottom: 1px;
width: 56px;
}
input.submitButton {
font-size: 9px;
font-weight: bold;
height: 17px;
line-height: 11px;
margin-bottom: 2px;
width: 17px;
}
p {
font-size: 11px;
margin: 0px;
padding: 0px;
}
p.bannerDescription {
margin-bottom: 3px;
margin-top: 3px;
}
p.textDescription {
margin-bottom: 3px;
margin-top: 3px;
padding-left: 14px;
padding-right: 14px;
}
table {
margin: 0px;
padding: 0px;
}
table.bannerListings {
width: 566px;
}
table.listingHeader {
background: #52768D;
margin-bottom: 5px;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 8px;
width: 100%;
}
table.textListings {
background: #F5F5F5;
width: 590px;
}
td {
background-repeat: no-repeat;
color: #040404;
font-size: 11px;
margin: 0px;
padding: 0px;
}
td.ad {
text-align: center;
width: 148px;
}
td.adSpacer {
height: 4px;
width: 148px;
}
td.anchorRow {
font-size: 10px;
line-height: 14px;
}
td.bannerBorder {
padding-bottom: 8px;
padding-left: 0px;
padding-right: 0px;
padding-top: 8px;
}
td.bannerNav {
color: #FFFFFF;
font-size: 10px;
padding-bottom: 7px;
padding-left: 12px;
padding-right: 0px;
padding-top: 7px;
}
td.colIMGHeading {
border-bottom: 2px solid #FFFFFF;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 8px;
}
td.content {
background: #FFFFFF;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 11px;
padding-top: 4px;
}
td.contentLarger {
background: #FFFFFF;
font-size: 14px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 11px;
padding-top: 4px;
}
td.footer {
color: #777777;
font-size: 9px;
}
td.listingTitle {
padding-bottom: 5px;
padding-left: 7px;
padding-right: 0px;
padding-top: 5px;
}
td.textBorder {
padding-bottom: 1px;
padding-left: 0px;
padding-right: 0px;
padding-top: 1px;
}
td.vertBorder {
background: url(../images/vertBorder.gif);
background-repeat: repeat;
width: 3px;
}

.blueArrow {
color: #52768D;
}
.colHeadingBody {
background: #FFFFFF;
padding-bottom: 12px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
}
.countrySelect {
color: #000000;
font-size: 10px;
height: 17px;
margin: 0px;
padding: 0px;
width: 160px;
}
.goldArrow {
color: #EAC431;
}
.redArrow {
color: #DF623B;
font-size: 10px;
padding-top: 1px;
}
.redArrowFooter {
color: #A3373D;
font-size: 9px;
font-weight: bold;
padding-top: 3px;
}
.subHeadingBody1 {
background: #FAFAF8;
padding-bottom: 12px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
}
.subHeadingBody2 {
background: #FAFAF9;
padding-bottom: 12px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
}h3.white { color: #FFFFFF; font-family: verdana; font-size: 13px; font-weight: bold; }
h4.white { color: #FFFFFF; font-family: verdana; font-size: 10px; font-weight: bold; }

oesxyl
04-05-2011, 09:52 AM
Hi

Thanks for the help.

I am somewhat new to all of this. I tried to fix it up as much as possible. It says that CSS code has to be altered. I don't remember this problem existing before. Any ideas?
is easy to fix starting from the first reported error.
for first you need to add the xhtml namespace to the html tag:



<html xmlns="http://www.w3.org/1999/xhtml">


in xhtml tag names are lowercase

once you you start fixing it some message errors will disipear because previous ones, which was fixed, trigger anothers.

use [ code] and [ /code] tags, without spaces, to post code, please



script below:


* {
font-family: verdana;
}
a:link, a:visited, a:active {
color: #040404;
font-size: 11px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:link IMG, a:visited IMG, a:active IMG, a:hover IMG {
border: 0px;
margin: 0px;
paddnig: 0px;
}
a.bannerAnchor:link, a.bannerAnchor:visited, a.bannerAnchor:active, a.bannerAnchor:hover {
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
}
a.bannerNav:link, a.bannerNav:visited, a.bannerNav:active, a.bannerNav:hover {
color: #FFFFFF;
font-size: 10px;
font-weight: bold;
}
a.footer:link, a.footer:visited, a.footer:active, a.footer:hover {
color: #777777;
font-size: 9px;
}
a.footerNav:link, a.footerNav:visited, a.footerNav:active, a.footerNav:hover {
color: #000000;
font-size: 9px;
}
a.redAnchor:link, a.redAnchor:visited, a.redAnchor:active, a.redAnchor:hover {
color: #A2393F;
}
b {
color: #040404;
font-size: 11px;
font-weight: bold;
margin: 0px;
padding: 0px;
}
body {
background: #E7E7E7;
margin: 0px;
padding: 0px;
}
form {
margin: 0px;
padding: 0px;
}
div {
background: #FFFFFF;
padding: 0px;
margin: 0px;
text-align: left;
}
div.col1Title {
background: #AAB5BA;
border-bottom: 1px solid #768B90;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 22px;
}
div.col1Body {
background: #F4F3F3;
padding-bottom: 6px;
padding-left: 8px;
padding-right: 8px;
padding-top: 12px;
}
div.col1BodyTestimonials {
background: #EFEEF1;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
}
div.col1HR {
background: #EFEEF1;
height: 1px;
padding-bottom: 0px;
padding-left: 7px;
padding-right: 7px;
padding-top: 0px;
margin: 0px;
}
div.colHeading1 {
background: #52778E;
border-bottom: 2px solid #FFFFFF;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 8px;
}
div.colHeading2 {
background: #3B6792;
border-bottom: 2px solid #FFFFFF;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 8px;
}
div.footerNavHeading {
background: #BCC8CC;
border-bottom: 2px solid #FFFFFF;
padding-bottom: 5px;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
text-transform: capitalize;
}
div.footerNavNestedHeading {
background: #BCC8CC;
border-bottom: 2px solid #FFFFFF;
margin-top: 8px;
padding-bottom: 5px;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
text-transform: capitalize;
}
div.footerNavTitle {
font-size: 9px;
font-weight: bold;
padding-bottom: 0px;
padding-left: 9px;
padding-right: 7px;
padding-top: 8px;
}
div.footerNavBody {
padding-bottom: 0px;
padding-left: 19px;
padding-right: 15px;
padding-top: 2px;
}
div.footerNavNoTitleBody {
padding-bottom: 0px;
padding-left: 19px;
padding-right: 15px;
padding-top: 8px;
}
div.listingBorder {
width: 566px;
}
div.subHeading {
background: #BCC8CC;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 8px;
}
h1 {
color: #FFFFFF;
font-family: arial;
font-size: 22px;
font-weight: bold;
margin: 0px;
padding-bottom: 0px;
padding-left: 12px;
padding-right: 0px;
padding-top: 0px;
}
h1.bannerListing {
color: #000000;
font-family: verdana;
font-size: 11px;
font-weight: bold;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 5px;
padding: 0px;
}
h1.listing {
color: #FFFFFF;
font-size: 16pt;
font-weight: bold;
margin: 0px;
padding: 0px;
}
h1.textListing {
color: #000000;
font-family: verdana;
font-size: 11px;
font-weight: bold;
margin-bottom: 0px;
margin-left: 4px;
margin-right: 4px;
margin-top: 5px;
padding: 0px;
}
h2 {
color: #FFFFFF;
font-size: 11px;
font-family: verdana;
font-weight: bold;
margin: 0px;
padding: 0px;
}
h3 {
color: #3B6792;
font-family: verdana;
font-size: 13px;
font-weight: bold;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 3px;
}
input {
color: #000000;
font-size: 10px;
margin: 0px;
padding: 0px;
}
input.textSearch {
height: 18px;
padding: 1px;
width: 125px;
}
input.submitSearch {
font-weight: bold;
height: 17px;
line-height: 11px;
margin-bottom: 1px;
width: 56px;
}
input.submitButton {
font-size: 9px;
font-weight: bold;
height: 17px;
line-height: 11px;
margin-bottom: 2px;
width: 17px;
}
p {
font-size: 11px;
margin: 0px;
padding: 0px;
}
p.bannerDescription {
margin-bottom: 3px;
margin-top: 3px;
}
p.textDescription {
margin-bottom: 3px;
margin-top: 3px;
padding-left: 14px;
padding-right: 14px;
}
table {
margin: 0px;
padding: 0px;
}
table.bannerListings {
width: 566px;
}
table.listingHeader {
background: #52768D;
margin-bottom: 5px;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 8px;
width: 100%;
}
table.textListings {
background: #F5F5F5;
width: 590px;
}
td {
background-repeat: no-repeat;
color: #040404;
font-size: 11px;
margin: 0px;
padding: 0px;
}
td.ad {
text-align: center;
width: 148px;
}
td.adSpacer {
height: 4px;
width: 148px;
}
td.anchorRow {
font-size: 10px;
line-height: 14px;
}
td.bannerBorder {
padding-bottom: 8px;
padding-left: 0px;
padding-right: 0px;
padding-top: 8px;
}
td.bannerNav {
color: #FFFFFF;
font-size: 10px;
padding-bottom: 7px;
padding-left: 12px;
padding-right: 0px;
padding-top: 7px;
}
td.colIMGHeading {
border-bottom: 2px solid #FFFFFF;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
padding-top: 8px;
}
td.content {
background: #FFFFFF;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 11px;
padding-top: 4px;
}
td.contentLarger {
background: #FFFFFF;
font-size: 14px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 11px;
padding-top: 4px;
}
td.footer {
color: #777777;
font-size: 9px;
}
td.listingTitle {
padding-bottom: 5px;
padding-left: 7px;
padding-right: 0px;
padding-top: 5px;
}
td.textBorder {
padding-bottom: 1px;
padding-left: 0px;
padding-right: 0px;
padding-top: 1px;
}
td.vertBorder {
background: url(../images/vertBorder.gif);
background-repeat: repeat;
width: 3px;
}

.blueArrow {
color: #52768D;
}
.colHeadingBody {
background: #FFFFFF;
padding-bottom: 12px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
}
.countrySelect {
color: #000000;
font-size: 10px;
height: 17px;
margin: 0px;
padding: 0px;
width: 160px;
}
.goldArrow {
color: #EAC431;
}
.redArrow {
color: #DF623B;
font-size: 10px;
padding-top: 1px;
}
.redArrowFooter {
color: #A3373D;
font-size: 9px;
font-weight: bold;
padding-top: 3px;
}
.subHeadingBody1 {
background: #FAFAF8;
padding-bottom: 12px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
}
.subHeadingBody2 {
background: #FAFAF9;
padding-bottom: 12px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
}h3.white { color: #FFFFFF; font-family: verdana; font-size: 13px; font-weight: bold; }
h4.white { color: #FFFFFF; font-family: verdana; font-size: 10px; font-weight: bold; }

best regards

dmarkuze72
04-05-2011, 10:51 AM
Thanks for the help.


I tried fixing it. Made a mess of it all. Had to revert back. Any advice on the bits of code I should be looking at. It's just cosmetics but still. Maybe pay someone to fix it for me? Msg me

oesxyl
04-05-2011, 11:55 AM
Thanks for the help.


I tried fixing it. Made a mess of it all. Had to revert back. Any advice on the bits of code I should be looking at. It's just cosmetics but still. Maybe pay someone to fix it for me? Msg me
no need to pay when you can do it, you have only 8 Errors, 2 warning(s) i can help you.
- add a doctype, i suggest this one:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

- change <HTML> to


<html xmlns="http://www.w3.org/1999/xhtml">


and change all tags from uppercase to lowecase, HTML -> html, HEAD -> head, BODY -> body

best regards

dmarkuze72
04-05-2011, 05:46 PM
Thanks. Where do you see 9 errors as I see 76 ...

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.usedcomputershop.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=1&user-agent=W3C_Validator%2F1.2

Added the doc type but this screwed up the fromatting and font size? Also changed tags to lowercase. Where do you see 9 errors and what are they?

dmarkuze72
04-05-2011, 06:10 PM
Okay see the errors. Let me try to fix and revert back to you.

oesxyl
04-05-2011, 06:16 PM
Thanks. Where do you see 9 errors as I see 76 ...

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.usedcomputershop.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=1&user-agent=W3C_Validator%2F1.2

Added the doc type but this screwed up the fromatting and font size? Also changed tags to lowercase. Where do you see 9 errors and what are they?
8 Errors, 2 warning(s) with HTML 4.01 Transitional

76 Errors, 1 warning(s) with XHTML 1.0 Strict

http://www.htmlhelp.com/tools/validator/doctype.html

doesn't matter which doctype you decide to use, but INSERT A DOCTYPE ON TOP OF THE PAGE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

or whatever you decide to use.

best regards

dmarkuze72
04-05-2011, 07:50 PM
8 Errors, 2 warning(s) with HTML 4.01 Transitional

76 Errors, 1 warning(s) with XHTML 1.0 Strict

http://www.htmlhelp.com/tools/validator/doctype.html

doesn't matter which doctype you decide to use, but INSERT A DOCTYPE ON TOP OF THE PAGE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

or whatever you decide to use.

best regards


hi

I settled for

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

as this was the only one that did not screw up the formatting and fonts. I will revert back to you after I try to fix the other errors.

MissPhoenix
04-05-2011, 07:58 PM
padding for your a:IMG is misspelled.
Also, I would like to see the code used around the banner i.e. the table/div tags.

oesxyl
04-06-2011, 12:51 AM
padding for your a:IMG is misspelled.
Also, I would like to see the code used around the banner i.e. the table/div tags.
good catch, :)


hi

I settled for

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

as this was the only one that did not screw up the formatting and fonts. I will revert back to you after I try to fix the other errors.
this doctype is ancient. See a list of doctypes here:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

MissPhoenix said that you have a typeo in default.css.php:


* { font-family: verdana; }
a:link, a:visited, a:active { color: #040404; font-size: 11px; text-decoration: none; }
a:hover { text-decoration: underline; }
a:link IMG, a:visited IMG, a:active IMG, a:hover IMG { border: 0px; margin: 0px; paddnig: 0px; }

must be padding.

but this will not fix your problem. One way to "fix" it is to change the bgcolor of the first table from "#ffffff" to "#040404" but this is a improvisation.

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum