Firefox acting up on my Header Image

obenix Eats an apple a day......

Messages:: 2,236

Likes Received:: 180

Best Answers:: 0

Trophy Points:: 0

#1

For once, IE works fine for a new site of mine.
If you browse over at cityguides.travelcorridor.com, you will notice that the header image is somewhat screwed up in FireFox. IE works fine.

I'm unable to determine the cause. Help, anyone?

obenix, Apr 22, 2006 IP

jimsmith Peon

Messages:: 629

Likes Received:: 12

Best Answers:: 0

Trophy Points:: 0

#2

i have the same problem...
IE shows things right, firefox doesn't

jimsmith, Apr 23, 2006 IP

obenix Eats an apple a day......

Messages:: 2,236

Likes Received:: 180

Best Answers:: 0

Trophy Points:: 0

#3

jimsmith, did you manage to find the solution?

obenix, Apr 23, 2006 IP

jimsmith Peon

Messages:: 629

Likes Received:: 12

Best Answers:: 0

Trophy Points:: 0

#4

no..... but it seems we aren't the only ones with problems.....
allow me to direct you to these other digital point posts.

I hate firefox
another strange layout problem

i'll keep you posted

jimsmith, Apr 23, 2006 IP

obenix Eats an apple a day......

Messages:: 2,236

Likes Received:: 180

Best Answers:: 0

Trophy Points:: 0

#5

Thanks jimsmith.
Anyone else could help?

obenix, Apr 23, 2006 IP

Colleen likes this.

Colleen Illustrious Member

Messages:: 6,777

Likes Received:: 725

Best Answers:: 1

Trophy Points:: 430

#6

obenix said:

Thanks jimsmith.
Anyone else could help?
Click to expand...

Obenix, the problem was you placed the padding in the .header class, to position your menu and title. Here's the correct css which will fix the problem.

Firefox isn't the one messing up, it's displaying it as it's coded, and IE works in quirks mode so it appears correct even when it's not coded correctly.

/* default sNews stylesheet */

body {
margin:5px 0;
padding:0;
font: 74% Arial, Sans-Serif;
color:#808080;
background-color:#eee;
line-height: 1.4em;
}

p {
margin: 0 0 5px 0;
padding: 0;
color: #303030;
background: inherit;
}

a {
color: #327EC5;
background: inherit;
text-decoration:none;
}

a:hover {
color:#2669AB;
background: inherit;
text-decoration:none;
}

h1 {
padding:0;
margin:0;
color: #FFF;
background: inherit;
font: bold 1.8em Arial, Sans-Serif;
letter-spacing: -1px;
}

h1 a {
color: #FFF;
background: inherit;
}

h2 {
background-color: inherit;
color:#808080;
font-size:140%;
font-weight:bold;
margin: 5px 0 5px 0;
padding:0;
}

h2 a {
background-color:#FFFFFF;
color:#000000;
}

ul {
margin: 0 0 10px 0;
padding : 0;
list-style : none;
border-bottom: 1px solid #eee;
}

li {
margin: 0 0 8px 0;
padding: 0 0 0 5px;

}

img {
border: 0;
}

.content {
background: #FFF;
color: #000;
margin: 0 auto;
padding: 0;
width: 750px;
}

.header {
height: 111px;
padding: 0;
margin:0;
background: #327EC5 url(bg.gif) no-repeat;
color: #FFF;
}

.header h1 {
padding: 22px 0 0 16px;
}

.hmenu {
float: right;
padding: 26px 18px 12px 1em;
}

.hmenu ul {
margin: 0;
padding : 0;
list-style : none;
border: none;
}

.hmenu li {
display: inline;

}

.hmenu li a {
color: #FFF;
background: inherit;
font-weight: bold;
margin: 0 0 0 8px;
}

.left {
clear: both;
font-size: 90%;
float:left;
width: 180px;
padding: 0 0 1em 1em;
}

.left_article {
margin: 10px 0 10px 0;
padding: 10px 0 10px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}

.center {
float:left;
width: 500px;
margin: 0 0 10px 30px;
padding: 0;
background: #FFF;
color: #000;
}

.footer {
clear:both;
color:#999999;
background: #FFF;
font-size:90%;
margin: 5px 0px 10px 0px;
padding: 1em;
border-top: 5px solid #eee;
text-align:left;
}

.footer .right {
float:right;
clear:right;
text-align:right;
}

fieldset {
border: 1px solid #eee;
}

textarea.text {
height: 150px;
width: 90%;
border: 1px solid #ccc;
background: #fff;
color: #000;
}

textarea.text:hover {
border: 1px solid #eee;
background: #FFFFF4;
color: #000;
}

input.field {
border: 1px solid #ccc;
background-color: #FFFFFF;
width: 200px;
color: #000;
}

input.field:hover {
border: 1px solid #eee;
background: #FFFFF4;
color: #000;
}

input.text {
margin: 0;
width: 110px;
border: 1px solid #eee;
background: #FFF;
color: #000;
}

input.text:hover {
border: 1px solid #ccc;
}

input.searchbutton {
margin: 0;
font-size: 100%;
font-family: Arial, Sans-serif;
border: none;
background: #FFFFFF;
color: #808080;
padding: 1px;
font-weight: bold;
}

.date {
color: #ccc;
background: #FFFFFF;
text-align: right;
margin: 4px 0 5px 0;
padding: 0.4em 0 0 0;
border-top: 1px solid #eee;
}

input.button {
background: #FFFFF4;
color: #808080;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

.comments {
padding: 10px 10px 8px 10px;
margin: 0 0 7px 0;
background: #f8f8f8;
color: #000;
}

.commentsbox {
padding: 8px 0 10px 10px;
margin: 0 0 10px 0;
background: #f4f4f4;
color: #000;
}

.error {
color: #990000;
background-color: #FFF0F0;
padding: 7px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px dashed #990000;
}
.error h2 {
color: #990000;
background: inherit;
}

.success {
color: #000000;
background: #F5FBE1;
padding: 7px;
margin-top: 5px;
margin-bottom: 5px;
border: 1px dashed #7BA813;
}
.success h2 {
color: #7BA813;
background: inherit;
}
Click to expand...

Colleen, Apr 23, 2006 IP

obenix likes this.

obenix Eats an apple a day......

Messages:: 2,236

Likes Received:: 180

Best Answers:: 0

Trophy Points:: 0

#7

Thank Colleen; truly DP's beauty and brains.
Tried it & it works.

obenix, Apr 23, 2006 IP

Colleen Illustrious Member

Messages:: 6,777

Likes Received:: 725

Best Answers:: 1

Trophy Points:: 430

#8

Excellent. If you need more help, you know where to find me.

Colleen, Apr 23, 2006 IP

Log in or Sign up

Firefox acting up on my Header Image

obenix Eats an apple a day......

jimsmith Peon

obenix Eats an apple a day......

jimsmith Peon

obenix Eats an apple a day......

Colleen Illustrious Member

obenix Eats an apple a day......

Colleen Illustrious Member

Useful Searches