Equal column width (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

MCD -> Equal column width (6/17/2009 19:50:13)

I am trying to create a simple, clean template page with just basic markup to use in the future as a starter. I have a 1px black border separating the left navigation column with the right content column. In every browser except Firefox the border fails to reach the footer. Can anyone tell me how to lengthen the border without using a background graphic? You can view the page here



treetopsranch -> RE: Equal column width (6/17/2009 23:01:02)

Hmm...The border looks OK in my Version of FF 3.0.11. Looks bad in IE 8.
There are some weird characters that follow the closing html tag that show up when viewing the source code in IE8, but I doubt that that is causing the problem.
</html>x巒ꦻ긷

I could not see your styles.css page.



Tailslide -> RE: Equal column width (6/18/2009 1:38:55)

The border is on the content div? Looks like you have padding on the bottom of that div which might hold the line off the bottom.

Personally I don't use this technique because you can never really guarantee which div will be longer and you end up with gaps.

I'd create a background image (2px wide by 2 px high) of the black line and then add that to your container div as a background 170px from the left. That way whichever column is longest you'll still get the correct line (you may need overflow:hidden in it's rule).



MCD -> RE: Equal column width (6/18/2009 6:22:56)


quote:

ORIGINAL: treetopsranch

Hmm...The border looks OK in my Version of FF 3.0.11. Looks bad in IE 8.
There are some weird characters that follow the closing html tag that show up when viewing the source code in IE8, but I doubt that that is causing the problem.
</html>x巒ꦻ긷

I could not see your styles.css page.


Firefox gives the desired look...all the other browsers render it differently. I'll look into the weird characters. They do not show up in the editor.



MCD -> RE: Equal column width (6/18/2009 6:30:43)

quote:

ORIGINAL: Tailslide

The border is on the content div? Looks like you have padding on the bottom of that div which might hold the line off the bottom.

Personally I don't use this technique because you can never really guarantee which div will be longer and you end up with gaps.

I'd create a background image (2px wide by 2 px high) of the black line and then add that to your container div as a background 170px from the left. That way whichever column is longest you'll still get the correct line (you may need overflow:hidden in it's rule).

I had already tried removing the padding but surprisingly FF did not render it correctly after that and the other browsers stayed the same. I had the feeling a graphic would be needed. Thanks Tailslide. It seemed I had gone through every CSS website out there looking for an answer that did not require a graphic. Now I know there is not one.. - Mark



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625