Can someone help me trouble shoot this nav in IE7? It jams right and I can't figure this darn problem out. http://brccycling.com/2011/
Thanks,
The easiest way to fix this is to redo how you're placing the menu to a technique which will work between IE7/8 and other browsers such as Firefox:
On #top, add position: relative.
On #nav:
Remove float: left, because it's unneeded.
Remove the margin rule.
To replace what the margin was doing, add top: 260px, and left: 290px.
The technique we're now using (properly) is detailed here:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Related
I am working on a website: https://debifit.de and everything is fine on Chrome, FF and Edge.
But in IE11 it adds huge white space at the bottom and - if you remove overflow:hidden from the body tag - also to the right.
After hours of research I found that the element causing these issues is div#stickysmartphone, as long it has position: absolute. When ScrollMagic.js sets it to fixed, the white spaces disappear.
It is also positioned more to the right than in the other browsers.
#stickysmartphone {
position: absolute;
right: 20%;
top: 25em;
bottom: 10px;
}
Please help me fix these two problems as this animation is essential to the UX.
Thank you.
I figured it out: setting overflow: hidden on the inline svg element solved the issue. But I find it very weird that setting position:fixed on the containing div changed that. That's IE11 magic I guess.
Hi I am building a store on Volusion, and can't figure this problem out. The issue is that in IE, Chrome, Safari, my padding for search_refinement_filters is looking fine, but in Firefox, they are being pushed about 350 px to the right. Check out the Firefox CSS issue here
Please let me know if you can help! I have tried moving search_refinement_filters from the content div to content area, but unfortunately I wasn't able to configure that to work either.
Thanks!
It's due to the left padding and left margin on #search_refinement_filters. You also have some weirdness with the absolute positioning. You may want to add position: relative to #content.
Take a look at Firebug. It is a convenient tool for analyzing code in Firefox.
Just add following styles to your #search_refinement_filters div. Remove others.
#search_refinement_filters {
position: absolute;
top: 100px;
left: 232px;
width: 700px;
}
And then apply position: relative to your #content div.
#content {
position: relative;
}
As 2C-B said #search_refinement_filters has left padding and left margin. These can be removed or overridden to prevent the issue with the styling.
You should definitely get Firebug for Testing purposes if you don't already have it.
Get it here: https://getfirebug.com/
It is an invaluable tool for debugging html, css, and javascript problems.
Hope this helps.
I hate CSS, because always hard to predict what it will render into. Can you guys help me to fix this thing...
I need the right side of elements in dropdown menu aligned right under the arrow. First I thought if I do position:absolute, and then just move left to number of pixels, it will work, but if the username changes it breaks everything again
here's the fiddle for your convenience
http://jsfiddle.net/Mwd2A/1/
thank you
If I understood right, you want to when hovering the arrow, that submenu appears right aligned with the arrow.
If it is that:
Add css attribute to .userSubmenu
position: relative;
Add css attributes to .userSubmenu ul
position: absolute;
right: 0;
JSFiddle:
http://jsfiddle.net/Mwd2A/5/
The guy who created the website for my church said there is no way to fix the issue and that we shouldn't worry about it. But I think he's wrong and I'm attempting to fix it myself. My coding background is in C++ and Cobol but not really in CSS. I'm learning though, so any help here would be great.
The site uses Joomla and is here: http://www.anointedesign.com/mtvernon/site2/
It looks good in Firefox and Chrome but in Internet Explorer there is a huge gap at the top between the top header box and the slide show. I believe this is an IE issue in the way it handles negative margin values but I may be way off here and need help.
The entire top nav, logo and seal should be very close to the slide show, to the point where the left seal should overlap the slide show by about 15px.
This css code will fix it:
#horiz-menu {
float: left;
width: 100%;
margin-bottom: -110px;
}
#header-bg > div.wrapper {
clear: both;
}
#showcase-section {
margin-top: 0;
}
The problem is caused by floats and clears inside the horiz-menu div. IE doesn't like divs with that kind of CSS code. :)
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.