Menu
Hi there,
I’ve spent the last week or so getting into learning some CSS, since all I had done in the way of web design prior to this was a combination of slicing up pretty layouts in Photoshop and putting them together in Dreamweaver.
I was completely new to CSS and relatively new to HTML, certainly I had never written in the stricter XHML.
So I’ve put together a little site just to kind of experiment with what I’ve learned. But I’ve ran into the browser compatibility issue.
My site looks great in Firefox, also in Safari, but in IE (I’ve only tried the most recent version) it looks terrible, in fact very little of the original layout is where it is supposed to be.
If anyone could maybe give me a few suggestions as to what needs changing etc then it would be much appreciated.
As I said, I’m completely new to this so please excuse the probably messy code!
Unfortunately I don’t have a server to upload it to yet so I will have to post the code (unless there’s an alternative?)
Thanks in advance.
[CODE]
body {
background-image:url(images/background.jpg);
}
#all {
width: 800px;
height: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
#header {
width: 800px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
#logo {
width: 180px;
margin-top:10px;
margin-left: 10px;
}
img {
border-style: none;
}
#slogan {
font-family: century gothic, arial;
color: #545454;
font-size: 15pt;
letter-spacing: -1pt;
float: right;
margin-top: -30px;
margin-right: 20px;
}
#menubar {
width: 800px;
height: 50px;
clear: both;
background-image:url(images/menubar.jpg);
background-repeat: no-repeat;
}
#maincontent {
width: 300px;
height: 80px;
position: absolute;
margin-left: 20px;
margin-top: 30px;
}
#thumbs {
width: 500px;
height: 700px;
float: left;
clear: both;
margin-top: 100px;
margin-left: 20px;
overflow: auto;
}
#secondarycontent {
width: 200px;
height: 750px;
float: right;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 20px;
padding-left: 20px;
padding-top: 20px;
border-left: 2px #ffc5f9 solid;
}
#footer {
width: 800px;
height: 50px;
float: left;
background-color: grey;
text-align: center;
color: #545454;
font-family: century gothic, arial;
}
h1 {
color: #f89dee;
font-family: arial;
letter-spacing: -2pt;
}
#maintext {
color: #545454;
font-family: arial;
}
.description {
color: #545454;
font-family: arial;
}
#secondarytext {
color: #f89dee;
font-family: arial;
}
ul {
float: right;
list-style-type: none;
width: 100px;
height: 25px;
background-color: #e57fda;
text-align: center;
margin-top: 23px;
margin-left: 20px;
margin-right: 10px;
border-top: 1px #ee3edb solid;
border-left: 1px #ee3edb solid;
border-right: 1px #ee3edb solid;
font-family: century gothic, arial;
color: white;
padding-left: 0px;
}
ul a {
color: white;
font-family: century gothic, arial;
text-decoration: none;
display: block;
text-align: center;
}
ul:hover {
background-color: #f89dee;
}
ul li {
display: none;
}
ul:hover li {
display: block;
background-color: #e57fda;
width: 98px;
height: 20px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
border: 1px #ffffff solid;
}
ul:hover li:hover {
width: 98px;
display: block;
background-color: #f89dee;
}
a.active {
background-color: white;
width: 100px;
height: 25px;
color: #545454;
border-bottom: 1px #ffffff solid;
}
ul.active {
background-color: white;
color: #545454;
border-bottom: 1px #ffffff solid;
}