IE7 - Problem Justifying Navigation

**awsdert** · 09-26-2012, 04:27 AM

There are only 2 files, their contents are displayed below. If someone can provide a Standards Compliant solution then I'd be grateful.
I'm not in a rush so take your time, I'll put the sitemap in ajax later hence the noscript list.

Code:

@media screen
{
	html, html *
	{
		margin: 0px;
		outline: none;
		padding: 0px
	}
	ul
	{
		padding: 5px;
		padding-left: 20px
	}
	a, label, input, button
	{
		border-width: thin;
		display: inline-block;
		font-size: medium
	}
	html
	{
		overflow: auto
	}
	body
	{
		position: relative
	}
	/* Navigation */
	/* - Default as List */
	#n
	{
		position: absolute;
		top: 0px;
		left: 0px
	}
	/* - Not IE6 or below */
	#nav > #n { position: static }
	#n > ul
	{
		display: block;
		font-size: 2pt;
		text-align: justify
	}
	#n > ul *
	{
		font-size: medium
	}
	#n > ul a
	{
		text-decoration: none
	}
	#n > ul > li
	{
		position: relative;
		display: inline-block;
		list-style: none;
		white-space: nowrap
	}
	#n > ul > li.last
	{
		font-size: 2pt;
		width: 100%
	}
	#ie7 #n > ul > li
	{
		/* Workaround */
		display: inline
	}
	#ie7 #n > ul
	{
		
	}
	#n > ul ul
	{
		background: #fff;
		border: #000 solid thin;
		border-radius: 5px;
		display: none;
		position: absolute;
		top: 5px;
		left: 90%
	}
	#n > ul > li > ul
	{
		top: 90%;
		left: 5px
	}
	#n > ul li:hover > ul
	{
		display: block
	}
	#search > form { display: inline-block }
}

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>HackerEX</title>
	<link href="inc/main.css" type="text/css" rel="Stylesheet" />
</head>
<!--[if IE 7]>
<body id="ie7">
<![endif]-->
<!--[if !IE]> -->
<body>
<!-- <![endif]-->
	<nav>
		<div id="nav">
			<div id="n">
				<ul>
					<li>
						<a href="index.htm">HackerEX</a>
						<ul>
							<li><a href="hackerex/sony.htm">Sony</a>
								<ul>
									<li><a href="hackerex/sony/ps1.htm">PS1</a> </li>
									<li><a href="hackerex/sony/ps2.htm">PS2</a> </li>
								</ul>
							</li>
						</ul>
					</li>
					<li id="search">
						<form action="search.htm" method="get">
							<label for="q">Search for: </label>
							<input id="q" name="q" type="search" placeholder="Search Terms..." />
							<button type="submit">Find</button>
						</form>
					</li>
					<li class="last">&nbsp;</li>
				</ul>
			</div>
		</div>
	</nav>
	<div id="b">
		<noscript>
			<p>Please enable Javascript.</p>
			<ul>
				<li><a href="sitemap.htm">Sitemap</a></li>
				<li><a href="sony/links.htm">Sony Links</a></li>
			</ul>
		</noscript>
	</div>
</body>
</html>

**rtrethewey** · 09-26-2012, 09:16 AM

I'm still on my first cup of coffee, so I'm not alert enough yet to look up the answer, but does IE7 support "@media screen"?

**awsdert** · 09-26-2012, 05:03 PM

Don't remember but it certainly produces most of the correct styling.
Sorry about late reply, had to go to work.

**awsdert** · 09-27-2012, 12:33 PM

Never mind, going for alternative method.
I'm blocking everything below IE8 with a conditional comment and everything else get's the id "w3" applied to the body tag allowing me to specify non-ie browsers instead.
Making some re-writes of the CSS, then I will post my new code for anyone interested.

Note: this will go on hackerex.free when it is available, just go to sourceforge if you what to know the details.

**awsdert** · 09-27-2012, 12:44 PM

Ignore this post

**awsdert** · 09-27-2012, 02:12 PM

Well here is my current solution.-Ignore the colour scheme, I'm using it for clarity while I build the site - will change once I've got the fundamentals in.
Again only 2 files, will be more once I sort out other stuff.

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>HackerEX</title>
	<link href="inc/main.css?modified=2012-09-27" type="text/css" rel="Stylesheet" />
</head>
<!--[if lt IE 8]>
<body id="ie">
<![endif]-->
<!--[if gt IE 7)]>
<body id="w3">
<![endif]-->
<!--[if !IE]>-->
<body id="w3">
<!-- <![endif]-->
	<nav>
		<div id="nav">
				<ul>
					<li>
						<a href="index.htm">HackerEX</a>
						<ul>
							<li><a href="hackerex/sony.htm">Sony</a>
								<ul>
									<li><a href="hackerex/sony/ps1.htm">PS1</a> </li>
									<li><a href="hackerex/sony/ps2.htm">PS2</a> </li>
								</ul>
							</li>
						</ul>
					</li>
					<li id="search">
						<form action="search.htm" method="get">
							<label for="q">Search for: </label>
							<input id="q" name="q" type="search" placeholder="Search Terms..." />
							<button type="submit">Find</button>
							<ul>
								<li>
									<label for="show">Show</label>
									<input id="show" name="show" class="num" type="number" value="20" />
								</li>
								<li>
									<label for="pages">Pages</label>
									<input id="pages" name="pages" class="num" type="number" value="10" />
								</li>
							</ul>
						</form>
					</li>
				</ul>
		</div>
	</nav>
	<div id="b">
		<noscript>
			<p>Please enable Javascript.</p>
			<ul>
				<li><a href="sitemap.htm">Sitemap</a></li>
				<li><a href="sony/links.htm">Sony Links</a></li>
			</ul>
		</noscript>
	</div>
</body>
</html>

Code:

@media screen, print
{
	/* Overides */
	html, html *
	{
		background: inherit;
		color: #000;
		font-size: medium;
		margin: 0px;
		outline: none;
		padding: 0px;
		vertical-align: baseline
	}
	#w3 html *
	{
		border: none
	}
	html, body, nav, div, ul
	{
		display: block
	}
	html
	{
		overflow: auto
	}
	body
	{
		padding: 5px
	}
	ul
	{
		border: none;
		padding: 5px;
		padding-left: 20px
	}
	li
	{
		display: list-item;
		list-style-position: outside
	}
	ul > li
	{
		list-style-type: disc
	}
	button
	{
		background: #ccc
	}
	#w3 input
	{
		background: #999;
		border: thin inset	#999;
		color: #ccc
	}
	#w3 input:focus
	{
		background: #9cf;
		color: #000
	}
	label, input, button
	{
		border-radius: 2px;
		padding-left: 2px;
		padding-right: 2px;
	}
	input.num
	{
		text-align: right
	}
	span, a, form, label, input, button
	{
		display: inline;
		border-width: thin
	}
	a, #ie button
	{
		font-size: small
	}
	#w3 button
	{
		border: thin outset	#999
	}
	#w3 button:active
	{
		border: thin inset	#999
	}
	#w3 span, #w3 a, #w3 form, #w3 input, #w3 button
	{
		display: inline-block
	}
}
@media screen
{
	#nav
	{
		background: #9fc;
		border: thin solid #063;
		border-radius: 5px;
		padding: 5px
	}
	#w3 #nav a
	{
		text-decoration: none
	}
	#w3 #nav > ul
	{
		font-size: 1pt;
		text-align: justify
	}
	#w3 #nav li
	{
		position: relative
	}
	#w3 #nav li ul
	{
		border: thin dotted #999;
		border-radius: 5px;
		display: none;
		position: absolute;
		top: 0px;
		left: 99%
	}
	#w3 #nav > ul > li > ul, #w3 #search > form > ul
	{
		top: 99%;
		left: 0px
	}
	#w3 #nav li:hover > ul, #w3 #search:hover > form > ul
	{
		display: block
	}
	#w3 #nav > ul > li
	{
		display: inline-block
	}
	#w3 #nav > ul:after
	{
		content: "";
		display: inline-block;
		width: 100%;
		height: 0px;
		overflow: hidden
	}
	#w3 #search > form > ul > li
	{
		display: table-row
	}
	#w3 #search > form > ul > li > *
	{
		display: table-cell
	}
}
@media print
{
	#nav
	{
		display: none
	}
}

Thread: IE7 - Problem Justifying Navigation

Thread Tools

Display

IE7 - Problem Justifying Navigation

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions