Creating cross browser border effects

Hello,

My last post was probably asking too much so I'm going to simplify and see if there are any takers this time around! Any help would be appreciated because I'm not exactly a pro and I'm just learning as I go along.

I want to create a border effect (see attachment) that functions in IE6 and all modern browsers when I begin adding columns within it.

Adding styles such as border-right/left seems to break in IE6, especially when footers are involved. I've tried putting containers within containers but to no avail.

Has anybody had any experience with border effects and thinks they would solve my dilemma?

 

What kind of HTML structure are you using? Tables or table-less (i.e divs)? If you are using tables, you need to be sure to set the the border attribute in the table to zero ("0"), and then in your stylesheet add the table selector and apply border-collapse to it, so that all table borders will be collapsed. then you can apply the left and right borders to the table cells as you wish.

If you are using divs for each column, then I'll need to have a look at the page your working on so I can get a better idea of what your having trouble with.

-Patrick

 

I'm using a table-less design using divs. I know I've not gone about it the best way.

I've added a link to an example page in my profile.

Hope you can help me out! I've different methods but I'm mainly going on trial and error.

 

The only reason I could see for it to 'break' as you say, is if you are in quirks mode because you don't have a valid doctype - and that means declaring widths the same time as your borders (which is usually a /FAIL/ when it comes to IE6 in quirks or IE 5.x - and can be avoided most of the time ANYWAYS...)

Do you have code we can see/layout that shows your problem? IE6 is fairly well behaved when it comes to borders on DIV's, even with floats. MARGINS on the other hand...

 

Thanks for your help. This is what I have at the moment: An expandable wrapper to centre everything and a subwrapper to create the border effect.

#wrapper {
background-color: #DBE5E7;
margin: 0 20px 10px 20px;
}

#subwrapper {
margin: 0 auto;
border-top: 10px solid #DBE5E7;
background-color: #FFFFFF;
width: 98%;
}

(This method works fine in IE7/FF as far as looks go anyway. In IE6 the border effect looks a lot thinner on the left and right of the wrapper).

I previously had:

#wrapper {
margin: 10px 10px 0 10px;
padding: 5px;
}

#subwrapper {
background-color: #FFFFFF;
border: 10px solid #DBE5E7;
}

(This method also looks fine in IE7/FF but creates a horizontal scoll bar in IE6 and also problems with the footer not spanning the full width).

My footer should be fine, but it's here in any case:

#footer {
clear: both;
width: 100%;
background-color: #2F3532;
}

If you want to take a look at my page it's in the profile as a link.

 

Ok, I'm trying to figure out why you even HAVE two wrappers, when the job you are trying to do could easily be done by one or LESS - that the layout is ALSO messed up in Opera and Safari, and is also broken by the 'large fonts/120dpi' setting in windows, means there's other 'issues' here too.

I think you've overthought the layout here - you've got WAY too many DIV's for something so simple.