Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Norway
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Page not correctly displayed in IE, CSS help requested.

    Hello everyone,

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

    Code:
    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!

    ~ PureD ~

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by monlorf View Post
    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?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by monlorf View Post
    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.
    Teed

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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/0...ght-explained/

    A link to the site and a more specific explanation of "an IE issue" will be needed if I've completely missed.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Norway
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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):

    Code:
    <!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.

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You still dont specify what your issue is. Shall we just guess? Please detail what you see is wrong.
    Teed

  • #9
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Norway
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:



    IE:


  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Please, post a link to a test page. It would be easier for us to see the whole picture at once.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    For the moment: Your Doctype is not correct (even commented), thus the document will run in quirks mode.

    You have this:
    Code:
    <!-- 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:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.


    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Excavator View Post
    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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Kor View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Excavator View Post
    In otherwords, I was waisting my time working on this because we are provided incomplete and innacurate information.
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •