i have spent 3 days trying to figure out this issue and cannot come up with a viable solution.
ive even tried using javascript to load stylesheets tailored to each browser, but even that didnt work.
my problem is my horizontal menu (http://mydomainsample.com/fire_rebuild) is displaying perfectly fine i n chrome, but when i load in safari or firefox, the child menu is way out of position. oddly enough IE(9) is closer to being correct than the other two, but even thats not quite correct.
i have played with the stylesheet trying to figure it out, but when i get it right in fff, safari, or ie its screwed up in chrome.
i cant seem to find a solution that works in all browsers.
can someone please help me find a solution to this?
ive tried using a different menu but this one looks the best and any vertical drops ive used give me z-index problems between the menu and the slideshow that i cant seem to fix.
I do not think src is an optional attribute for link tags. Replace it with hrefs like the first two. When I look at the page in firefox, I do not see two files above being imported.
The order of the files in those link tags are very important as well.
href="stylesheets/reset.css"
href="stylesheets/coda-slider-2.0.css"
I do not know if you already have them but firefox and chrome has the firebug and web developer plugins that makes life easier.
jQuery has been updated to v1.7.2; I would update all your plugins & see if that helps.
First of all, remove all the javascript you applied to match for different browsers.
Then Remove the width:750px; and left: 548px; on style.css line 83 (ul#nav li:hover > ul)
Hope this will solve your problem
Also your page width is 1220px. Stick with the 960px width in order to compatible with small screen sizes.
Related
Here is the site: http://lju-silenter.rhcloud.com . If you load the site on chrome and then click on the yellow section, then the section completely fills the entire screen, however in firefox, there appears to be some problem with margins. I've looked through firebug, I can't seem to find what is causing the issue. Here are two images just to clarify what's going on:
Chrome version:
Firefox version:
Any insight into the issue would be really helpful. Thanks!
By navigating to #three, the browser may scroll to bring that element into view, even if you have overflow:hidden. It appears IE and Firefox do this, while Chrome does not.
You should change the ID of the target element to something like id="box-three", then make sure you adjust selectors accordingly to add that prefix.
When looking at this site in IE7, the header banners and nav menu seem to randomly appear and disappear. Have look at several posts regarding this, but have not been able to solve it. I am hopeful someone could help pinpoint the issue, as the page appears correct at times, and not at most others.
Thanks.
You are using two separate style sheets.
http://steamsaunadepot.com/media/css/cb5ec47641853ec8a1ca38b845e6e92e.css is for FF and
http://steamsaunadepot.com/media/css/36fe96c008dc78bed45bceb2c9cde999.css is for IE7
Specifically, the styles for top and left on .header-notice and .header-banner are wrong in IE7. If they were just set the same as they are in FF, the header and footer generates correctly.
I've been searching for answers, but unfortunately still havn't found one the right one..
I'm creating buttons using images and the button itself looks good in ALL browsers..
The thing is though that the text is placed differently (vertically) depending on which browser you are viewing it from. I've tried applying both line-height, padding/margin, top/bottom and several other attributes, but without success..
Isn't there a way (with CSS) to place the text correctly in all browsers? (Opera, Firefox, Chrome, Safari)... Don't worry about Internet Explorer - I'll apply some speciel CSS for this!
I've put up an example here to play around with: http://jsfiddle.net/GydjP/1/
button::-moz-focus-inner {border:0;padding:0;margin:0;}
and adding Line-height to the buttons is apparently the best solution I can find for my buttons so far.. It doesnt work in very old versions of Firefox + Chrome though
See http://www.arthwine.co.uk.
This used to work fine in Chrome and works fine in all other browsers (afaik). Now, for some reason, Chrome is hiding most of the left column (apart from the bear). If you look on a different browser, there is a panel with the branding and a menu in it under the bear.
I can't figure out at all why it's doing this. Any ideas?
The reason it breaks is because of the bear. Or rather, it is because of the way you relatively positions the image of the bear outside the bounds of every single one of it's parent elements except the body.
This makes chromes rendering engine choke on your layout somehow.
You can test this very easily by just deleting the image of the bear from the source code, and see how everything else suddenly pops into place.
I checked it in Chrome 9.0.597.98 and I had the same problem. The solution that I found, is to add position:absolute; for the #header.
I don't see anything wrong in Chrome. I see the menu and the branding.
I'm using simplemodal on a website I'm developing. Everything was working fine across all browsers until I added "overflow: auto;" to my simplemodal CSS as such:
#simplemodal-container {height:90%; width:80%; color:#fff; overflow:
auto;}
I get the scrollbars when needed in FF, Safari, and Chrome just fine, but when I look at it in IE8 (haven't tried IE6 or IE7), most if not all of the content of the modal is missing. It appears to be spinning as though it's waiting for the server, but nothing happens.
I've looked everywhere online for an answer to this issue, but haven't been able to find anyone else who's having the same issue.
Please let me know if you need anything else from me.
Thank you in advance!
Pekka, thanks for taking a look. I was sure that it wasn't the javascript, because one of the buttons, (resume) links to a simple html doc with a table and that wasn't even showing up.
But I think I've figured it out!
In the CSS, there were also some opacity settings, which I pretty much copied over from the simplemodal website. But one of the settings was an IE workaround that was throwing errors whenever I validated the page. So about 5 minutes ago, I thought, "hm. I wonder if I get rid of those opacity settings if that might do the trick." I wasn't really using them anyway - I had set the opacity of my modal window to 100%. So I just got rid of the settings, and now it works in IE. Go figure.
On the "images" modal, my thumbnails are getting cut off in IE, so I do have one more thing to figure out, but at least it's showing up now!
HOO-RAY.