I have a page which appears just fine in FireFox / Chrome / Opera / Safari, but appears incorrectly in Internet Explorer. A quick search reveals many issues with DIVs in IE, but none of the items appeared to address this issue.
The issue is that DIV appear to expand to the entire width of the browser, in Internet Explorer; this behavior is not replicated in any of the others.
Code is here: http://pastebin.com/c46uB7GP
CSS is here: http://pastebin.com/TXWWM2Qu
IE rendered image is here: http://imgur.com/Pciv5
Chrome rendered image is here: http://imgur.com/8kwd4
Any help would be welcome in resolving this discrepancy.
Thanks,
R
You have no layout width/height specification in your current code.
Put the content inside an enclosing div that has a width specified in pixels.
It's also better practice to identify your divs with classes (or IDs, if there is only one of them) and define the actual CSS in the CSS file and not in the HTML. This way you can separate presentation from markup, so that you could send the same HTML to, say, a mobile device, but with a different CSS file for that device.
Related
I found a weird issue while testing my application in safari(Version 13.1).
Basically, an image in the website is broken and it's not loaded.
Chrome and FireFox are showing the alt attribute's value and occupies the least height possible for the unloaded image tag.
But safari browser in my mac occupies way more height than others and having a weird user experience pushing the tag to bottom.
Here is the reproduction of the issue - https://jsfiddle.net/etjhgpdo/1/ - Open this url in both chrome and safari. We can see the difference that heading tag is pushed down as the image tag's height is so much in safari.
Thanks in advance.
As I didn't receive any answer, I am adding the workaround fix I found on web.
Addding onerror="this.style.height = '50px'" on the image tag helped me in reducing the height.
But this will apply to all the browsers as we are not specifying any browser here.
On my homepage and a few others, Internet Explorer and Edge are placing my read more links next to tables that use display: block value. The table and the links are in separate divs. It seems that the Microsoft browsers are confusing block with inline-block.
Anyone had this problem? Are there alternatives that function in IE and Edge?
http://tenbooksamonth.com/
From what I can see such behavior is some-how caused by the word-wrap property in you responsive.css file. If you turn it off, site looks fine.
Before
After
p.s. Not sure what are actual display modes for the divs, as they are positioned thru some grid framework.
I am having alignment problems with a website I'm designing on IE6. It works great in all browsers (Firefox, Opera, Chrome, Safari, etc.) including IE7, IE8 and IE9. Basically, I troubleshooted and found that there is 25 extra pixels that are being added to either the main body of the page or the right body column of the page (these are divs #body_box or #right_box in the JS Fiddle below). They should be displayed inline but instead the #right_box overlaps and is displayed underneath #body_box and floating to the right.
The way I know this is that I expanded the div #Complete_Layout to 1025px (as opposed to the 1000px that it's set at now) and that's when it worked in IE6. I tried 1026px and 1024px and it didn't line up. I checked the dimensions of the background images which are accurate and I even attempted to change the width of the two divs (body_box and right_box) to percentages (75% and 25%) but it gave the same result. I'm out of ideas on what else to try.
http://jsfiddle.net/cRcXq/
It should be noted that I am doing this in PHP and the body_box and right_box sections are part of include files (don't know if that changes anything). I've added a comment on the HTML of the JSFiddle on where index.right.php begins. Thanks for the help.
This looks like the infamous "IE 6 box model bug," a well-known difference between IE 6 and other browsers from the time. Essentially, IE 6 counts the padding and the border as part of the width and height of an element, but any other browser from that time follows the same model as newer browsers.
Seriously, though, why are you designing a website for IE 6? It's ten years old and insecure, and it has less than 1% market share in the US. Microsoft has put up a website devoted to getting people off of IE 6. You wouldn't write code for Office 2000, or Mac OS 9, or PHP 3, so why are you developing code for a browser that was popular around the same time as those products?
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
Where can I find documentation about the new behavior of the IFRAME element in iOS 5 Safari? Empirical evidence suggests that IFRAMEs now will expand to fit the content, expanding the containing document to do so, thereby often breaking code that works fine in iOS4.3 (and desktop browsers).
Is there any way to control this new behavior?
I couldn't find any official documentation that lists the differences of the <iframe> tag in iOS5, but I found these links which do explain a little bit about the new <iframe> tag/changes in iOS5 safari.
New Mobile Safari stuff in iOS5
iOS SDK Release Notes for iOS 5.0
Handling Events, Safari Web Content Guide
You mentioned that the <iframe> tag now stretches to the width of the content inside it. Would you want it to be a set width?
You could either...
Try styling the iframe in css to the width you want it (I'm sure you've tried this)
Set a width to the body tag so that the iframe doesn't stretch outside of it (not sure if this works)
Put a <div> around the content being retrieved by the iframe that has a set width
Edit: I just read the comment saying to style the iframe directly, but you mentioned it doesn't work. I'd try styling the container div instead, if that's an option.