I've built this website www.brownieboo.co.uk and for some reason in IE6, 7 and 8 the DIV #container is overlapping (I think) the #footer DIV and making it not visable.
Tried all sorts to fix this but haven't had much luck.
Can anyone spot what I can do in the CSS code to #container or #footer to make footer sit below #container.
Here's how it looks in IE:
try adding
#footer{
height:20px;
}
IE 6/7 expand the footer to include all the divs inside it. so the white text get the white background from the footer.
Related
I have div with these properties div { height:50px; overflow:scroll; direction:rtl; }
Problem is that on chrome scrollbar is showing where it is supposed to be (on left side), but there is also something like padding added to right side of that div and text is going under scrollbar.
I read that this is chrome bug, but couldn't find solutions. Is there a way to fix this?
This problem only occurs on chrome, both on mac and windows.
This is example http://jsfiddle.net/3FUUG/1/
What about adding padding-left to the div? Like this:
div { height:50px; overflow:scroll; direction:rtl; padding-left: 10px;}
Here is its jsfiddle
I have a fluid width site with a logo centered in the header area. The logo stays in the center regardless of the window size. Works in all browsers except ie9. In ie9 it is stuck on the right. If I could get it stuck on the left that would be an ok compromise but the right will not do. My best guess is that ie9 does not support the css code:
.logo {
width:100%;
position:relative;
}
.logo img {
margin-left:auto;
margin-right:auto;
display:block;
}
Here is the website http://www.cyberdefenselabs.org/
Anyone know a workaround for ie9 that will not affect other browsers or involve drastic recode?
Your .social-header-wrap element contains floating elements that are not properly cleared. Add this style:
.social-header-wrap {overflow:hidden}
The person above is correct - you have floats that are not properly cleared.
But you should sort out your layout before making style changes as you have the same main menu 3 times but with 1 of them hidden and 1 (the first one) with white on white links.
Simply removing the first main menu (the div with the class "social-header-wrap") also solves the problem.
When using
margin:auto;
you should say
margin:0 auto;
Get rid of margin-left and -right and change to margin:0 auto;
Also the containing element needs to be text-align:center which you undo by putting text-align:left in the element you are centering.
I am trying to work towards a responsive design for a web app we are building.
The image below shows a prototype of what I am working on, taken from the jsfiddle below it.
Rather than the grey blocks folding under each other I want them to continue on horizontally causing a scroll if it goes out of view.
I used Erskine's gridpak to generate the responsive grid for me. Is there any way of achieving the effect using the current grid? I am at a bit of a stand still with it.
http://jsfiddle.net/brendan_rice/wT8MG/
Thanks in advance...
You can achieve it with white-space:nowrap and display:inline-block.
http://jsfiddle.net/wT8MG/7/
I removed the white space between the blocks to eliminate the extra margin caused by a space being rendered, one of the few drawbacks of inline-block.
If you want just the row to scroll and not the whole page then add overflow-x:scroll to the main or row class.
EDIT:
For IE7 support add <!--[if lt IE 8]> <style>.col{display:inline}</style> <![endif]--> below the CSS.
Ok, IE tricked me by keeping the document mode in IE8 standards when I switched the browser mode to IE7.
The CSS so far that will work in IE8+. Edited for brevity.
.side-panel {height: 300px}
.side-panel .container{background-color: blue;}
.main {
width: 100%;
white-space:nowrap
}
.container {background-color: #ddd;height: 30px;margin-top: 10px;}
.col {
display:inline-block;
vertical-align:top;
white-space:normal;
border:0;
box-sizing:border-box;
background-clip:padding-box !important;
}
#media screen{
.col {
margin-left:1%;
padding:0 0%;
}
.row .col:first-child {margin-left:0;}
.span_1 {width:19.2%;}
.span_2 {width:39.4%;}
.span_3 {width:59.6%;}
.span_4 {width:79.8%;}
.span_5 {margin-left:0;width:100%;}
}
The whole point of a responsive grid is that you shouldn't ever have to horizontally scroll.
Percentages are relative to their parents. So no matter what width you set for <div class="main row">, each of your columns will always be a percentage of the total.
So if we add up all your columns, we get (8 cols x (19.2% width + 1% margin)) - 1% remove first margin = 160.6%. Floated elements always fold to the next line when they are larger than their parents, and as it will always be larger than its parent, it cannot help but fold. The only way to have them all on one line would be to have the total width of the columns add up to 100% or less of its parent container.
I am working on the following website http://bestofdesigns.be/studioregenbogen/index.html.
Can somebody please look at the css and tell me why the footer is not attached to the content and why there is a gap between the menu and the contentwrapper?
I have looked at this for 2 days and cannot seem to find what goes wrong.
Thanks,
Ben
#footer p {
padding-top: 5px;
margin: 0;
}
why there is a gap between the menu and the contentwrapper?
The gap is due to the margin applied by default by each browser to the list <ul> element and the title <h1>.
Remove it or adjust it
Screenshot
hi now give to #footer overflow:hidden and give to your footer p tagmargin :0;`
as like this
#footer{
overflow:hidden;
}
#footer p{
margin:0;
}
I am suggesting one more thing did you ever opened your design using firebug and checked how your middle content looks. It's bad design. Use div tags extensively don't use padding much.In the body style put text-align:justify property.
Your error is in
#footer p {
padding-top: 5px;
margin: 0;
}
Divide the content wrapper class into two vertical div classes and then divide the below vertical classes into another two vertical classes. Divide the first vertical tag into two horizontal div classes. In that put your image in first horizontal tag and in second your paragraph. In the bottom vertical class your second paragraph.
In my site, I have two divs - right and left. Both are contained within a wrapper div. Here is my code:
#wrapper{
width:1000px;
height:750px;
margin:auto;
}
#left{
width:500px;
height:750px;
float:left;
position:relative;
}
#right{
width:500px;
height:750px;
float:right;
position:relative;
}
In Chrome, no problem.
In Firefox, no problem.
In Safari, no problem.
In Opera, no problem
In IE, the #right div is in the same location horizontally, but vertically it's below the #left div.
I've tried a few different techniques to remedy this. Setting the wrapper line height to 0, setting the right display to inline, reducing the size of the right and left divs (I thought maybe there was a margin/padding issue). I've run out of ideas now, can anybody offer any help of the issue?
In All Browsers (except IE):
In IE:
There's nothing wrong with the CSS you've posted. It will work in all browsers as expected (I've decreased the widths in my example).
What's happening is that you've got an element in one of your columns that's forcing the width of either #left or #right to be greater than 500px. The easiest way to fix this is to start removing elements until the float drop disappears. Then you can figure out if there's a solution for the offending element (i.e. set its width or set overflow: hidden or scroll).
Try using float:left for both the #right and #left divs. You could also probably take out the position: relative as well.
put both left and right divs as float:left