css and browser issues ....

Question

chinmayu 0 Newbie Poster

15 Years Ago

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:

/* 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..

html-css web-design

4 Contributors
5 Replies
128 Views
1 Week Discussion Span
Latest Post 15 Years Ago Latest Post by MidiMagic

MidiMagic 579 Nearly a Senior Poster

15 Years Ago

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.

cmills83 8 Posting Whiz in Training

15 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

chinmayu 0 Newbie Poster · Answer 1 · 2009-02-12T05:09:38+00:00

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 ....

SmartBeaver 0 Newbie Poster · Answer 2 · 2009-02-16T09:15:06+00:00

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

MidiMagic 579 Nearly a Senior Poster · Answer 3 · 2009-02-18T05:43:49+00:00

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.