Forum Moderators: not2easy
<div class="results">
<div class="result">
<div class="bot">
<div class="top"></div>
<div class="mid"><div class="more-details"></div>result 1</div>
<div class="fold"></div></div>
</div>
</div>
Here is my css:
.results {
margin: 0px;
position: absolute;
left: 252px;
top: 45px;
right: 20px;
bottom: 20px;
width: 457px;
padding: 0px;
}
.result {
margin: 0px;
width: 457px;
background-image: url(images/general_result_mid.gif);
background-repeat: repeat-y;
padding: 0px;
}
.result .bot {
margin: 0px;
padding: 0px;
background-image: url(images/general_result_bot.gif);
background-repeat: no-repeat;
width: 457px;
background-position: 0px bottom;
min-height: 114px;
}
.result .mid {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
background-image: url(images/general_result_mid.gif);
background-repeat: repeat-y;
background-position: 0px;
width: 457px;
}
.result .top {
background-image: url(images/general_result_top.gif);
margin: 0px;
padding: 0px;
height: 8px;
width: 457px;
}
.result .fold {
background-image: url(images/general_result_fold.gif);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
background-position: right bottom;
min-height: 114px;
}
.result .more-details {
background-image: url(images/number_1.gif);
padding: 0px;
float: left;
height: 114px;
width: 82px;
margin-top: 8px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}
At first I did it using an unordered list, but when that didn't work I changed it to the above. Does anyone have any ideas as to why this doesn't show in IE?
[snip]
I don't get it.
Thanks for your help.
[edited by: createErrorMsg at 8:38 pm (utc) on Sep. 9, 2005]
[edit reason] site reference [/edit]
Little HTML errors, unrelated to the problem:
doubled <html> tag
unclosed <meta> tag
unclosed <link> tag
unclosed <hr> tag
Unrelated to the problem, in your "results" class, you define left,top,right and bottom for an absolutely
positionned block, which strikes me as odd.
I've tried isolating the problem.
Basically, you have a block (class left-col) followed by another block (class results) followed by an
horizontal ruler (hr, class cleaner).
styles:
left-col floats
results is absolute
hr clears both
Problem: IE makes "results" go aways.
Solution : changing any of these, really. I'm not sure what you're trying to accomplish, but I feel your basic
structure is rather complex.
Here's how I'd go at it, from the top of my head. (works only for fixed dimensions)
One div for your left menu. float left. Specify height.
Another div for your "main section". float left as well. Specify same height.
both these divs has a vertically-repeated background image for the side borders/content image
both these divs has a content div that has a bottom-aligned background image.
both these content divs have at least another inner div which contains the top background image
margins on both these root divs should allow you to position them as you wish.
an absolutely aligned block could position the piece of wire picture on the left.
rest should be cakewalk.
Of course, if you want variable widths/heights, the simpler way to go, in my humble opinion, remains the age-old, ugly inevitable way of tables.
As for the actual current problem...
Quite frankly, I don't get it and I'm tempted to tag this as an IE bug. Perhaps someone more guruific person
can use the simple sample I provided at the end of this post to explain what's happening.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head/>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
.left-col {
float: left;
border:1px solid yellow;
}
.results {
position: absolute;
left:200px;
border:1px solid red;
}
hr.cleaner {
clear:both;
}
</style>
</head>
<body>
<div class="left-col">left-col</div>
<div class="results">results</div>
<hr class="cleaner"/>
</body>
</html>
