...

View Full Version : tricky trouble with css on spry top navigation menu



knightrider01
12-18-2010, 04:44 AM
I am having some trouble with this site (http://www.actionmarketers.com/fcc). I'm trying to have the top navigation bar extend all the way across the page (the medium brown color) rather than only going the length of the top nav items, and I want it to show up with About Us first, and Media last aligned to the right (in different browsers it shows different orders and alignment). Also, I would like there to be no extra white space below the top nav banner before the picture.

Can someone help me? What do I need to do differently in the css/html?

Excavator
12-18-2010, 05:16 AM
Hello knightrider01,
Try making these changes to your CSS -

#MenuBar1 {
background: #6f574a;
width: 780px;

}
.topnav {
background: #847a6a;
height: 38px;
}
.content {
padding: 0;
width: 780px;
}

knightrider01
12-18-2010, 05:33 AM
That worked awesome for making the color extend across the topnav banner. Thank you, thank you!

But I still have two more questions shown above:
-Some browsers have the topnav right aligned with "About Us" first and "Media" last (which is what I want), and others reverse them and left align them. How do I make this consistent across various browsers?
-Second, I would like there to be no extra white space below the top nav banner before the picture. How do I fix this?

Excavator
12-18-2010, 09:58 AM
-Some browsers have the topnav right aligned with "About Us" first and "Media" last (which is what I want), and others reverse them and left align them. How do I make this consistent across various browsers?

You have both in there. Most browsers see the float: right; and there is some weirdo hack f/loat: left; in there that others see.
The li's are going to be ordered different if you float them left or right.
What does it look like if you just lose the browser hacks?




-Second, I would like there to be no extra white space below the top nav banner before the picture. How do I fix this?

Umm, I think if you lose that top padding in .content ... like I said in my first post.
#MenuBar1 {
background: #6f574a;
width: 780px;

}
.topnav {
background: #847a6a;
height: 38px;
}
.content {
padding: 0;
width: 780px;
}

knightrider01
12-18-2010, 05:20 PM
I soooo appreciate your help! Everything fixed from this thread. Much, much appreciated!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum