...

View Full Version : Page not correctly displayed in IE, CSS help requested.



PureDarkness
11-08-2011, 12:42 PM
Hello everyone,

I need some help with an IE issue. Is there any reason why this CSS code would not work within IE?


html {
margin: 0;
padding: 0;
}
body {
background: #252525;
margin: 0;
padding: 0;
}


.initFramework {
margin: 0 auto;
margin-bottom: 50px;
padding: 0;
width: 960px;
min-height: 400px;
}
.frameworkWrapper {
position: absolute;
width: 960px;
top: auto;
min-height: 400px;
}

.headerWrapper {
color: #fff;
background: #353535;
width: auto;
padding: 10px;
}
.navigationWrapper {
color: #fff;
background: #353535;
width: auto;
margin: 10px 0px 0px 0px;
cursor: default;
}
.nav li {
display: inline-block;
}
.nav li a {
color: #fff;
font-weight: bold;
font-size: 16px;
padding: 5px 10px;
text-decoration: none;
outline: none;
}
.nav li:hover a {
color: #8a2d18;
background: #252525;
}

.contentWrapper {
margin: 15px 0px 50px 0px;
height: 100%;
}


.mainPanel {
background: #aaa;
width: 200px;
}
.mainPanelFix {
margin: 10px;
}
.mainContent {
background: #aaa;
width: 740px;
}
.mainContentFix {
margin: 10px;
}

.footerWrapper {
color: #fff;
position: fixed;
bottom: 0px;
background: #444;
width: 960px;
}
.footerWrapperContent {
margin: 10px 10px 30px 10px;
}




.vinylWrapper {
width: 1360px;
position: relative;
top: auto;
left: -200px;
}
.leftSideVinyl, .rightSideVinyl {
width: 200px;
height: 600px;

position: absolute;
top: auto;
}
.leftSideVinyl {
background: url(../img/vinyl_left.png) no-repeat right top;
left: 0px;
}
.rightSideVinyl {
background: url(../img/vinyl_right.png) no-repeat left top;
right: 0px;
}


.FL { float: left; }
.FR { float: right; }

.CB { clear: both; }
.CL { clear: left; }
.CR { clear: right; }

.H { display: none; }


Thanks in advance for any help! :D

~ PureD ~

Kor
11-08-2011, 01:58 PM
What precisely do you mean by "not correctly displayed" and "this CSS code would not work"?

You should rather post a link to a test page, for us to be able to sense the whole picture: CSS and HTML altogether.

monlorf
11-08-2011, 02:53 PM
IE and CSS ar not the best of friends dude. you will probably have to find a hack which will result in your page failing to validate

Kor
11-08-2011, 02:55 PM
IE and CSS ar not the best of friends dude. you will probably have to find a hack which will result in your page failing to validate
Er... what? What hack? What are you talking about?

teedoff
11-08-2011, 03:26 PM
IE and CSS ar not the best of friends dude. you will probably have to find a hack which will result in your page failing to validate

lol yes what hack? His css is pretty straight forward. I didn't see any IE non supported styles there.

More likely, its his html thats causing the problem. So again, as Kor asked, please post a link to your test site, or at least ALL you html and css using the # button to wrap code in code tags.

Excavator
11-08-2011, 04:41 PM
Hello PureDarkness,
You don't mention what version IE. I see you are using a min-height setting on .frameworkWrapper and IE6 won't support that.

If that's what's not working then maybe this will help ... http://www.search-this.com/2007/02/05/css-min-height-explained/

A link to the site and a more specific explanation of "an IE issue" will be needed if I've completely missed.

PureDarkness
11-08-2011, 06:12 PM
Thanks for the replies,

It is IE8, I cannot provide with a test page at the moment as I do not have access to the files at the moment and to see it you need to enter login info, but here is the HTML(A bit messy atm, I know):



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<!-- Fav Icon -->
<link rel="shortcut icon" href="res/img/fav.png" />

<!-- CSS -->
<link type="text/css" rel="stylesheet" media="all" href="res/css/null.css" />
<link type="text/css" rel="stylesheet" media="all" href="res/css/style.css" />

<!-- JavaScript -->
<script type="text/javascript" src="res/js/jquery-1.6.4.min.js"></script>

<div class="initFramework">
<div class="frameworkWrapper">
<div class="headerWrapper">
<div class="logo">
<a href="#"><img src="res/img/logo.png" /></a>
</div>
<div class="navigationWrapper">
<ul class="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</div>

<div class="contentWrapper">
<div class="mainPanel FL">
<div class="mainPanelFix">


<div class="box">
<div class="topleft">
<div class="topright">
<div>
<b><h3>Brukerinformasjon:</h3></b>

<p>Velkommen: </br>
<b>admin</b></p></br>
<p>Siste innlogging:</br>
<b>08/11/11 05:56:29</b></p></br>
<p>Fra IP-adresse:</br>
<b>##.##.##.##</b></p></br>
</div>
</div>
</div>
<div class="bottomleft">
<div class="bottomright"> </div>
</div>
</div>

<div class="sexypanels">
<li><a href="?side=hjem">Admin start</a></li>
<li><a href="?side=seksjon">Seksjoner</a></li>
<li><a href="?side=artikler">Artikler</a></li>
<li><a href="system/login/login.php?loggut=1">Logg Ut</a></li>
</div>
</div>
</div>

<div class="mainContent FR">
<div class="mainContentFix">


</div>
</div>

<div class="CB"></div>
</div>

<div class="footerWrapper">
<div class="footerWrapperContent">
&copy; All Rights Reserved
</div>
</div>

</div>


<div class="vinylWrapper">
<div class="leftSideVinyl"></div>
<div class="rightSideVinyl"></div>
</div>
</div>

</body>
</html>


This is the HTML.

teedoff
11-09-2011, 04:27 AM
You still dont specify what your issue is. Shall we just guess? Please detail what you see is wrong.

PureDarkness
11-09-2011, 09:17 AM
All divs are being pushed to the left, I will provide a screenshot.

(Don't worry about the "Brukerinformasjon" box, I haven't finished up with that one atm)

FireFox:

http://i42.tinypic.com/2v17rth.png

IE:

http://i42.tinypic.com/4fxu1y.png

Kor
11-09-2011, 10:11 AM
Please, post a link to a test page. It would be easier for us to see the whole picture at once.

Kor
11-09-2011, 11:26 AM
For the moment: Your Doctype is not correct (even commented), thus the document will run in quirks mode.

You have this:


<!-- DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" -->

while you should have, if you want a transitional HTML 4 (in fact 4.01) Doctype:


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

Excavator
11-09-2011, 11:30 AM
Kor, not sure where you're seeing the <!-- in front of the DocType...

OP does have a missing </head> tag and other errors.
PureDarkness - check out the links about validation in my signature line below.


.

Kor
11-09-2011, 11:57 AM
Kor, not sure where you're seeing the <!-- in front of the DocType...

OP does have a missing </head> tag and other errors.
PureDarkness - check out the links about validation in my signature line below.


.

The OP gave me in the PM the link... He doesn't want to make it public... I saw what I saw on my FireBug (FF) and Developer Tools (IE). Moreover, when opening the document in IE, the Developer Tools jumps automatically to Quirks in its Document Mode tab, which usually indicates the fact that there is a problem with the Doctype. Could be also, HTML errors there, of course...

Excavator
11-09-2011, 04:55 PM
The OP gave me in the PM the link... He doesn't want to make it public...

In otherwords, I was waisting my time working on this because we are provided incomplete and innacurate information. :mad:

Kor
11-09-2011, 05:15 PM
In otherwords, I was waisting my time working on this because we are provided incomplete and innacurate information. :mad:
Not really... In fact the code the OP has posted is the code for a second document, which it is to be read after an entrance document, with a login. Well, that first document has also HTML serious errors, thus it looks like we were talking about different documents :)

Anyway, we agree on something: the OP should check and validate the correctness of the HTML syntax, first at all.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum