Topic: Internet Explorer sucks! Pages that link to <a href="https://ozoneasylum.com/backlink?for=28485" title="Pages that link to Topic: Internet Explorer sucks!" rel="nofollow" >Topic: Internet Explorer sucks!\
 
Author Thread
OlssonE
Maniac (V) Inmate

From: Eagleshieldsbay, Sweden
Insane since: Nov 2001

 IP logged posted posted 09-28-2006 21:57 Edit Quote

HI!
Working on a homepage for HBK and I made one that
works very well in firefox but looks like a bloody mess in IE.
I don't have access to IE because I'm working from an linux platform.

|__ http://www.olssone.com/index.html __|

I valdiated the html and it passes. The CSS has several problems which I'm kinda clueless to fix.

Just with my febble mind I think the IE Problems has something to do with the float property?

Help please!



code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>index</title>


  <style type="text/css">
  body { padding: 0px;
    }

  #right { margin: 0px;
    padding: 0px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    left: 260px;
    background-color: rgb(255, 255, 255);
    top: 184px;
    width: 764px;
    clear: none;
    overflow: auto;
    background-image: url(ankareorignal.jpg);
    background-attachment: fixed;
    background-position: left top;
    opacity: 1;
    height: 584px;
    }

  #righttop { margin: 0px;
    padding: 0px;
    top: 0px;
    left: 260px;
    right: 0px;
    bottom: 0px;
    height: 184px;
    position: fixed;
    background-color: rgb(191, 200, 215);
    width: 764px;
    }

  #left { margin: 0px;
    padding: 25px 0px 0px 10px;
    float: none;
    background-color: rgb(58, 99, 120);
    position: fixed;
    right: 0px;
    bottom: 0px;
    left: 0pt;
    clear: left;
    width: 260px;
    top: 184px;
    text-align: center;
    height: 559px;
    }

  #lefttop { margin: 0px 0px 0%;
    padding: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(43, 78, 101);
    position: fixed;
    height: 184px;
    width: 260px;
    text-align: center;
    }

  .content { border-style: dotted;
    border-width: 2px;
    margin: 25px;
    padding: 25px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(255, 255, 255);
    position: relative;
    top: 0pt;
    left: 0pt;
    width: 644px;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    text-align: left;
    font-size: 1.1em;
    font-family: Courier New,Courier,monospace;
    height: 475px;
    }

  h3 { font-weight: bold;
    font-style: oblique;
    text-align: center;
    text-decoration: underline;
    font-size: 1.25em;
    }

  h4 { margin: 0pt;
    padding: 0.3em;
    text-align: center;
    }

  div.menu { border: 1px solid rgb(0, 0, 0);
    margin: 1em;
    padding: 0pt;
    background: rgb(73, 139, 180) none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    position: relative;
    width: 200px;
    }

  div.menu a { border-top: 1px solid rgb(0, 0, 0);
    margin: 0pt;
    padding: 0.3em;
    display: block;
    width: 100%;
    font-weight: bold;
    color: rgb(51, 51, 51);
    font-family: Arial,Helvetica,sans-serif;
    }

  html > body div.menu a { width: auto;
    }

  div.menu a:hover { background: rgb(191, 200, 215) none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    color: rgb(51, 51, 51);
    }


  </style>
</head>


<body>

jh
<div id="left">
<div class="menu">
<img style="border: 0px solid ; width: 200px; height: 34px;" title="V&auml;lkommen till husumsb&aring;tklubb" alt="Husumsb&aring;tklubb" src="hemsideplatta%237.png" align="middle" hspace="0" vspace="0">
<a href="#">Hem<br>

</a><a href="#">Styrelsen<br>

</a><a href="#">Utflyktsm&aring;l<br>

</a><a href="#">Aktuellt<br>

</a><a href="#">G&auml;stbok<br>

</a><a href="#">Historia<br>

</a><a href="#">Foton<br>

</a></div>

<div id="lefttop"><img style="border: 0px solid ; width: 148px; height: 162px;" title="V&auml;lkommen till husumsb&aring;tklubb" alt="Husumsb&aring;tklubb" src="ankareorignal5.png" align="middle" hspace="0" vspace="12"></div>

<div id="righttop"></div>

<div id="right">
<div class="content"><br>

<h3>V&auml;lkommen till Husums B&aring;tklubb</h3>

<br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lectus
ligula, euismod quis, pretium eget, gravida in, libero. Praesent vel
purus eu orci iaculis pharetra. Suspendisse blandit orci non lectus.
Maecenas massa lectus, hendrerit pharetra, nonummy eget, consectetuer<img style="border: 0px solid ; width: 343px; height: 208px; float: right;" alt="Baggviken" title="Baggviken" src="baggviken.gif" hspace="5" vspace="5">
eu, nisl. Aenean condimentum, lacus quis rhoncus rutrum, nibh ante
ultricies tellus, vitae pretium metus felis in sapien. Ut00 nonummy
aliquam lectus. Cras tempus, sapien sit amet faucibus tempus, lacus
augue posuere nulla, vitae pharetra ipsum nulla sit amet sem. Curabitur
aliquam lacus vel ipsum hendrerit venenatis. Aenean id nibh ac arcu
aliquam lobortis. Vivamus justo dui, volutpat non.
</div>

</div>

</div>

</body>
</html>



(Edited by OlssonE on 09-28-2006 22:32)
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 09-28-2006 23:22 Edit Quote
quote:
OlssonE said:

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Doomed from the start. http://hsivonen.iki.fi/doctype/

quote:
OlssonE said:

I don't have access to IE because I'm working from an linux platform

http://tatanka.com.br/ies4linux/

(Edited by reisio on 09-28-2006 23:24)
H][RO
Paranoid (IV) Inmate

From: Australia
Insane since: Oct 2002

 IP logged posted posted 09-29-2006 02:17 Edit Quote

I tend to go for

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



And have pretty much everything working in IE, even with some complicated layouts
DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 09-29-2006 03:06 Edit Quote

This is an extremely simple layout. The code that you have is very bizarrely complicated.

Get rid of all that positioning! There is no need for any of it, and it is likely the source of many problems. Let go of the tight control you are trying to exert over this, and let the elements fall into place. A couple of simple floats are all you need...

There is also no need for your odd use of Mozilla proprietary code in your css...
OlssonE
Maniac (V) Inmate

From: Eagleshieldsbay, Sweden
Insane since: Nov 2001

 IP logged posted posted 09-29-2006 10:15 Edit Quote

Thanks for the input guys... I'm working on it!!?
OlssonE
Maniac (V) Inmate

From: Eagleshieldsbay, Sweden
Insane since: Nov 2001

 IP logged posted posted 09-30-2006 22:10 Edit Quote

Ok... I did what DL said and it worked with floats then i "deadcentered" it with reiso's code...
Thanks a bundle...


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu