This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I've got this site I have put together www.endosa.com, and unfortunately someone in the office has a dinosaur machine with ie7 on it. They had some problems with the one dropdown menu on the site in the nav. I've spent a few hours trying to get this thing to work.
Initially, it was appearing behind the next div, but I got that figured out with some z-index work. Now, it appears correctly when it is hovered over, but when I try to put my mouse over the sub menu, the list disappears.
Any ideas?
Try
nav.primary ul li{
display: inline-block;
float: left;
}
The issue also appears on chrome.
This is because you positioned your subnav absolute 100% but not relative to the parent element it's relative to your header element.
http://pastebin.com/u07XYUvC
I fixed your header (at least for the desktop query, I didn't check the others) so subnav is relative to the top level 'li' item & main navigation is positioned at the bottom of the header.
You are using a lot of margins to position elements that require absolute positioning.
Related
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
all three footers have the same html and css code but actiing differently in each of the three pages. some times its at bottom, at other page its in the middle, at the other its at bottom but making a gap between its previous div (#main)
jsfiddle.net/BBnzW/
jsfiddle.net/6cYQg/
jsfiddle.net/USSds/
any guess why?
Please only answer after making sure in jsfiddle that it works. I have done alot of tries before.
The code is above stackoverflow code limit of 30000chars, so cant paste here.
#main { position: absolute } is causing the footer to position in the middle of your content. And .w1 { padding-bottom: ... } and #footer { margin-top: ... } are producing the extra white space. But I don't think removing that will completely solve your problem.
Seems like you are trying to get a sticky footer. Try this http://jsfiddle.net/fL4XF/18/. Simple css and no extra markup. It works in IE7.
Here's another Sticky Footer that works in IE6. However, it needs extra markup. It's up to you.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
Having IE7 only issues with spacing on this page: http://chantalorganics.co.nz/wordpress/newsletter/
The image below shows the large space above and below the feature boxes, and above the footer content.
I can see that many people have issues with margins in IE7, but I am using padding. I am also using Eric Meyer's reset.css. However, the content is floated which seems part of the problem.
Appreciate any guidance!
I found that this big blank space is because of margin-bottom added to 'entry-content' class. This class is added to div right under H1. You can remove that margin-bottom and add it to H3 with 'Find out why' text. In my case that solved problem :)
Btw. on Chrome when You hover on Tahini Cookies image the image move's down. That is weird...
EDIT:
To repair footer blank space add in styles display inline-block like below
#footer-container {
display: inline-block;
}
Big blank space above footer is because You have height added to #primary-menu and #container. I tried to remove that but then I noticed that after that menu is not height enough so I modified both heights to min-height: 563px (number is up to You). Is that what You are expecting?
I found help at http://www.cssnewbie.com/double-margin-float-bug/
And today I don't have that wierd jumping Tahini Cookies image. Can You tell me what was that and how did You repaire this?
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I have a sharebox(div containing social site links) that I've been using with a fixed position outside the main container. I realized that when I re-size the browser window by dragging the border it causes my sharebox div to move over the top of the container.
I looked through related posts here but don't think they apply to this so sorry if I missed it somewhere.
Here is an example of the problem: http://metrotechpc.net/test/positionedbox.html
Is there a way, preferably with pure css(no javascript) to make the div stay away from the container on browser window re-size so the user has to scroll over to see it?
I've tried giving it padding, margin, different positions(absolute and fixed).
I am actually inserting this code into the top of the page with genisis_hook function on a wordpress page so that may be an issue but getting it to work in a basic html like the example link would be a great help.
Thanks
There are a few issues with your CSS:
There's a typo in the rule for #container: postition: relative; instead of position: relative;
You should move the sharebox div inside the container div.
Add position: absolute to the sharebox div's CSS and then specify right: 70px to make it start from the right border.
Lastly, there's another typo in the sharebox's CSS: margin: left:20px; instead of margin-left: 20px
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I'm working on this website for a company and I'm having issues with the CSS in IE8 that allows the sub menus to appear when you hover over the navigation tabs.
http://kabenwireless.net/
When you hover over some of the menu items in the navigation, there is supposed to be a sub menu that appears. This does not work in IE8, but it does work in all other browsers other than IE.
Any help is appreciated in getting these styles to work in IE8.
The biggest problem is that on #access, you're using filter for opacity:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
Using those filters causes an overflow: hidden-esque effect. It's like #access has overflow: hidden. You can see why that would stop your submenus showing up.
You need to either not use opacity for IE, or you need to refactor how you're applying the opacity bearing in mind the overflow: hidden effect.
Applying the opacity to only the dropdowns would probably work.
Maybe CSS3 PIE (which you're already using) can help you. Look up how to do rgba with it, it's something like -pie-background: rgba(0,0,0,0.5).
You can quickly verify what I'm saying as true by:
Opening your site in IE8.
Pressing F12 to open the Developer Tools.
Inspecting <div id="access">.
Unticking the filter rule in the right-hand panel.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
Website Link
Okay, I'm having trouble with IE issues, go figure. I'm still novice at getting websites to look right in IE. Like on each page, the elements in the right side, or right column, get bumped down. And the little triangle images on the footer are screwed up too. I know their is a fix, I'm just having trouble finding it. Any ideas? Thanks! :)
Note: I am testing in IE7
the Doctype is fine, it's rendering in IE8 standards mode for me, so that's a good sign
here's one of them.. there's too much to figure out in one go ;)
this one should fix the alignment of the nav menu I think there must be a text-align: center somehwere but even without tracking it, I'd recommend just getting explicit, help out poor IE where you can ;).. so explicitly tell the nav menu (which is absolutely positioned) to align to the left side - this one doesn't need to be IE specific as it does no harm
#nav {
left: 0;
}
Update
the main problems I can see are all float related and a bit of math in the footer, a useful rule to remember for IE7 and below, is to always help IE count ;)
I made your footer-wrap the 1001px necessary to contain all the stuff inside it, the I also positioned it relatively so the 2 x triangle effects could be absolutely positioned to the left and right with a negative top position to sit them on top on the wrap.
Then after that the main problems are with how you're floating, in both places, header and footer you have right floated elements after a non-floated element, this doesn't really work and may even be unstable in other browsers, it's easy to fix you just float the left content left too, then you need to make the containers #header and #footer-wrap and #footer float too and explicitly give them their width.. the width is 941px in the footer div's cases because they have 60px padding which makes them total 1001px - this is what I mean by helping IE.. make it obvious for it!
anyway there's a working (in IE7) link in JSBin - EXAMPLE
I've embedded style.css into the head of the document to make making changes easier.. and all changes are in there, there is still a scrollbar in IE7 and I can't figure out where that's coming from, but hopefully this will give you a good start to help visualise what