hello all,
learner to css here. inherited this site and have made edits.
When I send it to the client it appears funny in IE. can anyone diagnose what the error is my suspucions are that it may be the fact that i changed the previous version to have a position:relative #container.
is this having an adverse effect on the nested elements inside i.e.
#container
#content
#TextContainer
#logonav
#navigation
.maintext
to start;
1. there seems to be approx 5px extra on the right side of the conatiner div.
2. the height:797px isn't being read.
http://www.fuse.ie/website.jpg
CSS -
#container {
position: relative;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
height: 480px;
width: 797px;
}
#logonav {
background-image: url(images/logo.gif);
clear: left;
float: left;
height: 344px;
width: 201px;
margin-left: 26px;
}
#navigation {
float: right;
margin-top: 223px;
margin-right: 16px;
width: 180px;
text-align: right;
}
#aboutus {
float: right;
margin-bottom: 14px;
}
#howtoapply{
float: right;
margin-bottom: 14px;
display: block;
}
#contact { float: right;
}
.arrow {
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
display: inline;
}
.complaintlink {
font-size: 14px;
}
#content {
position: relative;
background-image: url(images/contentarea.jpg);
float: right;
height: 206px;
width: 540px;
margin-right: 30px;
margin-top:138px;
}
#TextContainer {
position: absolute;
top: 20px;
height: 185px;
width: 520px;
overflow: auto;
}
#TextContainerContact {
position: absolute;
top: 20px;
height: 185px;
width: 540px;
/*overflow: auto;*/
}
.maintext {
font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
font-size: 11px;
color: #666666;
text-align: left;
top: 0px;
padding-left: 20px;
padding-right: 20px;
/*overflow:auto;*/
}
.heading {
font-family: Helvetica, Verdana, Arial, sans-serif, Tahoma;
font-size: 50px;
font-style: bold;
color: #66cc33;
top: 0px;
text-align: left;
}
#contentlower {
background-image: url(images/contentarea-lower.jpg);
float: right;
height: 24px;
width: 612px;
margin-right: 30px;
margin-top:0px;
}
#footer {
background-image: url(images/footer.gif);
float: right;
height: 61px;
width: 741px;
margin-top: 39px;
margin-right: 30px;
}
#displaybox {
position:absolute;
filter: alpha(opacity=85); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85); /* IE */
-moz-opacity: .85; /*older Mozilla*/
-khtml-opacity: 0.85; /*older Safari*/
opacity: 0.85; /*supported by current Mozilla, Safari, and Opera*/
position:relative;
top:30px;
left:25px;
width:535px;
height:420px;
padding:0px;
margin:0px;
background-image: url(images/navigation/overlay.gif);
background-repeat: no-repeat;
}
.maintextpopup{
font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
font-size: 11px;
color: #666666;
text-align: left;
padding-left: 50px;
margin-top:0px;
width:420px;
padding:8px;
}
#close {
position:absolute;
top: 18px;
left: 512px;
height: 18px;
width: 18px;
padding: 0;
margin-right: 5px;
color: #666666;
}
.popuptext {
text-align: left;
height: 410px;
width: 600px;
}
#iframepad {
position:absolute;
padding-top:20px;
margin-left:8px;
}
.heading {
font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
font-size: 16px;
font-style: bold;
color: #66cc33;
top: 0px;
text-align: left;
padding-bottom: 3px;
}
.footertext {
font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
color: #FFFFFF;
padding: 14px;
text-align: center;
font-size: 11px;
}
/* legal note in the top right corner. absolute posiitioned outside in the container */
#disclaimer {
position:absolute;
width:50px;
height:20px;
z-index:4;
right: 30px;
top: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
font-size: 10px;
font-weight: bold;
color: #666666;
}
#disclaimer a:link {
color:#666666;
text-decoration: none;
padding:0px;
}
#disclaimer a:visited
{
color:#555555;
text-decoration: none;
padding:0px;
}
#disclaimer a:hover {
color:#222222;
padding:0px;
}
a:link {
color:#66CC33;
text-decoration: none;
padding:0px;
}
a:visited
{
color:#66CC33;
text-decoration: none;
padding:0px;
}
a:hover {
color:#666666;
padding:0px;
}
My pigs dont eat purple clouds
pauloneill79,
post a link to the test site so I can dig into this for you.
thanks, here it
okay
1.) I dont see the xtra pixels in my browsers.
2.) you dont have height:797; anywhere, thats why its not being read.
Dude, you really should re-think all the absolute positioning you have going on here. It's throwing off your design. For instance, in IE, your .maintext is outside it's container. Also, get both your XHTML and CSS validated before you go any further. Validation comes before CSS.
5 px?
I see more like 150px. The reason most likely is the way IE uses margin and widths as opposed to FF. Im betting that if you add up all your margins and your widths that they will come to more than 797px, which is what I presume you meant and not height.
Also like Cupids said, you don't need so much absolute positioning. e.g the Textcontainer class doesnt need it when all you have to do is add a padding-top (or even better just a padding) of 20px to the maintext class.