Display Issue - FF & IE (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

boonedawg -> Display Issue - FF & IE (10/17/2007 18:41:48)

It's been some time now since my lost post. But I am in need of some assistance with a minor display issue in IE.
The problem area looks fine in FF, but in IE it is having an issue.

Here is a link to the page I am referring to;
template

The right column with the FedEx and Hacker Safe image is the issue. 

*{
  margin: 0;
  padding: 0;
}
body{
  background: url(../imgs/bg.jpg) top repeat-x;
  border-left: 3px solid #fff;
  font: 12px Arial, Helvetica, sans-serif;
}
a img{
  border: 0;
}
a{
  color: #181985;
}
ul.list{
  list-style-type: square;
  list-style-position: inside;
}
ul{
  list-style-type: none;
  list-style-position: outside;
}
ol{
  list-style-position: outside;
}
#header{
	min-width: 936px;
}
#logo img{
  display: block;
  padding: 10px 0px 16px 29px;
}
#logo{
  width: 229px;
  display: block;
  float: left;
}
#toll{
  float: left;
  display: inline;
  margin-left: 446px;
}
#hacksafe{
  display: block;
  background: #FFF url(../imgs/hacker-safe.gif) left no-repeat;
  padding: 32px 0px 5px 50px;
  border-left: 17px solid #fff;
}
#topMenu{
  background: #F2F2F7 url(../imgs/button-bg.gif) top repeat-x;
  font: 600 13px Arial, Helvetica, sans-serif;
  float: left;
  width: 100%;
}
#topMenu a{
  border-right: 1px solid #020268;
  color: #41418D;
  height: 28px;
  display: block;
  float: left;
  text-decoration: none;
}
.pageForm{
  background: #2D2D9F;
  float: left;
  width: 100%;
  padding-bottom: 5px;
}
.pageForm *{
  display: block;
  float: left;
}
.pageForm label{
  color: #D1D1EA;
  font-size: 11px;
  padding: 10px 5px 0px 16px;
}
.textField{
  border: 1px solid #6063A7;
  color: #000;
  font-size: 12px;
  width: 186px;
  /*height: 18px;*/
  padding: 3px 0px 4px 0;
  margin: 6px 0px 0px 0px;
}
.textField.short{
  width: 151px;
}
.submitBtn{
  margin-top: 5px;
  border-left: 6px solid #2D2D9F;
  border-right: 19px solid #2D2D9F;
}
#basket{
  background: url(../imgs/basket.gif) 0px 2px no-repeat;
  padding: 0px 0px 0px 29px;
  margin-top: 3px;
  line-height: 100%;
  width: 110px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
#mainContent{
  width: 936px;
  background: #EAEBFD url(../imgs/bg.gif) left repeat-y;
}
.clear{
  clear: both;
  line-height: 0;
  font-size: 0;
  height: 0;
}
#leftColumn{
  width: 140px;
  float: left;
  background: #fff;
  border-right: 1px solid #fff;
  border-top: 5px solid #fff;
  padding-bottom: 14px;
}
#leftColumn li{
  color: #000;
  background: #fff;
  font-size: 11px;
  padding: 0px 10px 4px 7px;
  margin-bottom: 3px;
  margin-top: -3px;
}
#leftColumn li a{
  color: #181985;
  font-size: 12px;
  /*font-weight: 600;*/
  display: block;
}
.firstTitle{
  background: #3536AC !important;
  font-size: 12px !important;
  font-weight: 600;
  color: #fff !important;
  padding: 5px 0px 5px 5px !important;
  margin-top: 3px !important;
  margin-bottom: 0 !important;
}
.firstTitle#firstPoint{
  margin-top: 0 !important;
}
.secondTitle{
  background: #EAEBFD !important;
  color: #000;
  font-weight: 600;
  font-size: 12px;
  margin-top: 0px !important;
  padding: 1px 0px 0px 5px !important;
  background: url(../imgs/lnav-bg.jpg) top left repeat-x !important;
  line-height: 23px;
  border: 0;
}
#leftColumn .secondTitle{
  font-size: 11px;
  color: #020167 !important;
  padding: 1px 0px 0px 5px !important;
  margin-bottom: 10px !important;
  background: url(../imgs/lnav-bg.jpg) top left repeat-x !important;
  line-height: 23px;
  border: 0;
}
#middleColumn{
  border-left:9px solid #fff;
  border-top: 5px solid #fff;
  width: 616px;
  float: left;
  background: #fff;
}
#topParagraph{
  font-size: 12px;
  padding: 5px 0px 0px 18px;
}
#middleText{
  font-size: 12px;
  line-height: 1.4;
  padding: 10px;
}
.red{
  color: #CC0000;
  font-weight: 600;
}
#center{
  padding: 20px 0px 16px 0px;
  border-bottom: 2px solid #CCCCCC;
}
#center a{
  padding: 0px 5px 0px 6px;
}
#pageTable{
  background: #ccc;
  border: 1px solid #ccc;
  width: 616px;
  margin: 14px 0px 0px 0px;
}
#pageTable td{
  background: #fff;
  vertical-align: top;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 0px 0px 5px;
  line-height: 100%;
}
#pageTable td a{
  font-size: 11px;
  font-weight: 400;
  padding: 0 10px 0px 3px;
}
#pageTable td li{
  padding-bottom: 5px;
}
#pageTable thead td{
  background: #E5E5E5 url(../imgs/tablebg.gif) top repeat-x;
  border-bottom: 1px solid #F1F1F1;
  font-size: 16px;
  padding: 4px 0px 5px 3px;
}
#pageTable .tfoot td a{
  font-weight: 600;
  font-size: 12px;
  padding: 0;
}
#pageTable .tfoot td{
  text-align: center;
  padding: 3px 0 4px 0;
}
#rightColumn{
  float: right;
  width: 160px;
  padding-bottom: 28px;
  border-top: 5px solid #fff;
}
#fedX{
  display: block;
  background: #fff url(../imgs/fedex-small.gif) left no-repeat;
  font-size: 10px;
  padding: 10px 0px 5px 50px;
  border-left: 5px solid #fff;
}
.rightColLinks a,
.rightColLinks img{
  vertical-align: middle;
}
.rightColLinks img{
  margin-right:6px;
}
.rightColLinks{
  padding:5px 0px 5px 5px;
  background-color: #fff;
}
.rightColLinks#whitebg{
  background: #fff;
  padding:5px 0px 5px 5px;
}
.strongLink2,
.strongLink{
  background: #fff;
  display: block;
  padding: 5px 10px 5px 5px;
  font-weight: 600;
}
.strongLink{
	background: #fff;
}
.stripe{
  font-size: 0;
  line-height:0;
  height: 1px;
  clear: both;
  background: #362A96;
  border: 12px solid #fff;
  border-style: solid none;
}
.columnSpacer{
  clear: both;
  background: #fff;
  height: 10px;
  margin: 0px 0px -5px -5px;
}
.rightColLinks#whitebgLink img{
  margin-right: 0;
}
.rightColLinks#whitebgLink{
  float: left;
  padding:5px 0px 5px 0px;
}
#whitebgLink a{
  background: #fff;
  display: block;
  float: left;
  line-height: 24px;
  border-right: 5px solid #fff;
}
#whitebgLink a span{
  display: block;
  width: 120px;
}
.whiteParagraph{
  background: #fff;
  padding: 5px;
}
.more{
  display: block;
  font-size: 10px;
  padding: 5px 5px 10px 5px;
  background: #fff;
}
.lilac{
  background: #D3D7F2 url(../imgs/lilac.gif) top repeat-x;
  float: left;
  width: 100%;
}
.lilac p{
  float: left;
  width: 234px;
  font-weight: 600;
  padding: 5px 0px;
}
.bottomInfoWrap{
  background: #ECECF9;
  float: left;
  width: 100%;
}
.bottomInfoWrap2{
  background: #fff;
  float: left;
  padding: 5px;
}
.bottomColumns{
  float: left;
  width: 234px;
  padding: 0px 0 3px 0;
}
div.bottomColumns{
  background: url(../imgs/phone.jpg) left top no-repeat;
  border-left: 3px solid #ECECF9;
  width: 160px;
  margin-top: 30px;
  font-weight: 600;
  padding: 10px 0px 12px 71px;

}
.bottomColumns li{
  padding: 2px 0px 2px 3px;
}
.alignCenter{
  text-align: center;
}
#single{
  height: 24px;
  font-size: 0;
}
/*Temp*/
.illustration{
  background: #fff;
  text-align: center;
  padding: 5px 0;
}
.price{
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  padding: 5px 0px 5px 0px;
  background: #fff;
}
.price img{
  margin-top: 10px;
}
h1{
  font-size: 16px;
  font-weight: 600;
  background: #F1F1F1;
  border: 1px solid #CDCDCD;
  padding: 3px 0px 1px 10px;
  margin: 11px 0 0px 0;
}
h2{
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  padding-top: 19px;
  padding-left: 5px;
}
h3{
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #0265A0 url(../imgs/h3.gif) top repeat-x;
  padding: 0px 0px 8px 5px;
  line-height: 100%;
}
h4{
  background: #CDE0EE;
  color: #0762A8;
  font-weight: 600;
  padding: 5px 0px 5px 13px;
  font-size: 12px;
}
#imageWrap{
  float: left;
  width: 312px;
  text-align: center;
  border-left: 19px solid #fff;
  border-right: 20px solid #fff;
  padding-top:10px;
}
#selectImage{
  float: left;
  border-right: 1px solid #676767;
  margin-top:5px;
}
#selectImage a{
  float: left;
  border: 1px solid #676767;
  border-right: 0;
}
#imageWrap p{
  clear: both;
  padding: 3px 0px 0px 11px;
}
#imageWrap p a{
  color: #000;
}
#description{
  float: right;
  border-left: 1px solid #CECECE;
  margin-top: 14px;
  width: 259px;
  padding: 7px 0px 20px 5px;
}
#description ul *{
  float: left;
}
#description ul{
  padding-bottom: 4px;
  float: left;
}
#description ul li{
  width: 100%;
  padding-bottom: 4px;
}
.firstColumn{
  width: 95px;
  padding-left: 7px;
}
.lineThrough{
  text-decoration: line-through;
  padding-right: 9px;
}
.blue{
  color: #0B3462;
}
.rating{
  padding: 0 9px 0px 5px;
}
#addToCartForm{
  background: url(../imgs/border.gif) top repeat-x;
  padding: 6px 0px 10px 7px;
  margin-right: 2px;
  clear: both;
}
#addToCartForm *{
  vertical-align: middle;
}
#addToCartForm #inputField{
  width: 40px;
  border: 1px solid #CECECE;
  text-align: center;
  margin: 0px 10px 0px 11px;
  height: 18px;
}
.linkLikeBlock{
  float: left;
  display: inline;
  white-space: nowrap;
  border: 1px solid #CECECE;
  color: #000;
  padding: 10px 15px 10px 19px;
}
.linkLikeBlock#withIcon{
  background: url(../imgs/friends.jpg) top left no-repeat;
  padding: 10px 8px 10px 46px;
	margin-right: 9px;
}
#switcher{
  background: url(../imgs/border2.gif) bottom repeat-x;
  float: left;
  width: 611px;
  padding-left: 5px;
  margin-top: 20px;
}
#switcher a{
	float:left;
	background-image: url(../imgs/link_bg.gif);
	background-position: bottom left;
  background-repeat: no-repeat;
	width: 134px;
	height: 28px;
	margin-right: -9px;
	display: inline;
	outline:none;
}
#switcher a.active,
#switcher a:hover{
	background-position: top left;
}

.tab{
	display:none;
  padding-bottom: 10px;
  height: 1%;
}
.activetab{
	display:block;
  margin-bottom: 30px;
}
.pageText{
  padding: 12px 5px 0px 5px;
}
.retail{
  text-decoration: line-through;
  color: #f00;
  font-size: 28px;
  text-align: center;
  padding: 12px 0 10px 0;
}
.itemWrap{
  border-top: 1px solid #ccc;
  float: left;
  padding-bottom:10px;
  width: 100%;
}
.itemWrap h2{
  text-align: left;
  padding: 7px 0 12px 5px;
}
.itemWrap .leftInfoDiv h2{
  padding: 7px 0 24px 5px;
}
.leftInfoDiv#fourthType{
  width: 295px;
}
.itemWrap .leftInfoDiv#fourthType h2{
  padding: 10px 0 24px 5px;
}
.rightInfoDiv{
  float: right;
  width: 353px;
}
.leftInfoDiv{
  float: left;
  width: 350px;
  padding-left: 2px;
}
.rightInfoDiv#secondType{
  width: 388px;
}
.itemWrap .rightInfoDiv#secondType h2{
  padding: 10px 0 12px 5px;
}
.rightInfoDiv#thirdType{
  width: 293px;
  padding-bottom: 12px;
}
.rightInfoDiv#thirdType h2{
  text-align: center;
  padding: 10px 0 12px 5px;
}
.rightInfoDiv#thirdType table{
  text-align: center;
  margin: 9px 0 1px 0;
}
.rightInfoDiv#thirdType table td{
  padding: 6px 31px 2px 33px;
}
.rightInfoDiv#fifthType{
  width: 293px;
  /*padding-bottom: 10px;*/
}
.rightInfoDiv#fifthType h2{
  text-align: left;
  padding: 10px 0 24px 5px;
}
.itemWrap.sixthType h2{
  padding: 10px 0 12px 5px;
}
.itemWrap.sixthType table{
  margin: 3px 0px 0px 1px;
  text-align: center;
}
.itemWrap.sixthType table td{
  width: 102px;
  vertical-align: bottom;
  padding-bottom: 8px;
}
#leftImg1{
  float: left;
  margin-top: 10px;
  border-left: 19px solid #fff;
}
#leftImg2{
  float: left;
  margin: 10px 0 0px 10px;
  display: inline;
}
#leftImg3{
  float: left;
  margin: 28px 0 0 10px;
}
#leftImg4{
  float: left;
  margin: 10px 0 0px 10px;
}
#rightImg1{
  float: right;
  margin: 10px 10px 10px 0px;
}
.characteristic{
  font-weight: 600;
  vertical-align: middle;
  text-align: center;
  /*float: right;*/
}
.characteristic td{
  padding: 0px 7px 15px 8px;
}
.characteristic .textLine td{
  padding: 0px 5px 6px 6px;
}
#tableBg{
  float: right;
  background: url(../imgs/usb2.gif) left no-repeat;
  padding: 7px 9px 0px 116px;
  margin-top: 23px;
  margin-bottom: 35px;
}
#rightDescription{
  float: right;
  width: 255px;
  padding: 7px 0px 0px 0px;
}
#rightDescription .characteristic{
  float: right;
}
#rightDescription .illustration{
  margin-left: 41px;
  padding: 0;
}
#threeStepsWrap{
  width: 471px;
  margin: 5px 0 0 77px;
}
#threeStepsWrap p{
  width: 147px;
  text-align: center;
  float: left;
  padding: 0 10px 10px 0;
}
#threeStepsWrap p img{
  margin-bottom: 10px;
  display: block;
}
.checkedList{
  float: left;
  width: 100%;
  padding-bottom: 10px;
}
.checkedList p{
  float: left;
  width: 293px;
  padding: 0 5px;
}
.checkedList p.firstCol{
  border-right: 5px solid #fff;
}
.checkedList p img{
  float: left;
}
.infoBlock{
  border: 1px solid #0661A7;
  padding-bottom: 5px;
  clear: both;
}
.infoBlock ol{
  padding: 17px 0px 12px 45px;
}
.infoBlock p{
  padding: 5px 5px 10px 5px;
}
#bottomParagraph{
  float: left;
  font-weight: 600;
  width: 476px;
  letter-spacing: -0.05em;
  padding: 22px 10px 23px 0px;
  text-align: right;
  font-size: 16px;
}
#addToCartLink{
  float: left;
  margin-top: 25px;
}
h5{
  background: #BDD6EC url(../imgs/h5_bg.gif) top left  no-repeat;
  border-bottom: 1px solid #8EB4CE;
  color: #0B266B;
  font-weight: 600;
  margin: 0px;
	padding: 4px 0px 4px 13px;
  font-size: 12px;
  clear: both;
  height: 1%;
}
.infoBlock{
  border: 1px solid #8EB4CE;
  border-top: 0;
  height: 1%;
  margin: 0;
}
.infoBlock#relatedKeyWrap{
  margin: 0;
  padding: 0;
}
.infoBlock#relatedKeyWrap ul{
  float: left;
  width: 179px;
  color: #003399;
  padding: 2px 0px 6px 11px;
}
#relatedKeyWrap ul li{
  padding-top: 4px;
}
#relatedKeyWrap ul a{
  color: #003399;
  text-decoration: none;
  background: url(../imgs/arrow.gif) right no-repeat;
  font-size: 10px;
  padding-right:19px;
}
#relatedKeyWrap ul#lastList{
  padding-left: 28px;
}


Any help with this issue will be greatly appreciated. Thanks in advance. ;)



Nicole -> RE: Display Issue - FF & IE (10/17/2007 20:20:19)

Hi Neil,

You really have so much code in there and such a large style sheet that it's difficult to tell what's causing the images to chop off in IE.

Why don't you save the page as "test" and delete everything except the layout and the offending images and see if it's still happening. If it is it should be easier to work with the code and styles that are left having taken all the other ones out.

If the problem doesn't exist after doing that, then put things back in one by one and see at what point it happens, then you'll know what is causing it.

This is what I do, as tedious as it is, especially with large pages such as yours but more often than not it works.

Sorry I didn't have a definitive answer for you.



boonedawg -> RE: Display Issue - FF & IE (10/17/2007 21:52:38)

Nicole,

I took your advice and condensed the problem down to a new test page and isolated the css. It is still cropping the image in IE. :(

right column

CSS code 

a img{
  border: 0;
}
a{
  color: #181985;
}
#rightColumn{
  float: right;
  width: 160px;
  padding-bottom: 28px;
  border-top: 5px solid #fff;
}
#fedX{
  display: block;
  background: #fff url(../imgs/fedex-small.gif) left no-repeat;
  font-size: 10px;
  padding: 10px 0px 5px 50px;
  border-left: 5px solid #fff;
}
.rightColLinks a,
.rightColLinks img{
  vertical-align: middle;
}
.rightColLinks img{
  margin-right:6px;
}
.rightColLinks{
  padding:5px 0px 5px 5px;
  background-color: #fff;
}
.rightColLinks#whitebg{
  background: #fff;
  padding:5px 0px 5px 5px;
}
.strongLink2,
.strongLink{
  background: #fff;
  display: block;
  padding: 5px 10px 5px 5px;
  font-weight: 600;
}
.strongLink{
	background: #fff;
}
.stripe{
  font-size: 0;
  line-height:0;
  height: 1px;
  clear: both;
  background: #362A96;
  border: 12px solid #fff;
  border-style: solid none;
}
.columnSpacer{
  clear: both;
  background: #fff;
  height: 10px;
  margin: 0px 0px -5px -5px;
}
.rightColLinks#whitebgLink img{
  margin-right: 0;
}
.rightColLinks#whitebgLink{
  float: left;
  padding:5px 0px 5px 0px;
}
#whitebgLink a{
  background: #fff;
  display: block;
  float: left;
  line-height: 24px;
  border-right: 5px solid #fff;
}
#whitebgLink a span{
  display: block;
  width: 120px;
}



caz -> RE: Display Issue - FF & IE (10/18/2007 6:06:40)

I think that this is probably the IE haslayout issue, which I don't fully understand [;)]. However I added a height of 1% to both the Fedex and the Hackersafe statements and that seemed to cure it - when using the IE web developer tools anyway.

Where to find out about this horrible thing:

MS about haslayout

On having layout



boonedawg -> RE: Display Issue - FF & IE (10/18/2007 15:27:07)

Caz,

Thank you so much, that did the trick.



caz -> RE: Display Issue - FF & IE (10/18/2007 18:37:13)

Glad it worked for you too. [:D]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125