why is div in IE 7 display difference from other browser ?
in IE 7 Look like
________________
|________________|
But in Chrome and other browser Look like
____________________________________________________________________________
How to hack ie to display look like other browser ?
<div style=" border: 1px solid #ddd; width : 200 px; height : 1px;"></div>
Having a website look the same on different browsers has been an ongoing issue for the web designers all over the world. The reason is simple - the visualization of a website depends on many different variables such as:
The visitor's OS (operating system)
The visitor's display resolution
How the browser interprets the page
The visitor's OS
If your website uses submit buttons, radio buttons, check boxes and edit fields, all of them will be visualized depending on the visitor's OS and its style. For example, a submit button can look like a gray rectangle on your Windows Classic theme, and like an oval if you use the XP style. As a workaround, you can create custom buttons for your website.
The code of an ordinary submit button looks like this:
You can replace it with the following code in order to specify the submit button image:
Submit
Similar changes can be made for the other parts of your website's interface. Consulting a professional web designer or searching the Internet will be necessary to solve all of the possible issues.
Visitor's display resolution
Display resolution is affecting quite a lot the way a website is displayed. For example, if you create your pages at 1024x768 they will not fit into the screen of a visitor that has set his/her resolution to 800x600.
In order to fix this, you should not use static dimensions for your website, i.e. instead of setting width = 1024px you can use width = 100%. This will not fix all issues but at least will make the page fit into the screen.
How the browser interprets the page or website's cross-browser compatibility
Web browsers do not render pages pixel by pixel. They read the entire code and produce an output depending on your code. There are, however, differences in the code interpretation. Therefore you should check the way your website looks on different browsers and operating systems. You can use the following online tool in order see how your pages look on different browsers:
http://browsershots.org
A good website should look the same and all its features should work in any browser.
Unfortunately, there is no easy solution for that. You should check the specificities of each browser that fails to display your website correctly and make the necessary adjustments to your code. A skilled website developer should be familiar with most common browser compatibility issues and should be able to assist you. Such compatibility issues may occur not only in different browsers but because of an old browser version which does not support completely the latest standards.
In conclusion, you should test your websites on as many different browsers and operating systems as possible. If you spot any errors, you should try searching on the Internet for a specific solution for the issue or contact a skilled developer who may assist you in resolving it.
Related
I'm just starting out in web design/CSS so my current knowledge is limited.
With that in mind (this may be very easy for pros to fix), does anyone know why the Facebook iframe on this website won't stay within the sidebar on mobile devices?
http://www.northeastimage.co.uk
It looks great on desktop browsers but on the iPhone for example sits out of the sidebar over the margin sticking to the far right of the screen.
i would go for a user-agent to look trough your css and html, its a cross browser look also support phones and tablets it lets you "tell" the browser that your a phone tough your on your desktop
easy to debug while using it, i pref user agent for chrome get it here
Get strings to view from more viewports than the standard amount that are embedded in the program
I was playing with adaptative CSS by changing my Google Chrome window size when I noticed that the Twitter Bootstrap page seems to "make google chrome fail" on certain occasions.
Steps to reproduce (from a desktop computer):
Start with a blank Google Chrome tab, full screen
Visit http://twitter.github.com/bootstrap/
Gradually make the window narrower, letting go the mouse every 100 pixels or so.
Keep going until you get the "totally mobile version", at around 400px (The blue "View project on github" button is on top of the white "Download Bootstrap" button, and they are both full-width).
Now make the window thick again, letting the mouse go after every 20 pixels or so.
Chances are that you will get weird behaviour while doing steps 4 or 5 - Chrome gets confused about the sizes, or forgets to draw a vertical region of the page (which is rendered white). I've also managed to get a "phantom side pane" in some rare occasions.
I've tried in two different computers, and I still get the same issues (both using Ubuntu 12)
The thing is, other responsive sites don't have this issue. See for example http://css-tricks.com/ . You can change its size all you want, and Chrome never has any trouble rendering the multiple layouts it has (in fact, it has more layouts than twitter bootstrap).
So I can only conclude that this problem is twitter-bootstrap-specific. Probably related with the way the CSS rules or HTML content is written, or maybe related with the way files are structured.
I'm using twitter bootstrap as a base for one of my sites, and I'd like to solve this issue. Does anyone have any ideas on how to proceed?
If you believe this is bootstrap-specific this should be posted to the Twitter Bootstrap Github Pages instead of SO. However, I've been participating in an issue ticket reg. this which was closed after we pointed out that we're unable to reproduce the error on both Chrome / OS X and Chrome / Win 7 with the same browser build as the OP. This suggest that this is a platform specific chrome-error rather than a problem with the Bootstrap toolkit. With that said, I'd raise a ticket with the chrome team including your build # and OS/Platform setup.
Link to the Github Issue
There is an embedded Vimeo video on a site I'm developing. Nearly all of the target audience uses IE8 or below, and for reasons unknown nearly all of them have their browsers zoomed to 125% view. Thankfully everything else on the site works under those conditions, but the video in the iframe is zooming oddly and cutting off content.
http://imgur.com/a/pg53V
That is an album with the iframe normally and zoomed, as well as the embed code provided by Vimeo. There is absolutely nothing special in my CSS or JS that changes the iframe's default properties. I'm certain I'm not the first one to have this problem, but apparently I just don't know how to ask the question to lord Google. Thanks for your help.
Internet Explorer 8 will automatically zoom to 125% by default if your display settings are set to 120 DPI. This does however sometimes confuse plugins such as Silverlight and Flash. It is possible to detect the zoom level in script and you could potentially use this to make adjustments. See Making the Web Bigger: DPI Scaling and Internet Explorer 8.
I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet.
If you take a look here: responsive design link and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.
Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?
This is happening because your design is not completely fluid.
Only your container div will adjust with the width (a bit)
To fix this quickly, you could
give your divs percentage widths, so they scale with the screen resolution
float your square boxes at the bottom, so they will stack on smaller screens
consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.
Get some ideas here: http://mediaqueri.es/
As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.
When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.