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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Divs displaying weirdly in IE.

    Grrr, I really hate IE.

    This all seems to work OK on every browser except IE 6 and 7.

    http://www.offsetfestival.co.uk/offset/

    Any ideas why it's not working or how to make it work?!

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    place this in the css

    Code:
    * {
    margin:0px;
    padding:0px;
    }
    see how that looks in IE, it shouldnt affect anything in FF, good luck!

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Not quite true Frank. Suppose they rely on a list that uses the generic padding and margins associated with the list tags. If you zero out all margins and padding these lists will look wrong, or not as they did before in all browsers. Same with other things such as paragraphs. You should always remember to reset the default margin and padding on tags such as these that rely on them for a decent looking layout.

    You need to do something with that background because at the moment it is not repeating very nicely. As for the problems you are encountering, the first thing you need to do is add a valid doctype to your pages because at the moment IE is rendering in quirksmode and causing all kinds of issues. Look at the thread at the top of this forum for more information.

    Also you use 'top' in your styles without any reference to absolute or relative positioning. As far as I can tell you are using the generic static positioning as you haven't set any others. Change it to 'margin-top' and that should work nicely
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, thanks for the quick reply jc.

    I've just added that and it didn't appear to make a difference on IE. I tried it exactly as your typed and in .body...

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, i know i have run into this problem before, and i know that it has to do with the relative positioning and negative margins, i dont know if you have tried playing with those options at all, i dont have cssvista on this computer but as soon as i get back to work i will look at it, otherwise just play with those options and see what happens, also validate you document and see what it comes up with.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You do have a number of markup errors according to W3 Validator.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks everybody for your help so far.

    I've made some tweeks and it's now XHTML valid by W3 standards, yet the problem is still happening. Here's a screengrab in case anyone doesn't have IE.

    http://www.offsetfestival.co.uk/offset/offset.png

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by jcdevelopment View Post
    ok, i know i have run into this problem before, and i know that it has to do with the relative positioning and negative margins, i dont know if you have tried playing with those options at all, i dont have cssvista on this computer but as soon as i get back to work i will look at it, otherwise just play with those options and see what happens, also validate you document and see what it comes up with.
    CSSVista is always available in my Sources Program.

    http://exitfegs.co.uk/Sources.html


    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm looking into the issue and have found this mention on a blog:

    http://www.oreillynet.com/pub/a/java..._pitfalls.html

    "Incorrect inheritance of position: relative

    Bug: Elements inside a relatively positioned element can incorrectly inherit their position value and their left or right properties (though not their top or bottom properties) from their parent."

    Maybe this is what's causing the problem? My divs are positioned using relative positioning...is there any way for me to pull off that sort of design without my divs being relatively positioned?

  • #10
    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 offfset View Post

    Maybe this is what's causing the problem? My divs are positioned using relative positioning...is there any way for me to pull off that sort of design without my divs being relatively positioned?

    Try using floats and margins instead of positioning. Like this:
    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>// offset festival 2008</title>
    <style type="text/css">
    html, body {
    	background: #d5d6d7 url(http://www.offsetfestival.co.uk/offset/images/background1.jpg);
    	color: #333;
    	text-align: center;
    	font: 62.5&#37; Georgia, "Times New Roman", Times, serif;
    	}
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #maincontent {
    	width: 783px;
    	margin: 0 auto;
    	overflow: auto;
    	background: #FFFFFF;
    }
    	#logo {
    		height:  160px;
    		width: 278px;
    		float: left;
    		margin: 116px 0 0 80px;
    	}
    	#line {
    		height: 234px;
    		width: 1px;
    		float: left;
    		margin: 100px 6px;
    	}
    	#introtext {
    		height: 121px;
    		width: 345px;
    		float: left;
    		font-size: 14px;
    		margin: 116px 0 0 0;
    	}
    	#navbottom {
    		height: 27px;
    		width: 284px;
    		clear: both;
    		text-align: center;
    		margin: 50px auto 0 auto;
    	}
    	.maintext2 {
    		font-size: 14px;
    		color: #333333;
    	}
    </style>
    </head>
    <body>
    <div id="maincontent">
        <div id="logo"><img src="2008_files/offsetlogo.gif" alt="Offset Festival" height="160" width="278" /></div>
        	<div id="line"><img src="2008_files/indexline.gif" alt="Offset Festival" height="234" width="1" /></div>
                <div id="introtext">
                    <p class="maintext">
                        <a class="blue" href="#pictures">&nbsp;Offset&nbsp;</a>
                        is a brand new festival from the team that brought you the TMF Rock
                        Festival. Launching in 2008, the festival will take place in a
                        beautiful forest location just 30 minutes from London. Join the 
                        <a class="blue" href="#mailinglist">&nbsp;mailing list&nbsp;</a> 
                        now for full information.
                    </p>
                </div>
        <div id="navbottom">
          <p class="maintext2"><a class="blue" href="#pictures">&nbsp;Pictures&nbsp;</a> | <a class="blue" href="#mailinglist">&nbsp;Mailing List&nbsp;</a> | <a class="blue" href="#contactus">&nbsp;Contact Us&nbsp;</a></p>
        </div>
    <!--end maincontent--></div>
    </body>
    </html>
    The validator still finds a few things wrong with that.
    Last edited by Excavator; 01-09-2008 at 05:52 PM.
    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


  •  

    Posting Permissions

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