www.webdeveloper.com
Results 1 to 6 of 6

Thread: IE7 - Problem Justifying Navigation

Hybrid View

  1. #1
    Join Date
    Aug 2010
    Posts
    51

    Post IE7 - Problem Justifying Navigation

    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>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,109
    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"?
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Aug 2010
    Posts
    51
    Don't remember but it certainly produces most of the correct styling.
    Sorry about late reply, had to go to work.

  4. #4
    Join Date
    Aug 2010
    Posts
    51
    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.

  5. #5
    Join Date
    Aug 2010
    Posts
    51
    Ignore this post
    Last edited by awsdert; 09-27-2012 at 12:45 PM. Reason: Accidental Post

  6. #6
    Join Date
    Aug 2010
    Posts
    51
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles