UL Navigation bar spacing problems

Hi have an UL as my horizontal navigation. When viewed in firefox the border spacing bar sits in the direct centre of the links. In IE however, it is pushed to the right.

The page in question is at:

http://www.magiclotto.co.uk/index.html

Thanks,

Julian

 

Well... you've got a number of problems here... That your font size is dynamic, by default on large font machines (where dynamic fonts are automagically 25% larger) it's going to two lines, and the text isn't centered... I'm NOT seeing it 'pushed to the right' here though.

You ARE likely encountering spacing issues though because you are displaying them inline and not floating - so the whitespace between the line-items is adding extra space to the right of each word. This can be fixed thus:

	<ul id="navLinks">
		<li class="firstLink"><a href="#">Home</a></li
		><li><a href="#">Digital Print</a></li
		><li><a href="#">Exhibitions</a></li
		><li><a href="#">Design</a></li
		><li><a href="#">Digital Book</a></li
		><li><a href="#">Testimonials</a></li
		><li><a href="#">Request A Quote</a></li
		><li class="lastLink"><a href="#">Contact Us</a></li>
	</ul>

Code (markup):

Looks kind of funny in the code, but it gets rid of that pesky extra space inside your LI's.

You have other 'issues' - like that overblown reset in a separate file (really only the margin/padding and border ones are 'neccessary' for 99% of files, and why waste the extra handshake on it?)

Your menu is inside a perfectly good width restricting wrapper, why waste time on declaring a width on it? Fix the height in px, that means fix the FONT in PX or it WILL break at default zoom on large font machines, of course your line-height declaration isn't even VALID. 2.5 WHAT? Also, turning off text-decoration on ALL links is bad practice from an accessability standpoint - turn it off in the menu, fine... for the whole document, Carlos Mencia HTML Grey.

Oh, and you do know that 800px is not 800px friendly, right? At which point you might as well open up and make #wrapper 992px...

Much of your 'issue' though is you've gone a bit silly with manually spacing your margins on one side to center it, instead of just letting HTML do that work FOR YOU. Pretty much, I'd probably have this for the CSS in that area:

#navLinks{
	margin:15px 30px 0;
	padding:8px 0;
	text-align:center;
	font:bold 12px/14px verdana,sans-serif;
	background:#468 url(Images/navLinksBack.gif) 0 0 no-repeat;
}

#navLinks li{
	display: inline;
	padding:0 8px;
	border-right:1px solid #99C;
}

#navLinks .lastLink {
	border:0;
}

#navLinks a {
	text-decoration:none;
	color: #CCC;
}

#navLinks a:active,
#navLinks a:focus,
#navLinks a:hover {
	color: #DF5400;
}

Code (markup):

Which should work in most browsers just fine. That 30px margin on each side makes it 740 since it's parent is 800 - so no width declaration and it centers that. No need to use padding to push it in since text-align:center will throw it right were you need it since you made them all display:inline. Applying EVEN padding to both sides with the above HTML reformatting will make them more consistantly spaced regardless of the font used. The 14px line-height gives us nice centering on those separators, with simple padding on the parent UL adding up to that 30px you wanted... and always remember that :active is for the most part the keyboard equivalent to :hover in IE, and :focus is for RoW, so don't leave those folks in the cold on navigational aids.

Though part of me distrusts styling LI's with anything more than display:inline thanks to 'unusual' behavior in IE, so I might consider moving the padding and border to the more predictable anchor tag.

 

Thanks for the reply, I have changed the design around a bit and taken your advice on board. The new page is at http://www.magiclotto.co.uk/index.html

There were a couple of things that i didn't understand in your post though:

1. "do know that 800px is not 800px friendly" - what do you mean by friendly?

2. "I might consider moving the padding and border to the more predictable anchor tag" - how do I write this?

Thanks,

Julian

 

If you are aiming to support an 800px wide display, you need to remember most of the time browsers are going to have a scrollbar, and some might have borders even when maximized - so if you want to target a 800px wide display, you have to subtract at least 32px. You call the outermost wrapper 800px you are going to get a horizontal scrollbar and 32px of your content shoved offscreen - which is why I would have your #wrapper as 768px wide, not 800px. If you are going to declare your outermost as 800px, you might as well target the next resolution up - 1024, in which case you want to use 992px (1024-32=992)

NOT that I would be designing fixed width in the first place - but that's me.

Simple change:

#navLinks li{
	display: inline;
}

#navLinks a {
	padding:0 8px;
	text-decoration:none;
	color: #CCC;
	border-right:1px solid #99C;
}

#navLinks .lastLink a {
	border:0;
}

Code (markup):

The order is also important - ".lastlink a" must come after the "a" declaration.

For what you have here it's not really necessary, but if floats were involved you might get the 'staircase' effect under IE7, and have the dissapearing content bug rear it's ugly head in IE - making the LI display:inline and going right for the anchor prevents those types of problems - though again, since you are just doing inlines it shouldn't be an issue.

 

Hello again,

I have redesigned the site slightly so that it can be viewed properly at 800*600 and is not fixed width anymore. It is up at http://www.magiclotto.co.uk/index.html

However, in ie 6 a horizantal scrollbar appears now!

I have no idea why??

Any help would be great, thanks

Julian

 

I'm not seeing anything truly offensive in the CSS that could be causing that - so if I were to guess I would say that you are being bitten by bad comment placing.

Believe it or not, IE is really picky about placement of comments - your placement of comments between elements could be tripping any number of problems from the double render bug, dissapearing content bug, overpadding of content, treatment of a comment as a block element, etc, etc.

NOT that most of your comments make sense or are needed... for example:

<!--Start Of Header-->
<div id="topHeader">

Code (markup):

Really, that's the start of the header? I had no idea that's what <div id="topHeader"> meant. There's no reason to EVER have a comment like that.

For a good page about coding habits, especially as it applies to commenting I HIGHLY recommend this page:
http://www.ibm.com/developerworks/linux/library/l-clear-code/

I particularly love the comment "Oh? We're done? Thanks for letting me know. That big right bracket and the infinite expanse of empty space beyond really didn't tip me off to that. And you don't need a comment before the return statement saying, "Now we return a value," either."

Comments between sibling block level containers though are your real 'problem' - this is why I developed my own commenting style which would take this:

</div>
<!--End Of Header-->

Code (markup):

and instead read:

<!-- #topHeader --></div>

Code (markup):

Which if nothing else makes the code a hell of a lot cleaner. Mind you, I'm not 100% sure that's what's causing your issue with the width on IE, but it's as good a guess as any. Somehow for some wierd reason moving the comment inside the element being closed instead of having it between sibling block-levels can avoid MONSTER rendering headaches in various versions of IE. (google 'double render bug'). It doesn't come up often, but when it does it can drive you nutters since we are all pretty much taught from day one that comments don't render or effect rendering - in IE between floats or absolute positioned elements they can.

Likewise your indentation habits could use some 'help' - just to make your blocks clearer.... and you've got some presentational images in the markup that might as well be in CSS to save some code... You've got a few div in places I'd not be wasting DIV's, and at the same time missing a few I'd use - you've definately got more classes and ID's than I'd use... Lemme see, if I was to write that page the markup would be done thus:

<!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=iso-8859-1"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen, projection"
/>

<title>
	Home - IJ Graphics
</title>

</head><body>

<div id="container">

	<h1>
		IJ Graphics
		<b>
			Design & Digital<br />
			Print Solutions
		</b>
		<span></span>
	</h1>

	<div id="contact">
		<div class="phone">01483 451110</div>
		<a href="mailto:studio@ijgraphics.co.uk">studio@ijgraphics.co.uk</a>
	</div>

	<ul id="mainMenu">
		<li class="first"><a href="#">Home</a></li
		><li><a href="#">Digital Print</a></li
		><li><a href="#">Exhibitions</a></li
		><li><a href="#">Design</a></li
		><li><a href="#">Digital Book</a></li
		><li><a href="#">Testimonials</a></li
		><li><a href="#">Request A Quote</a></li
		><li class="last"><a href="#">Contact Us</a></li>
	</ul>

	<div id="fauxColumns">

		<div id="contentWrapper"><div id="content">

			<h2>Quality, Value &amp; Bespoke Digital Printing</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nec
				turpis. Integer quis velit. Fusce cursus. Maecenas ultrices dui eu
				dolor. Morbi id metus. Maecenas sit amet dolor. Ut lectus magna,
				porta sed, dictum a, tincidunt molestie, risus. Suspendisse potenti.
				Donec nec libero. Phasellus sapien nisi, laoreet vitae, consectetuer
				nec, egestas vel, enim. Aliquam orci massa, condimentum quis,
				adipiscing quis, consequat nec, turpis. Suspendisse posuere lorem
				in ligula.
			</p>

			<h2>Header 2</h2>
			<p>
				Morbi non leo. Vestibulum tincidunt tortor ac libero. Aenean
				consectetuer, neque et viverra viverra, felis urna venenatis orci,
				sit amet dignissim mauris diam eu lorem. Maecenas suscipit nisi
				vitae arcu. Nunc dapibus vestibulum arcu. Proin egestas aliquam
				tellus. Nunc eleifend, felis a tempor tincidunt, turpis mauris
				bibendum lorem, sit amet posuere tellus ipsum ac turpis.
			</p><p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla
				nec turpis. Integer quis velit. Fusce cursus. Maecenas ultrices
				dui eu dolor. Morbi id metus. Maecenas sit amet dolor. Ut lectus
				magna, porta sed, dictum a, tincidunt molestie, risus. Suspendisse
				potenti. Donec nec libero. Phasellus sapien nisi, laoreet vitae,
				consectetuer nec, egestas vel, enim. Aliquam orci massa,
				condimentum quis, adipiscing quis, consequat nec, turpis.
				Suspendisse posuere lorem in ligula.
			</p>
			<ul>
				<li> Bullet NO.1</li>
				<li> Bullet NO.2</li>
				<li> Bullet NO.3</li>
			</ul>
			<p>
				Sed mollis. Morbi non leo. Vestibulum tincidunt tortor ac libero.
				Aenean consectetuer, neque et viverra viverra, felis urna venenatis
				orci, sit amet dignissim mauris diam eu lorem. Maecenas suscipit
				nisi vitae arcu. Nunc dapibus vestibulum arcu. Proin egestas
				aliquam tellus. Nunc eleifend, felis a tempor tincidunt, turpis
				mauris bibendum lorem, sit amet posuere tellus ipsum ac turpis.
			</p>

		<!-- #content, #contentWrapper --></div></div>

		<div id="sideBar">

			<img src="images/pic.jpg"
				width="200" height="300"
				alt="Big Printer"
				class="mainPic"
			/>

			<div class="sideBox">
				<h2>Services</h2>
				<ul>
					<li>Service 1</li>
					<li>Service 2</li>
					<li>Service 3</li>
					<li>Service 4</li>
					<li>Service 5</li>
				</ul>
			<!--#sideBox --></div>

		<!-- #sideBar --></div>

	<!-- #fauxColumns --></div>

	<div id="footer">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Sitemap</a></li>
			<li><a href="http://www.creationbox.co.uk">Designed By CreationBox.co.uk</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	<!-- #footer --></div>

<!-- #container --></div>

</body></html>

Code (markup):

Heading out the door now, but when I get home I'll toss together matching CSS for that so you can see how I'd apply your styling...

If you are wondering about the formatting/indenting style, and the reasoning behind much of my choices you might want to read the style guide I've been developing the past six years for my own use - much of it isn't just about consistant formatting, but consistant formatting that prevents rendering bugs and predictions on filesizes for projects.
http://battletech.hopto.org/html_tutorials/styleGuide.txt

Back in an hour or two.

 

Ok, in adding the CSS a few more DIV's got yanked - like #container which wasn't doing anything.

This is how I'd have done that page:

http://www.cutcodedown.com/for_others/DrZork101/template.html

Code (markup):

The directory:

http://www.cutcodedown.com/for_others/DrZork101

Code (markup):

Is unlocked so you can grab the gooey bits. Validates XHTML 1.0 Strict, tested in IE 5.5, 6 & 7, FF 2.0 and 3.0, Opera 9.27 and 9.52 beta, and Safari 3.

You'll notice I changed around the header orders (makes more sense to me this way) and added a glider-levin style image replacemant instead of the 'content slide' you were using. The text-indent minus a whole chunk may give search engines something to look at, but it doesn't do much for you when images are off, CSS is on.

P.S. have a look at the page images off, CSS on - particularly the header. I TRY to do that where possible since there are still a great many areas (Utah, the Dakota's) where users are best off leaving images off since they're LUCKY if they get a 33.6 dialup connect.

 

Cheers for that deathshadow, am not about today but will ave a detailed look at this tomorrow.

Thanks for all the help,

Julian

 

hi, have taken a look at your modifications.

the markup is clean as a whistle now - much better than before.

I understand most of the changes however there are a few parts of the CSS which baffled me:

In the #fauxColumns div:

#fauxColumns {
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats IE */
	padding:1em 0;
	text-align:left;
	color:#000;
	background:#FFF;
	border-bottom:8px solid #368;
}

Code (markup):

-what does the overflow: hidden do for the floats?
-and the width: 100% , what is trip haslayout?

Also I cannot find a class mainPic in the css?

And in the #footer li a:

	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;

Code (markup):

what do these mean??

There also seems to be a problem with footer not displaying the background image footerLineMiddle.gif in IE. It will display it when you refresh, but if you scroll it out of view and then return it is only displaying the background color.

Sorry about all the questions, but I am keen to do things the right way but also understand why im doing them!

Thanks,

Julian

 

Normally a flat div will not 'contain' floats inside it. So far as it is concerned floats are not 'in flow' so the height of the div does not expand to contain it. When overflow:hidden, overflow:auto or a float is set in standards compliant browsers the container will suddenly wrap around floats inside it to the full height. This often lets you avoid having to add extra elements to "clear" the floats - and it means #fauxcolumns will stretch to the full height of both, so if you want to add a background-image to style the columns you can.

Back during the browser wars before CSS was introduced Microsoft came up with a slick way to make their browser run faster. They determined that some elements only needed their size calculated once - so don't waste time during building the page on recalculating them when something else changes size. Elements that needed to be recalculated are said to 'have layout'.

The problem is that those optimizations do not work properly once CSS is added to the mix - so from time to time we need to trick IE into thinking an element 'haslayout' . (This oversimplifies and it ain't quite right, but for purposes here it will have to do, 'cause I ain't got the time to explain it to you.)

Setting 'haslayout' can be done a variety of ways - the easiest are setting a width or height (height is bad in this case because we have set overflow to hidden) or using the zoom property (doesn't validate since it's an IE only property), and a whole host of other ways that are not suited for general use. There's a method called the 'holly hack' involving setting height:1%, but this can't be used with overflow:hidden, I'll cover that down below.

In this case the reason we use it is the overflow behavior in a standards mode page under IE does NOT wrap floats (pretty much IE ignoring the standards)... but for some reason if we trip haslayout it does, so that's an easy 'fix'.

Good page on that subject:
http://www.satzansatz.de/cssd/onhavinglayout.html

I didn't do mainPic becuase I didn't see it needing any styling - though you might want to add that as border:0;

Normally 'display:inline' elements like anchors, bold tags, spans, etc cannot have a width or height set on them in standards compliant browsers (internet exploder incorrectly lets you do so). Inline-block elements behave like inline ones, remaining 'in flow' while at the same time letting you set a width and/or height. Unfortunately prior to Firefox 3 gecko had no support for inline-block, though it did have the experimental -moz settings that by declaring both worked much the same way. Even with FF3 there are still some quirks/bugs in the implementation that means you are best off declaring the first two.

Bascially, we first declare -moz-inline-block, which gets us inline width and height somewhat working in earlier gecko implementations - we then set inline-box which seems to fix some bugs in BOTH FF3 and older gecko browsers. Both of those declarations are invalid and ignored in other browsers.

We then set inline-block which is ignored by FF2 and earlier, but is obeyed by Opera, Safari and to a lesser extent IE. (thankfully IE's default behavior is pretty much inline-block anyways)

Hmm, I hadn't noticed that - The problem appears to be isolated to just IE7 (figures) as it's fine in 6. Probably - yup, we need to trip haslayout on the footer. Easiest way to do that here is to add height:1%; to #footer - that fixes it right up.

Height:1% is the so called 'holly hack' - by the standards any percentage height declaration on an element is based on the height declared on it's parent - in this case the body tag. We did not declare a height on the body tag, so there's nothing for it to base that 1% on. Because of that it is automatically converted to height:auto in every browser. Because this is standards compliant behavior height:1% is safe to set here without worries of it being broken in future browser implementations... But it nets us the nice side effect of tripping haslayout in IE. Again, haslayout fixes the rendering order here so that 'bug' doesn't crop up.

Just be warned, height:1% with an overflow state is taken literally regardless of the parent's declared height - which is why we didn't use the holly hack in #fauxColumns. You could also use width:100% here instead since we didn't declare and side margins or paddings.

Good rule of thumb, avoid declaring widths on the same elements you declare side padding and margins on. It makes your calculations a headache and a half even in standards compliant browsers if you want to use %, and it will break in IE 5.x thanks to the broken non-standards compliant box model. (or IE6/7 in quirks mode for that matter - NOT that you should be deploying anything that trips quirks mode in those browsers)

NEVER say sorry when it comes to asking questions. The only stupid question is one you already know the answer to. Trust me, four years ago I was where you are now when it came to the ins-outs and quirks of CSS.

But then I operate on the general principal "Question EVERYTHING".