www.webdeveloper.com
Results 1 to 6 of 6

Thread: IE7 - Problem Justifying Navigation

  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,252
    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.36706 seconds
  • Memory Usage 2,909KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (4)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates