Site works fine in Chrome, but not in IE

I have a simple built website, I built it in Chrome, but I visited it in IE and it looks like complete crap

What are the steps of fixing this? I am fairly new to this, I bought a template and just modified the code a bit…

My site: containship.com it looks like only in Chrome

Mostly the stuff that is messed up is in the read part of the site, all those objects have “position:absolute;” is there anyway around this??

Please help me!!

Thank you :slight_smile:

Looks bad in all browsers, the form under “Start Here” is in the wrong place in all browsers. I can already tell why, it is based on the resolution of your monitor…and not mine. Position absolute is the cause. Second, the DOCTYPE is all wrong, its throwing IE into quirks mode, you do not want that.

Next, remove this line of code: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

You then have a <style> element nested inside another <style> element.

Please also see: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcontainship.com%2F

There is a lot more wrong with the page in question…but I don’t have the time nor am I paid enough to tear it apart.

[FONT=Verdana]Hi millhugz and welcome to the SitePoint forums. :slight_smile:

First lesson in Web Design - check it in a range of browsers as you go. :wink: Second rule of Web Design - beware absolute positioning. (Isn’t hindsight a wonderful thing?)

So, as logic_earth says, you want to start by replacing your DOCTYPE declaration with <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> and removing <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE8” />. Then run each page through the W3C Validator which will pick up any coding errors (including typos and other daft mistakes that can cause chaos :)). Start at the top of each page, and fix one error at a time, then re-validate after each fix. Sometimes, fixing one mistake automatically corrects everything after it. If you need assistance interpreting what the Validator is telling you, then post back here and we can help.

Once you’ve ironed out any coding errors, we can try to help with any remaining problems.[/FONT]

My main issue is adding a <script> over an image, and the only way of doing this is with absolute positioning. (from what I have researched) unless there’s another way around…
Can anyone help me out with the issue?

It’s not clear what you mean by that. Can you clarify?

If you want to absolutely place an element on top of another then you can do thiss by setting position:relative on a suitable parent and then the absolute child will be placed in relation to that parent.

Here’s a short commented demo:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.imgholder{
	position:relative;/* set stacking context for absolute child*/
	width:300px;/* same as image width */
	height:100px;/* same as image height */
}
.overlay{
	position:absolute;
	top:0;
	left:0;
	width:300px;/* same as image width */
	height:100px;/* same as image height */
	overflow:hidden;/* hide any overflow */
}
</style>
</head>

<body>
<div class="imgholder">
		<img src="images/logo.jpg" width="300" height="100" alt="Logo"> 
		<span class="overlay">This is the overlay</span> 
</div>
</body>
</html>


See that works, but the padding on the code doesn’t, I need to position the form script within a certain area of the image, check out my site containship.com

If you are trying to position that form over to the right then just change the rules to this:


.imgholder{
position:relative;
width:auto;
height:auto;
}

.overlay{
left:auto;
right:60px;
top:85px;
width:auto;
height:auto;
}


That seems to put the script below the picture

The overlay should have had position:absolute added to it


.overlay{
position:absolute;
left:auto;
right:60px;
top:85px;
width:auto;
height:auto;
}

Haha, well that brings me to my original problem, different browsers and monitors don’t like absolute :x

Browsers have no problem with absolute position (most of the time) and without wishing to offend it is your invalid structure and incorrect use of tables for everything that is the real root of the problem.

You have placed the imageholder inside a table element but you have used no tr or td so it is an incomplete and invalid structure. Add the correct html and the element should display in the correct position.


<table style="text-align: left; width: 100%;"
 border="0" cellpadding="0" cellspacing="0">
		<tr>
				<td><style type="text/css">
.imgholder{
position:relative;
width:auto;
height:auto;
background:blue;
widfth:100%;
height:400px;
}

.overlay{
position:absolute;
left:auto;
right:60px;
top:85px;
width:auto;
height:auto;
background:red
}
</style>
						<div class="imgholder"> <img src="http://www.containship.com/images/bg33.png" width="902" height="421" alt="Logo"> <span class="overlay"><script type="text/javascript" src="http://form.jotform.us/jsform/21624725859159"></script></span> </div></td>
		</tr>
</table>


Of course those styles should be in the external css file and not in the middle of the code as that is invalid.

You should not also be using all those inline styles in the tags because that means there is no simple solution to fix any errors. Indeed you are trying to absolute position table-cells which is not allowed anyway. All css should be external in 99% of cases.

There are too many problems to fix in the present form and it would be better to start again with a table-free layout or at least not nested tables. You can always throw a table in where you need three equal columns but there really is no need these days to use tables for layout.

Hopefully the above fix will get your image into position but I feel you would be better starting again and using up to date methods and structures to achieve that rather simple design.

It puts it in position, but when different monitor views the site, or a different browser, it goes out of position, is there a code that makes it glued to that picture? Or any other way of doing what I am trying to accomplish?

The form now starts in the same position im IE8+, Chrome and Firefox so I’m not sure what you mean.

The form is a different size in all those browsers because form elements are handled differently and are different sizes. The form is not coded well enough anyway as you would need to control every detail to get browsers to look similar. They will never be exactly the same though. But as to the starting position of the form then it is exactly the same in those browsers I mentioned.

It’s never a good idea to try and squeeze elements into a picture like that because you don’t know what size text I may have set and your form will not fit. Layouts should be built to grow and shrink and elements constructed around them with that process in mind. Pushing text into little squares of fixed height and width is a major design flaw and shouldn’t really be done. You can get away with it for a couple of words or a heading but for substantial content you should never do that.

A web page is a living breathing thing and should adapt to what is thrown at it.:slight_smile:

It works for me now… thank you!! One more thing though, I see a blue line in IE below the red background?? Why is this?

You have a blue background to the image holder.


.imgholder {
    background:blue;
}

Remove the background-color and it will go away.