SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with footer elements

    Hello all - I'm a new SitePoint user, but in building the site I'm currently working on I'd constantly come across CSS topics! Thanks for the forums.

    The site in question can be seen at www.newlifesingers.com If you open it in IE (I have 6 here), it looks just like I want it to. In the righthand side of the footer is "Techincal Information:" followed by two div's I got from another site to show CSS/XHTML validation.

    Since they were div's they originally showed up on two separate lines instead of one. I worked and worked to somehow get them in-line with IE, and as you can see found something that worked.

    But only with IE. Opera and Mozilla both fail to show anything in the footer. (Mozilla is also having a background color problem; still working on that.)

    Any ideas on how I can get the footer to look right in all 3 browsers? Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The footer tems aren't showing because you have floated them but you have also added position:absolute to the style definitions. It can't be both!!

    Take out the position absolute and the elements should appear.

    e.g.
    Code:
    .w3cbutton1 {
    margin: 0.2em 0.45em 0.3em ;
    }
    .w3cbutton2 {
    margin: 0.2em 0.45em 0.3em;
    }
    .buttonsLabel {
    text-align: left;
    float: right;
    width: 11em;
    }
    .w3cbutton3,
    .w3cbutton2,
    .w3cbutton1 {
    text-align: left;
    float: right;
    width: 10em;
    border: 1px solid #ccc;
    font-family: arial, helvetica, sans-serif;
    font-size: 95%;
    font-weight: bold;
    font-style: normal;
    }
    .w3cbutton2 a,
    .w3cbutton1 a {
    display: block;
    width: 100%;
    }
    You will then need to float the html in revers order as the first html element will float far right etc...

    Code:
    <div id="footer" class="inside" >
    	<div class="w3cbutton1"> <a href="http://jigsaw.w3.org/css-validator/v...ewlifesingers/"> 
    	 <span class="w3c">W3C</span> <span class="spec">CSS</span> </a> </div>
    	<div class="w3cbutton2"> <a href="http://validator.w3.org/check?uri=ht...rbose=1#result"> 
    	 <span class="w3c">W3C</span> <span class="spec">XHTML 1.1</span> </a> </div>
    	 <div class="buttonsLabel">Technical Information:</div>
    	<div class="alignButtons"></div>
    </div>
    You had some weird positioning going on there with those margins. Try to keep things simple.

    Your background isn't showing in mozilla because you haven't cleared the float properly. Mozilla needs something to get hold of so use this class instead of the one you had.

    Code:
    .clear
    {
    clear: both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    }
    Your code seems overly complicated for such a small effect. Try to use structural elements such as paragraphs and headings instead of things like this.
    Code:
    	 <div class="buttonsLabel">Technical Information:</div>
    It would be more suited to :
    Code:
    	 <p class="buttonsLabel">Technical Information:</p>
    Or use one of the heading tags if its supposed to be a heading.

    I also found your css a nightmare to run through as properties of the same element were spread throughout the code. I prefer to have all the styles for an element in one place.
    e.g. these were spread all through the css :
    Code:
    #footer
    {
    border-style: solid;
    border-width: 1px 0; /* handles the top of the footer section and 
    	 the bottom of the entire layout */
    }
    #footer
    {
    font-size: 90%;
    font-family: palatino, "palatino linotype", "book antiqua", palmsprings, "zapf calligraphic", "zapf calligraphic 801", paladium, "cg palacio", palisade, aldus, serif;
    font-style: italic;
    text-align: right;
    }
    #footer
    {
    background-color: #248;
    color: #ccc;
    }
    #footer
    {
    padding: 0.5em;
    }
    Anyway hope that helps

    Paul

  3. #3
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, I'll have to try that . . . I'm still kind of a newbie when it comes to CSS.

    Part of the complexity was that I was really trying to avoid reverse ordering of the elements - I just thought that would be strange with a non-CSS browser. But if there's not a way around it, oh well I guess.

    Thanks for the Mozilla tip, too - there was some code in the layout I started with (Ruthsarian) that I think addressed the bug, but it didn't validate with W3C.

    I only used the div with the label because the other two were div's and I was trying to find something to work with all three . . . you're right, <p> or <hN> would probably be better.

    The reason for the redundancy of elements in the CSS is that the CSS is split into files like fonts.css, borders.css, colors.css, etc. This was the way the Ruthsarian layout was structured and I followed the same practice in making revisions. Instead of all the elements being in one file, all of the related properties were defined in the same file. Different strokes I suppose - like I said, I'm still kind of a newbie. I've done HTML, ASP, and CSS formatting for years and have been familiar with CSS layout, but this is the first time I've gotten my hands dirty like this.

    Thanks so much for all the help!

    >thg.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •