HTML Forum

**Ashkwil** · 09-20-2010, 04:45 PM

Ok this is the forum im working on:

www.bodyworkspersonaltraining.co.uk/old/forum/

Ok if you view it in IE8 its fine, chrome or firefox and all of the header is messed up, also i want to know how i can reduce the gap between the nav and the login box,

been trying to figure this out for a while as if i save the web page as and open it in chrome it looks fine,

Cheers for any help you give

**orionoreo** · 09-20-2010, 04:49 PM

don't ever use IE8 as a reference to building your site... IMO...

can't view your css.... but at the top of your css start with

HTML Code:

* {
margin: 0px;
padding: 0px;
{

and start redoing your elements... i have a feeling your header elements are on float: left.. you may need to clear your floats first

**Ashkwil** · 09-20-2010, 05:07 PM

Ok i dont know what you mean about the floats etc (im not really too good t this)

HTML Code:

<!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" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<!-- INCLUDE skin_config.html -->

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!-- IF S_ENABLE_FEEDS -->
	<link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" />
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_TOPICS}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&amp;t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

<!--
	phpBB style name: X-Silver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:	  Alpha Trion ( http://www.skin-lab.com/ )	

	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&amp;/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
		}
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

								<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
			
							<br>
<!-- NEW NAV -->
<div id="nav_back">

			

			<center>

			<a class="nav_buttons" href="{U_INDEX}"><img src="{T_THEME_PATH}/images/nav_home.png" border="0" alt="" /></a>

			<!-- IF S_USER_LOGGED_IN -->

			<a class="nav_buttons" href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/nav_user_cp.png" border="0" alt="" /></a>

			<!-- ENDIF -->

			<!-- IF not S_USER_LOGGED_IN -->

			<a class="nav_buttons" href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/nav_register.png" border="0" alt="" /></a>

			<!-- ENDIF -->

			<a class="nav_buttons" href="{U_SEARCH_ACTIVE_TOPICS}"><img src="{T_THEME_PATH}/images/nav_active.png"  border="0" alt="" /></a>

			<a class="nav_buttons" href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/nav_members.png"  border="0" alt="" /></a>

			<a class="nav_buttons" href="{U_SEARCH}" rel="nofollow"><img src="{T_THEME_PATH}/images/nav_search.png" border="0" alt="" /></a>

			<a class="nav_buttons" href="{U_FAQ}"><img src="{T_THEME_PATH}/images/nav_faq.png" border="0" alt="" /></a>


<a class="nav_buttons" href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/nav_pms.png" border="0" alt="" /></a>

<a class="nav_buttons" href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/nav_logout.png" border="0" alt="" /></a>


			</center>
</div>

				<div id="page-body">
					<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) --><!-- ENDIF -->

thts the code for my header

**OleTom** · 09-20-2010, 08:39 PM

IE is still the most used browser you might as well get IE, FireFox, Chrome and Safari and as you work on your sites check them in all before making live

**Ashkwil** · 09-21-2010, 11:45 AM

Yeah i now see that, anyone have any ideas? Or is the key to this in the CSS? I can post it up if needed,

Thanks

**orionoreo** · 09-21-2010, 07:03 PM

its in the css... layout wise it should always be in the css... if your layout isn't controlled by your css then you're doing it wrong...

post it

**Crimson** · 09-23-2010, 09:10 PM

The logo, menu, login box, etc. are contained inside of <DIV> tags. Several of them have CSS margins that are bigger than you probably want. Also, there's a line in your CSS code for the logo that says "float: left" which is making things show up wrong for people with larger monitors and may be causing the Chrome problems.

**Ashkwil** · 09-25-2010, 09:07 AM

Ok well heres a link to my css file its too large for the post

www.bodyworkspersonaltraining.co.uk/mycss.txt

Ive sorted the header but need to get rid of taht gap, thanks guys

**Ashkwil** · 09-27-2010, 09:55 AM

Any ideas?

**CSM** · 09-30-2010, 04:33 AM

To check for cross-browser compatibility you can use free services like http://browsershots.org

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!