The page in question is here: http://dev.psdrotoworx.com/
When viewed in Edge, the menu buttons are rendering wider than they should. This causes the buttons to wrap into a new row, which is undesired behaviour. Like so:
This issue is only appearing on the Edge browser, all other modern browsers are rendering as expected, which is like so:
Is anyone able to see where I am going wrong?
Can anyone explain why IE & Edge handles this differently?
I did not get deep into your code but I think adding this:
width: 100px;
To your .main-navigation .primary-menu > li class in the style.css file might do the trick (somewhere around line 2975).
Having fixed size here is not a big issue as I guess the menu do not have to respond to browser size changes.
Related
in our website:
http://www.herzfit-service.de/
can tell one help me why in safari on mac
The black triangle below the logo on the left doesn’t appear, and the note on top of the people bubbles on the left is to close to the black header. Seems like it disappears behind it.
I don't have a mac but one of the workers sent me a screenshot:
The problem occurs in any browser when it's resized to about 1366px or below.
The header element becomes taller, which hides the triangle and div w/ the class "interview" (the people on the left).
The easiest fix is probably to have the mobile menu appear around 1366px to avoid the menu items crowding the header bar. Or you can try media queries to set extra top margins on the elements that are disappearing.
If you are not a developer I suggest hiring one for these fixes!
Remove the following CSS style in your CSS file :style.css?ver=4.2.2
Line No:3475
.header-main {
padding-right: 0;
}
Remove this CSS style add check it in all browser it will work....
Hey guys so I am working on a site http://www.prodjsoundlighting.com/ and dev in Chrome. Now when you go to look in it in firefox and explorer it looks bad, more specific the side nav that drops down when you hover over it. If you look on the firefox or ex you will see that there are squares next to the list which has been taken care of in the style sheet, the ul li ul should be display none because that is what it is set at in the style sheet. There is a black background also in the top and that should not be there. It also should be position fixed because that is what I defined it as.
If you could give me a hand I appreciate it!
It looks fine to me. I'm using Firefox and I can't see any list bullets in the sidebar. Did I not understand your question correctly?
I have a weird problem on a CSS menu. There's a difference in padding applied by both
Firefox & IE9 vs Chrome & Opera browsers. The space left after the last menu item at the end of the menu is different on both the browsers.
Please see the chrome.jpg and firefox.jpg inside zip file to see what I mean.
I have also attached the source html file.
here is the zip file -
https://www.sugarsync.com/pf/D6612639_7394829_952554
Chrome:
Firefox:
This is not padding but likely a difference in how the fonts are rendered in different browsers. Yeah that is pretty much impossible to solve unless you make the menu items fixed width. :)
The firefox version looks bolder (see it?!)... These are brainbreaking problems not fun to deal with but quite easy to explain.
IE9/Firefox use a different technique to render text than Chrome/Opera do.
IE9/Firefox use DirectWrite, and so the text comes out ever so slightly wider, adding up to a few pixels difference over all the menu items.
Read more here: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite
And read this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/
Short of setting a fixed width on each menu item (don't), you can't fix it. However, you don't need to fix it: a few pixels difference between browsers does not matter. Remember, the users of your site are only looking at it using one browser.
There's supposed to be an image in the center under the text "GIANT MANGO". It shows in Firefox, Chrome, and IE, but it does not show in the Safari browser.
http://giantmango.com/vote-for-artist-charity-contest-44-2581
How to solve this problem?
It doesn't show up initially with Chrome 9 on Linux either. If you drill down through the developer tools, the computed style for that image shows its height and width to be 1px in both directions. If I remove the max-height: 100% from the div.post-body p img, div.post-body p object rule, the image appears.
While I can't explain this (I haven't the time to look at it in-depth) I hope this puts you on the right track towards debugging this.
On the single-wrapper div, is there a padding-top of 1000px coming in somehow, that's pushing the contained div down? (the image appears in my safari, it's just far down the page).
I'm having problems in ie7 with notification's that are styled using the p tag. I've used them before and they render fine in IE7, however, in my latest theme, they cut off the top border with no change to the code which is giving me a major headache trying to figure out.
Here's the problematic page, the notifications are at the bottom of the page.
Link
It's annoying because I've used the exact same html and css here in this theme
Link
Can anyone see what the problem with the buggy version is?
You have triggered some bug in IE7, but I'm not sure which one...
The difference between the pages is that you have specified a width for the notification elements in the page that works. If you specify a width for the elements in the other page, they work too.
Forcing layout seems to do the trick. You can read more here:
http://www.satzansatz.de/cssd/onhavinglayout.html
Try adding this:
<style>
.notification { zoom:1; }
</style>