Why LP looks fine On Firefox but messed up on IE? (8)

Hi guys,

Browsed STM and the web but couldn't find an answer as to why my LPs look fine on Firefox but look messy on IE.

However After playing around with the LP I realized that the position:absolute; CSS command is not working on IE for some reason. Hence why it all looks messy. Also the DKI and links are also not working properly for some reason. not sure if I have to add some extra coding... my brain is cooked...

Would really appreciate if you could give a hand finding out what's going on..

You could have a CSS validity issue example (You're missing a {,} a syntax error). Some browsers handle them well others throw up, if it's a recent version I would bet its a syntax issue not being handled well by IE. If it's IE 6 well I just don't care anymore got so tired of those bugs.

Upload your CSS code so I can have a look.

Yeah, cross-browser compatibility is a bitch, coming from a web-developer background, there's a lot of things that could be causing this. Each browser has their own little nuances, but the best thing you can do is get it working in Firefox (Get Firebug so you play with CSS on the fly and find the exact line number in the file that needs editing)..

Then see if you can fix the CSS to be cross-browser, and if not, use IE specific stylesheets for any whacky styles that need to be overridden due to IE quirks.. for the most part, Safari/Chrome tend to be easier to please once you get it working in FF.

<!--[if IE]>
         <link rel="stylesheet" type="text/css" href="/css/ie-style.css" />
<![endif]-->
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="/css/ie6-style.css" />
<![endif]-->
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="/css/ie7-style.css" />
<![endif]-->
<!--[if IE 8]>
	<link rel="stylesheet" type="text/css" href="/css/ie8-style.css" />
<![endif]-->

Hi and thanks for you guys feed back. Not sure what the problem is but the LP seems to be working fine on FF. It's just Internet explorer that shows all the links and DKI all over the place. Here is the CSS code;


<style type="text/css" media="screen">


#wrap {
border: 5px dashed #F00;
padding: 10px;
margin: 0px;
width: 720px;
height: 400px;
background: #fff;

}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 30px;
color: blue;
margin: 0px;
padding:0px;
height:50px;
position:absolute;
top:-18px;
left:75px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
width: 600px;
margin: 0 0 0 0px;
color: blue;
height: 57px;
position:absolute;
top:85px;
left:41px;
}




h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: red;
margin: 0px;
position:absolute;
top:125px;
left:94px;
}

h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: red;
margin: 0px;
position:absolute;
top:170px;
left:37px;
width: 152px;
height: 114px;
}

h5 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: red;
margin: 0px;
position:absolute;
top:345px;
left:238px;
}

h8 {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: green;
margin: 0px;
position:absolute;
left: 342px;
top: 63px;
height: 66px;
width: 392px;
}
h9 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: black;
margin: 0px;
position:relative;
left: 150px;
top: 440px;
height: 50px;
}
h10 {
position:absolute;
left: 256px;
top: 516px;
}


</style>

Here are the LPs too. One wih DKI and the other one without. Both of them show messed up on IE.

http://lpcreative.info/Maynzylp/macbooklp2(4).php

http://lpcreative.info/Maynzylp/macbooklp3.php

I think you've sorta gone about the CSS the wrong way.

First, probably easier to include a separate css style file rather than have it all internal. Secondly, you're using css styles to set the properties of heading elements - which is fine - but they are text. Setting the absolute positioning of a text style and it's height/width makes little sense. Add to this that IE/other browsers treat heading styles and text a bit differently and you've got a nightmare on your hands.

Better to define divs for each text/image block. Set the absolute position and size of those divisions. Inside those divisions have <p> or <h1> etc elements with your text in them. Use the css to define the appearance of the types of text, e.g. colour and font, and use css tags for each div to define their size and position. e.g. #wrapper, #text1 etc. I think you will find everything behaves a lot more predictably when you set the layout of the divisions involved and then worry about putting text inside of them.

Thanks Zeno. I guess I am just getting familiar with CSS and HTML. I just outsourced the job so Hopefully I can copy the right coding for future Landing pages. It was just so confusing trying to get it all together

If you want a little boost in productivity/learning try using WYSIWYG website builder to make the basic layout of the page first. In the program options you can set whether to make CSS internal or external. Use it to position things where you want then export the site to html and edit elsewhere - that way you can get a quicker handle on how the html/css is done to position everything the way you visually want it, then add scripts and more advanced stuff later.

I'd do it like this normally and I am ok with html/css, it just saves heaps of time.

Thanks a bunch. But I am using mac and WYSIWYG is only comptble with Windows. I am doing all my coding on DW