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
Related
One of my sites has a horizontal navigation bar which is created using a list. Besides a small bug in Firefox the list looks & works fine by now - except in Opera 11.61. There the list elements won't show up at all! As the list is the site's main navigation it is nested inside a nav element. So far my debugging showed that this is where the problem is.
When I remove any background information (like background-image or background-color) from the nav element the list is still invisible - I can see the body's background-color.
Also assigning different z-index values did nothing. But removing the nav element helps - when there is no nav the list shows up.
I created a small test case illustrating the problem (remember: Must be opened with Opera.): http://jsfiddle.net/sX5KF/
Do you have any clue why this problem occurs? Is there a fault in my code or is this just something like a bug in Opera? What can I do about it?
Alright I found the mistake. Opera displays nothing because I set content: ""; on the after-element. Other browsers seem to ignore it, but not Opera. I set it because I read it is needed, but actually it works even without content: "";.
IE 9 on Hover over a link, pushes some of the HTML down the page.
When i remove the color from
td.subarea > h2 > a:hover { color: #aa051a; text-decoration: none;}
the problem does not occur.
I can't paste all the code here, and fairly sure its a unique problem to this page.
But maybe someone out there has seen something similar.
Its not moving the Link(a tag) down the page, its the whole containing table that moves.
This problem seems to occur in IE9 when the container element is set to overflow: auto and there is some hover action taking place in the child element.
There is a very simple solution of adding min-height: 0px to the container element, which works.
The detailed explanation of the bug and this solution can be found in this link:
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
Make sure your line-height and font-size properties are the same for normal and hover.
Sort of found the problem, well makes the table stop moving. margin-top:-20px.
Although it olny shifted down about 10px.
Probably some IE9 rendering issue. IE7/8 actually move the table on intial loading.
The font sizes, line-heights, all that css, is all good for the link.
Marc B is probably close to the issue of IE rendering something wrong and cauing floats and such to mess up.
Now have to real style a table layout wihtin a table layout page(ugh, hate table layout).
For me I had to specify
height:100%;
Then I had to go ahead and specify
width:100%;
The 'min-height: 0px' by mohitp above got me on the right track.
Im having trouble getting the following to display in ie6, everything works find in all browsers yet ie6 it seems to fall over on.
Instead of display:none ive also tried left:-9999999px yet it still doesnt seem to show/
http://jsfiddle.net/FVkzc/
You'll need csshover.htc for IE6 to work properly.
Use it like so:
body {
behavior: url('csshover.htc');
}
The reason: IE6 doesn't do hover right on non-anchor elements.
I'm trying to get the Thesis theme working in Wordpress, and it's almost perfect. For the navigation menu I want to use images instead of text. My solution to this was to set a background image via css:
ul.menu .tab-2 a {background:url(images/myimage.jpg) no-repeat;background-color:transparent;width:81px;height:60px;margin:0px;padding:6px;border-style:none;}
This works fine everywhere but IE. You only see the image and not the text that Thesis is writing out for that nav item:
<li class="tab tab-2">About Us<!--[if gte IE 7]><!--><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
In IE, however, the href text does show up over the background image. I suppose this is what I expected to happen, so I was pleasantly surprised to see it not working like that in every other browser.
What I'm trying to figure out is if there is a way to get the background image to show up on top of the href text, effectively blotting it out. I have tried hacking Thesis to suppress writing out the text, which works in all the menu items except one, and that is because I am writing out categories, not pages.
I really want to use Thesis' nav menu and not roll my own because I'm sure then I would have more troubles getting the drop downs to look nice in all browsers, and my css is just not that advanced. And I don't think there is a way to tell Thesis to use an image instead of text for the nav menu item.
I have been staring at this for hours and clearly am not thinking clearly about it anymore.
Try adding:
display:block;
text-indent:-5000em;
overflow:hidden;
... to your current rules.
Some folk prefer other ways to do image replacement, but this is the most common way IMO.
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; }