I am having an issue with positon the navigation bar the same way between both browsers. If I fix it in one browser, I’ll mess it up in the other…I need help as I can’t quite figure out where I have messed up or what I am doing wrong.
I appreciate the help!
Here are screenshots to show the difference between the two browsers:
Chrome:
Firefox:
Here are the files:
Could you just post the HTML and CSS here that way we can have easy access to the code? Otherwise we have to wait a while for the moderators to approve the attachment.
What versions of FF are those?
Oh, I wasn’t aware of that. I’ll post the code.
Firefox is 9.01 and Chrome is 17.0.963.56 m.
I’ve also tested on the latest version from both browsers (I didn’t have the latest version of Firefox install from where I am posting now.)
Here is the HTML:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta name="description" content="HTML5 Template" />
<meta name="keywords" content="HTML5 template" />
<meta name="author" content="HTML5, CSS, Template" />
<meta charset="UTF-8" />
<title>Website Title</title>
<link rel="stylesheet" type="tet/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<header>
<!-- contains all the items that go in the header like site title and logo -->
<div id="header_area">
<a href="index.html"><img src="images/dummy.png" border="0" class="logo"></a>
</div>
<!-- the site navigation -->
<nav>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="#">Getting Started</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">Get In Touch</a></li>
</ul>
</nav>
</header>
<div id="content">
<h3>Title of Template</h3>
</div>
</body>
</html>
Below is the CSS:
/* default page styles for falcon syndicate */
html {height: 100%;
}
body {background-color: #fff;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {font-family: "Arial", Verdana, sans-serif; font-size: 30px; color: #2b4d7a; padding: 41px 0px 0px 41px;}
h2 {font-family: "Arial", Verdana, sans-serif; font-size: 24px; color: #2b4d7a; padding: 41px 0px 0px 41px;}
h3 {font-family: "Arial", Verdana, sans-serif; font-size: 18px; color: #2b4d7a; padding: 41px 0px 0px 41px;}
h4 {font-family: "Arial", Verdana, sans-serif; font-size: 16px; color: #2b4d7a; padding: 41px 0px 0px 41px;}
.logo {position:relative;
width: 354px;
height: 60px;
top: 37px;
left: 41px;
}
header {position: relative;
background: #244168;
background-image: -webkit-linear-gradient(top, #1b304d 0%, #2d5282 100%);
background-image: -moz-linear-gradient(top, #1b304d 0%, #2d5282 100%);
background-image: -o-linear-gradient(top, #1b304d 0%, #2d5282 100%);
background-image: -ms-linear-gradient(top, #1b304d 0%, #2d5282 100%);
background-image: linear-gradient(top, #1b304d 0%, #2d5282 100%);
color: #fff;
height: 358px;
}
#header_area {margin-left: auto;
margin-right: auto;
width: 930px;
height: 144px;
background: #2d517d;
background-image: -webkit-linear-gradient(top, #356092 0%, #244268 100%);
background-image: -moz-linear-gradient(top, #356092 0%, #244268 100%);
background-image: -o-linear-gradient(top, #356092 0%, #244268 100%);
background-image: -ms-linear-gradient(top, #356092 0%, #244268 100%);
background-image: linear-gradient(top, #356092 0%, #244268 100%);
border-radius: 0px 0px 10px 10px / 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px / 0px 0px 10px 10px;
}
nav {width: 930px;
position: relative;
margin-left: auto;
margin-right: auto;
left: 0px;
top: 0px;
}
/* site navigation */
header nav ul li {float: left;
margin: 0px 25px 0px 0px;
list-style-type: none;
}
header nav ul li a {color: #fff;
line-height: 14px;
font-family: "Arial", Verdana, sans-serif;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 6px 9px 6px 9px;
}
header nav a.active {color: #fff;
width:auto;
background-color: #2b4e7b;
border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
}
header nav a:hover {color: #4681c3;
width:auto;
background-color: #1d375c;
border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
}
#content {position: relative;
width: 930px;
height: 200px;
background-color: #fff;
margin-left: auto;
margin-right: auto;
top: -175px;
border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
}
And the RESET CSS I am using is posted below, it’s the one by Eric Meyer.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
That’s strange. I have 9.0.1 and Chrome 17 up, and they are displaying identical
For the reference, they were displaying identical before I added this (and after), but you should give overflow:hidden; to the top <ul> there to contain the floats :).
Yeah, that’s a bit odd. I was testing on a Mac, but can’t say that’s why…but maybe it is. I’ll test on my Windows machine later today. I will try adding overflow to the top ul and try to adjust to match the position to see if I can get them to look the same.
Thanks. I’ll share my results once I have checked.
It being a mac could be the difference maker, report back because it seems that FFmac is the only browser being weird about this.
FF on Mac is different than on windows.
Wow. I fixed it and without applying that fix. Guess what the problem was?
<link rel="stylesheet" type="tet/css" href="css/reset.css" />
<link rel="stylesheet" type="te[B]x[/B]t/css" href="css/reset.css" />
I’ve bolded the part I added and problem fixed.
So it was just a margins/paddings issue, most likely the default settings on the <ul>. Weird that other browsers didn’t play along with that.
Good job figuring it out though :). I would have never guessed unless I did a validation check.
Yeah, in the reset.css file the default margin/padding was set to 0 and since Firefox was not able to read the reset file it was not displaying the page correctly. Thanks for your help though! I appreciate it!
Always glad ot help, even though I didn’t do much this time ;).
Some advice:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
You need much more than that in a ‘reset’ – you aren’t resetting, you’re making a framework.
Lose the “HTML 5 for nothing” if you actually care about browser compatibility – it does nothing but add extra wrappers for no good reason to the code.
You might want to try using headings for your… heading, and using heading orders that make sense – H3 with no H2 or H1 preceeding it is gibberish.
separating out the reset is an extra handshake, and you should really use at least media=“screen,projection,tv” on the link to the stylesheet since it’s unlikely your screen stylesheet will make ANY sense on print, much less other devices.
declaring all those headings fonts in px is an accessibilty disaster – PX should be used where you HAVE to, not 'just ‘cause’.
this is minor, but avoid using class names identical to actual properties – like ‘active’. It gets confusing telling .active apart from :active
For markup, I’d probably have something more like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Website Title
</title>
</head><body>
<div id="pageWrapper">
<h1>
<a href="\\">
Web Site Title
<span><!-- image replacement --></span>
</a>
</h1>
<ul id="mainMenu">
<li><a href="index.html" class="current">Home</a></li>
<li><a href="#">Getting Started</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">Get In Touch</a></li>
</ul>
<div id="content">
<h2>Title of Template</h>
<!-- #content --></div>
<!-- #pageWrapper --></div>
</body></html>
The outer wrapper being to constrain the width, the span in the h1 to be absolute positioned over the text hiding it (revealing it when images are disabled or for screen readers, search engines, etc).
Though I would suggest marking up your ENTIRE content (or at least a reasonable facsimile) in HTML before you start playing with appearance – that way content can dictate the layout instead of the other way around.
I probably also would NOT use linear-gradient as not only is the CSS for all the browser options ridiculous, it makes scrolling up and down painful/choppy in FF.
Oh, and your border-radius declarations are gibberish – what’s with the slash?
Mostly though, a lot of your issues stem from constantly declaring widths on things that if you had one central wrapper, you’d not have to declare widths/centering on any of them! That’s what’s really biting you here IMHO… though declaring a line-height SMALLER than the font-size is causing text to get chopped off in IE and Opera on that menu… good rule of thumb? line-height should be LARGER than font-size, not smaller… condensing your font properties would also make it easier to maintain and be less code.
Which… your font-stacks don’t make sense either. Verdana is a windows family font, if arial is present, verdana tends to be – you should say a NON microsoft font as the first fallback, like helvetica… and if it’s only one word, it doesn’t go in quotes. There’s NO reason to ever say “arial” – it’s just arial… which is why where you have:
line-height: 14px;
font-family: "Arial", Verdana, sans-serif;
font-size: 16px;
font-weight: bold;
I would probably have:
font:bold 16px/20px arial,helvetica,sans-serif;
then decrease the top/bottom paddings to give you that… hmm… what are you aiming for there, 26px total height? (14 line-height + 12 padding)… stick with multiples of 2,4 or 8 on values too - computers deal better with them and the math is simpler as you’ll avoid rounding errors.
Gimme a few minutes, and I’ll toss together a working example of that for you – I think you might find this a approach easier since it gets rid of all the ‘html 5 for nothing’ wrappers, lets you set your master width ONCE (making fluid layout easier) and should be almost HALF the CSS to do the same thing…
Ok, I was ‘guessing’ on how tall you wanted that gradient you had on header – since you seemed to have it stretching further in your images than it should have by the code. (since Content wasn’t or shouldn’t be inside it)… I figured 360px would be enough.
This is what I came up with:
http://www.cutcodedown.com/for_others/sainraja/template.html
The CSS:
http://www.cutcodedown.com/for_others/sainraja/screen.css
Is a lot simpler. Set the width ONCE on the outer wrapper… set up the topmost heading (of which all other headings are subsections) on the page for gilder-levin image replacement, pad the menu wrapping UL, style the content. They all pick up their widths and centering off that one wrapper so you don’t have to say it over and over and over and over again.
… and if you really want that HTML 5 bloat, swap back to the not ready for primetime doctype and slap HEADER and NAV in there, then pretend they don’t exist. (I’d suggest setting them to display:inline)… NOT that there’s any reason to jump the gun on a specification that isn’t even out of draft, offers no tangible improvements, and on the whole seems to want to set coding practices BACK a decade to the peak of the browser wars and HTML 3.2.
YMMV.
I would also consider wapping to tiled images instead of using linear-gradient, just because they are till PAINFULLY slow in gecko based browsers (like firefox) and there’s no guarantee of them rendering the same across browsers. Two sub-1k images are a small price to have it work EVERYWHERE in the hear and now instead of relying on CSS3 that still has major implementation issues… espeically when thanks to the browser specific prefix idiocy it’s 700 bytes of CSS to do the job of a couple of VERY tiny images.
Actually, one sec, I’ll make a image version of that too.
Here it is using images instead of linear-gradient, removing the threat of gecko being a re-re, and opening the door to it looking pretty good all the way back to IE 5.x
http://www.cutcodedown.com/for_others/sainraja/template2.html
With the changes to the CSS:
http://www.cutcodedown.com/for_others/sainraja/screen2.css
being minor, just cut out the linear-gradient for background-image.
As with all my examples the directory is wide open:
http://www.cutcodedown.com/for_others/sainraja
for easy access…
The two images combined are only 529 bytes, making them SMALLER than the CSS used to replace them – it does add in two extra handshakes, but I don’t consider that a big deal since we can lose one handshake just by using ONE stylesheet per media type – and it means it works “everywhere” in the here and now.
Meaning the only CSS3 effect ‘lost’ on older browsers is the rounded corners. Oh noes, not that! 
Thanks deathshadow. I appreciate the advice.
I was putting this together to get myself familiar with the new properties from HTML5/CSS3. I started the original template by using one main wrapper for the content area (the header was still separate) and used images instead of CSS gradients (although the original code/css wasn’t without it’s problems either, I could definitely take your advice and make adjustments to that one.)
I have been slowly adding styles to header, section, nav etc. So, still working through that. I will go ahead specify the media=“screen, projection, tv” etc.
Here is the final look I a going for:
The reason the gradient on the header was stretching down…past the content div.
The main reason I am trying to put this site together is because I want to get back into XHTML/CSS and the upcoming technology.
I know that using pixels instead of .ems can be a accessibility disaster, I was thinking of going back after I have the template done to fix all that. I am trying to take it one step at a time…maybe not the best way to go. I am already getting somewhat overwhelmed…
I do have a question regarding the use of headings. As you mentioned that using H3 without h1 or h2 preceeding it is non-sense. I plan on using a bigger heading on other pages, then the one I am using on the homepage so I didn’t want that to be big. How do I go about doing that? If I use h1 on this, and want it smaller and use h1 on another page but have it bigger?
Forgot to mention that I will be coming up with all the content for the site. I don’t really have any working content to use for it right now.