I've tried for a long time to get this to fix. The big text navigation is at the top in IE11/10/9, but all other browsers have it placed lower. When you hover over the other nav, IE will push it down in the proper spot.
here is the demo site:
https://xdvn.000webhostapp.com/
Hmmm....it seems like adding the height to your secondary nav fixed the issue in IE.
#secondary_nav {
text-align: right;
position: relative;
height: 77px;
}
I am still trying to wrap my head around it to know why exactly this is happening. It seems like IE doesn't know where the bottom will be for that absolute element until that link is hovered over. So set height for the first nav element will make it behave right.
Related
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'm trying to position a check-mark next to a menu item by doing the following:
#userInfo div.dropDownContent p span
{
position: absolute;
margin-left: -20px;
}
A span inside a paragraph is absolutely positioned in order to preserve the centering of the menu item's text, otherwise the check-mark is centered along with the text and it makes it look bad.
As you can see in this jsFiddle, the check-mark looks ok in your average Windows browser, but Safari on Mac and iPad (perhaps even Chrome on Mac) shows the check-mark outside the menu, and there's nothing I can do to make it move even a pixel.
Does anyone know what I'm doing wrong? Is it a webkit bug? Thanks.
I do see that odd behavior in Safari, and I really can't explain why it's in that browser only.
That being said, this updated fiddle should show you what worked for me.
Basically, instead of positioning the span absolutely, I used relative positioning and set it to left -20px like so:
#userInfo div.dropDownContent p span
{
position: relative;
left: -20px;
}
When I resize the browser window my navigation bar div drops below the search box div.
How can I stop the nav bar moving and keep it in the same place? The footer behaves itself and its structured in the same way?
Here's a link...
http://www.signport.co.uk/test/asg_template3.html
Thanks!
This happens because your menu does not have a width specified. Whereas you footer behaves because it has a width specified( div with id footerleft)
I'm testing on Chrome now, removing the width:100% you have set on the navigation bar div (wrapper_menu_full class) seems to do the trick. This 100% refers to its size compared to the containing div (#mainmenu3).
If this still doesn't work on IE7, try setting both divs inside #mainmenu3 to display:inline, although now I'm testing on Chrome it doesn't seem to make any difference.
REPLACE YOUR CSS
#mainmenu3 {
height: 150px;
line-height: 20px;
list-style-type: none;
overflow: hidden;
width: 100%;
}
YOU WILL GET THE DESIRE OUTPUT
You're using floated elements on both divs (searchfilter and menu).
When you are using the floated elements, and the width of the last of the floated element exceed parent's width, it goes moves to the next line (belov).
Put this into your css to make it work as you want:
#mainmenu3{position:relative;}
#search4{position:absolute;top:0;left:0;}
.wrapper_menu{position:relative;top:0;left:310px;}
I'm working on a website for a friend of mine and I'm having a bit of a CSS nightmare. The URL is http://www.bike4haiti.com.
In Firefox and Chrome, there is a Haitian flag that appears in the top right corner of the top banner. In IE, however, it appears as a thin vertical line along the right edge, beginning at the top of the menu and descending past where the content section begins. The CSS class is quite simple code:
img.rightfloat
{
float:right;
padding-left:1px;
padding-bottom: 1px;
padding-right: 5px;
padding-top: 1px;
}
My guess is that it is one of the other CSS elements causing the problem, but I have no idea which one. I tried using the F12 tool, but I had no luck finding the problem.
Help please!
set your first anchor to float:left; you already have the image floating so then just clear them with #topmenu{float:none; clear:both}
that should do it. you'll probably want to tinker with margins for spacing.
You have a your width set to nothing (width="") in your <img> tag.
I'm working on a site that has a wrapper element, with a left and right sidebar, each floated within the wrapper. The left sidebar (which contains navigation) is clearing the right sidebar and pushing it to the bottom for some reason. I've tried fixing it in about 50 different ways. I originally thought changing the size and or margin would help. It didn't. I tried the 'display:inline' fix to no avail. I've tried a ton of other tweaks but I can not get it to work. You can view the site at www.ibgs2010.org and the css is www.ibgs2010.org/css/style.css (I'm trying to use a IE7 specific stylesheet to fix it). If anyone can help, I'd really appreciate it. I've burnt about 3 hours today just trying to fix this one little issue.
Looks like the problem is with the ajaxloader div - set its width to 697px (same as sidebar right) and that should fix your problem.
Try to remove the margins and paddings on your sidebar classes and have a inside wrapper with the margin and padding set to it. More failsafe this way so that margins don't increase the size of your div element. Browsers have a different way of rendering margins and paddings to elements.
Hope that helped you out.
Cheers
I think it's just that the floating content is being considered too wide to fit -- so, it's floating it down to where it will.
Instead of float, you might try position with left and right, respectively:
.content.wrapper {
position: relative; /* establish boundary for absolute positioning */
}
.sidebar.left {
position: absolute;
top: 0px;
left: 0px;
}
.sidebar.right {
position: absolute;
top: 0px;
right: 0px;
}
I propose you add the following:
#ajaxloader {
width: 737px;
float: left;
}
The width of 737px is derived from the 697px width plus the 40px left padding of of .sidebar.right
With this addition the IE7 and Firefox versions should look the same, give or take a pixel.
I include the yahoo reset css as the begining of every page (or css file). It really helps to level the playing field. Also with IE, always remember to specify width (even if it's 100%) and if your floating, make sure to display:inline.