PDA

View Full Version : Please Help......problem...!!!



googlers
Mar 4th, 2011, 10:20 AM
i am making a website....and i am new to css.....so i don't know how to correct the problem.....!

my problem is of margin.....my website layout gets affected by different web browsers...!
my layout gets affected when some one restores the window...!
please help...!

here is my css code...:


body, ul, ol, li, p, h1,h2, h3, h4, h5, h6, form, blockquote{
margin:0px;
padding:0;
}
body{
margin: 60px 0px 0px 180px;
font: normal 11px Verdana,Arial,Helvetica,sans-serif;
color:#333333;
background-position:top left;
background: #202020 url(images/bgr.jpg) no-repeat;
background-position: center top;

}

#top{
position:relative;
margin:0 auto;
width:980px;

background-repeat:no-repeat;
background-position:0 29px;
}

#head{
height:120px;
position:relative;
}

#start{
height:40px;
position:relative;
background-image:url(images/start.png);
background-repeat:no-repeat;
width: 980px;
}

#main{
position:relative;
float:left;
width:960px;
padding-left:10px;
padding-right:10px;
border-left: 1px solid #232a36;


background-image:url(images/line.gif);
background-repeat:repeat-y;


}
#top .content{
position:relative;
float:left;
width:640px;
margin-right:20px;
}
.sidebar{
position:relative;
top:-155px;
right:205px;
float:right;
width:300px;
background-color: #ffffff;
}

.sidebar-footer{
position:relative;
top:-129px;
right:-95px;
float:right;
width:300px;
background: #1C2634 url(images/sidebar-footer.jpg) no-repeat scroll center top;
height: 10px;
}

.bsa{
position:relative;
float:left;
width:278px;
padding: 10px;
}

.bsa2{
position:relative;
float:left;
width:278px;
background: #FFFFFF url(images/advertiser.jpg) repeat-y;
border-right: 1px solid #3b73a5;
border-bottom: 1px solid #3b73a5;
margin-bottom:1px;
padding: 15px;
}

.footer{
position:relative;
clear:both;
width:928px;
top:-40px;
padding:40px 20px 20px 20px;
background-image:url(images/footer-top.jpg);

background-repeat:no-repeat;
background-color:#FFFFFF;
margin-left:1px;
float:left;

}

.footer_meta{
text-align:center;
margin:5px 0 ;
clear:both;
}

/*--------------------head--------------------*/
#head h1 a{
top:1px;
left:20px;
text-indent:-9999px;
position:absolute;
outline:none;
width:380px;
height:100px;
z-index:2;
}

.description{
position:absolute;
top:0;
text-indent:-9999px;
}

/*------------------content--------------------*/


.breadcrumb, .entrys, .featured_entry, .featured_entry2, .navigation{
width:600px;
line-height:34px;
background-image:url(images/bg_box_content.jpg);
background-repeat:no-repeat;
background-position:top left;
border:1px solid #b2b2b2;
background-color:#fff;
padding:0 20px;
margin-bottom:14px;
position:relative;
float:left;
}

.entrys{
line-height:22px;
padding:20px;

}

/*------------------top menu--------------------*/

div#navHeader {background: url(images/bg_skeletonTop.png) no-repeat 0px 45px; height: 90px; position:relative;}

ul#menu {margin-left: 20px;}
ul#menu li {float:left; margin-right: 5px; list-style: none;}
ul#menu li a {display: block; color:#FFFFFF; font-size: 1.25em; font-weight: bold; text-decoration: none; height: 45px; padding: 1px 0 0 20px; float:left;}
ul#menu li a:hover {color:#00a2ff;}
ul#menu li a span {display: block; padding:12px 20px 31px 0px; }

ul#menu li.navSelected a, ul#menu li.current-cat a, ul#menu li.current-cat-parent a {background: url(images/bgnavLeft.png) no-repeat scroll 0 1px; color:#fff}
ul#menu li.navSelected a:hover, ul#menu li.current-cat a:hover {color:#f2f2f2;}
ul#menu li.navSelected a span, ul#menu li.current-cat a span, ul#menu li.current-cat-parent a span {background:url(images/bgnavRight.png) no-repeat top right;}

#subMenu {clear:both;}
#subMenu ul {font-size: 0.9em; font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial; }
#subMenu ul {position:absolute; padding: 8px 0 8px 0; bottom:0; left:20px}
#subMenu ul li {float:left; margin-right: 10px; color:#7c8d93; list-style: none;}

sunfighter
Mar 4th, 2011, 02:57 PM
We are taught once we set a width to a box and then add a margin, the margin goes round the box. Not so in IE. Here the width is the box width plus the margin. which means the box width shrinks in IE when a margin is add. Some coders play with a combo of margins and padding. Other use css resets. I like Russ Myers found here:http://meyerweb.com/eric/tools/css/reset/
Others make a separate style sheet for IE.

Your choice.