Been working on this site for some time now, works perfectly on Mac and PC Firefox, as well as Safari. However, IE is making the site almost blank - any ideas on what is going on? Any workarounds?
Thank you in advance for your help!
http://www.alliedprintingsolutions.com
http://www.alliedprintingsolutions.com/style.css (Stylesheet)
I don't have FireBug on me right now (if you don't have this extension - get it!) But using images in the way you are right now is the problem.
Use CSS to apply a "background-image" attribute for your site's main content. For example:
<style>
.Page
{
background-image : url(../images/site_bg.png) no-repeat;
width : 600px; /* Image width here */
heigth : 500px; /* Image height here */
padding-top : 15px; /* top text offset here */
padding-left : 15px; /* left text offset here */
padding-right : 15px; /* right text offset here */
padding-bottom : 15px; /* bottom text offset here */
}
</style>
...
<div class = "Page">
<!-- Content -->
</div>
That will work much better, and will work in all browsers just fine :)
In response to comment
I don't want to say your wrong, but when I can click and drag the background images with my mouse cursor that means that you are using an IMG tag to show the background instead of (or in conjunction with) the background-image attribute. I can almost gurentee that that is your problem. Remove all of your img tags and replace them with divs and the background-image style and your problem will be resolved.
If I had firebug on me I could go into more detail.
Second edit with example code
Here is some rough code that may help you remove your unneccecary image use.
<style>
.Container { margin : auto; width : 600px; /* BG and Header Width here */ }
.Header
{
background-image : url(../images/site_header.png) no-repeat;
width : 600px; /* Image width here */
heigth : 500px; /* Image height here */
padding-top : 15px; /* top text offset here */
padding-left : 15px; /* left text offset here */
padding-right : 15px; /* right text offset here */
padding-bottom : 15px; /* bottom text offset here */
}
.Header .Link1:link, .Header .Link1:visited, .Header .Link2:link, .Header .Link2:visited
{
width : 60px;
heigth : 60px;
display : block;
float : left;
margin : 10 20px;
}
.Header .Link1:link, .Header .Link1:visited
{
background-image : url(../images/link1.jpg);
}
.Header .Link2:link, .Header .Link2:visited
{
background-image : url(../images/link2.jpg);
}
.Page
{
background-image : url(../images/site_bg.png) no-repeat;
width : 600px; /* Image width here */
heigth : 500px; /* Image height here */
padding-top : 15px; /* top text offset here */
padding-left : 15px; /* left text offset here */
padding-right : 15px; /* right text offset here */
padding-bottom : 15px; /* bottom text offset here */
}
</style>
...
<div class = "Container">
<div class = "Header">
<a href = "link1" id = "Link1"></a>
<a href = "link2" id = "Link2"></a>
</div>
<div class = "Page">
Content
</div>
</div>
:)
Your html is invalid in many ways. Please fix that first.
You may want to try adding a doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Edit: The doctype declaration should be the first thing in the html file. It goes even before the <html> tag.
Add a DOCTYPE!
Either HTML5 or HTML4 Strict (not Transitional) are recommended for best cross-browser support.
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(As you can see, HTML5 is much simpler, and still usable even if you're not yet using HTML5 tags.)
Note: The DOCTYPE must be very first thing in the file, before all other tags, and with no blank lines, tabs, nor spaces before it.
Had a quick look at the code in firebug. You seem to have a z-index of -1 on the content div (#wrapperbig), which browsers should ignore for non-absolute/relative content - this may be an odd implementation in IE.
Also, as mentioned before, add a doctype - IE will render the site in 'quirks mode' if there is no doctype.
The Quick Solution: Remove "overflow: auto;" from #wrapperbig and #wrapper.
This will get the content to be displayed.
However, be sure to look at the other answers. They have good points.
There are too much woo-doo stuff happening with absolute positioning of content_left and content_right. You will be fine by removing “position: absolute” and replace it with “float:left” in both content’s (set wrapper width to 100%).
Thank you for all your suggestions, everyone. The majority of the content is showing up (relatively as it should be) on IE now, other than the footer which is slicing up my page in a gross fashion (haha). I see what youre saying, Nelson LaQuet, about the header images, I will have to try and play around with them, I'm still new to CSS and figuring out to having them all properly placed with an image map was headache enough as is. As for the Doctype, I added it as you told me and it seemed to muck up some content even on Firefox, so I know I must have some more errors to go through. When I remove it, things looked normal again. The "woowoo's" with the absolute positioning were pretty much necessary, as the positioning method used was the ONLY way I could find to work with the background images and header images in tact, with the column divs in the correct place. At least I made some positive progress it, but I guess I have more work ahead of me :/ Just wish it was a bit easier to correct as it looks just fine in Firefox. Oh well, thanks again for all your help, guys!
Shannon