-
Width of cell issue
Apologies for starting a new thread, but I think I can explain things more clearly now:
Creating a new nav bar for my comparative-religion site, I've tried to combine the CSS attributes from two different site nav bars and merge them.
Trouble is, everything looks great in IE6:
EDIT: image removed
but in Mozilla Firebird the tables are not at their intended width:
EDIT: image removed
Here's the code that I'm using:
Code:
A.leftLink {
BACKGROUND-COLOR: #ededed;
BORDER-BOTTOM: #333333 1px solid;
BORDER-LEFT: #ededed 1px solid;
BORDER-RIGHT: #999999 1px solid;
BORDER-TOP: #ededed 1px solid;
COLOR: #000000;
FONT-FAMILY: Arial, Helvetica, sans-serif;
FONT-SIZE: 9px;
PADDING-LEFT: 12px;
TEXT-DECORATION: none
WIDTH: 100%;
}
A.leftLink:hover {
BACKGROUND-COLOR: #dbdbdb;
BORDER-BOTTOM: #ededed 1px solid;
BORDER-LEFT: #999999 1px solid;
BORDER-RIGHT: #ededed 1px solid;
BORDER-TOP: #999999 1px solid;
COLOR: #000000;
FONT-FAMILY: Arial, Helvetica, sans-serif;
FONT-SIZE: 9px;
PADDING-LEFT: 12px;
WIDTH: 100%;
TEXT-DECORATION: none
}
The CSS is being applied as thus:
Code:
<TR>
<TD><A class=leftLink
href=""><IMG
height=6 alt=""
src="arrow.gif"
width=3 border=0> FORUM</A></TD>
</TR>
I'm sure it's just a silly little thing I'm doing wrong, but I'm still very inexperienced with using CSS.
I would be extremely grateful for any help.
-
Hi,
Have you tried adding display:block as mentioned in the other thread ;)
Code:
A.leftLink {
BACKGROUND-COLOR: #ededed;
BORDER-BOTTOM: #333333 1px solid;
BORDER-LEFT: #ededed 1px solid;
BORDER-RIGHT: #999999 1px solid;
BORDER-TOP: #ededed 1px solid;
display:block;
COLOR: #000000;
FONT-FAMILY: Arial, Helvetica, sans-serif;
FONT-SIZE: 9px;
PADDING-LEFT: 12px;
TEXT-DECORATION: none
}
A.leftLink:hover {
BACKGROUND-COLOR: #dbdbdb;
BORDER-BOTTOM: #ededed 1px solid;
BORDER-LEFT: #999999 1px solid;
BORDER-RIGHT: #ededed 1px solid;
BORDER-TOP: #999999 1px solid;
COLOR: #000000;
TEXT-DECORATION: none
}
Paul
-
Okay, real quick at least two things (being an avid Moz 1.2.1 user myself--but no CSS expert)
1) The problem deals with inheritance based on what I've seen in the past. Basically how the CSS elements get interpreted from one browser to another and then trickling down through a tables rows and data items.
2) Not sure but try experiementing with the css element display:block;
... based on a couple of previous forum problem travels I've seen this might provide life-support to the situation. Experiment by inserting the above css code into any of your class/id items. If absolute push came to shove you ?might? (probably not) have to employ some inline css say akin to <span style="display:block;> your-content-data </span>.
Shouldn't have to use the span though based on what I've seen. Worst case, backtrack in your CSS and start adding td and/or tr and maybe even table to some of your class specs.
Bye Now...........
-
Paul, I could've sworn I'd tried display block - I must've rushed it and used it in the wrong place. Either way, it's all looking fine and dandy now. Sincere thanks for that. :)
