Slight Problem, Probably something real stupid. Please have a look.

walkclothed · 06-16-2009, 10:09 AM

Hey guys, I'm wondering if someone could have a look at the top navigation bar on the http://www.strokessuck.com and tell me what is creating that visible bit of background that does not change to the hover color when mousing over the "Contact" link. I've been hammering at it for a couple hours and I can't quite figure out what's causing that. Thanks! Also, any other input would be chill.

walkclothed · 06-17-2009, 04:21 AM

Does anyone have any constructive criticism to give? It would be greatly appreciated.

wachtn · 06-17-2009, 08:18 AM

It took a minute for me to figure out what you were talking about. The problem is simple to solve.

In screenstyle.css

Code:

a.nav:link, a.nav:visited {
display:block; float:left; width:19.9%; padding:1.2em 0 1.2em 0; margin:0; 
text-decoration:none; background-color:#6A6A6A; color:#FFFFFF;}

a.nav:hover {
	display:block;
	float:left;
	width:19.9%;
	padding:1.2em 0 1.2em 0;
	margin:0;
	text-decoration:none;
	background-color:#FF0000;
	color:#FFFFFF;

Change 'width: 19.9%' to 'width: 20%'
That should do it but I did not spend enough time to look over the entire source code.

walkclothed · 06-17-2009, 10:50 PM

Thank you for your reply. That makes perfect sense, but now I remember why I made it 19.9% in the first place. It looks perfect at 20% in firefox, but when I look at it in IE 6 and 7, it drops the Contact button down to the next line. Any idea why it might be doing that? Something with the padding that I'm not seeing?

Thanks!

wachtn · 06-18-2009, 01:15 AM

Im not really too sure. I dont actually have any first hand experiance with liquid layouts.

Try this, be sure to save a copy of the original CSS file so nothing bad can happen.

Change all relative instances of the code to the commented code.

Code:

	float:left; // float:left;
	width:19.9%; // width:20%;
	padding:1.2em 0 1.2em 0; // (remove this line)
                                // text-align: center;

Let me know what that does.

06-16-2009, 10:09 AM	#1
walkclothed New Member Join Date: Jan 2009 Posts: 14	Slight Problem, Probably something real stupid. Please have a look. Hey guys, I'm wondering if someone could have a look at the top navigation bar on the http://www.strokessuck.com and tell me what is creating that visible bit of background that does not change to the hover color when mousing over the "Contact" link. I've been hammering at it for a couple hours and I can't quite figure out what's causing that. Thanks! Also, any other input would be chill.

06-17-2009, 08:18 AM	#3
wachtn Silver Member Join Date: May 2009 Posts: 107	It took a minute for me to figure out what you were talking about. The problem is simple to solve. In screenstyle.css Code: a.nav:link, a.nav:visited { display:block; float:left; width:19.9%; padding:1.2em 0 1.2em 0; margin:0; text-decoration:none; background-color:#6A6A6A; color:#FFFFFF;} a.nav:hover { display:block; float:left; width:19.9%; padding:1.2em 0 1.2em 0; margin:0; text-decoration:none; background-color:#FF0000; color:#FFFFFF; Change 'width: 19.9%' to 'width: 20%' That should do it but I did not spend enough time to look over the entire source code.

06-18-2009, 01:15 AM	#5
wachtn Silver Member Join Date: May 2009 Posts: 107	Im not really too sure. I dont actually have any first hand experiance with liquid layouts. Try this, be sure to save a copy of the original CSS file so nothing bad can happen. Change all relative instances of the code to the commented code. Code: float:left; // float:left; width:19.9%; // width:20%; padding:1.2em 0 1.2em 0; // (remove this line) // text-align: center; Let me know what that does.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

06-17-2009, 04:21 AM	#2
walkclothed New Member Join Date: Jan 2009 Posts: 14	Does anyone have any constructive criticism to give? It would be greatly appreciated.

06-17-2009, 10:50 PM	#4
walkclothed New Member Join Date: Jan 2009 Posts: 14	Thank you for your reply. That makes perfect sense, but now I remember why I made it 19.9% in the first place. It looks perfect at 20% in firefox, but when I look at it in IE 6 and 7, it drops the Contact button down to the next line. Any idea why it might be doing that? Something with the padding that I'm not seeing? Thanks!