After fiddling around with an issue I am having I have come to this conclusion:
my list Elements are displaying smaller in Safari on my Macbook than they are on Safari on my PC. IE, and Firefox are displaying properly also.
What might be causing this difference? It is hindering my ability to complete this design.
www.christopherbier.com/gbg
Please let me know if there are any css tags that might be causing this.
Here is my previous question that includes my css etc. CSS spacing issues with Safari?
Any help is appreciated.
You might want to consider including css reset stylesheet. You can find a good one here:
YUI CSS Reset
This basically "removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers".
Hopefully that will solve your problem!
My guess is that it may well not be a css tag that's causing the issue, but just a difference in defaults on the two different browser versions. Each version is probably tailored to the OS to some extent, and may look different, which is expected.
Overriding this default behavior should raise a warning flag, because you're changing the overall look and feel, and it may not match well with the OS layout in general. It doesn't mean don't do it, but it does mean that you might want to proceed with caution.
Related
I am making a website, where when i preview it in safari. It turns out exactly as i want it to be. But when i test it out with firefox.
In my page i have a element that is aligned on the page using
Padding-left and Margin-top. Which works perfectly when i preview it in safari. But when i open the file in firefox. The element's Margin-top increases by a few pixels.
How do i code my css file so that i can have the same page for different browsers. I have tried looking on the web for a solution, but none of them so far has helped with the problem.
Reply's will be much appreciated.
As jsteinmann said, check use http://validator.w3.org/ to ensure your page validates. This will take some time to figure out if you are new, but it is an essential step.
If you are having an issue with FireFox, you are probably going to die when you look in IE. Bookmark this link! http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
You have a lot to learn and google will help: https://www.google.com.au/search?q=introduction+to+cross+browser+testing&oq=introduction+to+cross+browser+testing&aqs=chrome.0.57.5763&sugexp=chrome,mod=12&sourceid=chrome&ie=UTF-8
In future, use stackoverflow for specific questions with code examples. You will find that you get specific answers quite quickly.
Also, don't forget to tick the answer that you find most useful, and also vote some up a level. That's why people spend the time answering your questions.
Enjoy the long road ahead :)
Specify all four margin and all four padding values explicitly. That will eliminate the diffferences in the browsers' built-in default stylesheets.
There can be several reasons why your finding your layouts aren't cross-browser compatible, so it would take a considerable amount of info of the markup and css to make any kind of determination on how to help you code a 100% W3C valid web page.
I would suggest using a css framework like blueprint or 960 for your layouts, so you have less issues in this way. It's a good way to start and maintain projects, and learn how to create layouts if you choose not to use a framework.
Also, I would suggest testing all of your projects in chrome and firefox first, then safari, simply because of the amount of users that use those two browsers compared to safari. I would also say, if it looks good in chrome, it will probably look good in safari and firefox, but it's always worth testing.
I'm getting a wierd bug in Safari 5.0.5 for windows. When I apply my styles the down arrow in the select box button disappears. I tried removing classes and it seems multiple classes trigger the bug. Any help would be much appreciated. You can see an example at http://jsfiddle.net/fbsRY/2/
You cannot reliably style select elements using CSS as browsers try to stick to the operating systems defaults. If you MUST style these elements, you'll probably have to find a JS based alternative.
Not a full solution, but I did find more details about the problem at http://www.codingforums.com/showthread.php?t=179464. It seems that it might be a bug related to the Windows Classic Theme. I'm kind of a geek that way. Love my flat gray interface :)
I found this very interesting:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
He avoid using horizontal margin and paddings to avoid problems with IE. I think he "fakes" padding using relative positioning.
Have you ever done something like this?
I'm a missing a common trend against IE hacks?
Does this practice have any drawbacks?
That example is outdated.
Problems with margins and paddings like that were a problem with the broken box model of IE5. In later versions of IE you will only get that broken box model if IE is in quirks mode. That's something you should be avoiding at all cost. Use the right doctype!
The example you linked actually relies on that broken box model. He has an updated version that doesn't:
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
But what kind of IE problems are you actually trying to address? Do you specifically want a 3-column layout like in the page you linked to? Do you want general solutions for IE layout problems? Or do you want to be able to forget about IE altogether?
The most important thing to know about when dealing with layout and IE6/7 is its hasLayout property. Read On having layout for all the details on that.
If you are specifically looking for tools that can help you build complex layouts compatible with all browsers, you could have a look at grid frameworks like YUI Grids or Blueprint. But I can't say I'm a fan of those, since they tend to result in unsemantic div soup.
If you don't mind a little (experimental) JavaScript to fix up your entire website automagically, you could give IE7.js a try. I've used this, though it definitely has its quirks and limitations, so use at your own risk.
To come back to your original question, though, relative positioning is no ultimate solution for anything, it's just one of the tools in the box. Understand it and use it when it's appropriate. See, for example, Sitepoint's CSS layout and formatting reference. And as dry as it may be, I find the CSS specification to be invaluable, especially the chapters on the visual formatting model details.
I've discover so far that:
stating the width in some elements fix issues in IE.
and of course using a CSS reset
Do you know any others?
Learn about hasLayout
Inline block behavior can be achieved on IE7 by turning on hasLayout, then setting display to inline. This has turned out to be quite useful to me.
Make sure your doctype is present and correct. This alone can save hours of pain.
Use conditional comments anytime you need to hack something especially for IE. PLEASE don't fall into the amateur's habit of adding star/underscore junk in your main stylesheet.
I'd say that manually setting width would more often than not break things in IE, as a lot of IE versions implement a flawed box model.
I'd also say that a lot of all browser incompatibilities originate from a sub par understanding of the box model and float/clear, block/inline.
Having said that, I of course do not deny that it is IE, rather than the developer, that is the real problem, but I usually seek to avoid browser incompatibilities by using HTML structures that not even IE could miss-interpret, rather than through CSS hacks, and I've found that that is often quite doable.
i've created some pages using css, but on viewing the page through different browsers it appeared as irregular arrangement of contents..
You're going to have to be more specific than this.
Which browsers display the page 'correctly' and which don't? Some older browsers have... dubious CSS support, and some of the things that work well in IE8/FF3.5 won't work in IE6/FF1.
Which CSS properties are you using & having trouble with? I take it you're talking about position or float or similar since you refer to an "irregular arrangement of contents", but that doesn't narrow it down all that much.
Are some browsers displaying the page as if there's no CSS being applied at all? It's possible you've got your stylesheet link a little wrong, and some browsers are 'fixing' it for you and some are just not loading the sheet at all.
Unfortunately, you potentially have more than one problem. Browser interoperability isn't going to be as easy as doing a setting. You have to compare some of the browser compatibilities and change your code to get it to look perfect in all browsers (if indeed such a nirvana is achievable for all page designs).
One thing you could try is a CSS reset such as MeyerWeb. This will remove some of the defaults that the browsers do not share - therefore potentially giving you similar looking pages from which, you can adapt to look as you want them too again.
There are other methods, including comparing all the differences. But unfortunately, my point is that this isn't likely to be a quick fix without knowing more about the specific issues your having.