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.
Related
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
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.
I have a problem with CSS in IE7 and IE8
I have a Slider made in Drupal that alters somehow the contents and adds a border that makes it very bad looking
I don´t know how to fix it and I´m required to do it.
I tried to put firebuglite, (doesn´t even load..)
In Firefox I can see it like this:
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/
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