i am working a a WP page and having some difficulties with what appears to be the margin on the HTML element.
it displays as expected in IE8, FF, Chrome, Mobile Safari and Opera.
this is the page in question:
http://www.mmmf.net/2012/
i am using basically the same CSS as a site also done with WP which is:
http://www.mmmf.net/2011/
the only difference is a newer version of WP.
i placed a purple border on HTML for reference. i believe it's a 28px difference.
any suggestions on this would be appreciated.
thanks.
I always add a yui css reset to avoid x-browser spacing issues. Do some research on it, spend the time to re-do your css with the css reset in place (place it above all other css).
http://developer.yahoo.com/yui/reset/
Related
I am working on a wordpress project. The issue is though the container where the content area and sidebar along with the top logo positions seems perfect in chrome with 30px margin-top.
But in firefox the margin seems to go down more, though the margin value is same. Any recommendation for FF compatibility with css would be great...
Hard to see without code, but you may have some problems with the two browsers' base CSS styles being different. You could try using a thing like normalize.css as a way of normalising these styles before your own stylesheet.
You could also use the web inspector/Firebug in firefox to see what surrounding elements have an effect on the positioning.
I am using overflow:scroll; in my css to have scrollbars always "on" for an iFrame window, but it works only for Firefox! Any idea about Chrome, Safari and Opera? Thank you in advance!
I have a similar issue with webkit (safari and chrome) based browsers; seems that they value higher the css styles on the html over the actual iframe style itself. Can´t find much documentation on this, but I am sure it is the origin of the problem.
http://trafficonweb.com/iframe-moves.png the iframe moves to left when pulled right on its main content (under the navigation menu). Only on webkit.
This happens when scaling down the iframe with the scale (transform) css property.
This is not the perfect answer but at least a hint; will continue research and post afterwards.
And looking for others to contribute to this issue. Thanks.
I built and tested my site in Firefox but now when wanting to launch I realized that there is extra padding showing up between the menu and posts as well as borders on some of the images when viewed in IE9.
I have looked through all of the CSS and can't figure out what might be causing either of these problems. Any ideas would be great.
Here is the site: http://beautyintheweeds.com
Thanks!
Every browser has different default css rules. Use a css reset to bring everything to the same defaults.
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.
Im having some issues with my layout in IE6 (corporate business, ideally id tell them to shove ie6 :P)
Link to the site is http://www.clickcommercial.co.uk
Ive just applied the twinhelix png fix method and that "appears" to have worked ok - but I was under the impression it should fix the issue with repeat backgrounds?
As you can see, the site works great in IE7+, firefox, safari etc :)
Any help on this is appreciated! :)
To fix position of right navigation add this to your code:
#homebox-right { overflow:hidden }
Regarding other issues, I'd reccomend you to install IE Tester where you can preview stuff on IE6 quite easily. You must play a little with margins for IE6.
Plus, I'd recomment to add: img { border:none; } to remove ugly borders from link-images.