...

View Full Version : Little padding problem - FF



Scootertaj
12-09-2005, 01:28 AM
Hey guys, as you can see when you view http://www.c-pawd.moved.in/Parry/ in FF it has the navigation going out of the body.
I understand this is probably what is supposed to happen with my code, but since I test in IE first, it works in IE.

I am positive the problem is with this CSS:

#navlist
{
border-bottom: 1px solid #FFCC66;
margin-bottom: 30px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
padding-left: 190px;
background-color: #CC3333;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding-bottom: 3px;
padding-top: 3px;
width: 668px;
}

Thanks for the help guys.

drhowarddrfine
12-09-2005, 02:57 AM
Don't know why I can't figure this out. When I change the character encoding to utf-8, and you should, too, the problem goes away but your rounded corners get messed up in both IE and FF. I've never used charset=windows-1252 so I can only assume that it is MS specific somehow?

Span
12-09-2005, 01:55 PM
Try taking out the "width: 668px;" from the #navlist?

harbingerOTV
12-09-2005, 02:37 PM
it is the padding as span said. take it off and add text-align: center



#navlist
{
border-bottom: 1px solid #FFCC66;
margin-bottom: 30px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
background-color: #CC3333;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding-bottom: 3px;
padding-top: 3px;
width: 668px;
text-align: center;
}



as drhoward said, adding a proper doctype and encoding throws off your corners. Looking at your source it appears you want the sidebar box to remain the same width and that long links should be broken into 2 lines. The 4 corner image approach seems a little to complicated for this. You can easily (easier way ) make one rounded box image and slice off the top and bottom of it. Give the sidebar div the top image background and the background color. then make the ul have the bottom image and a transparent background. you'll need to turn off all the padding and the margins of the ul and give it the same width as the container. then you wont have to do all the fancy 4 positioned divs to make them sit right.

Scootertaj
12-09-2005, 11:55 PM
Ah, thanks for that harbinger.
Not sure what you mean about my 4 corner box, as I don't use any images.
This seemed the easiest method and didn't use any images.

Note: the reason I would like to keep it like it is because I don't really know how to do it any other way, I just got this way from http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/

Thanks again.

harbingerOTV
12-10-2005, 02:21 AM
Ah I get it now.

On the corners messing up I think it might be the way windows saves the html file or something. After saving it on my computer the • were changed to actual bullets in the html. That caused the page to freak out on the corners.

Scootertaj
12-10-2005, 08:00 PM
So are you saying I should get rid of the • ?

Thanks harbinger :)

harbingerOTV
12-10-2005, 10:44 PM
nope. I think after i saved your page the doc type may have changed the • to actuall bullets. onlu\ine it works fine. offline it fraked until I changed the bullets back to •.

I can only assume its a doctype thing. Online it works so be it.

Scootertaj
12-11-2005, 02:31 AM
K, sounds good :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum