Hi guys, I’ve found that trying to please all the browsers at once is a nightmare. My site looks great in Firefox and chrome but having issues in IE. Having not worked with CSS before i’m just trying to set up a simple site template. code is below
1st - Got a few issues, in IE it some how stretches the text so it fits the full width. how do i get around this?
2nd - The gradient code for the top link bar doesnt work right in IE, it sorta fades into transparent.
Thanks for any help, you can see the uploading file here
http://www.worktopmagic.co.uk/newsite.php
<html>
<head>
<style type="text/css">
p{ padding: 15px;}
body {
background-image: url(newBack.gif);
background-repeat: repeat;
font-family:"Verdana";
}
#container{
width:800px;
margin:0 auto;
margin-left: auto ;
margin-right: auto ;
}
div.topbox {
width: 800px ;
margin-left: auto ;
margin-right: auto ;
background-color: #FFAA00;
text-decoration: none;
text-align: center;
display:inline-block;
color: white;
}
div.topaddbox {
width: 800px ;
height: 25px;
margin-left: auto ;
margin-right: auto ;
/*background-color: #A3C2E2;*/
text-decoration: none;
text-align: center;
display:inline-block;
color: white;
text-decoration: underline;
background: #2668B3 ;
/* Mozilla: */
background: -moz-linear-gradient(top, #2668B3, #6191C1);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#2668B3), to(#6191C1));
/* MSIE*/
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#2668B3 ', EndColorStr='#6191C1', GradientType=0);
}
div.main {
width: 800px ;
height: auto;
margin-left: auto ;
margin-right: auto ;
background-color: white;
text-decoration: none;
text-align: center;
display:inline-block;
color:black;
text-align: justify;
text-justify:distribute-all-lines;
}
div.addbox {
padding: 2px;
width: 336px ;
height: 280px;
margin: 4px ;
background-color: yellow;
text-decoration: none;
display:inline-block;
float: left;
}
</style>
</head>
<body>
<center>
<div class="container">
<div class="topbox">
<h1>Page Title</h1>
</div>
<div class="topaddbox">
My Main header links
</div>
<div class="main">
<div class ="addbox">
</div>
<p> Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text</p>
<p>Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text</p>
</div>
</div>
</center>
</body>
</html>