Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.
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 redesigning the skin and layout of a user info form. Initially it was done using a table, but I really don't want to use a table for the layout. My code is here http://jsfiddle.net/Chris22/eNqrM/ I've tested my code in all browsers, Opera 11.x, FF 12.x, Chrome 18.x, Safari 5.1.x and the form looks great. My problem is IE9.
Please take a look at the code in IE9 and see if anyone can figure out what I've mis-coded as to why the form elements don't line up and some have a different text treatment. I just can't seem to figure it out.
Here is the original table-layout if any one wants to compare. http://jsfiddle.net/Chris22/q3sCb/3/ Both sets of code have java spring form tags, so it was a little difficult for me as well to figure it as I am a FED (front-end dev). Maybe I've got something mixed up here. I don't know.
Thanks!!
P.S. If modifying the original table-layout is the better way to do this, I'd appreciate some help on how to begin to code that... I haven't used tables for layout in a while.
IE9:
I fixed this. May not be the best way, but I wrapped the input elements in the label tag and added a rule float:right to the input tag within it. Thanks for everyone's feedback
I've got the same problem with a relatively straightforward form that has inputs with a value attribute. Not sure if that's actually an answer, but it may help to know that you are not alone in seeing a misalignment. I'm slightly baffled as to why some people are NOT seeing a misalignment. The fact that float:right gives a fix is useful to me and may have something to do with the mysterious hasLayout property that has long been a 'feature' of IE. Floating, left or right, induces 'hasLayout' but may have other consequences. A common fix for not 'having layout' is to give everything a zoom:1 in CSS - this induces 'having layout' and usually without any visual change, because zooming with a factor of 1 doesn't resize anything.
It's just that I don't really know enough about XHTML, CSS, or Javascript and I'm trying to learn. I know what to do in order to get things to work or look the way I want them to but I'm guessing my methods are not the standard best way to get the results I desire; obviously not because it's not working across all browsers.
I am hoping for someone who is willing to spend a little bit of time with me to go over the code, make recommendations and explain why what I have is not standard for coding. I have some validation errors but they mostly are all in the javascript, which I didn't even write so I honestly have no idea if they are causing trouble or how to fix them if they are.
So my website is pretty simple. I just want to have a professional page where potential employers can see my resume and contact information. When I look at my website in firefox 4 or Safari 5.0.5 everything is perfect. The image of my name and the "contact" tab images both line up with the edge of the main container div. Also the text with the arrow picture line up about 50 pixels to the right so the arrow does not overlap with my resume picture. I use absolute positioning because when I try to use anything else, it gets all messy.
The Problem I am Having: My name logo, contact image tab and "please indulge with..." arrow picture seem to be about 65 pixels off to the left when I view my website in IE8 and Firefox 3.
My website is: nicholasdexter.me
Once again, I'm sorry that this question is geared towards me but I know you all are experts and I don't know where else to go for help. Thank you for reading!
Here is my style sheet: http://nicholasdexter.me/style.css
There's a lot of bugs in older browsers (particularly Internet Explorer 6 & 7). Also, some things just aren't supported in older browsers.
The trick is either to:
- Use something called Graceful Degradation/Progressive Enhancement, in which newer techniques are used, but are used in a way that it won't matter if there's support or not for those things. For example, shadows, if no-one can see them, who cares? If they do, great. The trick is balancing that out.
- Avoid those "new" techniques altogether.
This is nothing new here, and is even a pain for professionals. Microsoft evens hates IE6 now. http://www.ie6countdown.com/ So don't beat yourself up for it. :)
There are alot of resources out there that may help you find the right solution(s) to your problems. Here's one:
http://www.quirksmode.org/css/contents.html
Oh, and feel free to ask questions again. Front-End Development (coding web stuff) is a real challenge some days! :)
Ok, I've been dealing with IE bugs for a long time now, but this one is beyond me. IE 7 and even 8 does it for sure, I've not seen it on FF or Chrome.
So here's a live URL which produces it: http://mog.com/music/America/Holiday
Reproducing isn't easy, it can take a few times to make it happen. Watch your scrollbar to see it change size so you know the page length was suddenly dropped quite a bit.
Here's how you do it:
Hover over any sub-nav link (Main, Albums, Songs, Photos, News, etc.)
Try them until you see the scrollbar change size. Once it does, scroll all the way down and notice the footer has jumped up on top of much of the page content.
Be careful scrolling down that you don't roll over a few other page elements that will suddenly fix this. So far I can see that any of the Play buttons will somehow fix this.
It's just beyond weird. How could a rollover state cause this kind of behavior?
I've tried:
Removing the a:hover style - THIS FIXES IT... WTF? Of course we ideally would keep some hover state, so hoping to avoid this fix.
Reproducing the hover functionality using jQuery hover(). - THIS DOESN'T FIX IT.
I figure the clues are in the elements that somehow magically fix it...and possibly in where the page jumps to, what elements suddenly get obscured by the footer.
Lastly, I didn't produce this site from scratch and it uses a lot of absolute and relative positioning for certain things and I know that is partly what causes these weird bugs. I rarely, rarely use esp absolute positioning to avoid these kinds of bugs, but it's a bit too late now.
Thanks for anyone willing to check it out!!
Well, I figured it out. It was an odd case of the "Guillotine" bug. One I luckily haven't come across before. Turns out the "special" CSS rules on those nav links' hover state (particularly it seemed the border and bg image) were enough to trip this bug. One way around was to drop those styles, but not ideal. The real fix, however, was an unsemantic clearing div placed in just the right spot. More info found here:
http://www.positioniseverything.net/explorer/guillotine.html
Hi just a short note: When did you validate your html the last time?
As you probably know, but might have forgotten, fixing your html can sometimes solve a lot of problems. There are 72 errors seen by http://validator.w3.org
I am having issues with a website that I am working on in which images and background-images fail to load in Internet Explorer 6.
Here is an example of a page on which you might experience this issue:
Example Page
So far I have looked at the following possible issues and pretty much ruled them out:
XML/Extraneous data in the image files (google photoshop 7 internet explorer)
Corrupt image files
I have not ruled out invalid markup.
I have noticed that there are validation errors in most of the pages where this problem has been reported and I am working on getting those fixed where appropriate.
The behavior I see is that the page will load and all elements other than the background image render. There are no javascript errors thrown. When using Fiddler, no request for the image is made. If the browser is pointed directly to the background-image, the cache is cleared and then the browser is pointed back at the HTML page, the background-image will load inside the HTML page.
Does anyone have any additional suggestions for ways to attack this issue?
Twice now I've had people have problems with photos not showing up, and it was because they were in an incorrect colorspace, using CMYK instead of RGB.
this is a weird issue with IE6. I just right click on the image and select "Show Picture" then the image loads properly.
I'm looking at this in IE6 and trying to replicate the problem, but I can't seem to get it to happen - it always seems to load.
Some thoughts on things to try though as there appears to be another two classes that the background is over-riding is to try adding !important after the background assignment, so:
div.gBodyContainer {
background-image:url(/etc/medialib/europe/about_infiniti/environment.Par.7366.Image.964.992.direct.jpg); !important
}
Another thing to try is getting rid of all the . in the filename and cut down the length of it, shouldn't matter, but it may be causing some problems, doesn't hurt to try it anyway.
The other thing you could try is making gBodyContainer an ID instead of a class, or give it an ID as well as a class and assign the background to the ID. Again, it shouldn't matter, but it doesn't hurt to try and see if it works, IE6 does a lot of funny things.
is it only ie6 and not ie7 too? IE is pretty strict with html sometimes, versus firefox lets you get away with more. Not sure if this helps, but I just debugged weird IE6/7 bugs by slowly taking away content. But if it's only intermittent, as in happens with the same code on and off, that's a really weird one.
The problem is the "IE6" part ;-)
I think in some cases you could solve this issue by loading the full size image before the request and hide it with style display: none; so IE6 will load the image from cache.