8 replies [Last post]
philbert25
Offline
Enthusiast
Last seen: 11 years 44 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

Just when I thought I was getting the hang of this... I am revamping the the Department pages for the college I work for and I'm running into a few issues. I FF 2.0 my column2 width is not matching up with the the width that works for IE6. There is extra space on the right in FF. This is made obvious by the grey background used in my columncontainer to make column1 always look as tall as column2.

Also my a:hover isn't working on my column1 menu in FF.

Here is the webpage.
http://www.jalc.edu/departmentpages/healthandpublicservice/beta1.html

Here is the stylesheet.
http://www.jalc.edu/departmentpages//departmentstylesheet3.css

Also, I'm using windows.

I got nuthin'

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

You should control margins

You should control margins and paddings.
At the end of your stylesheet add
#col1nav li a,#active span{ margin:0;padding:0; }
to see what happens...

philbert25
Offline
Enthusiast
Last seen: 11 years 44 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

didn't seem to help

I did it with the margins and it didn't seem to help. I still need the paddings for my buttons.

I got nuthin'

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

If you remove the padding,

If you remove the padding, you will have the same display with ff, ie6 and 7.
Set the width so that the grey doesn't appear any more and add the padding on top and bottom for your buttons.

calamnet
calamnet's picture
Offline
Regular
Holt, MI
Last seen: 13 years 8 weeks ago
Holt, MI
Joined: 2007-09-18
Posts: 11
Points: 0

Don't code for IE 6.0. Fix

Don't code for IE 6.0. Fix IE 6.0 issues instead.

width: 577px; on Column 2 is the correct value.

IE 7.0 and Firefox display the same. The padding in either the active span or the LI A of 16 pixels is throwing off the display.

I haven't looked at the new width in IE 6.0. My guess is that the #active span needs the width changed to 134px to work correctly in IE 6.0 without messing with IE 7.0 or FF 2.0.

philbert25
Offline
Enthusiast
Last seen: 11 years 44 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

I heart this site

I heart this flippin' site. You were exactly right. By setting the width for column2 at 577 and taking both the active span and li a's down to 134 to account for the padding, the problem is solved. Thanks.

Now I need to figure out why the rollover effect isn't happening in FF 2.0 for windows.

I got nuthin'

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 5 years 4 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

Philbert, I'm thinking the

Philbert,

I'm thinking the column1 rollover issue is because of this code:

#col1nav li a:hover, { color: #17940d; background-color: #F8F8F8; border-bottom: 1px solid #17940d; text-decoration: none; margin: 0; }

That extra comma is invalid stytax, hence the whole line is ignored. I found this by checking your page against the CSS validator. The W3Cs validators are a great way to find syntax errors.

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

philbert25
Offline
Enthusiast
Last seen: 11 years 44 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

thanks

Thanks, I'll check this out tomorrow at work.

I got nuthin'

philbert25
Offline
Enthusiast
Last seen: 11 years 44 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

It worked

Katie, it worked like a charm. Thanks for the advice.

I got nuthin'