I am adding a footer to our organization's website. It looks just fine in Firefox (Mac and PC) and Safari (Mac). But, of course, not in IE 8.
I've got two divs (columns) on the left and middle and within them two rows of links. On the right side of the footer I have an image of our building I'd like to be flush to the top, right, and bottom.
In order to do that I had to make the image part of the background image of the footer. The footer is nestled within the larger content area and that content area has a margin or padding on the left and right sides. In addition, I wanted some extra space below the text so I added some padding (which prevents the image from sitting on the lower edge of the footer.
Here's the test page I am working on: http://americanart.si.edu/collections/index_footer.cfm
I'm stymied. Any fresh look would be appreciated.
The background is in the correct position, but your .col3 inside the footer is covering it. It has a grey background color and is 0px tall in smart browsers, but is rendering at 19px tall in IE even though it has no content. You should probably just remove that div if there is nothing in it.
Related
So I have a site with four main sections. The div for each section has a background image. All four backgrounds are the same size. There are also important elements in the images that I always want to show. In the original version of the page the image would resize depending upon the browser window size but much of the height of the background image was hidden in most cases. So I worked with a guy cleaning up the css and in the process we set the background images to always display 100% height. I was OK with some black background showing through on the sides a bit when necessary as long as I kept the height.
Anyway it worked well. The images expanded and shrank with the browser width, but they always showed the full height of the image. I signed off on the job and it looked good. Until I changed the browser window height (which is something I rarely think to do). Then the elements all spilled out to the right and left of the 4 main divs. I realize now that nothing in the document specifies the width of any section, just the height at 100vh. Only the fact that all four background images have the same dimensions makes it look like there are defined margins.
Is there a simple solution to this? I need to define a right and left border to the page to contain all of the inner divs and buttons, but I want to keep the 4 main divs showing 100% vertical height.
We are using
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
to define each of the four divs.
Basically I need a container surrounding the 4 main sections that expands to the width of the images, while still allowing the images to resize with the window, yet it keeps all of the other buttons and divs contained.
The page can be seen here: view-source:http://liquidpropane.io/hold/
It works right now exactly like I want except the buttons spill out the sides if the browser window is too short.
Thanks for the help Justin. In the end I did have to rethink the design. I wanted to keep the idea of using the background collages, but keep the responsive design. I moved the homepage logo out of the background image and into the banner section. Then I moved the important parts of the collage into the center part of the main image, and the less important parts to the sides. That way cropping at the sides will not matter. Finally I decided to remove the rounded text boxes out of sections 1 and 3. I will just use a small bit of landing page text (quite big in a thin font) on those pages and put the bulk of the content in sections 2 and 4. I have not added that text in yet, but the cleaned up version of the background and banner can be seen at http://liquidpropane.io/newhold
I guess the takeaway that is not specific to just my case is that if information in the background image is important and you want a responsive site, then the important part of the image needs to be centered because there is always the likelihood of cropping on the edges.
If you open my page at http://goo.gl/68s0t (Please don't replace the link here as I don't want google to link this page to my site.) in a non-maximized window and maximize it after it loaded, you see the gradient start over again in the lower part. In opera it is one gradient but in other browsers it repeats vertically.
How can I make it not repeat, ie make the gradient adapt to current browser height?
Sometimes, I see blue squares in the lower right and left corner, what causes them?
To answer (2), the blue squares are caused by the background being applied to both the body and the html elements. Since the body is given a small margin (from the browser, by default), it extends downwards a few pixels beyond the html. They both have the same height, the body is just offset by 8px vertically.
The margin on the left and right causes these small boxes.
To fix this, remove the background from the html, only apply it to the body, and change the margin to padding, if you want the space there.
I'm doing HTML and CSS for a site, and I've come across a very weird bug / behaviour that I can't pin down.
Take a look at http://www.atelierhsl.nl/antwerp/. There's a white line through the logo at the top. If I display:none the navigation at the bottom of the page, it disappears. But when I increase the bottom padding of the text column (.entry-content) it reappears again. This happens in Webkit, Mozilla and IE, so I know I must be doing something wrong. I just can't figure out what. Anybody?
This is caused by an anti-aliased line on the top your body's background images (just 1 pixel of light gray). The simple answer is to crop it using an image editor.
You may want to align the image to the top:
background: url("/wp-content/themes/transfer/images/bg.jpg") no-repeat scroll center top #1D1D88
The main problem is that the background image isn't as big as the the area it should cover.
Kobi's answer is correct, but if you don't mind a design suggestion: Rather than putting a black background image at no-repeat top for the body, separate body content into a container and a footer. For the content background use a smaller background image and tile it, or set the background color to black, since it appears you have no gradient. The footer div can then have a white background (inherited from the body, or just assigned directly).
You page is logically divided into main content and a footer, so the HTML should express that.
There is two solutions:
Just changed the body padding top from 60 to 40 or
changed the background position from center center to center top
I think, you should cut a 1px line from your background and to repeat-y it. There will be no bug, and you will decrease the image weight.
I essentially have two div tags I'm dealing with. On this page - www.employeratlas.com/search.html - when you click on any of the four tabs that tab has a border around it. The idea is that the border is black on the left, right, and top, and is white on the bottom to cover up the border of the div below it. This works fine in everything but IE6 and IE7 (IE6 example here http://www.employeratlas.com/images/ie_tabs.png). I've tried setting the z-index to make the top tab above the other, but it doesn't work.
IE has a different interpretation of z-index, taking into consideration parent elements' z-indexes. In essence, it's not possible to elevate an element above its parent's z-index.
Background info on quirksmode.org
An example of working around it
On this site: http://www.catonthecouchproductions.com/new/ - I have been trying to remove the space between the two red borders, for I can keep my latest projects box without scrolling. Right now it has a slight scroll, then if you click the blue box at the top in Latest Projects, it pulls up a Client List.
I am talking about the vertical scrolling. I set the borders for you can see what element is what and what space is occupies.
My goal is to have it push the other content up, but first to start with the scrolling.
The big gap between the main content box and the bottom box.
Any ideas on what I can do fix that?
My css is here: http://www.catonthecouchproductions.com/new/style.css
First of all your site is looking great!
As for the red border causing a horizontal scroll bar, the only way to fix that is remove the border all together. It seems as if that blue box at the bottom stretches to 100% of the page width. Unfortunately when you ad a 1 pixel border it adds two pixels to the width of that 100% div so it ends up taking more than 100% of the window. To my knowing their is no way to fix this with CSS, so you have to get rid of the border all together.