Thu, 2007-08-16 15:03
In IE I am getting some unsitely vertical gaps between the div boxes. I think that they are caused by the "hr.cleaner" which tidies up the rounded corner divs in browsers other than IE. Changing the margin-top and margin-bottom to negative values only has an effect in Firefox and Netscape where the spacing is already OK.
Here's the CSS code:
.orangeTL , .orangeTR , .orangeBR , .orangeBL {
background-repeat:no-repeat;
}
.orangeTL {
background-color:#1A171B;
background-image:url(orange_tl.gif);
background-position: left top;
}
.orangeTR {
background-image:url(orange_tr.gif);
background-position: right top;
}
.orangeBR {
background-image:url(orange_br.gif);
background-position: right bottom;
}
.orangeBL {
background-image:url(orange_bl.gif);
background-position: left bottom;
}
#columnsmain {
padding-bottom: 0px;
}
#columns {
width: 710px;
margin:0px;
border: 0px;
text-align:left;
max-width: 710px;
}
#leftcolumn {
float: left;
width: 345px;
margin-right:0px;
padding-bottom:15px;
}
#leftcolumn-content {
margin:0px;
padding-top:20px;
padding-right:30px;
padding-left:30px;
height: 209px;
}
#rightcolumn {
float: right;
width: 345px;
margin-left:0px;
padding-bottom:15px;
}
#rightcolumn-content {
margin:0;
padding-top:20px;
padding-right:30px;
padding-left:30px;
height: 209px;
}
#columnsmain {
width: 710px;
margin:0px;
border: 0px;
text-align:left;
max-width: 710px;
}
#leftcolumnmain {
float: left;
width: 345px;
margin-right:0px;
}
#leftcolumn-contentmain {
padding-top:0px;
padding-right:0px;
padding-left:0px;
height: 250px;
}
#rightcolumnmain {
float: right;
width: 365px;
background-color:#1A171B;
margin-left:0px;
height: 250px;
}
#rightcolumn-contentmain {
margin:0;
padding-top:20px;
padding-right:30px;
padding-left:30px;
padding-bottom:25px;
}
hr.cleaner {
clear:both;
height:1px;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
padding-bottom:0px;
padding-top:0px;
border:none;
visibility: hidden;
}
Here's the HTML code:
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec felis odio, dapibus in, malesuada eu, lacinia
a, sapien. Vestibulum a neque ut nisi luctus posuere. Maecenas
arcu magna, vulputate vel, sodales ac, sodales non, urna. Nunc sodales aliquam augue. Proin libero. Quisque est arcu, pretium in, euismod at, volutpat id, turpis. Quisque rutrum laoreet nisl. Morbi tempus. Vivamus tempus, ante sed pretium ullamcorper, mauris ipsum pretium ipsum, eget placerat quam tellus at justo. In pede. Vivamus sodales, mi quis ...
read more
1984The Bishops
Butterfly Bangs
The Dash
Dogs
Eight Legs
The Husseys
The Indelicates
Kingsize
The Lea Shores
The Lines
Look See Proof
The Moths
Naked Lunch
The People’s Revolutionary Choir
The Puzzle
The Rocks
The Runners
Subliminal Girls
Nitasha Jackson
Artist - DogsTitle - Lorem Ipsum
Released - 07/07/07
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec felis odio, dapibus in, malesuada eu, lacinia a, sapien.
buy it here
Basically I want less of a vertical gap in IE between the div boxes. Any help greatly appreciated. Thanks in advance.
Thu, 2007-08-16 17:20
#1
Here's the link
Thu, 2007-08-16 18:26
#2
and here's a link to the
and here's a link to the validator
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.harbourstudios.com%2Fweekender%2Findex.htm
Thu, 2007-08-16 19:26
#3
world's most awesome reply
world's most awesome reply ever 
Fri, 2007-08-17 07:54
#4
Thanks that's a useful site.
Thanks that's a useful site. It doesn't seem to deal with my CSS problem though unfortunately.
Fri, 2007-08-17 08:41
#5
You are using quirks
You are using quirks mode.
Fix the doctype (http://csscreator.com/node/18218) and the few remaining errors and your page will be easier to debug.
Fri, 2007-08-17 18:56
#6
olivercoquelin wrote:Thanks
olivercoquelin wrote:
Thanks that's a useful site. It doesn't seem to deal with my CSS problem though unfortunately.
Fix the errors, then we help you fix your site.
Sat, 2007-08-18 17:43
#7
Errors fixed
Phew. That took a while. OK all of those errors are now fixed. Is anyone now able to see why I'm getting those wierd vertical spaces between the div boxes please?
Also as a result of the changes I have made the bottom right rounded corner of the top box is not sitting in place. Can anyone see why?
Cheers.
Sun, 2007-08-19 12:34
#8
Are your rounded boxes
Are your rounded boxes always going to be a fixed size? If so you can do away with a lot of the divs.
Sun, 2007-08-19 20:26
#9
No they vary in size.
No they vary in size.
Mon, 2007-08-20 12:02
#10
Width, or just height?
Width, or just height?
Mon, 2007-08-20 12:13
#11
Both width and height. But
Both width and height. But the main box is unique in that it has an image on its left half meaning that it only uses two instances of the rounded corners rather than four. So if it's the only way to solve the problem I could apply a seperate CSS rounded corner solution to it if you think that's the only way to solve the problem?
Mon, 2007-08-20 13:23
#12
Only having had a very
Only having had a very quick look at this, but try adding font-size:0; to your hr.cearer.
I'm more concerned as to whether that element is really required though, but haven't looked at things closely
Mon, 2007-08-20 13:37
#13
Unfortunately that didn't
Unfortunately that didn't work but thanks for trying.
If I don't use the hr.clearer square black block appear below the div boxes, probably due to the scrollable blockquotes being longer than the div boxes.
Mon, 2007-08-20 14:52
#14
It appears that your problem
It appears that your problem is a <br> tag and an <hr> tag in your code between these elements. remove the hr and use
and you should be fine.
Hope that helps,
LokiLoks
Mon, 2007-08-20 15:12
#15
Wow thanks! That works
Wow thanks! That works perfectly.
Just my rounded corner problem remaining now if anyone knows the answer?
Thanks again LokiLoks.
Mon, 2007-08-20 18:03
#16
What's the problem there? I
What's the problem there? I don't recall.
LokiLoks
Mon, 2007-08-20 19:19
#17
The bottom right rounded
The bottom right rounded corner of the top box is not sitting in place.
Mon, 2007-08-20 20:06
#18
It's related to your
It's related to your padding. Changing:
#rightcolumn-contentmain {
margin:0;
padding-top:20px;
padding-right:30px;
padding-left:30px;
padding-bottom:25px;
}
to
#rightcolumn-contentmain {
margin:0;
padding-top:20px;
padding-right:30px;
padding-left:30px;
padding-bottom:23px;
}
fixes it 
Mon, 2007-08-20 22:21
#19
That works perfectly. Thank
That works perfectly. Thank you.
Tue, 2007-08-21 04:29
#20
Remember you can express
Remember you can express this with a lot less css:
#rightcolumn-contentmain {
margin:0;
padding:20px 30px 23px;
}
That would give you the same result.