Announcement

**SPS** · 28-Dec-2011, 08:00 PM

Layout issue with IE Internet Explorer only

Good morning,

We have tested the site on all other browsers and it seems to be fine except for IE Version 9.0.8112, where the red navigation tabs are place vertically when they should be horizontal going across the page.

Please see css below. The section with the error is called #fav_section_nav

I have deleted the end of the css due to the size of it just to post.

http://www.packitdirect.co.uk/

Any advise would be appreciated.

Regards,

SPS

Code:

/*************************/
/****Begin teclan CSS*****/
/*************************/

body {
  margin:0px;
  padding:0px;
  background:<actinic:variable name="BGColor"/><actinic:block if="%3cactinic%3avariable%20name%3d%22IsBackgroundColor%22%20%2f%3e%20%3d%3d%20False"> url("<actinic:variable name="BackgroundImageFileName" />") repeat-x</actinic:block>;
  font-family:<actinic:variable name="ACTCSSFONTFAMILY" />;
  color:<actinic:variable name="TextColor" />;
  font-size:<actinic:variable name="StandardFontSize" />;
  text-align:center;
}

/* Main Containers */

/* General rules */
a img {
  border:none;
}

/* Floats and clears */
.fleft {float:left;}
.fright {float:right;}
.cleft {clear:left;}
.cright {clear:right;}
.clearit {clear:both;}

#container {
	margin:0px auto;
	text-align:left;
	width:876px;
	margin-top:10px;
	position:relative;
}

#header {
	position:relative;
	height:255px;
}

#content {
	background:white;
	padding-top:20px;
	position:relative;
	width:865px;
}

#footer {
	text-align:right;
	margin-top:10px;
}

#topnav {
	position:absolute;
	z-index:3;
	text-align:center;
}

#topnav a.checkout-checkoutbg:link {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:visited {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:hover {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-checkoutbg:active {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-textcolor:link {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:visited {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:hover {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

a.checkout-textcolor:active {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

#topnav ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#topnav li {
	float:left;
	margin-right:7px;
	text-align:center;
}

#topnav a {
	display:block;
	background:url('top-nav-bg.jpg') repeat-x;
	height:25px;
	line-height:20px;
	color:white;
	padding:3px 27px 3px 26px;
	font-size:15px;
	text-transform:lowercase;
}

#topnav a:hover {
	background:url('top-nav-bg-hover.jpg') repeat-x;
	text-decoration:none;
}

#logo {
	position:absolute;
	top:55px;
}

#banner {
	background:url('main-image.jpg') no-repeat;
	height:260px;
	width:865px;
	position:absolute;
	top:20px;
	z-index:1;
}

#fav_section_nav {
	position:absolute;
	top:190px;
	z-index:4;
}

#fav_section_nav a.checkout-checkoutbg:link {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:visited {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:hover {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-checkoutbg:active {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-textcolor:link {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:visited {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:hover {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

a.checkout-textcolor:active {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

#fav_section_nav ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#fav_section_nav li {
	margin-right:7px;
	text-align:center;
	float:left;
}

#fav_section_nav a {
	display:block;
	background:url('fav-sec-bg.jpg') repeat-x;
	color:white;
	height:42px;
	line-height:38px;
	text-transform:lowercase;
	padding:0px 25px 6px 24px;
	font-size:16px;
}

#fav_section_nav a:hover {
	background:url('fav-sec-bg-hover.jpg') repeat-x;
	text-decoration:none;
}

#left {
	position:absolute;
	top:20px;
	left:0px;
	width:200px;
}

#center {
	margin-left:220px;
}

.sectionhead {
	background:url('section-head.jpg') repeat-x;
	width:200px;
	height:30px;
	line-height:20px;
	color:white;
	text-align:center;
	font-size:15px;
}

#sectionlist a.checkout-checkoutbg:link {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:visited {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:hover {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-checkoutbg:active {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-textcolor:link {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:visited {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:hover {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

a.checkout-textcolor:active {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#sectionlist li {
	padding:5px 10px;
	border-bottom:1px solid #666;
}

#sectionlist a {
	color:#333;
}

#sectionlist a:hover {
	color:#0797E4;
	text-decoration:none;
	font-weight:bold;
}

#infolist a.checkout-checkoutbg:link {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:visited {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:hover {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-checkoutbg:active {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-textcolor:link {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:visited {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:hover {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

a.checkout-textcolor:active {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#infolist li {
	padding:5px 10px;
	border-bottom:1px solid #666;
}

#infolist a {
	color:#333;
}

#infolist a:hover {
	color:#0797E4;
	text-decoration:none;
	font-weight:bold;
}

#cart-summary {
	position:absolute;
	top:80px;
	right:10px;
	width:220px;
	background:<actinic:variable name="Palette3" />;
	text-align:center;
	display:none; 
	color:white;
	border:1px solid white;
	padding:7px;
	font-size:14px;
	text-transform:lowercase;
}

#cart-summary a {
	background:url('top-nav-bg.jpg') repeat-x;
	width:100px;
	height:25px;
	line-height:23px;
	color:white;
	font-size:15px;
	padding:5px 10px;
	margin:5px 0px;
	margin-right:5px;
	text-transform:lowercase;
}

#cart-summary a:hover {
	background:url('top-nav-bg-hover.jpg') repeat-x;
	text-decoration:none;
}

/*************************/
/*****End teclan CSS******/
/*************************/

/* Begin CSS inherited from Actinic */
p, table, td, th {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="StandardFontSize" />;
	font-style: normal;
	font-weight: normal;
	color: <actinic:variable name="TextColor" />;
	margin-top: 0px;
	line-height: 150%;
}

form {
	margin: 0px;
}

a:link {
	color: <actinic:variable name="LinkColor" />;
	text-decoration: none;
}

a:visited {
	color: <actinic:variable name="VLinkColor" />;
	text-decoration: none;
}

a:hover {
	color: <actinic:variable name="HLinkColor" />;
	text-decoration: underline;
}

a:active {
	color: <actinic:variable name="ALinkColor" />;
	text-decoration: none;
}

a.checkout-checkoutbg {
	margin-right: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 8px;
	padding-right: 8px;
	border: <actinic:variable name="CheckoutBG" /> 2px solid;
	border-top: <actinic:variable name="CheckoutBG" /> 2px solid;
	border-right: <actinic:variable name="TextColor" /> 1px solid;
	border-bottom: <actinic:variable name="TextColor" /> 1px solid;
}

a.checkout-checkoutbg:link {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:visited {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:hover {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-checkoutbg:active {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-textcolor:link {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:visited {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:hover {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

a.checkout-textcolor:active {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

ul {
	list-style-type: square;
}

/* Generic text formatting used throughout the store ---------------------------- */

.actCHECKOUTEM {
	background-color: <actinic:variable name="CheckoutEM" />;
}

.actCHECKOUTBG {
	background-color: <actinic:variable name="CheckoutBG" />;
}

.actlarger {
	font-size: <actinic:variable name="LargerFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actsmaller{
	font-size: <actinic:variable name="SmallFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actxxsmall {
	font-size: <actinic:variable name="SmallFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actxsmall {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actsmall {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actregular {
	font-size: <actinic:variable name="LargerFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actlarge{
	font-size: <actinic:variable name="LargeFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actxlarge {
	font-size: <actinic:variable name="ExtraLargeFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actxxlarge {
	font-size: <actinic:variable name="ExtraLargeFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actwarningcolor {
	color: <actinic:variable name="RequiredColor" />;
}
	
.actrequiredcolor {
	color: <actinic:variable name="RequiredColor" />;
}

.actsearchhighlightcolor {
	color: <actinic:variable name="SearchHighlightColor" />;
}

.actrequired {
	color: <actinic:variable name="RequiredColor" />;
}

.actwarning {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: <actinic:variable name="RequiredColor" />;
}

.actwelcome {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actlogotext {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: #D9090E;
	font-style: normal;
	font-weight: bold;
	text-align: center;
}
.actlogout {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: <actinic:variable name="LinkColor" />;
}

/* Shopping cart and checkout fields ------------------------------------------- */

div.CheckoutCartSection {
	margin-top: 0px;
	margin-bottom: 10px;
}

table.checkout#idTableCheckoutSection {
	margin-bottom: 0px;
}

table.checkout-cart {
	width: <actinic:variable name="ACTSTDWIDTH" />px;
	border-collapse: collapse;
	padding: 0px 0px;
	margin-bottom: 5px;
}

table.checkout-cart th{
	font-weight: bold;
	background-color: <actinic:variable name="CheckoutBG" />;
	border-top: solid 1px <actinic:variable name="CheckoutEM" />;
	border-bottom: solid 1px <actinic:variable name="CheckoutEM" />;
	padding: 4px 4px;
}

table.checkout-cart td{
	padding: 4px 4px;
}

table.checkout {
	width: <actinic:variable name="ACTSTDWIDTH" />px;
	border-collapse: collapse;
	padding: 0px 0px;
	text-align: left;
	margin-bottom: 5px;
}

table.checkout th {
	background-color: <actinic:variable name="CheckoutEM" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	font-weight: bold;
	color: <actinic:variable name="CheckoutBG" />;
	text-align: left;
	padding: 5px 2px;
	border-bottom: solid 3px <actinic:variable name="BGColor" />;
}

table.checkout th.instruction {
	font-size: <actinic:variable name="StandardFontSize" />;
	font-weight: normal;
}

table.checkout th.change {
	font-size: <actinic:variable name="StandardFontSize" />;
	font-weight: bold;
	padding: 0px 0px;
	text-align: right;
}

.checkout-change-button	{
	line-height: 13px;
	height: 20px;
	width: 86px;
	margin: 0px 1px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size : <actinic:variable name="StandardFontSize" />;
	background-color: <actinic:variable name="Palette2" />;
	border: 1px solid <actinic:variable name="Palette1" />;
	color: <actinic:variable name="PaletteBG" />;
	background-image: url('theme_icon_add_to_cart.gif');
	word-spacing: normal;
	}

table.checkout td {
	background-color: <actinic:variable name="CheckoutBG" />;
	border-right: solid 1px <actinic:variable name="BGColor" />;
	border-bottom: solid 1px <actinic:variable name="BGColor" />;
	padding: 2px 2px;
}

table.checkout#idBothAddressesTable col {
	width: auto;
}

td#idCheckoutHelpLabel,
table.checkout#idBothAddressesTable col.prompt {
	width: 130px;
}

.cart {
	background-color: <actinic:variable name="CheckoutBG" />;
	border-bottom: solid 1px <actinic:variable name="CheckoutEM" />;
}

.checkout-cartheading {
	font-weight: bold;
	background-color: <actinic:variable name="CheckoutBG" />;
	border-top: solid 1px <actinic:variable name="CheckoutEM" />;
	border-bottom: solid 1px <actinic:variable name="CheckoutEM" />;
}

.cartheading {
	background-color: <actinic:variable name="CheckoutEM" />;
	font-weight: bold;
	color: <actinic:variable name="CheckoutBG" />;
}

h2.checkout-heading {
	background-color: <actinic:variable name="CheckoutEM" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	font-weight: bold;
	color: <actinic:variable name="CheckoutBG" />;
	padding: 5px 2px;
	border-bottom: solid 3px <actinic:variable name="BGColor" />;
	width: <actinic:variable name="ACTSTDWIDTH" />px;
}

h3.checkout-heading {
	width: <actinic:variable name="ACTSTDWIDTH" />px; 
	padding: 3px 0;
	background-color: <actinic:variable name="CheckoutEM" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	font-weight: bold;
	color: <actinic:variable name="CheckoutBG" />;
	border-bottom: solid 3px <actinic:variable name="BGColor" />;
}

.checkout-subheading {
	font-weight: bold;
	padding: 0;
	margin: 0;
}

img.cartthumbnail {
	border: 0px;
	margin-left: 2px;
	margin-right: 2px;
	width: 25px;
}

input.normal-button {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="StandardFontSize" />;
	font-weight: bold;
	color: <actinic:variable name="BGColor" />;
	background: <actinic:variable name="Palette2" />;
	padding: 5px;
	border: solid 1px <actinic:variable name="TextColor" />;
}

input.highlight-button {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="StandardFontSize" />;
	font-weight: bold;
	color: <actinic:variable name="BGColor" />;
	background: <actinic:variable name="Palette1" />;
	padding: 5px;
	border: solid 1px <actinic:variable name="TextColor" />;
}

.checkout-field-label {
	width: 160px;
}

.checkout-field-input {
	width: auto;
}

.checkout-field-input input, .checkout-field-input select {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	color: <actinic:variable name="TextColor" />;
	background-color: <actinic:variable name="BGColor" />;
	padding: 2px;
}

.InvoiceField input, .InvoiceField select {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	color: <actinic:variable name="TextColor" />;
	background-color: <actinic:variable name="BGColor" />;
	padding: 2px;
}

.DeliverField input, .DeliverField select {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	color: <actinic:variable name="TextColor" />;
	background-color: <actinic:variable name="BGColor" />;
	padding: 2px;
}

table.checkout#idBothAddressesTable select {
	width: 211px;
}

input.checkbox {
	background-color: <actinic:variable name="CheckoutBG" />;
	border: 0;	
}

.checkout-field-area {
	background: <actinic:variable name="CheckoutBG" />;
	border-bottom: solid 2px <actinic:variable name="BGColor" />;
	width: <actinic:variable name="ACTSTDWIDTH" />px;
}

.checkout-field-area p {
	margin: 0;
	padding: 4px;
}

div.checkout-buttons {
	width: <actinic:variable name="ACTSTDWIDTH" />px; 
	height: 50px; 
	margin-top: 20px;
}
	
.left { 
	float : left; 
	width : 50%; 
}

.right { 
	float : right; 
	width : 40%; 
}

.spacer { 
	clear : both; 
}

.checkout-help-hide { 
	display: none; 
}

/* Checkout Progress Indicator  ------------------------------------------------ */

p.checkout-progress-heading {
	width: 300px;
	margin: 0px auto;
}

#checkout-progress-indicator {
	width: 300px;
	height: 19px;
	background-image: url('cpi-background.gif');
	margin: 0 auto 0px auto;
}

.checkout-progress-0 {
	width: 75px;
	height: 19px;
	background-color: <actinic:variable name="Palette1" />;
	background-image: url('cpi-main.gif');
	float: left;
}

.checkout-progress-1 {
	width: 150px;
	height: 19px;
	background-color: <actinic:variable name="Palette1" />;
	background-image: url('cpi-main.gif');
	float: left;
}

.checkout-progress-2 {
	width: 225px;
	height: 19px;
	background-color: <actinic:variable name="Palette1" />;
	background-image: url('cpi-main.gif');
	float: left;
}

.checkout-progress-3 {
	width: 300px;
	height: 19px;
	background-color: <actinic:variable name="Palette1" />;
	background-image: url('cpi-main.gif');
	float: left;
}

#checkout-progress-indicator .cpi-end {
	width: 8px;
	padding: 0;
	margin: 0;
	border: 0;
	height: 19px;
	background-image: url('cpi-end.gif');
	background-position: right;
	background-repeat: no-repeat;
	float: left;
}

table#idCheckoutProgress {
	margin-bottom: 10px;
}

table#idCheckoutProgress td{
	background-repeat:repeat-x;
	background-color:transparent;
	border: 0px;
	padding: 0px;
	height:19px;
	text-align:center;
}

table#idCheckoutProgress td.cpi-left{
	background-image:url("cpi-main.gif");
	color:white;
	width:160px;
}

table#idCheckoutProgress td.cpi-complete{
	background-image:url("cpi-main-mid.gif");
	color:white;
	width:160px;
}

table#idCheckoutProgress td.cpi-incomplete{
	background-image:url("cpi-background.gif");
	color:black;
	width:160px;
}

table.CheckoutProgress {
	width: <actinic:variable name="ACTSTDWIDTH" />px;
	border-collapse: collapse;
	margin-bottom: 10px;
}

table.CheckoutProgress td {
	padding: 0px 0px;
	background-repeat: repeat-x;
	background-color: transparent;
	height: 19px;
	text-align: center;
	width: 140px;
}

table.CheckoutProgress td.cpi-start{
	background-image: url("cpi-main.gif");
	width: 8px;
}

table.CheckoutProgress td.cpi-inactive{
	background-image: url("cpi-main-mid.gif");
	color: <actinic:variable name="BGColor" />;
}

table.CheckoutProgress td.cpi-active{
	background-image: url('cpi-background.gif');
	font-weight: bold;
	color: <actinic:variable name="TextColor" />;
}

table.CheckoutProgress td.cpi-end {
	background-image: url("cpi-end.gif");
	width: 8px;
}

table.CheckoutProgress td.cpi-spacer {
	background-image: url("cpi-main-mid.gif");
	width: auto;
}

/* Formatting for the site map -------------------------------------------- */

#actinic-sitemap {
	margin-left: 5px;
}

#actinic-sitemap ul {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* headings ----------------------------------------------------------------------------- */

h1	{
	font-size: <actinic:variable name="ExtraLargeFontSize" />;
	font-weight: 900;
	margin: 0px;		
	padding: 16px 0px 4px 0px;
	color: <actinic:variable name="Palette1" />;
	}
	
h1.subheading	{
	font-size: <actinic:variable name="LargerFontSize" />;
	font-weight: 900;
	margin: 0px;
	padding: 0px 0px 14px 0px;
	color: <actinic:variable name="Palette2" />;
	}
	
h2	{
	font-size: <actinic:variable name="LargeFontSize" />;
	font-weight: 900;
	margin: 0px;
	padding: 2px 0px 14px 0px;
	color: <actinic:variable name="Palette2" />;
	}
	
h2.clearall	{
	font-size: <actinic:variable name="LargeFontSize" />;
	font-weight: 900;
	margin: 0px;
	padding: 2px 0px 14px 0px;
	color: <actinic:variable name="Palette2" />;
	clear:both;
	}
	
h3.product	{
	font-size: <actinic:variable name="LargerFontSize" />;
	font-weight: 900;
	margin: 0px;
	padding: 0px 0px 6px 0px;
	color: <actinic:variable name="Palette2" />;
	}
	
h3.product_price	{
	font-size: <actinic:variable name="StandardFontSize" />;
	font-weight: 900;
	margin: 0px;
	padding: 0px 0px 20px 0px;
	}
	
.text_heading_left_column	{
	margin: 0px;
	padding: 19px 0px 4px 0px;
	line-height:normal;
	color: <actinic:variable name="Palette1" />;
	font-weight: 900;
	font-size: <actinic:variable name="LargerFontSize" />;
	}

/* Default formatting of all text boxes used in store pages ---------------- */

.form_input_general	{
	line-height: normal;
	font-size : <actinic:variable name="StandardFontSize" />;
	word-spacing: normal;
	}

/* Styles for 'Quick Search Bar With Larger Button' ------------------------ */

.form_main_search_box	{
	line-height: 13px;
	width: 76px;
	height: 16px;
	margin: 0px 1px 0px 1px;
	padding: 0px 0px 0px 2px;
	font-size : <actinic:variable name="StandardFontSize" />;
	background-color: <actinic:variable name="CheckoutBG" />;
	border: 1px solid <actinic:variable name="CheckoutBG" />;
	color: <actinic:variable name="TextColor" />;
	vertical-align: top;
	}

.form_main_search_box_td	{
	background-color: <actinic:variable name="Palette2" />
	}

.form_button_quick_search	{
	line-height: 13px;
	height: 18px;
	width: 85px;
	margin: 1px 1px 1px 1px;
	padding: 0px 0px 0px 12px;
	font-size : <actinic:variable name="StandardFontSize" />;
	background-color: <actinic:variable name="Palette2" />;
	border: 1px solid <actinic:variable name="Palette1" />;
	color: <actinic:variable name="PaletteBG" />;
	background-image: url('theme_icon_search.gif');
	word-spacing: normal;
	}

/* Styles for product image and fragment image placement in some layouts -------------------------- */

.image_float_right	{
	float: right;
	margin: 16px 0px 15px 20px;
	}

.image_product	{
	margin: 0px 18px 10px 0px;
	text-align: center;
	float: left;
	}

/* lines -------------------------------------------------------------------------------- */

.dotted_line_blue	{
	height: 1px;
	background-color: <actinic:variable name="Palette2" />;
	background-image:url('theme_dotted_line.gif');
	clear:both;
	}
	
.solid_line_light_blue	{
	height: 1px;
	padding: 0px;
	margin: 0px;
	background-color: <actinic:variable name="Palette2" />;
	clear:both;
	}
	
.solid_line_blue	{
	height: 1px;
	padding: 0px;
	margin: 0px;
	background-color: <actinic:variable name="Palette1" />;
	clear:both;
	}
	
.dotted_outline_blue	{
	border: 1px dotted <actinic:variable name="Palette2" />;
	padding: 8px;
	}		

/* Heading for attributes  --------------

Admin - code tags added for readability.

**leehack** · 28-Dec-2011, 09:57 PM

Really hard to decipher, but it looks to me like the style #fav_section_nav a has no float: left or width specified, so i presume each link is full width, you can confirm if this is the case by checking the space to the right of the links and seeing if it is clickable, if it is, then this is your problem. Try adding a simple width to that class to see if that is the problem.

**SPS** · 28-Dec-2011, 10:47 PM

Hi Leehack,

Thanks for the reply, you are correct each link is full width, but I have looked at the CSS and the the #Fav_section_Nav there is the code:-

#fav_section_nav li {
margin-right:7px;
text-align:center;
float:left;

Which seem to have all the information

The #Fav_section_Nav menu should work exactly the same as the #topnav menu

**Duncan Rounding** · 29-Dec-2011, 05:52 AM

I would consider not using absolute positioning on topnav, banner and fav_section_nav. Let the divs sit without positioning and see if it helps.

The problem is not only in IE9, but with most versions of IE and Safari. It also affects your topnav in some of the earlier versions of IE.

**leehack** · 29-Dec-2011, 08:46 AM

I never referred to that style if you look closely (a on the end also) and I still believe that what I said is true, even more so now you've confirmed the links are full width.

**Steve G Griggs** · 29-Dec-2011, 07:31 PM

It looks to me partly like a problem in the HTML coding, IE9 doesn't appear to be finding the closing </ul> for id="fav_section_nav", and there's also a lot of empty <li></li> tags in there too... there's an extra navigation button with no contents showing up, and the hover has a problem too. I would take a close look at the HTML in that area to start with.
Also I notice that if you put IE9 into compatibility mode things break even more, your <li> tags used for buttons stretch to the width of your container so you may need to set a width for the buttons.
Hope this may point you to a solution.

**SPS** · 29-Dec-2011, 09:03 PM

Evening Gents,

Thanks for all your help, I have tried a few of your ideas but it looks like it could it be a bigger issue with teclan.com who designed the template.

As I have a limited knowledge of CSS I will have to get them to take a look and send them all your helpful info.

Thanks.

Richard

Announcement

Layout issue with IE Internet Explorer only

Layout issue with IE Internet Explorer only

Comment

Comment

Comment

Comment

Comment

Comment

Comment