4 replies [Last post]
pauloneill79
pauloneill79's picture
Offline
Regular
Dublin, Ireland
Last seen: 10 years 38 weeks ago
Dublin, Ireland
Timezone: GMT+1
Joined: 2008-10-07
Posts: 26
Points: 16

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;
}

Thanks
Paul O'Neill

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 22 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

My pigs dont eat purple clouds

pauloneill79,
post a link to the test site so I can dig into this for you.

pauloneill79
pauloneill79's picture
Offline
Regular
Dublin, Ireland
Last seen: 10 years 38 weeks ago
Dublin, Ireland
Timezone: GMT+1
Joined: 2008-10-07
Posts: 26
Points: 16

thanks, here it

thanks,

here it is

www.fuse.ie/havensite3

Thanks
Paul O'Neill

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 22 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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.

Saracen
Offline
Regular
Last seen: 14 years 12 weeks ago
Joined: 2004-06-25
Posts: 14
Points: 0

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.