Help with many CSS problems

HTML & CSS
1

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

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)


ul.MenuBarHorizontal {
    cursor: default;
    font-family: 'Segoe UI',Arial,sans-serif;
    font-size: 20px;
    height: 40px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    [color=blue]text-align: center;[/color]
    width: 100%;
}
ul.MenuBarHorizontal li {
    cursor: pointer;
    [color=blue]display: inline-block;[/color]
    [color=red]float: left;[/color]
    font-size: 20px;
    left: 31%;
    line-height: 40px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    [color=red]position: relative;[/color]
    text-align: left;
    width: auto;
}

I do not see a problem with the copyright line.

Only tested in FF. Hope this is helpful.

3

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

Perhaps it would be helpful if you would post a screenshot showing how it’s NOT supposed to look.

5

Here’s what it looks like in Internet Explorer when I view it.

6

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 :slight_smile: ) 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)


#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

About the copyright holder’s name wrapping… deleting the width attribute in the table tag should fix that.

8

There are five other prefixes as shown below.

#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

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

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

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

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

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:

background-image: url('/Images/Layout/banner.png');
14

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. :slight_smile: 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.


.banner {
    height:200px;
    background-image:url('Images/Layout/banner.png');
}



<a href="/default.cshtml">
    <div class="banner"></div>
</a>
15

The path to your background image is currently relative to the location of the page, which is not very reliable:

background-image: url('Images/Layout/banner.png');

That won’t work from various pages. Add a slash to the front of the path:

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

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

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

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

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

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.