Hi - I’m trying to get the footer at bottom right of my old pages to look like this new page (please scroll each time to bottom right where it begins “copyright”):
In old page - FF etc the space betw the paragraphs is too big. In IE6/7 there’s zero space!
I’m totally unable to decrease or increase this space! I’ve tried top/bottom margins and padding on .copy, .wp, .last - with !important too - and line-height, and I have display:inline (because IE seems to be giving .fda disclaimer on left its own display:block) – but nothing works.
css:
.fda { /disclaimer/
clear:left; /btmlft/
float:left;
display:inline;
width:450px;
margin:30px 0 10px 20px;
}
.fda p {font:0.65em Arial,sans-serif; color:#666666; line-height:1.2}
.copy, .wp, .last {
clear:right; /btmrgt,copy,wp/
float:right;
display:inline;
width:250px;
}
.copy, .wp {margin:0 20px 0 0; padding:0} /0 for FF/
.copy p {font:0.8em arial,sans-serif; color:green; text-align:right}
.last {margin:0 20px 20px 0; padding:0}
.wp p, .last p {font:0.66em Arial,sans-serif; color:#666666; text-align:right; line-height:1}
thanks for help! - Val
P.S. please ignore the tables junk in old page, these are pre-css pages onto which I’m pasting a new css header and footer.
.last{margin:0} - sets the margin of .last to zero
not if the margin is already 0 by default or inheritance, then it’s the same as saying nothing at all, if you get what I mean :)… but please don’t worry if I lose you when I do things that do nothing at all 'cause I stopped doing it now and did what you said and it done work…
yes that specificity link is on my To Do list, immediately after learning the native languages of klingon and krypton…
[QUOTE=valarcher;4604724]Hi Paul - by an empty class, I mean the class doesn’t do anything, e.g.
.last {margin:0} - means the same as - .last {} - I just stuck a meaningless margin: in there so I could have the class.
You still lost me
.last{} - is the same as saying nothing at all - It does nothing to any element, unless you put some declarations in there
On the other hand .last{margin:0} - sets the margin of .last to zero.
I think I am still mis-understanding you
But now I’ve switched to “applied the single class to the green element and let the others be styled from the original parent.”
and that works! thank you! Although I had to go back to what you told me here, to get it to work:
[quote]
div .test{} - Will target the element that has a class of test because it is a descendant of the parent div:
<div><p class=“test”> test </p></div> e.g. #txtnav h3 {}
It will target the element with the styles inside the bracket but as there are none then there is no effect and the rule is wasted. Or are you just showing me empty brackets but I need to assume that there will be styles inside there?
e.g.
div .test{color:red}
I first vainly tried a gazillion different ways of targeting p:
such as:
.last.copy p
.last .copy p
.copy p
p.copy
p .copy
but none of them worked! Finally your “.last .copy” did work. (strong would be too bold for me here)
thank you! - Val
It’s all abut specificity and depends where the element is located as to how you target it.
Hi Paul - by an empty class, I mean the class doesn’t do anything, e.g.
.last {margin:0} - means the same as - .last {} - I just stuck a meaningless margin: in there so I could have the class.
But now I’ve switched to “applied the single class to the green element and let the others be styled from the original parent.”
and that works! thank you! Although I had to go back to what you told me here, to get it to work:
div .test{} - Will target the element that has a class of test because it is a descendant of the parent div:
<div><p class=“test”> test </p></div> e.g. #txtnav h3 {}
I first vainly tried a gazillion different ways of targeting p:
such as:
.last.copy p
.last .copy p
.copy p
p.copy
p .copy
but none of them worked! Finally your “.last .copy” did work. (strong would be too bold for me here)
Im not sure what you actually mean by an empty class as there is no such thing.
If you want to address a bunch of elements with a new style then apply a class to the parent and target them from the parent. If there is no parent then you can add a div around then which is what you seem to have done and may be what you mean.
However as you only have two paragraphs to target it would have been neater to add a class to both the paragraphs instead. You can still target the anchors within the paragraphs in the normal way.
p.last{styles etc…}
p.last a {styles etc…}
Or as you seem to only have one different p element in that group you could have applied the single class to the green element and let the others be styled from the original parent.
I would have put the copyright text inside a strong tag as you have it enlarged and bolder than the rest and then I could target the strong element without adding any extra classes and then the rest of the p elements styled from the original parent.
oh, when I first began adding a new header/footer to this old <table>s page, I tried adding the resets at top of css but it devastated the old page so much, that I left all resets out totally.
>.footrgt p{margin:0 0 10px}
Thank you, that works for footrgt, and by applying to footlft too I was able to get the exact same spacing on both sides in both IE + FF. Cool…
I don’t know how to tell the browser to display those last 2 <p>s + a:'s re theme + top to display in a different font from the .copy para above them. So I created a .last that does nothing.
Maybe I should do something like this?
p.last
<p class=“last”>
but then how to deal with a:? Creating an empty class seems to give me the most compact html.
The p always has margins by default unless you have reset them somewhere. Firebug doesn’t show the default stying applied to elements.
Q: If I’ve nothing to say about a class, can I just make it:
.last {}
or do I have to enter something in the curly brackets, like:
.last {margin:0}
thanks, Val
Why would you want an empty class rule? It will do nothing.
If you don’t want it then don’t add it. If you were expecting it to somehow remove all styles from that element then you are out of luck (although that would be cool). The only way to remove styles if by re-defining them to be something else.
You have two blocks at the bottom of the page so float them as two blocks and not as multiple floats as that just makes things awkward.
Just use two floats (one left and one right) and then stack the content in each as required. It couldn’t be simpler and it will tidy the page also.
Your main issue however with IE seems to be that the div.last element is outside the page wrapper. It should be one level higher and inside the page wrapper.
<div class="last">
<p>
<!--CHANGE-->
<a href="#blenders">⇑Top⇑ Blending Raw Foods + Best Blender</a></p>
</div>
[B]</div>[/B]
</body>
</html>
