Here's a Design I've started. Fairly simple.
It's a Container Div with 3 main Div's Header, Content, Footer.
Header, Content, Footer have background-images sliced from image.
It shows correctly in FF (all), Chrome (all), Android, Safari, IE >6 and <= 9 and IE 11
Only in "IE10" the footer background-image seems to disappear or something?
The header and the footer are pretty much identical in styling etc. and no
probs with header.
Validates, w3c.
I've tried everything I can think of...... every element attribute I can think of. Even re-saved
footer slice image in various formats.
The only way I can get to show is by putting IE into quirks mode. I don't want
to do that. emulating other IE modes doesn't work either until I get to quirks mode.
I must be missing something?
Here's an image of the issue...
http://inkspotpens.net/ie-prob-1.jpg
Also a live link to the R&D server
http://www.inkspotpens.net
Any suggestions?
Related
I'm using css gradients and padding to simulate buttons around an anchor tag. The problem I am running into is that firefox seems to make the button 3 pixels larger. 1 pixel on top and 2 on bottom. This seems to happen with not only the example i posted but everywhere on the page where i use the padding. I put up and example at http://wemw.net/example.php. In firefox the button top and bottom line up perfectly with the search box, but in chrome as i said its off by 1 pixel on top and 2 on bottom. I am using the w3 transitional(tried strict as well) doctype and a css reset. In the reset all anchor tags are set to padding: 0, so I'm confused as to why this extra padding is being added. Is there a workaround to this or is it just something you have to deal with when working with gecko and webkit browsers?
EDIT: So I logged over to windows and it is appearing the same in both browsers now. I'm assuming it is OS specific problems? Since no where near as many people use linux I'm going to change the padding to make it work, but in the interest of consistency can anyone offer a solution for cross-os cross-browser solutions? I do not own a mac and cannot easily test it there, but if windows/linux can have problems with the same versions of the same browsers is it safe to assume mac could also have issues i am unaware of?
It's not the padding on the anchor tag, it's the size of the text box that is inconsistent. <input> elements always caused such problems for me too, and I always found it extremely tedious to align them together nicely (you haven't yet seen it in IE8, have you?). I think that the easiest cross-browser solution here would be to remove the border from the text box and use a background image instead (or better yet, a background image on the element containing the text box) properly aligned with the button.
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?
can someone look at this site for me I have a serious problem with the sub pages content div going over to the right bar this issue the site renders fine in all other browsers except safari firefox and iphone
www.firstavenuedesign.co.uk/demo
http://www.firstavenuedesign.co.uk/demo/offers.aspx
if u look at the above page in ie it will display fine and chrome any ideas anyone
It looks as though the problem you are having relates to your parent DIV 'collapsing' on your floated child elements.
The following article explains how to resolve this issue (in the Collapsing section) a long with other approaches for laying out floating elements:
http://www.alistapart.com/articles/css-floats-101/
Validate your html and css for those lists of significant errors. Then get this working in a modern browser before seeing how IE screws things up. The other browsers are showing what you wrote. IE makes things up as it goes along. Never, ever trust IE to do anything right.
Also, you have space before the doctype. Some versions of IE go into quirks mode in that situation.
A lot of my floats are showing up on a separate line when viewing in IE7 ... in Ffox, chrome, IE8 etc they look fine.
The site in question is:
http://208.43.52.30
The places where the float is not working are the location for "events near me", "Show" for the show month buttons ..
I'll attach some screenshots
IE 8:
IE 7:
I personally can't see the difference (the closest thing I have to IE7 is compatibility view in IE8), but based on your screenshots it looks like the "Upcoming Events" font-size is much bigger in the IE7 screenshot.
Did you define font-size for your h1 tag? Different browsers sometimes handle the size and margins of header tags different, so if you put h1{font-size:14px;} in your stylesheet maybe it'll fix it.
The Upcoming Events problem is being causes by IE7 pushing the float:right to the next line instead of keeping it in line with the h1, despite no clear I can't figure out a way to get that to stop. An alternative I came up with was to float the h1 left instead and give the default text-alignment:right; This will cause the same layout, and IE7 is happy.
http://jsfiddle.net/znRxq/
Same solution for the show button.
IE7 might be making your input larger (from experience), you should set a different width for IE7.
First off, 'float' is pretty well supported, even on IE. When validating the HTML on you website, I am getting 43 errors (wont really be that many). Correct those and see if it fixes the problem. Earlier versions of IE (<= 7) are not as friendly to slightly invalid markup as IE8, chrome, firefox, etc...
Second, if you are really just trying to display block elements inline, 'display:inline-block' is the easiest way. Contrary to popular belief, this is supported on IE7 & 8. Here is the css for cross browser support:
.inline-element {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
I have this website, http://www.escuelita.info. Now I tried many times to make it work on IE 7 (possibly IE6 too didn't check) but for some reason the middle frame on the right doesn't show content.
If you compare it to Firefox or Chrome (or even IE8) it works ok.
I need to fix this but I'm not sure what's causing the problem..
Note
I checked with IE7 and the pages don't show content
(the main content DIV content_outer)..
The content shows below the sidebar. Either IE7 enters quirks mode or you trigger some sort of bug that causes IE7 to misbehave.
Double check your doctype, tags and most importantly, get rid of those nested tables. Nested tables are EVIL and I'd bet they're your culprit. Use CSS grids (here's one that's really good: http://www.1kbgrid.com/) instead.
Dunno if this solves your problem, hopefully so.