[Løst] Problem med layout i IE

[Badering]

IE er et helvetes helvete. Driver å koder en side, og jeg skjønner ikke bæret at hva IE tolker feil. Venstre kollone blir for liten i både IE 6 og IE 7, men fungerer utmerket på firefox, opera, safari, you name it.

 

Jeg får heller ikke Designed by - coded by kollonnen på lik høyde som de to andre nederst.

 

Vær så snill og hjelp meg

 

EDIT: Problemene er nå løst, takket være Id3fix

Endret 7. januar 2007 av Badering

[-Dan]

hvis du slenger inn en:

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie-style.css" type="text/css" media="screen" />
<![endif]-->

 

Så brukern det stylesheet'e når man ser siden i IE!

 

Må se kodene for å se hva som er feil med Designed by- kollonnen!

[Badering]

Vet om denne metoden, og har prøvd å bruke den. Men jeg finner rett og slett ikke ut hva som er feil :/

[-Dan]

Få se kodene da så skal jeg se om jeg finner ut av det!

[Badering]

Klikk for å se/fjerne innholdet nedenfor

body  {
text-align:center;
background:#292929;
font-family:arial, sans-serif, serif;
font-size:0.8em;
color:#8d8d8d;
}

#wrapper {
text-align:left;
margin:0 auto;
width:70%;
height:auto;
background:#3f3f3f;
}

#header  {
height:auto;
height:66px;
background:url(bg_header.png);
}

.wi5title {
float:left;
text-indent:-9999px;
font-size:1em;
}

.nav {
float:right;
}

.nav li  {
display:inline;
padding:.5em;
}

#latest h2 {
font-size:1.5em;
font-weight:600;
}

#latest_entry {
float:left;
width:54%;
background:#393939;
padding:2%;
color:#fff;
}

#latest_entry h2 {
margin-bottom:0;
}

#latest_entry h3 {
font-size:1.05em;
font-weight:300;
margin:0;
}

#latest_entry a {
color:#fff;
}

#latest_portfolio {
background:#3f3f3f;
float:right;
width:38%;
padding:2%;
}

#latest_portfolio img {
width:250px;
height:75px;
border: 2px solid #f1a615;
}

#latest_portfolio h2 {
color:#f1a615;
}

#latest_portfolio a {
color:#f1a615;
text-decoration:none;
border-bottom:1px solid #f1a615;
}

.preview {
margin-left:200px;
}

#bgbottom_header {
clear:both;
width:100%;
height:31px;
text-indent:-9999px;
background:url(bg_uheader.png);
}

#content {
background:#3f3f3f;
}

#posts {
width:54%;
padding:2%;
background:#323232;
line-height:175%;
font-size:0.9em;
float:left;
}

.info_post {
border:1px solid #434343;
background:#3b3b3b;
padding:0em .5em;
}

.info_post h2 {
margin-bottom:0;
}

.info_post h2 a {
font-size:1em;
color:#f1a615;
text-decoration:none;
}

.info_post h2 a:hover {
color:#f1a615;
border-bottom:1px solid #f1a615;
}

.info_post h3 {
margin:0;
margin-bottom:1em;
font-size:0.9em;
font-weight:300;
}

.info_post h4 {
width:20%;
padding:2%;
float:right;
border:1px solid #474747;
background:#383838;
text-align:center;
}

#right_col {
width:38%;
float:right;
background:#3f3f3f;
padding:2%;
color:#5e5e5e;
}

a {
color:#f1a615;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

#bgbottom_content {
clear:both;
width:100%;
height:31px;
text-indent:-9999px;
background:url(bg_uheader.png);
}

#additional_work h2 {
color:#f1a615;
margin:0;
}

#additional_work h4 {
font-size:1em;
color:#f1a615;
margin:0;
}

#right_col ul{
padding:1em;
}

#right_col li{
list-style-type:none;
display:inline;
}

li.created {
float:left;
font-weight:700;
}

li.view {
float:right;
}

#bottom {
background:url(bg_bottom.png) repeat-x #292929;
}

#bottom h2 {
font-size:1em;
color:#fff;
}

#bottom li {
width:100%;
list-style-type:none;
margin:0;
padding:.45em 0em;
border-bottom:1px dotted #8d8d8d;
}

#bottom li a {
color:#8d8d8d;
text-decoration:none;
}

#bottom li a:hover {
color:#f1a615;
}

#bottom li.title {
border-bottom:0;
padding:0em;
}

.topics {
width:30%;
padding:2%;
float:left;
}

.ads {
width:30%;
margin-left:34%;
padding:2%;
}

.ads ul {
padding:0;
margin:0;
}

.designcode {
width:28%;
padding:1%;
float:right;

margin-right:0;
margin-top:0;
}

#bgbottom_bottom {
clear:both;
width:100%;
height:21px;
text-indent:-9999px;
background:url(bg_uheader.png);
}

#copyright_rss {
padding:1em 0em;
}

.copyright {
color:#fff;
float:left;
}

.rss {
float:right;
}

 

Heile css-skiten. Ellers er jo høyreklikk -> vis kilde i browseren et populært valg.

[Ståle]

Ops my bad

Endret 7. januar 2007 av Ståle

[-Dan]

Dette funket for meg!

SKiftet litt på html'en og CSS'en!

 

Klikk for å se/fjerne innholdet nedenfor

<html>
<head>
<title>Wi5.net | Home of Ryan Gallagher</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
	<div class="wi5title"><h1>WI5</h1></div>
	<div class="nav">

		<ul>
			<li id="home"><a href="#">Home</a></li>
			<li id="portfolio"><a href="#">Portfolio</a></li>
			<li id="contact"><a href="#">Contact</a></li>
		</ul>
	</div>
</div>

<div id="latest">
<div id="latest_entry">
<h2>Latest Blog Entery: What is Lorem Ipsum?</h2>
<h3>Friday 5th 2007 | <a href="#">Permalinks</a> | <a href="#">Comments (0)</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged...</p>

<a href="#">(Read more..)</a>
</div>
<div id="latest_portfolio">
	<h2>Latest addition to my <a href="#">portfolio</a></h2>
	<img src="#">
		<div class="preview"><a href="#">Preview</a></div>
</div>

<div id="bgbottom_header">.</div>
<div id="content">
<div id="posts">
	<div class="info_post">
	<h4><a href="#">(0) Comments</a></h4>
	<h2><a href="#">What is Lorem Ipsum?</a></h2>
	<h3>Posted By: <a href="#">Ryan Gallagher</a> on January 10, 2007</h3>

	</div>

	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

	<div class="info_post">
	<h4><a href="#">(0) Comments</a></h4>
	<h2><a href="#">What is Lorem Ipsum?</a></h2>

	<h3>Posted By: <a href="#">Ryan Gallagher</a> on January 10, 2007</h3>
	</div>

	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

	<div class="info_post">

	<h4><a href="#">(0) Comments</a></h4>
	<h2><a href="#">What is Lorem Ipsum?</a></h2>
	<h3>Posted By: <a href="#">Ryan Gallagher</a> on January 10, 2007</h3>
	</div>

	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

	<div class="info_post">
	<h4><a href="#">(0) Comments</a></h4>
	<h2><a href="#">What is Lorem Ipsum?</a></h2>
	<h3>Posted By: <a href="#">Ryan Gallagher</a> on January 10, 2007</h3>

	</div>

	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

	</div>
	<div id="right_col">

<div id="additional_work">
<h2>additional work</h2>
<h4>latest 5 projects</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<h3><a href="#">Vector magazine Art piece #1</a></h3>

<img src="#" alt="" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<ul>
	<li class="created">Created: Jan 07</li>
	<li class="view"><a href="#">View Piece</a></li>
</ul>
</div>

<div id="2">
<h3><a href="#">Vector magazine Art piece #2</a></h3>
<img src="#" alt="" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<ul>
	<li class="created">Created: Jan 07</li>
	<li class="view"><a href="#">View Piece</a></li>

</ul>
</div>
<div id="1">
<h3><a href="#">Vector magazine Art piece #3</a></h3>
<img src="#" alt="" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<ul>
	<li class="created">Created: Jan 07</li>

	<li class="view"><a href="#">View Piece</a></li>
</ul>
</div>
<div id="2">
<h3><a href="#">Vector magazine Art piece #4</a></h3>
<img src="#" alt="" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<ul>
	<li class="created">Created: Jan 07</li>
	<li class="view"><a href="#">View Piece</a></li>
</ul>
</div>
<div id="1">
<h3><a href="#">Vector magazine Art piece #5</a></h3>

<img src="#" alt="" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<ul>
	<li class="created">Created: Jan 07</li>
	<li class="view"><a href="#">View Piece</a></li>
</ul>
</div>


</div>
	</div>
<div id="bgbottom_header">.</div>	

<div id="bottom">
<div class="topics">

<ul>
<li class="title"><h2>Topics</h2></li>
<li><a href="#">Lorem Lipsum</a></li>
<li><a href="#">Lorem Lipsum</a></li>
<li><a href="#">Lorem Lipsum</a></li>
<li><a href="#">Lorem Lipsum</a></li>

<li><a href="#">Lorem Lipsum</a></li>
<li><a href="#">Lorem Lipsum</a></li>
<li><a href="#">Lorem Lipsum</a></li>
<li><a href="#">Lorem Lipsum</a></li>
<li><a href="#">Lorem Lipsum</a></li>
<li><a href="#">Lorem Lipsum</a></li>

</ul>
</div>
<div class="ads">
<h2>Do you want a text link?</h2>
<p>Would you like your text link to appear here? Contact me.</p>

<ul>
<li class="title"><h2>Friends</h2></li>

<li><a href="#">Shock Media Is the Best</a></li>
<li><a href="#">Thomas Karlsen Is the Best</a></li>
<li><a href="#">Shock Media Is the Best</a></li>
<li><a href="#">Thomas Karlsen Is the Best</a></li>
<li><a href="#">Shock Media Is the Best</a></li>
<li><a href="#">Thomas Karlsen Is the Best</a></li>

<li><a href="#">Shock Media Is the Best</a></li>
<li><a href="#">Thomas Karlsen Is the Best</a></li>
<li><a href="#">Shock Media Is the Best</a></li>
<li><a href="#">Thomas Karlsen Is the Best</a></li>
</ul>
</div>
<div class="designcode">

<h2>This Blog was designed by:</h2>
<img src="#" alt="" />

<h2>This Blog was coded by:</h2>
<img src="#" alt="" />
</div>

<div id="bgbottom_bottom">.</div>
<div id="copyright_rss">

	<div class="copyright"> © Ryan Gallagher, <a href="http://wi5.net">WI5.net</a>, Proudly Powered by: <a href="http://wordpress.com">Wordpress</a></div>
	<div class="rss">RSS</div>
</div>
</div>
</div>
</div>
</body>
</html>

 

Klikk for å se/fjerne innholdet nedenfor

/* CSS Document */
body  {
text-align:center;
background:#292929;
font-family:arial, sans-serif, serif;
font-size:0.8em;
color:#8d8d8d;
}

#wrapper {
text-align:left;
margin:0 auto;
width:70%;
height:auto;
background:#3f3f3f;
}

#header  {
height:auto;
height:66px;
background:url(bg_header.png);
}

.wi5title {
float:left;
text-indent:-9999px;
font-size:1em;
}

.nav {
float:right;
}

.nav li  {
display:inline;
padding:.5em;
}

#latest h2 {
font-size:1.5em;
font-weight:600;
}

#latest_entry {
float:left;
width:54%;
background:#393939;
padding:2%;
color:#fff;
}

#latest_entry h2 {
margin-bottom:0;
}

#latest_entry h3 {
font-size:1.05em;
font-weight:300;
margin:0;
}

#latest_entry a {
color:#fff;
}

#latest_portfolio {
background:#3f3f3f;
float:right;
width:38%;
padding:2%;
}

#latest_portfolio img {
width:250px;
height:75px;
border: 2px solid #f1a615;
}

#latest_portfolio h2 {
color:#f1a615;
}

#latest_portfolio a {
color:#f1a615;
text-decoration:none;
border-bottom:1px solid #f1a615;
}

.preview {
margin-left:200px;
}

#bgbottom_header {
clear:both;
width:100%;
height:31px;
text-indent:-9999px;
background:url(bg_uheader.png);
}

#content {
background:#3f3f3f;
}

#posts {
width:54%;
float:left;
padding:2%;
background:#323232;
line-height:175%;
font-size:0.9em;
}

.info_post {
border:1px solid #434343;
background:#3b3b3b;
padding:0em .5em;
}

.info_post h2 {
margin-bottom:0;
}

.info_post h2 a {
font-size:1em;
color:#f1a615;
text-decoration:none;
}

.info_post h2 a:hover {
color:#f1a615;
border-bottom:1px solid #f1a615;
}

.info_post h3 {
margin:0;
margin-bottom:1em;
font-size:0.9em;
font-weight:300;
}

.info_post h4 {
width:20%;
padding:2%;
float:right;
border:1px solid #474747;
background:#383838;
text-align:center;
}

#right_col {
width:38%;
float:left;
background:#3f3f3f;
padding:2%;
color:#5e5e5e;
}

a {
color:#f1a615;
}

#bgbottom_content {
clear:both;
width:100%;
height:31px;
text-indent:-9999px;
background:url(bg_uheader.png);
}

#additional_work h2 {
color:#f1a615;
margin:0;
}

#additional_work h4 {
font-size:1em;
color:#f1a615;
margin:0;
}

#right_col ul{
padding:1em;
}

#right_col li{
list-style-type:none;
display:inline;
}

li.created {
float:left;
font-weight:700;
}

li.view {
float:right;
}

#bottom {
background:url(bg_bottom.png) repeat-x #292929;
}

#bottom h2 {
font-size:1em;
color:#fff;
}

#bottom li {
width:100%;
list-style-type:none;
margin:0;
padding:.45em 0em;
border-bottom:1px dotted #8d8d8d;
}

#bottom li a {
color:#8d8d8d;
text-decoration:none;
}

#bottom li a:hover {
color:#f1a615;
}

#bottom li.title {
border-bottom:0;
padding:0em;
}

.topics {
width:30%;
padding:2%;
float:left;
}

.ads {
width:30%;
margin-left:34%;
padding:2%;
}

.ads ul {
padding:0;
}

.designcode {
width:28%;
padding:1%;
float:right;
margin-right:0;
}

#bgbottom_bottom {
clear:both;
width:100%;
height:21px;
text-indent:-9999px;
background:url(bg_uheader.png);
}

Endret 7. januar 2007 av Id3fiX

[Badering]

Ser ut til å funke utmerket i IE7! Tusen takk, Id3fix.

[-Dan]

Ikke noe problem!

[Badering]

Flotters.

 

Men jeg har fremdeles problemer med designed by-kollonnen. Har prøvd å bruke margin-left;, float:right; og hele pakken, men det ser ikke ut til å virke. Det burde da finnes en fin måte å få tre kollonner side om side :/

[-Dan]

alle sammen Float left? prøvd det?

 

og fjern margin-left:34%; fra .ads{}

 

Edit:

Altså!

float:left; på ads, topics og designcode!

og fjern margin-left:34%; fra .ads{}

 

Endret 7. januar 2007 av Id3fiX

[Badering]

Det fungerte

 

Og jeg som trodde jeg var dreven i css posisjonering!

 

Tusen takk, nok en gang, Id3fix.

[-Dan]

Så bra!

Hehe! Resten av siden er jo bra den!

 

Ikke noe problem! bare hyggelig å hjelpe!