No replies
Solaar
Solaar's picture
Offline
newbie
Last seen: 9 years 37 weeks ago
Joined: 2010-12-10
Posts: 1
Points: 2

Hello,

Have checked the web as well as this site for a solution with no avail.

Have a div (named column) which shrinks to fit contents except in IE8 where it takes up all available room. Have narrowed the problem down to h2 tags within the div, i.e. if this is removed then there is no problem.

Interestingly if the sub-menu item name is reduced in length i.e. 'Structural Fire Fighting Clothing (600 & 700 series)' to just 'Structural' then this also remedies the problem.

Can be viewed by mousing over 'Fire Fighter's Clothing' on the drop down menu here...

http://www.paulhousewebdesign.co.uk/flamepro/

css...

http://www.paulhousewebdesign.co.uk/flamepro/jkmegamenu.css

menu HTML...

<div id = "nav-holder">
	<div id = "nav">
		<div class = "nav-item" id = "nav1" onmouseover = "fnChangeClass('nav1','nav-item-hl');" onmouseout = "fnChangeClass('nav1','nav-item');">
			<div class = "nav-text">
				<a href = "fire-fighters-clothing"  class = "lnk-he-wh-13"><strong>Fire Fighter's Clothing</strong></a>
			</div>
			<div class="megamenu" id = "ffc">
				<div class = "column">
					<h2><strong>Structural Fire Fighting Clothing (600 &amp; 700 series)</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Tunic &amp; Trousers</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Combi Jacket &amp; Salopettes</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Tunic &amp; Trousers</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Combi Jacket &amp; Salopettes</strong></a>
							</li>
						</ul>
					</div>
				</div>
				<div class = "column">
					<h2><strong>Wildland Fire Fighting Clothing</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Wildland Coverall</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>2-piece Wildland</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Coverall</strong></a>
							</li>
						</ul>
					</div>
				</div>
				<div class = "column">
					<h2><strong>Specialist Clothing</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Extrication Coverall</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>RTA Coverall</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Rope Rescue Coverall</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>High Volume Pumping Suit</strong></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class = "nav-item-end"><!--div--></div>
		<div class = "nav-item" id = "nav2" onmouseover = "fnChangeClass('nav2','nav-item-hl');" onmouseout = "fnChangeClass('nav2','nav-item');">
			<div class = "nav-text">
				<a href = "helmets" class = "lnk-he-wh-13"><strong>Helmets</strong></a>	
			</div>
			<div class="megamenu" id = "helmets">
				<div class = "column">
					<h2><strong>Gallet</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>F1SF</strong></a>
							</li>
 
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>X-TREM</strong></a>
							</li>
 
						</ul>
					</div>
				</div>
				<div class = "column">
					<h2><strong>Cromwell</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>F600</strong></a>
							</li>
 
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>ER1</strong></a>
							</li>
 
						</ul>
					</div>
				</div>
				<div class = "column">
					<h2><strong>Accessories</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>XS (Peli torch for Gallet)</strong></a>
							</li>
 
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>XP (Peli torch for Gallet)</strong></a>
							</li>
 
						</ul>
					</div>
				</div>
 
			</div>
		</div>
		<div class = "nav-item-end"><!--div--></div>
		<div class = "nav-item" id = "nav3" onmouseover = "fnChangeClass('nav3','nav-item-hl');" onmouseout = "fnChangeClass('nav3','nav-item');">
			<div class = "nav-text">
				<a href = "boots" class = "lnk-he-wh-13"><strong>Boots</strong></a>	
			</div>
			<div class="megamenu" id = "boots">
				<div class = "column-small">
					<div class = "list-container-small">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Goliath</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Jolly</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Tuffking</strong></a>
							</li>
 
						</ul>
					</div>
				</div>
 
			</div>
		</div>
		<div class = "nav-item-end"><!--div--></div>
		<div class = "nav-item" id = "nav4" onmouseover = "fnChangeClass('nav4','nav-item-hl');" onmouseout = "fnChangeClass('nav4','nav-item');">
			<div class = "nav-text">
				<a href = "gloves" class = "lnk-he-wh-13"><strong>Gloves</strong></a>	
			</div>
 
			<div class="megamenu" id = "gloves">
				<div class = "column-small">
					<div class = "list-container-small">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Crystal</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Cheyenne Plus</strong></a>
							</li>
 
						</ul>
					</div>
				</div>
 
			</div>
		</div>
		<div class = "nav-item-end"><!--div--></div>
		<div class = "nav-item" id = "nav5" onmouseover = "fnChangeClass('nav5','nav-item-hl');" onmouseout = "fnChangeClass('nav5','nav-item');">
			<div class = "nav-text">
				<a href = "accessories" class = "lnk-he-wh-13"><strong>Accessories</strong></a>	
			</div>
			<div class="megamenu" id = "accessories">
				<div class = "column <?php if($boolIE8){ echo 'four';}?>">
 
					<h2><strong>Smoke Hood</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Smoke hood</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Smoke hood filter holders</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Smoke hood pads (box of 100)</strong></a>
							</li>
						</ul>
					</div>
				</div>
				<div class = "column <?php if($boolIE8){ echo 'five';}?>">
 
					<h2><strong>Other Accessories</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Flash Hoods</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Gas Monitor</strong></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class = "nav-item-end"><!--div--></div>
		<div class = "nav-item" id = "nav6" onmouseover = "fnChangeClass('nav6','nav-item-hl');" onmouseout = "fnChangeClass('nav6','nav-item');">
			<div class = "nav-text">
				<a href = "search-rescue" class = "lnk-he-wh-13"><strong>Search &amp; Rescue</strong></a>	
			</div>
			<div class="megamenu" id = "search">
				<div class = "column-small">
					<div class = "list-container-small">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>002/3 Urban Search & Rescue (USAR) Suit</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>639 Paramedic Search & Rescue (PSAR)</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>coverall 639 Public Order Coverall</strong></a>
							</li>
 
						</ul>
					</div>
				</div>
 
			</div>
		</div>
		<div class = "nav-item-end"><!--div--></div>
		<div class = "nav-item" id = "nav7" onmouseover = "fnChangeClass('nav7','nav-item-hl');" onmouseout = "fnChangeClass('nav7','nav-item');">
			<div class = "nav-text">
				<a href = "workwear" class = "lnk-he-wh-13"><strong>Workwear</strong></a>	
			</div>
			<div class="megamenu" id = "workwear">
				<div class = "column-small">
					<div class = "list-container-small">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>639 Fire Retardent Coveralls</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>639 Anti-Arc Coverall</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>639 Welding Coverall</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>409 Pilot Suit/Flying Coverall</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Derby Work Jacket</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Dri-Fire flame resistant underwear</strong></a>
							</li>				
 
						</ul>
					</div>
				</div>
 
			</div>
		</div>
		<div class = "nav-item-end"><!--div--></div>
		<div class = "nav-item" id = "nav8" onmouseover = "fnChangeClass('nav8','nav-item-hl');" onmouseout = "fnChangeClass('nav8','nav-item');">
			<div class = "nav-text">
				<a href = "uniform" class = "lnk-he-wh-13"><strong>Uniform</strong></a>	
			</div>
			<div class="megamenu" id = "uniform">
				<div class = "column four">
 
					<h2><strong>Waterproof Jackets</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Pennine (DC fleece-lined waterproof blouson)</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Cork (138 Irish blouson)</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Kent (734 blouson)</strong></a>
							</li>	
						</ul>
					</div>
 
				</div>
 
				<div class = "column four">
 
					<h2><strong>Pilot Shirts</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Shirt with epaulettes (white, navy, black)</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Pilot Shirt without epaulettes (white only)</strong></a>
							</li>	
						</ul>
					</div>
 
				</div>
				<div style = "float:left;width:inherit;height:8px;clear:both;"><!--div--></div>
				<div class = "column four">
 
					<h2><strong>T's &amp; Polos</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>T-Shirt (white, navy, black)</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>T-Shirt (Black Thermocool)</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Polo Shirt (black, navy)</strong></a>
							</li>	
						</ul>
					</div>
				</div>
 
				<div class = "column four">					
					<h2><strong>Other</strong></h2><br />
					<div class = "list-container">
						<ul>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Fleece Jacket</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Combat Style Trousers</strong></a>
							</li>
							<li>
								<a href = "" class = "lnk-he-bl-13"><strong>Sweat Shirt</strong></a>
							</li>	
						</ul>
					</div>
				</div>
			</div>
 
		</div>
		<div class = "nav-item-end"><!--div--></div>
		<div class = "nav-item" id = "nav9" onmouseover = "fnChangeClass('nav9','nav-item-hl');" onmouseout = "fnChangeClass('nav9','nav-item');">
			<div class = "nav-text">
				<a href = "#"  class = "lnk-he-wh-13"><strong>Blog</strong></a>
			</div>
		</div>
		<div class = "nav-item-end"><!--div--></div>
		<div class = "nav-item-last" id = "nav10" onmouseover = "fnChangeClass('nav10','nav-item-last-hl');" onmouseout = "fnChangeClass('nav10','nav-item-last');">
			<div class = "nav-text">
				<a href = "#"  class = "lnk-he-wh-13"><strong>Contact</strong></a>
			</div>
		</div>
	</div>
</div>
<div id = "welcome">
	<div id = "welcome-left">
		<h1><strong><?php echo $breadCrumbs;?></strong></h1>
	</div>
	<div id = "welcome-right">
		<strong>Tel: +44 (0)1332 758 510 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fax:+44 (0)1332 757 938</strong>
	</div>
</div>
<div class = "divider19"><!--div--></div>