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.
Related
We need to display data in a scrollable div.
We have created a simplified fiddle to demonstrate: http://jsfiddle.net/ZsQ5J/3/
The div contains two parts, a header and the content.
We want the Header to scroll horizontally along with the content, but to be fixed while vertical scrolling through the content.
We would like to achieve this completely in CSS if possible, we could solve it with jQuery I guess, but would prefer not to have to.
We have got most of the way there in CSS, but we can't get the content div to stretch the full width of the header. Because, I guess, making the content div 100% of the containing div isn't the full width of the header.
In a little more depth:
HEADER:
We want the header to stay visible all the time when scrolling up/down through the content. However the header is wider than the containing div so we do want it to scroll horizontally. (So no vertical scroll on the header, just horizontal). We have got this part working. The header is a table.
CONTENT:
The content is a div that we want to scroll both horizontally (in sync with the header) and vertically (independently of the header). This is the part we are having problems with. The scroll is working well, but the width is not expanding to match the header. It will only go as wide as the containing div.
I know it's weird to have a table as the header and a div as the content, but due to legacy issues we need to keep it this way.
Not sure from the question if you can add addition elemnts to markup, but if you can, possible solution is this: http://jsfiddle.net/ZsQ5J/8/
But there is possible problem — scrollbar will not be seen bu default. Is it ok this way?
Not sure if this is exactly what you want but this works.
-Wakeeta
body
{
width:100%;
}
#outer_container
{
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:100%;
border:6px solid #FF0000;
overflow-x:auto;
overflow-y:hidden;
}
#top_container
{
display: block;
width:1500px;
padding:10px;
background-color:#CC66FF;
}
#bottom_container
{
height: 400px;
width:1500px;
padding:10px;
background-color:#FFFF66;
overflow-y:scroll !important;
}
em
{
font-weight:bold;
}
Im trying to align multiple Images or DIVs.
i get the content from wordpress.
#wrapper{
width:800px;
}
.image{
width:125px;
height:100px;
float:left;
margin-left:10px;
}
This causes the last image to go to the next line.
i found
#wrapper div:first-child{
margin-left:0px;
}
helps me with the first line but the next lines are "broken" again.
how can i align 6 images in a row with ^n Pictures?
That's indeed a common design problem. I used to fix it by adding 10px to the container, but nowadays I always use a jQuery fix:
$("#wrapper .image:nth-child(6n+1)").find('img').css('margin-left','0');
See jsfiddle here
Or you could do it CSS only, but this will only work in real browsers (not in <=IE8)
.image:nth-child(6n+1) {
margin-left:0px;
}
See jsfiddle here
Sounds like the total width of the images, padding and margin are too wide for your container width. Try increasing the container width to confirm this.
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.
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
Hey, I appear to have a CSS problem, regarding the spacing of my <div>s on my site.
If you point your browser to www.marioplanet.com you will see an odd space after my Apple-themed navigation bar.
I was wondering if anyone can help me identify why this spacing was added, and how I can eliminate it, as it's undesired.
Also, I believe it has something directly related to the nav bar, because without the nav bar, this is no spacing problem.
Thanks!
It is because of <a></a> present in <li id="gn-support"><a></a></li>
That #globalheader DIV that contains the menu bar has 18px of vertical margin (top and bottom). So naturally what follows is displaced by 18px.
#globalheader {
height:37px;
margin:18px auto;
position:relative;
width:771px;
z-index:1;
}
You might want to remove the gn-ipad, gn-itunes and gn-support <li> elements from your html.
Get rid of the 18px portion of the margin in the globalheader item, then change the width of the globalnav item to 1000px:
globalnav {
margin:0;
padding:0;
width:1000px;
}
Ok the problem has to do with you fixed width on:
#globalheader{
width: 769px; //this is too small and actually not needed.
}
The contained list (#globalnav) has a rendered width of 830px (it has some white space at the end didn't investigate to see where it came from. So if you remove the fixed width from globalheader and add a margin-left of 200px to #globalnav you will center it and get rid of the space.
Additionally if you can see why your list have a bunch of white space to the right of it expanding its size to 830px you can just do a margin-left and margin-right of auto and center the list inside the global header div.
Figured out where the extra space at the end of the ul is comming from list items gn-itunes and gn-support are both rendering with 103px in width. this is comming from the (#globalheader #globalnav LI A css rule) You can override the width in (#globalheader #globalnav li#gn-support A) as well as the (#globalheader #globalnav li#gn-itunes A) css rules and that should fix it as well without resorting to fix above.
If you change the width of globalheader will work.
#globalheader {
height:37px;
margin:auto;
position:relative;
width:515px;
z-index:1;
}
If you want to add more navigation links later you will have to increase the width of globalheader.