20 replies [Last post]
olivercoquelin
Offline
Regular
London
Last seen: 11 years 42 weeks ago
London
Joined: 2007-08-13
Posts: 18
Points: 0

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:

Subliminal Girls Contreversy 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

1984
The 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 - Dogs

Title - 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.

olivercoquelin
Offline
Regular
London
Last seen: 11 years 42 weeks ago
London
Joined: 2007-08-13
Posts: 18
Points: 0

Here's the link

Here's a link to the page:

http://www.harbourstudios.com/weekender/index.htm

Cheers.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 46 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

and here's a link to the

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 10 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

world's most awesome reply

world's most awesome reply ever Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

olivercoquelin
Offline
Regular
London
Last seen: 11 years 42 weeks ago
London
Joined: 2007-08-13
Posts: 18
Points: 0

Thanks that's a useful site.

Thanks that's a useful site. It doesn't seem to deal with my CSS problem though unfortunately.

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 3 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 10 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

olivercoquelin
Offline
Regular
London
Last seen: 11 years 42 weeks ago
London
Joined: 2007-08-13
Posts: 18
Points: 0

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 10 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

olivercoquelin
Offline
Regular
London
Last seen: 11 years 42 weeks ago
London
Joined: 2007-08-13
Posts: 18
Points: 0

No they vary in size.

No they vary in size.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 10 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Width, or just height?

Width, or just height?

Verschwindende wrote:
  • CSS doesn't make pies

olivercoquelin
Offline
Regular
London
Last seen: 11 years 42 weeks ago
London
Joined: 2007-08-13
Posts: 18
Points: 0

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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 21 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

olivercoquelin
Offline
Regular
London
Last seen: 11 years 42 weeks ago
London
Joined: 2007-08-13
Posts: 18
Points: 0

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.

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 4 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

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

olivercoquelin
Offline
Regular
London
Last seen: 11 years 42 weeks ago
London
Joined: 2007-08-13
Posts: 18
Points: 0

Wow thanks! That works

Wow thanks! That works perfectly.

Just my rounded corner problem remaining now if anyone knows the answer?

Thanks again LokiLoks.

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 4 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

What's the problem there? I

What's the problem there? I don't recall.

LokiLoks

olivercoquelin
Offline
Regular
London
Last seen: 11 years 42 weeks ago
London
Joined: 2007-08-13
Posts: 18
Points: 0

The bottom right rounded

The bottom right rounded corner of the top box is not sitting in place.

http://www.harbourstudios.com/weekender/index.htm

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 10 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Wink

Verschwindende wrote:
  • CSS doesn't make pies

olivercoquelin
Offline
Regular
London
Last seen: 11 years 42 weeks ago
London
Joined: 2007-08-13
Posts: 18
Points: 0

That works perfectly. Thank

That works perfectly. Thank you.

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 4 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

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.