Small Menu problem

**DarkAngelBGE** · Jul 10, 2007 23:28

Hi there, here is the markup:

HTML Code:

<div id="menu">		
	<ul>
		<li class="over" onmouseover="this.className='over'" onmouseout="this.className='over'"><span class="tab_left"></span><?php echo $html->link('HOME', '', array('class' => 'selected float_left pad half left right')) ?><span class="tab_right"></span></li>
		<li onmouseover="this.className='over'" onmouseout="this.className='normal'"><span class="tab_left"></span><?php echo $html->link('FORUM', '', array('class' => 'float_left pad half left right')) ?><span class="tab_right"></span ></li>
		<li onmouseover="this.className='over'" onmouseout="this.className='normal'"><span class="tab_left"></span ><?php echo $html->link('MEMBERS', '', array('class' => 'float_left pad half left right')) ?><span class="tab_right"></span ></li>
		<li onmouseover="this.className='over'" onmouseout="this.className='normal'"><span class="tab_left"></span ><?php echo $html->link('CROWN ACCOUNT', '', array('class' => 'float_left pad half left right')) ?><span class="tab_right"></span ></li>
		<li onmouseover="this.className='over'" onmouseout="this.className='normal'"><span class="tab_left"></span ><?php echo $html->link('VIEW NETWORKS', '', array('class' => 'float_left pad half left right')) ?><span class="tab_right"></span ></li>
	</ul>	
</div>
<div id="search_bar">
	<form action="<?php echo $html->url('');?>" method="post">
		<?php echo $form->submit('SEARCH', array('class' => 'search_button')); ?>	
		<?php echo $html->input('Search/text', array('class' => 'txt')); ?>						
	</form>
</div>

and here the CSS:

[css]
/**************************************************************/
/* MENU */

#menu
{
width: 676px;
height: 23px;
font-size: 0.6em;
letter-spacing: 1px;
}

#menu ul
{
float: right;
list-style: none;
margin-top: 0px;
}

#menu li
{

}

#menu .tab_left
{
width: 18px;
height: 23px;
background:transparent url(../img/tab_left.gif);
float:left;
}

#menu .tab_right
{
width: 12px;
height: 23px;
background:transparent url(../img/tab_right.gif);
float:left;
}

#menu .over .tab_left
{
width: 18px;
height: 23px;
background:transparent url(../img/tab_left.gif);
background-position: 0px -35px;
}

#menu .over .tab_right
{
width: 12px;
height: 23px;
background:transparent url(../img/tab_right.gif);
background-position: 0px -35px;
}

#menu li a
{
display: block;
height: 18px;
color: #d3eeff;
text-decoration: none;
text-align: center;
padding-top: 5px;
background:transparent url(../img/tab_body.gif);
background-repeat: repeat-x;
}

#menu li a.selected
{
background-position: 0px -23px;
}

#menu li a:hover, #menu li:hover a
{
color: #fff;
background-position: 0px -23px;
}

#menu li.selected a
{
color: #fff;
font-weight: bold;
}
[/css]

In firefox this looks fine, in IE it gets cluttered up. :/ Thank you for any help!

http://tim-koschuetzki.com/files/menu_ff.jpg
http://tim-koschuetzki.com/files/menu_ie.jpg

**DaveWoods** · Jul 11, 2007 01:16

Could you post the generated HTML please? It's not obvious what is being generated in those php arrays.

The full HTML will help to solve the problem as it could be something as simple as an incomplete doctype.

Also which version of IE is the problem in, IE7, IE6 etc all behave differently

**Dan Schulz** · Jul 11, 2007 01:25

Not only that, but what exactly is the problem you're having? It'll be a lot easier for people to help you if they know what's going on before looking at a single line of code.

**DarkAngelBGE** · Jul 11, 2007 03:44

@dan: I posted screenshots to even better express it.

@csswiz:

In IE6 is the problem. Here is the entire markup:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<link rel="icon" href="/example/favicon.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="/example/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" type="text/css" href="/example/css/defaults.css" /></head>
<body>


			<h4>You're signed in as <a href="/example/users/view/100"  class="username">admin</a></h4>

			<ul id="top_links">
				<li><a href="/example/users/logout" >Logout</a></li>
				<li><a href="/example/users/edit_profile/100" >Edit my profile</a></li>
				<li><a href="/example/users/edit_account/100" >Manage Account</a></li>
				<li><a href="/example/invitations/add" >Invite a friend</a></li>
				<li><a href="/example/networks/add" >Create Network</a></li>

				<li><a href="/example/posts/" >View Blog</a></li>
				<li><a href="/example/posts/add" >Create a blog post</a></li>
				<li><a href="/example/forums" >Forums</a></li>
                <li><a href="/example/statuses/add" >Update your status</a></li>
			</ul>

			

	<div id="header">

		<div id="top_nav">
			<ul>
				<li><a href="/example/users/edit_profile/100" >example.com</a></li>
				<li>|</li>
				<li><a href="/example/users/edit_profile/100" >whisperofthewild.com</a></li>
				<li>|</li>
				<li><a href="/example/users/edit_profile/100" >vodkanaked.com</a></li>

				<li>|</li>
				<li><a href="/example/users/edit_profile/100" >teamchristiania.com</a></li>
			</ul>
			<div id="right">
				<ul>
					<li>welcome </li>
					<li>|</li>

					<li><a href="/example/users/edit_profile/100" >SIGN OUT</a></li>
				</ul>
			</div>
			<div id="flag">&nbsp;</div>
		</div>
	</div>		<div id="container">
		<div id="logo_outer">
	<div id="logo"></div>

	<h3>Brought to you by example</h3>
</div>		<div id="left_column">
			<div class="box1">
				<div class="banner"><h2>WHISPER OF THE WILD</h2></div>
				<div class="item">
					<div class="thumb_wide">
						<img src="/example/img/thumb_border.png" alt="" />					</div>

					<div class="small_title">
						<h2>MAX BRENNER</h2>
					</div>
					<div class="content">
						<p>
							Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
						</p>
					</div>
					<a href="/example/users/edit_profile/100"  class="read_more"></a>					<div class="clear"></div>

				</div>
				<hr/>
				<div class="item">
					<div class="thumb_wide">
						<img src="/example/img/thumb_border.png" alt="" />					</div>
					<div class="title">
						<h2>Adventures In Public Relations</h2>
					</div>

					<div class="content">
						<p>
							Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
						</p>
					</div>
					<a href="/example/users/edit_profile/100"  class="read_more"></a>					<div class="clear"></div>
				</div>
			</div>
			
			<div class="box2">

				<h2>PHOTOBOOTH</h2>
			</div>
			
			<div class="box3">
				<div class="banner"><h2>CONTEST AREA</h2></div>
				<div class="item">
					<div class="thumb_wide">
							<img src="/example/img/thumb_border.png" alt="" />					</div>

					<div class="small_title">
						<h2>Enter to Win 1 Month Free Concierge Service</h2>
					</div>
					<div class="content">
						<p>
							Pellentesque lobortis justo non felis. Fusce non tortor id leo commodo fringilla. Proin lacus. Mauris ut ipsum sed odio egestas rhoncus. Fusce porta. Aliquam erat volutpat. Aenean ipsum. Mauris felis neque, placerat id, accumsan in, bibendum ac, nulla. In orci turpis, semper id.
						</p>
					</div>
					<a href="/example/users/edit_profile/100"  class="read_more"></a>				</div>

			</div>
			
			<div class="box4">
				<div class="banner"><h2>FORUM POSTS</h2></div>
				<div class="post">
					<a href="/example/posts/view/1"  class="post_icon"></a>					<div class="body">
						<p>
							Ann: Where is the good place for burgers? When I was....
						</p>

					</div>
				</div>
				<hr/>
				<div class="post">
					<a href="/example/posts/view/1"  class="post_icon"></a>					<div class="body">
					<p>
						Ann: Where is the good place for burgers? When I was....
					</p>
					</div>

				</div>
				<hr/>
				<div class="post">
					<a href="/example/posts/view/1"  class="post_icon"></a>					<div class="body">
					<p>
						Ann: Where is the good place for burgers? When I was....
					</p>
					</div>
				</div>

				<hr/>
				<a href="/example/users/edit_profile/100"  class="read_more"></a></div>
			</div>	
			
			<div id="main_column">
				<div id="menu">		
	<ul>
		<li class="over" onmouseover="this.className='over'" onmouseout="this.className='over'"><span class="tab_left"></span><a href="/example/users/edit_profile/100"  class="selected float_left pad half left right">HOME</a><span class="tab_right"></span></li>
		<li onmouseover="this.className='over'" onmouseout="this.className='normal'"><span class="tab_left"></span><a href="/example/users/edit_profile/100"  class="float_left pad half left right">FORUM</a><span class="tab_right"></span ></li>
		<li onmouseover="this.className='over'" onmouseout="this.className='normal'"><span class="tab_left"></span ><a href="/example/users/edit_profile/100"  class="float_left pad half left right">MEMBERS</a><span class="tab_right"></span ></li>

		<li onmouseover="this.className='over'" onmouseout="this.className='normal'"><span class="tab_left"></span ><a href="/example/users/edit_profile/100"  class="float_left pad half left right">CROWN ACCOUNT</a><span class="tab_right"></span ></li>
		<li onmouseover="this.className='over'" onmouseout="this.className='normal'"><span class="tab_left"></span ><a href="/example/users/edit_profile/100"  class="float_left pad half left right">VIEW NETWORKS</a><span class="tab_right"></span ></li>
	</ul>	
</div>
<div id="search_bar">
	<form action="/example/users/edit_profile/100" method="post">
		<div class="submit"><input type="submit" class="search_button" value="SEARCH" /></div>	
		<input name="data[Search][text]"  class="txt" value="" id="SearchText" type="text" />						
	</form>
</div>				<h3>Edit profile</h3>

<form id="UserAddForm" method="post" action="/example/users/edit_profile/100">	<div class="input required"><label for="UserFullName">Full Name</label><input name="data[User][full_name]" type="text" value="admin" maxlength="80" id="UserFullName" /></div>
	<div class="input required"><label for="UserEmail">Email</label><input name="data[User][email]" type="text" value="admin@example.com" maxlength="100" id="UserEmail" /></div>
	<div class="input"><label for="UserProfileCity">City</label><input name="data[UserProfile][city]" type="text" value="New York" id="UserProfileCity" /></div>
		<div class="input"><label for="UserProfileHometown">Hometown</label><input name="data[UserProfile][hometown]" type="text" value="New York" id="UserProfileHometown" /></div>
	<div class="input"><label for="UserProfileProfession">Profession</label><input name="data[UserProfile][profession]" type="text" value="" id="UserProfileProfession" /></div>
	<div class="input"><label for="UserProfileWhatsHappening">What's happening?</label><input name="data[UserProfile][whats_happening]" type="text" value="programming cool stuff" id="UserProfileWhatsHappening" /></div>
	<div class="input">
			<div class="input">
		<label for="UserProfileSex">Sex</label>		<input type="radio" name="data[UserProfile][sex]" id="sex_M" value="M" id="UserProfileSex" checked="checked"  />Male<input type="radio" name="data[UserProfile][sex]" id="sex_F" value="F" id="UserProfileSex"  />Female	</div>

	<div class="input">
		<label for="UserProfileMaritalStatus">Status</label>		<input type="radio" name="data[UserProfile][marital_status]" id="marital_status_S" value="S" id="UserProfileMaritalStatus" checked="checked"  />Single<input type="radio" name="data[UserProfile][marital_status]" id="marital_status_M" value="M" id="UserProfileMaritalStatus"  />Married	</div>

	<label for="UserProfileDescription">About me</label>	<textarea name="data[UserProfile][description]"  rows="10" cols="40" id="UserProfileDescription">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas quis justo. Cras purus lectus, rhoncus lacinia, ornare in, porttitor non, enim. Donec ac eros a pede semper porta. Nunc vel nibh. Praesent dignissim tellus facilisis ante. Suspendisse porttitor interdum nulla. Maecenas ligula. Sed nec ante. Ut tincidunt purus bibendum pede. Sed ullamcorper euismod justo. Phasellus euismod molestie odio. Pellentesque tristique pede et nisl. Phasellus lacus nunc, accumsan eu, vehicula eu, laoreet vel, tortor. Nam et pede eget lorem dapibus rutrum. Vivamus et orci. In adipiscing. Sed pulvinar pharetra lorem. Ut ullamcorper leo.</textarea>
	<div class="submit"><input type="submit" value="Update profile" /></div></form>			</div>
		<div id="clear_footer">&nbsp;</div>
	</div>
<div id="footer">
	<ul>
		<li><a href="/example/users/edit_profile/100" >About</a></li>

		<li>|</li>
		<li><a href="/example/users/edit_profile/100" >FAQ</a></li>
		<li>|</li>
		<li><a href="/example/users/edit_profile/100" >Terms</a></li>
		<li>|</li>
		<li><a href="/example/users/edit_profile/100" >Privacy</a></li>

		<li>|</li>
		<li><a href="/example/users/edit_profile/100" >example.com</a></li>
		<li>|</li>
		<li><a href="/example/users/edit_profile/100" >whisperofthewild.com</a></li>
		<li>|</li>
		<li><a href="/example/users/edit_profile/100" >vodkanaked.com</a></li>

		<li>|</li>
		<li><a href="/example/users/edit_profile/100" >teamexample.com</a></li>
	</ul>
	<p id="copyright">&#169; 2007 example. All Rights Reserved.</p>
</div> 
</body>
</html>

**DarkAngelBGE** · Jul 11, 2007 03:52

Also with the same markup, the footer seems to be unable to sit below the main columns. :/

Here is the entire CSS:

Code:

@CHARSET "UTF-8";

/* Common */
.align_center { text-align: center; }
.align_left { text-align: left; }
.align_right { text-align: right; }

.float_left { float: left; }
.float_right { float: right; }
.clear { clear: both; font-size: 0; height: 0; }

.warn_text { color: #f00 !important; }
.small_text { font-size: 0.8em; }
.smaller_text { font-size: 0.7em; }
.normal_text { font-size: 76&#37;; text-transform: none; }
.uppercase_text { text-transform: uppercase; }
.thin_text { font-weight: normal; }
.thinner_text { font-weight: 200; }
.mono_text { 	font-family: "Courier New", "Courier", monospace; }

strong, .strong { font-weight: bold; }

.pad.double.top    { padding-top:    2em; }
.pad.double.right  { padding-right:  2em; }
.pad.double.bottom { padding-bottom: 2em; }
.pad.double.left   { padding-left:   2em; }

.pad.triple.top    { padding-top:    3em; }
.pad.triple.right  { padding-right:  3em; }
.pad.triple.bottom { padding-bottom: 3em; }
.pad.triple.left   { padding-left:   3em; }

.pad {}
.pad.top    { padding-top:    1em; }
.pad.right  { padding-right:  1em; }
.pad.bottom { padding-bottom: 1em; }
.pad.left   { padding-left:   1em; }

.pad.half.top    { padding-top:    0.5em; }
.pad.half.right  { padding-right:  0.5em; }
.pad.half.bottom { padding-bottom: 0.5em; }
.pad.half.left   { padding-left:   0.5em; }

.pad.tiny.top    { padding-top:    2px; }
.pad.tiny.right  { padding-right:  2px; }
.pad.tiny.bottom { padding-bottom: 2px; }
.pad.tiny.left   { padding-left:   2px; }

.margin.tiny.top    { margin-top:    2px; }
.margin.tiny.right  { margin-right:  2px; }
.margin.tiny.bottom { margin-bottom: 2px; }
.margin.tiny.left   { margin-left:   2px; }

.border { border: 0 solid #555; }
.border.simple { border: 1px solid #555; }
.border.top    { border-top-width:    1px; }
.border.right  { border-right-width:  1px; }
.border.bottom { border-bottom-width: 1px; }
.border.left   { border-left-width:   1px; }

.half_width { width: 50%; }
.fit_width { width: 90%; }
.full_width { width: 100%; }

textarea.normal_height { height: 120px; }
textarea.half_height { height: 60px; }

#top_links li {
	display:inline;
}
img {
	margin:0;
	padding:0;
	background:transparent;
}
a
{
	text-decoration: none;
	color: #d1d3d7;
}

ul.horizontal
{
	margin: 0 0;
	padding: 0 0;
}

ul.horizontal li
{
	display: inline;
}

html, body
{
  margin: 0; padding: 0;
}


hr
{
	height:1px; 
	border:none; 
	border-top:1px solid #888e99;
	width: 95%;
	margin: 0 auto;
}

h2
{
	font-size: 1em;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

h3
{
	font-size: 0.7em;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

p
{
	margin: 0;
	padding: 0;
}
/**************************************************************/
/* THUMBS*/
/**************************************************************/

.thumb_wide
{
	width: 115px;
	height: 85px;
	background:transparent url(../img/sample1.jpg) no-repeat;
	float:left;
	padding-right:0.5em;
}

.thumb_medium
{
	width: 102px;
	height: 69px;
	background:transparent url(../img/sample2.jpg) no-repeat;
	float:left;
	padding-right:0.5em;
}

.thumb_square
{
	width: 77px;
	height: 77px;
	background:transparent url(../img/sample3.jpg) no-repeat;
	text-align: center;
	float:left;
	padding-right:  0.5em;
	
}

.thumb_square p {
	padding-top:  0.5em;
}

/**************************************************************/
/* WELCOME PAGE */
/**************************************************************/

body
{
	background-color: #000000;
	font-family: "DIN", "Helvetica", "Arial";
	color: #d1d3d7;
	width: 100%;
}

#outer {
	margin-bottom:10px;
}
#container
{	
	margin:0px auto 10px auto;
	width:1000px;
}

/**************************************************************/
/* HEADER */


#header
{
	height: 35px;
	background:transparent url(../img/header_back.gif) repeat-x;
}

#top_nav
{
	width: 962px;	
	padding-top: 10px;
	margin:0px auto;
	top: 10px;
}
	
#top_nav ul
{
	float:left;	
	font-size:0.8em;
	margin: 0 0;
	padding: 0 0;
}

#top_nav ul li
{
	padding-left: 10px;
	padding-right: 10px;
	display:inline;
}

#top_nav a
{
	color: #fff;
}

#top_nav a:hover
{
	color: #9db7d3;
}	

#top_nav #right
{
	padding-left: 130px;
}

#top_nav #right li
{
	padding-left: 5px;
	padding-right: 5px;
	display:inline;
}

#top_nav #flag
{
	width: 35px;
	height: 120px;
	background:transparent url(../img/flag.gif);
	position:absolute;
	right:120px;
}


/**************************************************************/
/* LEFT COLUMN */


#logo
{
	width: 225px;
	height: 100px;
	background:transparent url(../img/crown_logo.gif);
	margin: 15px 0px 10px 25px;
}
#logo_outer h3
{
	color: #a2a2a2;
	margin: 5px 0px 0px 45px;
	padding:0;
}

#left_column
{
	width: 264px;
	height: 982px;
	padding-left: 10px;	
	float:left;
}

#left_column .box1
{
	margin-top: 63px;
	width: 263px;
	height: 260px;
	background-color: #626b79;
}
* html #left_column .box1
{
	margin-top: 92px;}
#left_column .box1 .banner
{
	width: 247px;
	height: 24px;
	background:transparent url(../img/left_back1.gif);
	padding-left:1em;
}

#left_column .banner h2
{
	padding-top: 5px;
	padding-left:   1em;
}

#left_column .banner .small_title
{
	padding-top:    2px;
}

#left_column h2
{
	font-size: 0.9em;
}

.item
{
	padding:0.5em;
}

#left_column .box1 .item .content
{
	font-size: 0.7em;
	padding-top:1em;
}

#left_column .read_more
{
	width: 72px;
	height: 15px;
	background:transparent url(../img/btn_read_more.png) no-repeat center bottom;
	float:right;
	padding-top:1em;
}

#left_column .box2
{
	position: relative;
	top: 42px;
	width: 261px;
	height: 200px;

}

#left_column .box3
{
	position: relative;
	top: 45px;
	width: 263px;
	height: 232px;
	background-color: #5a5a62;
}

#left_column .box3 .banner
{
	width: 263px;
	height: 24px;
	background:transparent url(../img/left_back3.gif);
}


#left_column .box3 .content
{
	padding-top:3em;
	font-size: 0.7em;
}

#left_column .box4
{
	position: relative;
	top: 47px;
	width: 263px;
	height: 246px;
	background-color: #56596a;
}

#left_column .box4 .banner
{
	width: 263px;
	height: 24px;
	background:transparent url(../img/left_back4.gif);
}

#left_column .box4 .post
{
	width: 80%;
	height: 30px;
	padding:1em 0px 0px 1em;
}
#left_column .box4 .post .post_icon
{
	width: 20px;
	height: 20px;
	backgroundtransparent: url(../img/post_icon.gif) no-repeat center center;	
	float:left;
}

#left_column .box4 .post .body
{
	width: 170px;
	padding-left:1em;
	float:left;
	font-size:0.7em;
}

/**************************************************************/
/* MAIN COLUMN */

#main_column
{
	width: 677px;
	float:left;
	margin-top: 40px;
	margin-left: 1px;
}

#main_column #search_bar
{
	width: 676px;
	height: 38px;
	background:transparent url(../img/search_bar.gif);
}

#search_bar form
{
	width: 330px;
	height: 26px;
	margin-top: -5px;
	padding-right: 5px;
	float:right;
}

#search_bar form .search_button
{
	color: #9aabc4;
	background-color: #2f343e;
	border: 1px solid #000;
	padding: 0.2em 0.4em;
	cursor: pointer;
	font-size: 1em;
	text-transform: uppercase;
	margin:0 20px 0 0;
	padding:0;
	float:right;
}
#search_bar input.txt
{
	height: 20px;
	width: 140px;
	font-size: 1em;
	margin-left:60px;
}

#main_column .banner
{
	width: 674px;
	height: 343px;

}

#main_column .banner h2
{
	padding-top: 5px;
}

/***********************/

#main_column #sub_left
{
	width: 357px;
	height: 600px;
	margin-right: 2px;
	float:left;
}
#main_column #sub_right
{
	width: 318px;
	height: 600px;
}

#main_column #sub_right .read_more
{
	width: 72px;
	height: 15px;
	background:transparent url(../img/btn_read_more.png) no-repeat center bottom;
	padding-top:1em;
	float:right;
}

#main_column #sub_left .box1 .read_more
{
	color: #d1d3d7;
}

#main_column #sub_left .box1 .read_more:hover
{
	color: #adc1d7;
}

#main_column #sub_left .box1
{
	width: 357px;
	height: 204px;
	background-color: #636d7a;
	margin-top: 2px;
}

#main_column #sub_left .box1 .content
{
	font-size:0.8em;
}

#main_column #sub_left .box1 .banner
{
	width: 357px;
	height: 24px;
	background-image: url(../img/sub_back1.gif);
	border: none;
}

#main_column #sub_left .box1 .item
{
	height: 70px;	
}

#main_column h2
{
	font-size: 0.9em;
}

#main_column .box1 .view_more
{
	width: 72px;
	height: 25px;
	background:transparent url(../img/btn_view_more.png) no-repeat;
	margin-top: -20px;
}
#main_column #sub_left .box2
{
	width: 357px;
	height: 194px;
	background-color: #3c3e48;
	margin-top: 2px;
}

#main_column #sub_left .box2 .banner
{
	width: 357px;
	height: 24px;
	background:transparent url(../img/sub_back2.gif);
	border: none;
}

#main_column #sub_left .box2 .thumbs
{
	padding:1em 0px 0px 11px;
}

#main_column #sub_left .box2 a.thumb_link
{
	font-size: 0.7em;
	text-decoration: underline;
	width: 177px;
}

#main_column #sub_left .box2 a.thumb_link:hover
{
	color: #b7cce4;
}

#main_column #sub_left .box2 .view_all
{
	width: 65px;
	height: 25px;
	margin-top: 40px;
	background-image: url(../img/btn_view_all.png);
	background-repeat: no-repeat;
	float:right;
	padding-right:  0.5em;
}
#main_column #sub_left .box3
{
	width: 357px;
	height: 200px;
	background-color: #222631;
	margin-top: 2px;
}

#main_column #sub_left .box3 .banner
{
	width: 357px;
	height: 24px;
	background-image: url(../img/sub_back3.gif);
	border: none;
}

#main_column #sub_left .box3 .thumbs
{
	padding:1em 0px 0px 11px;
}

#main_column #sub_left .box3 a.thumb_link
{
	font-size: 0.7em;
	text-decoration: underline;
	width: 177px;
}

#main_column #sub_left .box3 a.thumb_link:hover
{
	color: #b7cce4;
}

#main_column #sub_left .box3 .view_all
{
	width: 65px;
	height: 25px;
	margin-top: 40px;
	background-image: url(../img/btn_view_all.png);
	background-repeat: no-repeat;
	float:right;
	padding-right:  0.5em;
}

/***********************/

#main_column #sub_right {
	float:left;
}
#main_column #sub_right .box1
{
	width: 317px;
	height: 327px;
	padding-top:2px;
}

#main_column #sub_right .box2
{
	width: 317px;
	height: 144px;
	background-color: #3e4856;
	padding-top:2px;
}

#main_column #sub_right .box2 .banner
{
	width: 317px;
	height: 24px;
	background-image: url(../img/sub_back4.gif);
	border: none;
}

#main_column #sub_right .box2 .subtitle
{
	font-size: 0.8em;
	padding-top:2px;
}

#main_column #sub_right .box3
{
	width: 317px;
	height: 125px;

}

#main_column #sub_right .box3 .banner
{
	width: 317px;
	height: 22px;
	background-image: url(../img/sub_back5.gif);
	border: none;
}

#main_column #sub_right .box2 h2, #main_column #sub_right .box3 h2
{
	padding-left:1em;
}


#main_column #sub_right .box3 .about
{
	width: 317px;
	height: 105px;	
	background-image: url(../img/learn_more.jpg);
}

#main_column #sub_right .box3 .subtitle
{
		font-size: 0.8em;
}

#main_column #sub_right .box3 .learn_more
{
	width: 75px;
	height: 25px;
	background:transparent url(../img/btn_learn_more.png) no-repeat center center;
	padding-left: 5px;
	padding-top:2px;
	margin-top: 75px;
	float:right;
}

/**************************************************************/
/* FOOTER */

#clear_footer {
	clear:both;
	height:140px;
}
* #clear_footer {
	height:0px;
}
#footer
{
	width: 941px;
	height: 64px;
	background:transparent url(../img/footer_back.gif) no-repeat;
	
	font-size: 0.7em;
	margin:120px auto 0px auto;
	padding-top:10px;
}

* html #footer
{
	margin-top:40px;
}

#footer ul
{
	text-align: center;
	position: relative;
	margin: 0 0;
	padding: 0 0;
}
	
#footer li
{
	padding-left: 3px;
	padding-right: 3px;
	display: inline;
}

#footer a:hover
{
	color: #9db7d3;
}	

#footer #copyright 
{
	padding-top: 4px;
	text-align: center;
	position: relative;
}
/**************************************************************/
/* MENU */


#menu
{
	width: 676px;
	height: 23px;
	font-size: 0.6em;
	letter-spacing: 1px;
}

#menu ul
{
	float: right;
	list-style: none;
	margin-top: 0px;
}

#menu li
{ 
	
}

#menu .tab_left
{
	width: 18px;
	height: 23px;
	background:transparent url(../img/tab_left.gif);
	float:left;
}

#menu .tab_right
{
	width: 12px;
	height: 23px;
	background:transparent url(../img/tab_right.gif);
	float:left;
}

#menu .over .tab_left
{
	width: 18px;
	height: 23px;
	background:transparent url(../img/tab_left.gif);
	background-position: 0px -35px;
}

#menu .over .tab_right
{
	width: 12px;
	height: 23px;
	background:transparent url(../img/tab_right.gif);
	background-position: 0px -35px;
}

#menu li a 
{ 
	display: block; 
	height: 18px;
	color: #d3eeff; 
	text-decoration: none; 
	text-align: center;
	padding-top: 5px;
	background:transparent url(../img/tab_body.gif);
	background-repeat: repeat-x;
}

#menu li a.selected 
{ 
	background-position: 0px -23px;
}

#menu li a:hover, #menu li:hover a
{ 
	color: #fff; 
	background-position: 0px -23px;
}



#menu li.selected a 
{
	color: #fff;
	font-weight: bold;
}
/*
#menu ul li .link
{
	text-align: center;
	padding-top: 8px;
}

#menu li a.wide
{
	padding-left: 6px;
}

*/


/**************************************************************/
/* FORMS */

input, textarea, select {
	background-color: #3d414b;
	color: #cdcfd3;
	font:1em/1em "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
	margin-left: 3px;
}
form {
	margin: 0;
	padding: 0;
	border:0;
}
form input.txt {
	background-color: #3d414b;
	border:none;
	border-top: 3px solid #2a2d32;
	border-left: 3px solid #2a2d32;
	width:90%;
	height:20px;
	padding:3px;
}
form input.txt.small {
	width:60px;
}
form input.txt.small.error {
	background-color: #fdc;
}
form input.btn {
	background: transparent url(../img/btn1.gif);
	color: #cdcfd3;
	margin-top:3px;
	border:none;
	width:70px;
	height:20px;
	font-size:0.8em;
	padding-bottom:20px;
	float:right;
}
form input.btn2 {
	background: transparent url(../img/btn2.gif);
}

form input.btn:hover {
	text-decoration:underline;
	cursor: pointer;
}

form label {
	font: bold 0.9em Arial, Helvetica, sans-serif;
	width: 10em;
	float:left;
}
form fieldset {
	border: 1px dotted #cdcfd3;
	margin-top: 16px;
	padding: 10px;
}
* html form fieldset {
	border: none;
}
form legend {
	color: #036;
	font: bold 1.1em Arial, Helvetica, sans-serif;
}
form textarea {
	border: 1px inset #cdcfd3;
	color: #cdcfd3;
	height: 100px;
	width:635px;
}

form select {
	border: 1px inset #cdcfd3;
	color: #cdcfd3;
	padding:1px;
	width:auto;
}


/**************************************************************/
/* Home Page */
#welcome_and_registration {
	margin:50px auto 0 auto;
	width:95%;
}
#welcome_and_registration #box_welcome {
	background-color: #3e4856;
	border-bottom:3px solid #000;
}
#welcome_and_registration #box_login {
	background-color: #31333f;
	border-bottom:3px solid #000;
}
#welcome_and_registration .left {
	color:#cdcfd3;
	margin-top:0px;
	padding:0px 0px 0px 20px;
	border-top:1px solid #5c646f;
	font-size:0.8em;
}
#welcome_and_registration .left h2 {
	color:#cad1e0;
	font:bold 1.2em/1.2em Arial, Helvetica, sans-serif;
}

#welcome_and_registration .right {
	color:#cad1e0;
	margin:0px 0px 0px 10px;
	padding:0px 10px 10px 10px;
	width:20%;
	float:right;
	border-top:1px solid #5c646f;
}

/* Holly-Hack for IE 6*/
* html #welcome_and_registration h2 {
	height:1%;
}
* html p {
	height:1%;
	margin-left:0;
}
/* End Holly-Hack*/

#welcome_and_registration .heading {
	height: 24px;
	padding-right:5px;
	text-align:right;
}
#welcome_and_registration #box_welcome .heading {
	background:#fff url(../img/sub_back4.gif);
}
#welcome_and_registration #box_login .heading {
	background:#fff url(../img/sub_back5.gif);
}

#welcome_and_registration #box_welcome .right {
	background:#626b79;
}
#welcome_and_registration #box_login .right {
	border:none;
}
#welcome_and_registration #box_login .right {
	background:#363a47;
}

Thanks a lot for your help. Got a deadline for this. :/

**DarkAngelBGE** · Jul 11, 2007 13:03

Nobody? :/

**young72** · Jul 11, 2007 13:53

Probably waiting for the jpgs to get approved so can see what problem is.

**DarkAngelBGE** · Jul 11, 2007 14:10

Ah I understand... Hrm didn't know about that approval thing.

Well basically in firefox it looks fine, whereas in IE the menu looks like stairs, going from left top right bottom right each item being a stair.

**DarkAngelBGE** · Jul 12, 2007 00:23

Okay here they are:

http://tim-koschuetzki.com/files/menu_ff.jpg
http://tim-koschuetzki.com/files/menu_ie.jpg

**DaveWoods** · Jul 12, 2007 02:41

Code:

#menu li
{ 
	float: left;
}

Seems to fix it for me although I can't see the images within my browser due to it being local so you'll have to test it and probably adjust any paddings accordingly.

**DarkAngelBGE** · Jul 13, 2007 05:56

Ah thanks

Well I recoded the entire layout in the meantime.

Thanks, though.

User Tag List

Thread: Small Menu problem

Thread Tools

Display

Small Menu problem

Bookmarks

Bookmarks

Posting Permissions