HTML and CSS

css and browser issues ....

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2008

Posts: 11

Reputation: chinmayu is an unknown quantity at this point

Solved Threads: 1

chinmayu

Offline

Newbie Poster

css and browser issues ....

Feb 6th, 2009

hi all,

i am sorry i know this is a trivial issue but it has bugged me and it seems like i dont ve any clue whatsoever to correct this ....

i ve a site which i want to look centered and in place ... its working fine in firefox (for which i ve a generic css) but not in IE7 .... for which there is a separate css .....

i m getting a lot of space at the bottom ...... not quite sure how browsers render css ......

here's the link to the test page : http://bag.idifysolutions.com/bagtheplanet

the css for ie7 is the following:

Help with Code Tags

html Syntax (Toggle Plain Text)

/* CSS Document */
body{
padding:0px 0px 0px 0px;
text-align: center;
margin: 0 auto;
min-width: 1024px;
height:100%;
font-size:100%;
}
 
#wrapper {
            width: 1024px;
			height:1300px;
            margin: 0 auto;
            text-align: left;
			}
 
#wrapper_quote {
            width: 1024px;
			height:700px;
            margin: 0 auto;
            text-align: left;
			}
 
#wrapper_abt {
            width: 1024px;
			height:1300px;
            margin: 0 auto;
            text-align: left;
			}
 
.imgHeader{
    position:relative;
	z-index:1000;
	left:0px;
	right:0px;
	top:0px;
}
 
.firstdiv{
    position:relative;
   	left:25px;
	top:-330px;
	width:250px;
	z-index:1000;
}
 
.seconddiv{
    position:relative;
   	left:255px;
    top:-935px;
	width:20px;
	z-index:1000;
}
 
.thirddiv{
    position:relative;
   	left:285px;
	top:-1990px;
	width:660px;
	z-index:1000;
	font-family:"Trebuchet MS", Helvetica, Verdana;	
    font-size:11px;
    font-weight:bold;
    color:#B0B0B0;
}
 
.desc_font_head{
font-family:"Trebuchet MS", Helvetica, Verdana;	
font-size:16px;
font-weight:bold;
}
 
.desc_font{
font-family:"Trebuchet MS", Helvetica, Verdana;		
font-size:12px;
font-weight:bold;
}
 
.divHeader_phone{
    font-family:arial, verdana;
	color:#825702;
	float:left;
	font-size:22px;
	font-weight:bold;
	font-style:italic;
    position:relative;
   	left:165px;
	top:-283px;
	width:200px;
	z-index:1000;
}
 
.divHeader_para{
float:left;
	font-family:arial, verdana;
	color:#FFFFFF;
	font-size:16px;
	font-weight:bold;
	position:relative;
	left:385px;
	width:411px;
	z-index:1000;
	top:-350px;
}
 
.divBelHead{
	font-family:arial, verdana;
	color:#ffffff;
	font-size:22px;
	font-weight:bold;
	position:relative;
	left:29px;
	width:625px;
	z-index:1000;
	top:-295px;
}
 
.divBelHead_para{
    font-family:arial, verdana;
	color:#000000;
	font-size:11px;
	font-weight:bold;
    position:relative;
   	left:35px;
	top:-290px;
	width:600px;
	z-index:1000;
}
 
.abtbtp{
    font-family:"Trebuchet MS",arial, verdana;
    color:#000000;
    font-size:15px;
    position:relative;
    left:50px;
    top:-200px;
    width:850px;
    z-index:1000;
}
 
.abt_h1{
font-family:"Trebuchet MS",arial, verdana;
    position:relative;
	color:#007138;
	top:-205px;
	left:-560px;
	z-index:1000;
}
 
.blogbtp{
position:relative;
    top:-14px;
	left:20px;
}
 
 
 
.abtbtp h2
{
color:#FB7D00;
}
 
.abtbtp a{
color:orange;
text-decoration:none;
}
 
.abtbtp a:hover{
    color:#007138;
    text-decoration:none;
}
 
.divBelHead_ul{
    font-family:arial, verdana;
	color:#000000;
	font-size:11px;
	font-weight:bold;
    position:relative;
   	left:5px;
	top:-288px;
	width:600px;
	z-index:1000;
 
}
 
.divBelHead_button{	
	position:relative;
	left:670px;
	width:295px;	
	z-index:1000;
	top:-482px;
}
 
.divBelHead_button_table{
    font-family:arial, verdana;
	color:#FFFFFF;
	text-align:center;
    position:relative;
   	left:695px;
	top:-480px;
	width:300px;
	z-index:1000;
}
 
.divBelHead_button_link{
    font-family:arial, verdana;
	font-size:14px;
	font-weight:bold;
	color:#009900;
	text-align:center;
    position:relative;
   	left:642px;
	top:-480px;
	width:300px;
	z-index:1000;
}
 
.div_bags{
    position:relative;
   	left:11px;
	top:-490px;
	width:800px;
	z-index:1000; 
}
 
.video1{
    position:relative;
   	left:675px;
	top:-1290px;
	width:250px;
	z-index:1000; 
}
 
.video2{
    position:relative;
   	left:675px;
	top:-1275px;
	width:250px;
	z-index:1000; 
}
 
.video3{
    position:relative;
   	left:675px;
	top:-1260px;
	width:250px;
	z-index:1000; 
}
 
.indexfooter{
	position:relative;
	text-align:center;
	left:85px;
    width:900px;
	z-index:1000;
	top:-1150px;
	bottom:0px;
}
 
 
.abtfooter{
    position:relative;
	text-align:center;
    left:85px;
	width:900px;
    z-index:1000;
    top:-100px;
	bottom:0px;
}
 
.orderfooter{
    position:relative;
	text-align:center;
	left:85px;
    width:900px;
	z-index:1000;
	top:-1900px;
	bottom:0px;
}
 
.quotefooter{
	position:relative;
	text-align:center;
	left:85px;
    width:900px;
	z-index:1000;
	top:10px;
	bottom:0px;
} 
 
.blogfooter{
    position:absolute;
    left:85px;
    width:860px;
    z-index:1000;
    top:3000px;
}
 
 
 
#footer 
{
text-align:center;
color:#007138;
font-family:Arial, Helvetica, sans-serif;
font-style:italic;
}
 
#footer1 
{
text-align:center;
color:#000000;
font-size:14px; 
font-family:Arial, Helvetica, sans-serif;
font-weight:300;
}
 
 
 
.divorderBel_text{
    font-family:"Trebuchet MS",arial, verdana;
	color:#007138;
	font-size:32px;
	font-weight:bold;
    position:relative;
   	left:25px;
	top:-293px;
	width:700px;
	z-index:1000;
}
 
.divorderBel_para{
    font-family:arial, verdana;
	color:#000000;
	font-size:15px;
	font-weight:bold;
    position:relative;
   	left:30px;
	top:-288px;
	width:520px;
	z-index:1000;
}
 
 
.divorderBel_ul{
    font-family:arial, verdana;
	color:#000000;
	font-size:12px;
	font-weight:bold;
    position:relative;
   	left:540px;
	top:-335px;
	width:450px;
	z-index:1000;
}
 
 
.divHeader{
	font-family:arial, verdana;
	color:#FFFFFF;
	text-align:left;
	font-size:11px;
	font-weight:bold;
	font-style:italic;
	position:relative;
	z-index:1000;
	left:82px;
	width:800px;
	top:-383px;
}
 
.divQuote{
    font-family:arial, verdana;
	color:#007138;
	border:solid 1px #007138;
	text-align:center;
	font-size:18px;
	background-color:#faddaf;
	font-weight:bold;
	font-style:italic;
    position:relative;
   	z-index:1000;
	left:80px;
	top:-115px;
	width:850px;
}
 
.Button_text
{
    font-family:"Trebuchet MS", arial, verdana;
	color:#FFFFFF;
	font-size:26px;
	font-weight:bold;
	text-align:center;
	padding:0;
	line-height:45px;
	z-index:1000;
}
 
.link
{
    font-family:"Trebuchet MS", arial, verdana;
 	color:#666666;
    text-decoration:none;
    text-align:center;
    padding:0;
	font-size:10.5px;
}
 
.Header{
    font-size : 12px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	/*line-height : 16px;*/
	color : #ffffff;
	position:relative;
	/*top:-153px;*/
	/*margin-bottom:-100px;*/
	border: 0px black solid;
 
}
.thanks_font{
font-family:"Trebuchet MS", Helvetica, Verdana;	
/*background-color:#EAEAEA;/*#EBEBEB;
filter: alpha(Opacity=75);
opacity:0.75;*/
text-align:center;
font-size:14px;
font-weight:bold;
color:#009B00;
vertical-align:middle;
}
#head .divHeader a:link, .divHeader a:visited, .divHeader a:active{
color:#FFFFFF;
text-decoration:none;
}
 
#head .divHeader a:hover{
	color:#FF9933;
	text-decoration:none;
}
 
h2
{
color:#FFFFFF;
}
.text
{
border:solid thin #8B8B8B;
}
 
.error_strings{ 
font-family:"Trebuchet MS", Helvetica, Verdana;	
font-size:10px; 
color:#FF0000;
}
 
 
/**************zoom in*************/
.customGal {
	display: block;
	float: left;
	margin: 0 10px 10px 0;
   cursor: url(../images/zoomin.cur), default;
}
 
#getQuote {
  width:700px;
}
 
#getQuote form {
  padding:17px;
  width:700px;
  float:left;
}
 
#getQuote .contactInfo {
  background:url(../images/orderform/tell.png) no-repeat top left;
  padding-top:40px;
  width:225px;
  margin-right:14px;
  float:left;
}
 
#getQuote .bagDetails {
  background:url(../images/orderform/confirm.png) no-repeat top left;
  float:left;
  padding-top:40px;
  width:420px;
}
 
#getQuote .bagDetails .left {
  float:left;
  width:200px;
}
 
#getQuote .bagDetails .right {
  float:left;
  width:200px;
}
 
#getQuote .bagDetails input, #getQuote .bagDetails select, #getQuote .bagDetails textarea, #getQuote .bagDetails file {
  width:180px;
}
 
#getQuote input.submitInput {
  width:auto;
  margin-bottom:0px;
  margin-top:10px;
}
 
 
#getQuote form label, #getQuote form p {
  font-size:11px;
  font-family:arial;
  color:#888;
}
 
#getQuote form label {
  display:block;
  margin-bottom:5px;
}
 
#getQuote form input.textInput {
  padding:5px;
}
 
#getQuote form input.textInput, #getQuote form select {
  border:1px solid #ccc;
  margin-bottom:10px;
}
 
#getQuote form .contactInfo input.textInput {
  width:210px;
}
 
#getQuote .privacyStatement {
  background:url(../images/orderform/padlock.gif) no-repeat top left;
  padding-left:30px;
}

/* CSS Document */
body{
padding:0px 0px 0px 0px;
text-align: center;
margin: 0 auto;
min-width: 1024px;
height:100%;
font-size:100%;
}

#wrapper {
            width: 1024px;
			height:1300px;
            margin: 0 auto;
            text-align: left;
			}

#wrapper_quote {
            width: 1024px;
			height:700px;
            margin: 0 auto;
            text-align: left;
			}

#wrapper_abt {
            width: 1024px;
			height:1300px;
            margin: 0 auto;
            text-align: left;
			}

.imgHeader{
    position:relative;
	z-index:1000;
	left:0px;
	right:0px;
	top:0px;
}

.firstdiv{
    position:relative;
   	left:25px;
	top:-330px;
	width:250px;
	z-index:1000;
}

.seconddiv{
    position:relative;
   	left:255px;
    top:-935px;
	width:20px;
	z-index:1000;
}

.thirddiv{
    position:relative;
   	left:285px;
	top:-1990px;
	width:660px;
	z-index:1000;
	font-family:"Trebuchet MS", Helvetica, Verdana;	
    font-size:11px;
    font-weight:bold;
    color:#B0B0B0;
}

.desc_font_head{
font-family:"Trebuchet MS", Helvetica, Verdana;	
font-size:16px;
font-weight:bold;
}

.desc_font{
font-family:"Trebuchet MS", Helvetica, Verdana;		
font-size:12px;
font-weight:bold;
}

.divHeader_phone{
    font-family:arial, verdana;
	color:#825702;
	float:left;
	font-size:22px;
	font-weight:bold;
	font-style:italic;
    position:relative;
   	left:165px;
	top:-283px;
	width:200px;
	z-index:1000;
}

.divHeader_para{
float:left;
	font-family:arial, verdana;
	color:#FFFFFF;
	font-size:16px;
	font-weight:bold;
	position:relative;
	left:385px;
	width:411px;
	z-index:1000;
	top:-350px;
}

.divBelHead{
	font-family:arial, verdana;
	color:#ffffff;
	font-size:22px;
	font-weight:bold;
	position:relative;
	left:29px;
	width:625px;
	z-index:1000;
	top:-295px;
}

.divBelHead_para{
    font-family:arial, verdana;
	color:#000000;
	font-size:11px;
	font-weight:bold;
    position:relative;
   	left:35px;
	top:-290px;
	width:600px;
	z-index:1000;
}

.abtbtp{
    font-family:"Trebuchet MS",arial, verdana;
    color:#000000;
    font-size:15px;
    position:relative;
    left:50px;
    top:-200px;
    width:850px;
    z-index:1000;
}

.abt_h1{
font-family:"Trebuchet MS",arial, verdana;
    position:relative;
	color:#007138;
	top:-205px;
	left:-560px;
	z-index:1000;
}

.blogbtp{
position:relative;
    top:-14px;
	left:20px;
}



.abtbtp h2
{
color:#FB7D00;
}

.abtbtp a{
color:orange;
text-decoration:none;
}

.abtbtp a:hover{
    color:#007138;
    text-decoration:none;
}

.divBelHead_ul{
    font-family:arial, verdana;
	color:#000000;
	font-size:11px;
	font-weight:bold;
    position:relative;
   	left:5px;
	top:-288px;
	width:600px;
	z-index:1000;
	
}

.divBelHead_button{	
	position:relative;
	left:670px;
	width:295px;	
	z-index:1000;
	top:-482px;
}

.divBelHead_button_table{
    font-family:arial, verdana;
	color:#FFFFFF;
	text-align:center;
    position:relative;
   	left:695px;
	top:-480px;
	width:300px;
	z-index:1000;
}

.divBelHead_button_link{
    font-family:arial, verdana;
	font-size:14px;
	font-weight:bold;
	color:#009900;
	text-align:center;
    position:relative;
   	left:642px;
	top:-480px;
	width:300px;
	z-index:1000;
}

.div_bags{
    position:relative;
   	left:11px;
	top:-490px;
	width:800px;
	z-index:1000; 
}

.video1{
    position:relative;
   	left:675px;
	top:-1290px;
	width:250px;
	z-index:1000; 
}

.video2{
    position:relative;
   	left:675px;
	top:-1275px;
	width:250px;
	z-index:1000; 
}

.video3{
    position:relative;
   	left:675px;
	top:-1260px;
	width:250px;
	z-index:1000; 
}

.indexfooter{
	position:relative;
	text-align:center;
	left:85px;
    width:900px;
	z-index:1000;
	top:-1150px;
	bottom:0px;
}


.abtfooter{
    position:relative;
	text-align:center;
    left:85px;
	width:900px;
    z-index:1000;
    top:-100px;
	bottom:0px;
}

.orderfooter{
    position:relative;
	text-align:center;
	left:85px;
    width:900px;
	z-index:1000;
	top:-1900px;
	bottom:0px;
}

.quotefooter{
	position:relative;
	text-align:center;
	left:85px;
    width:900px;
	z-index:1000;
	top:10px;
	bottom:0px;
} 

.blogfooter{
    position:absolute;
    left:85px;
    width:860px;
    z-index:1000;
    top:3000px;
}



#footer 
{
text-align:center;
color:#007138;
font-family:Arial, Helvetica, sans-serif;
font-style:italic;
}

#footer1 
{
text-align:center;
color:#000000;
font-size:14px; 
font-family:Arial, Helvetica, sans-serif;
font-weight:300;
}



.divorderBel_text{
    font-family:"Trebuchet MS",arial, verdana;
	color:#007138;
	font-size:32px;
	font-weight:bold;
    position:relative;
   	left:25px;
	top:-293px;
	width:700px;
	z-index:1000;
}

.divorderBel_para{
    font-family:arial, verdana;
	color:#000000;
	font-size:15px;
	font-weight:bold;
    position:relative;
   	left:30px;
	top:-288px;
	width:520px;
	z-index:1000;
}


.divorderBel_ul{
    font-family:arial, verdana;
	color:#000000;
	font-size:12px;
	font-weight:bold;
    position:relative;
   	left:540px;
	top:-335px;
	width:450px;
	z-index:1000;
}


.divHeader{
	font-family:arial, verdana;
	color:#FFFFFF;
	text-align:left;
	font-size:11px;
	font-weight:bold;
	font-style:italic;
	position:relative;
	z-index:1000;
	left:82px;
	width:800px;
	top:-383px;
}

.divQuote{
    font-family:arial, verdana;
	color:#007138;
	border:solid 1px #007138;
	text-align:center;
	font-size:18px;
	background-color:#faddaf;
	font-weight:bold;
	font-style:italic;
    position:relative;
   	z-index:1000;
	left:80px;
	top:-115px;
	width:850px;
}

.Button_text
{
    font-family:"Trebuchet MS", arial, verdana;
	color:#FFFFFF;
	font-size:26px;
	font-weight:bold;
	text-align:center;
	padding:0;
	line-height:45px;
	z-index:1000;
}

.link
{
    font-family:"Trebuchet MS", arial, verdana;
 	color:#666666;
    text-decoration:none;
    text-align:center;
    padding:0;
	font-size:10.5px;
}

.Header{
    font-size : 12px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	/*line-height : 16px;*/
	color : #ffffff;
	position:relative;
	/*top:-153px;*/
	/*margin-bottom:-100px;*/
	border: 0px black solid;

}
.thanks_font{
font-family:"Trebuchet MS", Helvetica, Verdana;	
/*background-color:#EAEAEA;/*#EBEBEB;
filter: alpha(Opacity=75);
opacity:0.75;*/
text-align:center;
font-size:14px;
font-weight:bold;
color:#009B00;
vertical-align:middle;
}
#head .divHeader a:link, .divHeader a:visited, .divHeader a:active{
color:#FFFFFF;
text-decoration:none;
}

#head .divHeader a:hover{
	color:#FF9933;
	text-decoration:none;
}

h2
{
color:#FFFFFF;
}
.text
{
border:solid thin #8B8B8B;
}

.error_strings{ 
font-family:"Trebuchet MS", Helvetica, Verdana;	
font-size:10px; 
color:#FF0000;
}


/**************zoom in*************/
.customGal {
	display: block;
	float: left;
	margin: 0 10px 10px 0;
   cursor: url(../images/zoomin.cur), default;
}

#getQuote {
  width:700px;
}

#getQuote form {
  padding:17px;
  width:700px;
  float:left;
}

#getQuote .contactInfo {
  background:url(../images/orderform/tell.png) no-repeat top left;
  padding-top:40px;
  width:225px;
  margin-right:14px;
  float:left;
}

#getQuote .bagDetails {
  background:url(../images/orderform/confirm.png) no-repeat top left;
  float:left;
  padding-top:40px;
  width:420px;
}

#getQuote .bagDetails .left {
  float:left;
  width:200px;
}

#getQuote .bagDetails .right {
  float:left;
  width:200px;
}

#getQuote .bagDetails input, #getQuote .bagDetails select, #getQuote .bagDetails textarea, #getQuote .bagDetails file {
  width:180px;
}

#getQuote input.submitInput {
  width:auto;
  margin-bottom:0px;
  margin-top:10px;
}


#getQuote form label, #getQuote form p {
  font-size:11px;
  font-family:arial;
  color:#888;
}

#getQuote form label {
  display:block;
  margin-bottom:5px;
}

#getQuote form input.textInput {
  padding:5px;
}

#getQuote form input.textInput, #getQuote form select {
  border:1px solid #ccc;
  margin-bottom:10px;
}

#getQuote form .contactInfo input.textInput {
  width:210px;
}

#getQuote .privacyStatement {
  background:url(../images/orderform/padlock.gif) no-repeat top left;
  padding-left:30px;
}

please help me out .... the css for firefox is similar apart from some minor adjustments in pixel positioning ....

Thanks a million in advance..

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: css and browser issues ....

Feb 11th, 2009

I see several errors.

1. Stop using pixels for measurement. This locks the design to one screen resolution. It fails on other screen sizes.

2. Don't put dimensions on 0 values (e.g. 0px). If Firefox finds one of these, it throws away the entire style.

3. Don't put nonzero surrounding styles (margin, border, padding) in the same tag or style that contains size styles (width, height). This makes IE render it differently than other browsers.

Daylight-saving time uses more gasoline

•

Join Date: Nov 2008

Posts: 11

Reputation: chinmayu is an unknown quantity at this point

Solved Threads: 1

chinmayu

Offline

Newbie Poster

Re: css and browser issues ....

Feb 11th, 2009

•

Originally Posted by MidiMagic

I see several errors.

1. Stop using pixels for measurement. This locks the design to one screen resolution. It fails on other screen sizes.

2. Don't put dimensions on 0 values (e.g. 0px). If Firefox finds one of these, it throws away the entire style.

3. Don't put nonzero surrounding styles (margin, border, padding) in the same tag or style that contains size styles (width, height). This makes IE render it differently than other browsers.

Thanks a lot for replying man .......

for 1. what should i use in lieu of pixels .... sorry but i m a newbie ..... and is it going to ve any adverse effect on the general page layout ....

got the 2. one .... thanks mate ....

3. is a bit elusive to me ... could you explain it a bit more .... cuz i think i ve done that almost every time ....

•

Join Date: Jun 2004

Posts: 247

Reputation: cmills83 is an unknown quantity at this point

Solved Threads: 1

cmills83

Offline

Posting Whiz in Training

Re: css and browser issues ....

Feb 11th, 2009

•

Originally Posted by MidiMagic

I see several errors.

1. Stop using pixels for measurement. This locks the design to one screen resolution. It fails on other screen sizes.

2. Don't put dimensions on 0 values (e.g. 0px). If Firefox finds one of these, it throws away the entire style.

3. Don't put nonzero surrounding styles (margin, border, padding) in the same tag or style that contains size styles (width, height). This makes IE render it differently than other browsers.

yeah i wouldnt do #1 unless your site is completely expandable, if you are using fonts as em instead of px you'll have xbrowser issues if you have any fixed height elements

•

Join Date: Jan 2009

Posts: 14

Reputation: SmartBeaver is an unknown quantity at this point

Solved Threads: 1

SmartBeaver SmartBeaver is offline

Offline

Newbie Poster

Re: css and browser issues ....

Feb 15th, 2009

There's a host of things to use instead of pixels, but I would definitely reccomend percents. (%)

It will render things, obviously, in percentages of the screen, so it will work across different monitors. =D

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

It may not work as great as you would like across different monitors and browsers, but it'll work.

Play around with it and get something you like. =D

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: css and browser issues ....

Feb 17th, 2009

Use percent for horizontal location.

Use points to define fonts and things relative to fonts.

Don't attempt vertical centering. It is almost impossible to achieve on all browsers, resolutions, and window sizes.

Daylight-saving time uses more gasoline