css, ie, mozilla and good eats

[Notquiteanewbie]

hey guys I would appreciate any help on this

I'm attemtping to make a website using nothing but css for the design layout however I ran into a little trouble.

site:
http://raphael.o2sk8.com/

css:
http://raphael.o2sk8.com/css/main.css

i am only experiencing this problem in internet explorer v.6.0

if you look just underneath the grey bar to the right hand side you will notice the black border does not extend all the way to it. There seems to be some time of padding that I haven't found a way to get rid of

 

[animeguru]

BTW, this is currently showing up in both IE 6 and Firefox 1.0.2 for me.


It would appear that your content div has a padding of 20px all the way around which is likely what is causing the problem. You could always change it to

padding: 0px 20px;

which would give you side paddings of 20px, but no top or bottom padding. Give that a shot.


If that doesn't work, you could always eliminate the right border on each div. That would eliminate the dead space you're seeing on the right and the extra bit of 'border' showing on the left.

I'm not sure why you're using the side borders anyway since it'd be easier to just have the background shadow incorporate it if that's the effect you're looking for. At least then you don't have to push pixels constantly.

 

[Notquiteanewbie]

thanks for your help
apparently the problem was is that i had a bottom border on the ul tag

the following code fixed it, in both IE and Firefox

#menu {
background: #EBEBEB;
width: 790px;
height: 30px;
border-left: 0;
border-right: solid #333 1px;
border-bottom: solid #333 1px;
padding: 0;
margin: 0 auto;
}