I've been trying to figure this out all morning and I just can't get anywhere with it.
I'm working on this website for a client and the dropdown menu just will not position properly in IE7. I have it working in everything else (even IE6!) but IE7 just will not play ball.
If there is anyone that could help that would be awesome!
The page(s) are at http://adriantrimble.com/mbf
Correct http://adriantrimble.com/correct.jpg
IE7 http://adriantrimble.com/ie7.jpg
Any help would be greatly appreciated!
Thanks,
Adrian
Maybe you could try changing the subnav class so that the 'top' declaration has an actual number value instead of just 'auto'
So maybe something like this...
.subnav { left:auto; top:59px; }
Related
For some reason the menu of my site is appearing all mis-aligned when using Safari.. site is at http://penarthpc.com/~redvaner/
I've been staring at it for hours and I cant figure it out. It's driving me crazy. Below is an image of how it looks when displayed 'improperly'
http://i.imgur.com/t3hXjry.png
Below is the CSS I've written for the Navbar (element has issues)
(http)pastebin.com/kLDBGnsU
Your help is much appreciated! I'm at a wits end :(
the only difference I can notice on first look is that your links are underlined in Safari. Everything else looks fine and not like the supplied image. The following CSS should solve the underline issue:
a{text-decoration:none !important;}
With regard to the supplied image, perhaps try adding the following to your <li> style
#nav-bar ul li{display:inline-block;zoom: 1;*display: inline;}
this is an ie7 fix, as inline block elements dont usually render correctly in ie7
I am working on the site http://childrensdentalland.com/ and it is a wordpress site. When viewed from all the browser except IE ,the site is showing ok but when We views through IE it shows a pink strip under the
"Welcome To Phoenix Pediatric Dental Specialists".
Can anyone help me to correct this problem.
Thanks
Somdeb
hmm could have something to do with float. your navDiv has no float which can break things in browsers.
Check your margins and heights as well. make them set and that may as well fix the problem
Try adding this to your class. I did this in Firefox just to see what happened. But anyways. I think it is because it needs to have float:left; . I don't have IE with dev tools so I am sort of taking a shot in the dark.
.footshadow {
float:left;
margin-top:13px; /*this will have to be tweaked*/
}
You have some weird absolute positioning going on there.
What you should be doing instead is floating .menu-header left, #searchpedi right, and then clearing both on .navshadow. Remove all position: absolute and use float instead.
Hi it very simple you just define one properties in you css file .navshadow{top:221px;}
as like this
.navshadow {top:221px;}
I have made this question: Menu with 2 levels disapear the background and that's solved. But my menu with sub-items does not work on IE8.
And i dont know where i'm wrong with this.
Here is the updated link of my menu: Here is working example.
can Help please?
Your dropdown menu is not working because it is firing in Quirks mode. Add a proper DOCTYPE and it works fine.
<!DOCTYPE html>
Edit: here is a demo of your menu with the proper markup working just fine in IE8: http://jsfiddle.net/4ApsQ/show/
It would be great if we could see an extract of your HTML and the CSS that you're using for this task. But, in general, if I understand your problem/question correctly, these are the two things to watch out for in your styles:
z-index and position
Here's an example:
#divStayTopLeft
{
position:absolute;
z-index:1000;
}
If you make your z-index (reasonably) high enough, then your menu will remain on top of other elements.
Okay so this is sort of a double question so I'll split it into two.
First part
In modern browsers the main bold labels sit above their corresponding form elements, and align to the left as is expected. However in ie7, they randomly site 10-15px inset. I went through the developer tools and could find nothing to fix it. I've made sure all my margins and padding is reset so I don't really understand =S
Here's the page demo - link
Maybe some of you ie bug fixing genius's know what the problem is? =D
Second part
Again with labels, this time the in-line ones resident next to the check boxes and radio buttons. In modern browsers again, the side beside the form elements as expected, but not so in ie7 where they take a new line. I've tried floating, changing margins and everything but to no effect in sitting it in-line with the div.checker or div.radio that is created by the uniform Jquery plugin.
Here's the page demo - link
Sorry for troubling you with my ie7 problems, I know they arent the most fun to solve. Hopefully someone has the patience to help.
Matt
Part 1:
ol,ul{
list-style-type:circle; list-style-position:inside;
}
If you change that to this:
ol,ul{
list-style-type:circle;
}
Or just remove the definition entirely, that seems to do it for me.
I think that's a reasonable thing to do, as I don't see anything actually using the bullet lists.
Edit for Part 2:
IE doesn't like this:
input{
background:#FFFFFF url(../images/input_bg.png) repeat-x;
border:1px solid #CCCCCC;
margin-bottom:20px;
-moz-border-radius:3px;
padding:7px;
-webkit-border-radius:2px;
}
If you remove the margin-bottom:20px; from that, your radio button won't be messed up.
Sorry I'm not really providing IE7 specific solutions, but at least you've got the spots that need fixing.
here's a point to where the problem lies
http://www.alistapart.com/articles/beyonddoctype
here's some points about doctype right here in SO
Which doctype do you use when writing webpages?
:)
My problem: Llinks work in IE 7 and Firefox, but in a number of cases on a site I'm working on updating, the first link(s) on a page don't work in the Chrome browser even though they do from the "View Source" page. I've looked for obvious code problems and can't find any. What am I missing? Something's up, but what? Thanks for your help.
http://wilmettehistory.org/newpages/family.html
Ok, I drove my blood pressure through the roof trying to figure this out and I did, so I will help answer the question. What you need to do is locate your main element that contains the links that aren't working, then put a z-index of one on that div box.
so for instance if it is the menu that isn't working put a z-index of 1 in your menu CSS like this....
#leftmenu {
position:absolute;
top:300px;
left:14px;
width:100%;
background-color:transparent;
z-index:1;
}
This will force all of the stuff forward and your links will work. Voila...