[Solved] Problem with FF3 on PC ONLY on PC…

[GreyFox135]

Hey everyone,
Okay, so I’m working on my site and I’m in the really early stages of development. I’ve noticed right off the bat that the navigation background is disconnected in FireFox 3 on PC. Only on PC. FF on my mac displays it correctly as does Safari, Chrome, and IE 8.

Does anyone know what would cause something like this?

http://redeyedesigner.com/dev/newred/red_site/

Here’s my CSS:

Code:

/* Eric Meyer’s Reset Reloaded */
/* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

.wrap {
margin: 0 auto;
width: 960px;
}

.clear {
clear: both;
}

body {
background: url(‘../img/headerbg.jpg’) repeat-x 0 0;
font-family: Helvetica, Arial, Sans-serif;
font-size: 15px;
}

h1#logo {
background: url(‘../img/logo.png’) no-repeat 0 0;
margin: 20px 0 5px 0;
width: 371px; height: 41px;
text-indent: -9999px;
}

small {
color: #ececec;
font-size: .9em;
margin-left: 1.2em;
}

ul#menu {
background: url(‘../img/menubg.png’) no-repeat 0 0;
float: right;
margin-top: -56px;
width: 404px; height: 47px;
}

ul#menu li {
display: block;
float: left;
margin-left: 23px;
margin-top: 20px;
}

ul#menu li.last {
padding-right: 0;
}

ul#menu li a {
color: #ececec;
font-weight: bold;
text-decoration: none;
}

ul#menu li a:hover {
color: #83d8f3;
}

[TheDoc]

Looks fine in FF 3.5.

Broken in IE7, and far worse things in IE6.

Let’s do some absolute positioning! Wooo!

Add this to your CSS:

Code:

#header {
position: relative;
}

#menu {
position:absolute;
top:0;
right:0;
}

REMOVE:

Code:

#menu {
float:right;
margin-top:-56px;
}

[GreyFox135]

Wow…can’t believe I didn’t think of that. I failed…

Thanks for the help.

I did the top: 0; right: 0; but found that I had to give the top a negative value to bump it up with the red rule across the top. This makes it look the way I want on all browsers except IE 7 It’s off by like 5px. It’s got to meet up perfectly or else it looks funky.

Do you think this part is messing it up?

Code:

h1#logo {
margin: 20px 0 5px 0;
}

sigh…I feel like a young grasshopper.

Again, thanks for your help!

[GreyFox135]

Awesome! Thanks for the help. I really appreciate it. I finally got it look right across the board. Thanks again!

[Author]

Posts