SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 44
  1. #1
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Help with many CSS problems

    I have found many problems with the layout of my site when it is viewed on anything other than Chrome on a 1920x1080 monitor.

    This is the site.
    and
    This is what it's supposed to look like.

    These include issues with the navigation bar, fonts, the footer, and zooming in/out.

    The problems are undoubtedly rooted in site.css and SpryMenuBarHorizontal.css, which you can find in the source (right click and select "inspect element" or "view source").

    You should be able to find the problems easily yourself.

    Any and all help is greatly appreciated.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, Spartan4085. A couple of suggestions.

    The image at the top of the page is awkward as a foreground image. It looks like it would be more suitable as a background image in a container with a fixed height (same as the image). The block container would automatically stop at the edges of the page; thus ending the problem with the horizontal scrollbar.

    I don't know anything about the Spry menu in particular, but the following changes to the css would center the row of menu items: (add the BLUE, delete the RED)
    Code:
    ul.MenuBarHorizontal {
        cursor: default;
        font-family: 'Segoe UI',Arial,sans-serif;
        font-size: 20px;
        height: 40px;
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: center;
        width: 100%;
    }
    ul.MenuBarHorizontal li {
        cursor: pointer;
        display: inline-block;
        float: left;
        font-size: 20px;
        left: 31%;
        line-height: 40px;
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: relative;
        text-align: left;
        width: auto;
    }
    I do not see a problem with the copyright line.

    Only tested in FF. Hope this is helpful.

  3. #3
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't been seeing any problem with the image, other than the image itself. It's just a placeholder.

    After applying the changes you suggested, I haven't noticed any changes.

    The copyright line at the bottom sometimes appears as two lines instead of one.

    Thanks for trying, though.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Perhaps it would be helpful if you would post a screenshot showing how it's NOT supposed to look.

  5. #5
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    That's helpful.

    The absence of red in the menu is happening because the background-color for the menu container is being applied with a -moz- specific prefix, so other browsers are not interpreting it. (That's why it worked in FF for me ) I'm not familiar with applying gradients in this way, so I can't help much except to say that you need other vendor prefixes to address other browsers.

    SpryMenu (line 14)
    Code:
    #menucontainer {
        background: -moz-linear-gradient(center top , #EF0015, #BE1540) repeat scroll 0 0 transparent;
    }
    Can you look up the prefixes for other browsers, or do you need help doing that?

    After we get the menu color solved, we will move to the next issue... the centering of the menu. Also, there are at least a couple more areas where the background-color does not extend when the width of the browser window is increased.

    You might want to reconsider that placeholder at the top as I suggested unless it is not supposed to hold an image. It DOES extend the point at which scrollbars are triggered.

    You might want to view your web page in a non-maximized browser window so you can realize how it is behaving in other computers without big monitors and so you can see what happens when you resize the browser window. Realize that your audience of viewers most likely do not have the luxury of a giant monitor.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    About the copyright holder's name wrapping... deleting the width attribute in the table tag should fix that.

  8. #8
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are five other prefixes as shown below.
    HTML Code:
    #menucontainer
    { 
        background-color: #EF0015;
        background: -webkit-gradient(linear, left top, left bottom, from(#EF0015), to(#BE1540)); /* Safari 4+, Chrome */
        background: -webkit-linear-gradient(top, #EF0015, #BE1540); /* Chrome 10+, Safari 5.1+ */
        background: -moz-linear-gradient(top, #EF0015, #BE1540); /* FF3.6+ */
        background: -ms-linear-gradient(top, #EF0015, #BE1540); /* IE10 */
        background: -o-linear-gradient(top, #EF0015, #BE1540); /* Opera */
        background: linear-gradient(top, #EF0015, #BE1540); /* W3C */ 
    }
    Also, when I resize the browser, it appears perfectly no matter how small, but I understand.

    You were right about the copyright problem, but I had to fix the horizontal rule next to it as well. That's fixed.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Spartan4085 View Post
    There are five other prefixes as shown below.
    HTML Code:
    #menucontainer
    { 
        background-color: #EF0015;
        background: -webkit-gradient(linear, left top, left bottom, from(#EF0015), to(#BE1540)); /* Safari 4+, Chrome */
        background: -webkit-linear-gradient(top, #EF0015, #BE1540); /* Chrome 10+, Safari 5.1+ */
        background: -moz-linear-gradient(top, #EF0015, #BE1540); /* FF3.6+ */
        background: -ms-linear-gradient(top, #EF0015, #BE1540); /* IE10 */
        background: -o-linear-gradient(top, #EF0015, #BE1540); /* Opera */
        background: linear-gradient(top, #EF0015, #BE1540); /* W3C */ 
    }
    Also, when I resize the browser, it appears perfectly no matter how small, but I understand.

    You were right about the copyright problem, but I had to fix the horizontal rule next to it as well. That's fixed.
    Glad that the wrapping of the copyright holder's name is fixed. Thanks for the update. I never saw that wrap, BTW. I guessed that your browser renders the font slightly larger than mine, so it wrapped within the fixed width on your PC but not mine.

    I was reading Firebug which had filtered out the other prefixes so I did not see them. Careless of me. Looking at the CSS, the gradients are clearly present.

    But the color problem with the menu remains and also the centering in IE, so there is still at least two problems.

    Off Topic:

    Would you mind explaining how you set up Dropbox to show the screenshots? I just signed up for it recently and do not yet understand all of its features. That one is cool.!.

  10. #10
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After uploading an image to Dropbox, right click and select "Copy public link." Paste that wherever it needs to go. This will work on both Dropbox.com and the installed version.

  11. #11
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Due to a severe weather warning, I had to move to my basement with my laptop. Now I see what you mean with the banner. I'll see what I can do.

    The storm past surprisingly fast. I'm back on my desktop. Still working.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Cool. Let me know when the banner is ready and we'll go from there.

    Thanks for the Dropbox help. That will be very useful starting almost right away.

  13. #13
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I'm pretty sure the banner works as intended, except now the image doesn't appear on other pages. It's just blank.

    EDIT: And now the image won't display at all. Maybe this has to do with how it's linked. It's linked using:
    Code:
    background-image: url('/Images/Layout/banner.png');

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You'll have to change the div on the other pages. And... since you're doing that... why not take a different approach and use css. Assign a class to the div, something like "banner", and assign the height and background properties in css instead of inline. It will be easier to update as the development of your site progresses. Note, you will probably have to change the path to the image depending on where the image is located in relation to the css file.
    Code:
    .banner {
        height:200px;
        background-image:url('Images/Layout/banner.png');
    }
    Code:
    <a href="/default.cshtml">
        <div class="banner"></div>
    </a>

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The path to your background image is currently relative to the location of the page, which is not very reliable:

    Code:
    background-image: url('Images/Layout/banner.png');
    That won't work from various pages. Add a slash to the front of the path:

    Code:
    background-image: url('/Images/Layout/banner.png');
    A better alternative is to put this style in the CSS file. As it stands, you have to fix this bad link on every page.

  16. #16
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know what I did, but it works now. Thanks.

    The remaining problems are:
    • In IE, nav items are not centered
    • In IE, the nav gradient does not show
    • On pages that don't fill the entire page, the footer doesn't stay at the bottom


    I would like to note: all pages are linked to layout pages, which we are trying to fix. There is no need to edit the other pages.

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Let's change words, if you don't mind. We referred to the image at the top of the page as the "banner". I assume you are now referring to the red bar at the bottom of the page. Do you mind if we call that a "footer"? Now please describe under what circumstances that footer does not sit at the bottom of the page. Does more content appear beneath it or just white space? Can you post a screen shot that shows what you mean? And does it happen in IE only or all browsers?

    I'm not familiar with your other threads, so you may have to repeat some things for me.

  18. #18
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To find the footer's problem, go to the "Blog" page on any browser. The footer does not stick to the bottom and there is white space beneath it. This happens whenever there isn't enough content to fill the entire window.

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Spartan4085 View Post
    To find the footer's problem, go to the "Blog" page on any browser. The footer does not stick to the bottom and there is white space beneath it. This happens whenever there isn't enough content to fill the entire window.
    The next question is whether you expect to see the footer stuck to the bottom and a big gap between that and the content, or the content area stretching all the way down to the footer.

    Sticky footers and pages at a height of 100% are doable, but a bit brittle. So I prefer to keep things simple, and just use the footer color as a background on the body element. Then the footer color always extends to the bottom of the page. You just have to set a background color on the content area and any other elements that had a transparent background.

  20. #20
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I expect to see the footer stuck at the bottom with the content area stretching to the footer.

    I tried applying a height of 100% to the content area and the container, but neither did anything.

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Spartan4085,

    Will the footer always be a fixed height, or might the height of the footer change over time or on different pages?

    There are a few ways of setting up a "sticky footer". We need to choose the one that is the most effective for you. As Ralph suggested, they can be tricky if certain content elements change height, so the best method requires looking into your crystal ball and predicting the future.

  22. #22
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The height of the footer stays the same forever. It never changes.

  23. #23
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Sorry, one more question... Does your site need to be compatible with IE7 or under, or is IE8+ compatibility satisfactory? I will guess that IE8+ is the answer because of the way your page is constructed, but it's important to ask.

    Also, it is not normal for an anchor to be outside of a parent container, so I still recommend putting a <div> around the anchor at the top of the page. That construct is important for the success of any sticky footer.

    Before we tackle the sticky footer, though, it would be a very good idea to clean up the HTML a bit. Are you familiar with the HTML validator? http://validator.w3.org/

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    As ronpat said, do that validation. Anyhow, this is probably the best resorce for achieving the layout you want:

    http://www.sitepoint.com/forums/show...41#post1243541

  25. #25
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have fixed the footer problem. I'll start correcting any mistakes found by the validator (mostly unimportant ones) then I'll stop for the night.

    Every validation error has been fixed, save two. I'll be back tomorrow.


Tags for this Thread

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
  •