Forum Moderators: not2easy
I use three types of tabs in my site.
The .navtop tabs are correct and are flush left.
The .navlist tabs should be flush left but are indented about an inch to the right.
The .navPyr tabs I center in the include but are also offset about 1/2 inch to the right.
I have patched this together and really have little understanding of how CSS is programmed. I would really appreciate some detailed help.
Cheers,
Ted
BODY {
padding-right : 1px;
padding-left : 1px;
background : #fff;
padding-bottom : 0;
margin : 1px;
font : small/1.5em Arial Narrow;
color : #000;
padding-top : 0;
voice-family : inherit;
}
UNKNOWN {
font-size : small;
}
.navtop {
font-size : 90%;
float : left;
width : 100%;
line-height : normal;
border-bottom : 1px solid #000099;
}
.navtop UL {
padding-right : 5px;
padding-left : 5px;
padding-bottom : 0;
margin : 0;
padding-top : 4px;
list-style-type : none;
}
.navtop LI {
padding-right : 0;
padding-left : 5px;
background : url('http://www.example.com/style/left.gif') no-repeat left top;
float : left;
padding-bottom : 0;
margin : 0;
padding-top : 0;
}
.navtop A {
padding-right : 10px;
display : block;
padding-left : 5px;
font-weight : bold;
background : url('http://www.example.com/style/right.gif') no-repeat right top;
float : left;
padding-bottom : 4px;
color : #000066;
padding-top : 5px;
text-decoration : none;
}
.navtop A {
float : none;
}
.navtop A:hover {
color : #990;
}
.navlist {
padding : 2px 0;
border-bottom : 1px solid #778;
font : 14px Arial Narrow;
}
.navlist li {
list-style : none;
margin : 0;
display : inline;
}
.navlist li a {
padding : 2px 0.5em;
margin-left : 2px;
border : 1px solid #778;
border-bottom : none;
background : #c3dbc3;
text-decoration : none;
}
.navlist li a:link {
color : #000000;
}
.navlist li a:visited {
color : #000000;
}
.navlist li a:hover {
color : #000;
background : #9db09d;
border-color : #227;
}
#navPyra {
font-size : 12px;
margin : 0;
padding : 0 0 0px 0px;
border-bottom : 1px solid #253E90;
}
#navPyra li {
font-size : 12px;
margin : 0;
padding : 0;
display : inline;
list-style-type : none;
}
#navPyra a:link, #navPyra a:visited {
font-size : 12px;
line-height : 14px;
font-weight : bold;
padding : 0 12px 6px;
text-decoration : none;
color : #38c038;
}
#navPyra a:link.active, #navPyra a:visited.active, #navPyra a:hover {
font-size : 12px;
color : #000000;
background : url('http://www.example.com/style/pyramid.gif') no-repeat bottom center;
font-style : normal;
font-variant : normal;
font-weight : normal;
}
#navPyr {
font-size : 12px;
margin : 0;
padding : 0 0 0px 0px;
border-bottom : 1px solid #253E90;
}
#navPyr li {
font-size : 12px;
margin : 0;
padding : 0;
display : inline;
list-style-type : none;
}
#navPyr a:link, #navPyr a:visited {
font-size : 12px;
line-height : 14px;
font-weight : bold;
padding : 0 12px 6px;
text-decoration : none;
color : #38c038;
}
#navPyr a:link.active, #navPyr a:visited.active, #navPyr a:hover {
font-size : 12px;
color : #000000;
background : url('http://www.example.com/style/pyramid.gif') no-repeat bottom center;
font-style : normal;
font-variant : normal;
font-weight : normal;
}
On .navlist ul you’re only setting a padding, but IE applies a margin by default to <ul>s. To fix this you’d need to add your own margin, probably in this case margin: 0;.
On .navPyr ul you’re applying both a margin and a padding so the above issue can’t apply. However on .navPyr a:link you set [i]padding : 0 12px 6px;[/url]. This isn’t a valid value for padding - it must take either 1, 2 or 4 values. I suspect your browser if trying to recover from this in a way that you don’t want. What did you intend here?
padding : 0 12px 6px;. This isn’t a valid value for padding - it must take either 1, 2 or 4 values.
It is perfectly valid, though I myself very rarely use it because it can confuse IE (never mind coders) at times!
see: shorthand properties post [webmasterworld.com] for more info
1st value = top
2nd value = right and left
3rd value = bottom
I agree with Robin, it's about the margin and padding, can you tell us if the <ul> has the ID or if the <ul> is nested inside a div with the ID.
[edited by: SuzyUK at 8:26 pm (utc) on Mar. 3, 2007]
*{
margin:0;
padding:0;
}As the first CSS line. Sets all elements to an implicit setting of nothing, and you need to add explicit values to any element you want padded or marginalized. ;)
What do I intend? I would like to have all of the tabs be flush left.
Where would the "margin: 0;" go?
If I want all of the tabs flush left what should I do? How should the code look?
I have to admit I did not understand the comments. I found this code in various places and do not understand how it works.
Cheers,
Ted
