IE Problem (Full Version)

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



Message


Brandon -> IE Problem (6/16/2006 10:07:28)

Works in FF, but not in IE

body {text-align:center; font: 0.7em Tahoma, sans-serif; margin: 0 auto; padding: 0;  line-height: 1.5em; color: #94908a; background:#4b4a49 url('images/bg.jpg') repeat-x;}

#container { margin: 0 auto; width: 760px; height: 650px;text-align:left;}

#header {width: 450px; height: 150px; margin: 25px 0 0 55px; padding: 0; float: left;}

#top {width: 450px; height: 50px; margin:30px 0 0 55px; padding: 0; background:url(images/content_top.gif) no-repeat; float: left;}

#main {width: 450px; height: 300px; margin:0 0 0 55px; padding: 0; background:url(images/main.gif) repeat-y; float: left;}

#bottom {width: 450px; height: 145px; margin:0 0 0 55px; padding: 0; background:url(images/content_bottom.gif) no-repeat; float: left;}

#linkbg {width: 150px; height: 450px; margin: 100px 55px 0 0; padding-top: 20px; background:url(images/linkbg.gif) no-repeat; float: right; text-align:center;}

.links {padding-top: 5px;}

p {	margin: 0 0 0 0; }

#top h1 { color: #000; text-decoration: none; font-size: 2em;font-family: arial, verdana, helvetica, sans-serif;font-weight: bold; text-align: left; margin-top: 15px ; margin-bottom: 5px;margin-left: 10px ;margin-right: 0;}




Tailslide -> RE: IE Problem (6/16/2006 11:17:23)

Here you go - this sorts it out in IE6, IE5 and FF

body {text-align:center; font: 0.7em Tahoma, sans-serif; margin: 0 auto; padding: 0;  line-height: 1.5em; color: #94908a; background:#4b4a49 url('images/bg.jpg') repeat-x;}
#container { margin: 0 auto; width: 760px; height: 650px;text-align:left;}
#header {display:inline;width: 450px; height: 150px; margin: 25px 0 0 55px;  padding: 0; float: left;}
#main {display:inline;width: 450px; height: 397px; margin:30px 0 0 55px; padding: 0; background:url(images/main.gif) no-repeat; float: left;}
#linkbg {display:inline;width: 150px; height: 450px; margin: 100px 55px 0 0; background:url(images/linkbg.gif) no-repeat; float: right;}
p {	margin: 0 0 0 0; }

In case you're wondering - all the "display:inline"s are to solve the IE double margin bug. The Text-align center in the body is to centre the container for IE5/5.5.




Brandon -> RE: IE Problem (6/16/2006 11:52:26)

Thanks Tailslide!




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625