Forums

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:

/* 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:

#header {
    position: relative;
}

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

REMOVE:

#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?

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

sigh...I feel like a young grasshopper.

Again, thanks for your help!

apostrophe

Yes, that's exactly where the problem is.
Tip: use firebug to see where margins (and padding) are being applied and what exactly they are doing.

So:


h1#logo {
   margin: 0 0 25px 0;
   position: relative;
   top: 20px;
}
#menu {
    position:absolute;
    top:10px;
    right:0;
}

GreyFox135

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

treehouse : what would you like to learn today?

Forums

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