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 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE7 and cross browser

    I have just upgraded to IE7 after working out the html for firefox and IE6, now I find that neither of them look right on IE 7 I have no idea how to get my page looking right on all three can anyone help me?

    This is my firefox HTML

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd"><html>
    
    <head>
    
    
      <meta name="author"
            content="Becka Dawson">
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Keywords" content="chris, chris jennings, jennings, music, stoke-on-trent, hanley, stoke, north, studio, music, depeche mode, composer, sound designer,">
    <meta name="Title" content="Rainstorm - Photography">
    <meta name="Description" content="Rainstorm v2.0 is an online portfolio for Rebecca Dawson's creative exploration within photography and visual art. ">
    
    
    <title>Chris Jennings Music</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
    </head>
    
    <body>
    
    <div id="wrap">
    <div id="headshot">
    <img src="images/headshot.jpg" alt="Headshot">
    </div>
    <div id="metalborder">
    </div>
    
    <div id="middlebackground">
    <ul id="synthbg">
    
    	<li><img src="images/synth1.jpg" alt="synth 1"></li>
    	<li><img src="images/synth2.jpg" alt="synth 2"></li>
    	<li><img src="images/synth3.jpg" alt="synth 3"></li>
    	<li><img src="images/synth4.jpg" alt="synth 4"></li>
    
    
    </ul>
    </div>
    <div id="left">
    
    <ul id="links">
    
    	<li><a href="main.html">HOME</a></li>
    	<li><a href="profile.html">PROFILE</a></li>
    	<li><a href="discography.html">DISCOGRAPHY</a></li>
    	<li><a href="audio.html">AUDIO/VISUAL</a></li>
    	<li><a href="studio.html">STUDIO</a></li>
    	<li><a href="mailto: shangri_la_gypsy@tiscali.co.uk">CONTACT</a></li>
    
    
    </ul>
    
    </div>
    <ul id="textbox1">
    
    	<li>MULTIMEDIA MUSIC</li>
    	<li>FILM SCORES + POST PRODUCTION</li>
    	<li>REMIX + RECORDING PROJECTS</li>
    	<li>CORPORATE ADVERTISING SOUNDTRACKS</li>
    	<li>TV/RADIO JINGLES</li>
    	<li>DIGITAL AUDIO EDITING</li>
    
    
    
    </ul>
    
    <ul id="textbox2">
    
    	<li id="title">CHRIS JENNINGS</li>
    	<li>PRODUCER/DJ</li>
    	<li>SOUND DESIGNER</li>
    	<li>COMPOSER</li>
    	
    
    
    
    </ul>
    <div id="inverted">
    <img src="images/inverted.gif" alt="inverted">
    </div>
    
    <ul id="textbox3">
    
    
    	<li id="title2">CLIENTS</li>
    	<li>BBC</li>
    	<li>ITV</li>
    	<li>Channel 4</li>
    	<li>Sky + Cable TV networks</li>
    	<li>Sony</li>
    	<li>Universal</li>
    	<li>MTV</li>
    	<li>Electronic Arts</li>
    
    
    
    
    
    </ul>
    
    <ul id="copyright">
    
    <li>&copy ALL MUSIC COPYRIGHT OF CHRIS JENNINGS <span id="rightcopy">WEBSITE DESIGN // <a href="http://www.rainstormphotography.co.uk">RAINSTORMPHOTOGRAPHY.CO.UK</a></span></li>
    </ul>
    
    </div>
    
    </body>
    
    </html>
    Firefox CSS

    Code:
    body {
    
    	background: #071E30;
    	color: white;
    
    }
    
    a {text-decoration: none; color: #fff;}
    a:hover {text-decoration: underline;}
    img {border: none;}
    
    #wrap {
    
    	margin-top: 6px;
    	margin-left: 60px;
    	padding: 0px;
    	width: 880px;
    	height: 572px;
    	
    
    
    }
    
    #metalborder {
    
    	margin-top: 10px;
    	margin-left: 519px;
    	position: absolute;
    	z-index: 2;
    	background: url(images/metalborder.jpg);
    	width: 310px;
    	height: 125px;
    
    }
    
    #headshot {
    
    	margin-left: 375px;
    	margin-top: 11px;
    	position: absolute;
    	z-index: 3;
    	height: 140px;
    	width: 100px;
    	
    	
    
    }
    
    #middlebackground {
    
    	margin-top: 15px;
    	margin-left: 130px;
    	width: 650px;
    	height: 570px;
    	background: #7897C2;
    	
    
    }
    
    #synthbg {
    
    	margin-left: -80px;
    	margin-top: -2px;
    	list-style: none;
    	line-height: 10px;
    	height: 570px;
    
    
    }
    
    #synthprofilebg {
    
    	margin-left: -80px;
    	margin-top: -10px;
    	list-style: none;
    	line-height: 10px;
    	height: 570px;
    
    
    }
    
    
    #textbox1 {
    
    	margin-top: -385px;
    	margin-left: 160px;
    	list-style: none;
    	font-family: "century gothic";
    	font-size: 8pt;
    	line-height: 20pt;
    	color: #172333;
    	font-weight: bold;
    
    }
    
    
    #textbox2 {
    
    	margin-top: -159px;
    	margin-left: 450px;
    	list-style: none;
    	font-family: "century gothic";
    	font-size: 8pt;
    	line-height: 20pt;
    	color: #fff;
    	position: absolute;	
    	text-align: right;
    	z-index: 10;
    	
    
    }
    
    #profiletext {
    
    	margin-top: -385px;
    	margin-left: 154px;
    	list-style: none;
    	font-family: "century gothic";
    	font-size: 8pt;
    	line-height: 15pt;
    	color: #172333;
    	font-weight: bold;
    	border: red solid 1px;
    	width: 500px;
    	text-align: center;
    	
    }
    
    
    
    	
    #title {font-family: ethnocentric; font-size: 12pt; color: #172333;}
    #title2 {margin-bottom: 20px; font-weight: bold; font-size: 10pt; color: #172333;}
    
    #inverted {
    
    	margin-top: 20px;
    	margin-left: 174px;
    	postion: absolute;
    	z-index: 7;
    	height: 192px;
    	width: 269px;
    	
    
    }
    
    #textbox3 {
    
    	margin-top: -175px;
    	margin-left: 508px;
    	list-style: none;
    	font-family: "century gothic";
    	font-size: 8pt;
    	line-height: 11pt;
    	color: #fff;
    	position: absolute;	
    	text-align: right;
    	z-index: 10;
    	
    
    }
    
    #left {
    
    
    	margin-top: 0px;
    	margin-left: 0px;
    
    
    }
    
    
    #links {
    
    	margin-top: -396px;
    	margin-left: -40px;
    	list-style: none;
    	float: left;
    	line-height: 60px;
    	position: absolute;
    	z-index: 4;
    	font-family: "century gothic";
    	
    	
    
    
    }
    
    #copyright {
    
    	margin-top: 8px;
    	margin-left: 78px;
    	height: 5px;
    	font-size: 7pt;
    	font-family: "century gothic";
    	list-style: none;
    		
    
    
    
    }
    
    #rightcopy {
    
    	margin-top: 8px;
    	margin-left: 221px;
    	height: 5px;
    	font-size: 7pt;
    	font-family: "century gothic";
    	list-style: none;
    
    
    
    
    }
    
    #copyrightprofile {
    
    	margin-top: 35px;
    	margin-left: 78px;
    	height: 5px;
    	font-size: 7pt;
    	font-family: "century gothic";
    	list-style: none;
    		
    
    
    
    }
    
    #rightcopyprofile {
    
    	margin-top: 12px;
    	margin-left: 221px;
    	height: 5px;
    	font-size: 7pt;
    	font-family: "century gothic";
    	list-style: none;
    
    
    
    
    }
    IE6 HTML

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd"><html>
    
    <head>
    
    
      <meta name="author"
            content="Becka Dawson">
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Keywords" content="chris, chris jennings, jennings, music, stoke-on-trent, hanley, stoke, north, studio, music, depeche mode, composer, sound designer,">
    <meta name="Title" content="Rainstorm - Photography">
    <meta name="Description" content="Rainstorm v2.0 is an online portfolio for Rebecca Dawson's creative exploration within photography and visual art. ">
    
    
    <title>Chris Jennings Music - Profile</title>
    
    <link rel="stylesheet" type="text/css" href="styleIE.css">
    
    </head>
    
    <body>
    
    <div id="wrap">
    	
    <div id="headshot">
    <img src="images/headshot.jpg">
    </div>
    
    <ul id="synthbg">
    
    <li><img src="images/synthprofile1.jpg"></li>
    <li><img src="images/synthprofile2.jpg"></li>
    <li><img src="images/synthprofile3.jpg"></li>
    <li><img src="images/synthprofile4.jpg"></li>
    
    </ul>
    
    <div id="metalborder">
    <img src="images/metalborder.jpg">
    </div>
    
    <div id="left">
    
    <ul id="links">
    
    	<li><a href="main.html">HOME</a></li>
    	<li><a href="profile.html">PROFILE</a></li>
    	<li><a href="discography.html">DISCOGRAPHY</a></li>
    	<li><a href="audio.html">AUDIO/VISUAL</a></li>
    	<li><a href="studio.html">STUDIO</a></li>
    	<li><a href="mailto: shangri_la_gypsy@tiscali.co.uk">CONTACT</a></li>
    
    
    </ul>
    
    </div>
    </div>
    
    
    </body>
    </html>
    IE6 CSS

    Code:
    body {
    
    	background: #071E30;
    	color: white;
    	margin: 0px;
    
    	
    
    }
    
    a {text-decoration: none; color: #fff;}
    a:hover {text-decoration: underline; background: #071E30 }
    img {border: none;}
    
    #wrap {
    
    	margin-top: 13px;
    	margin-left: 75px;
    	padding-top: 0px;
    	width: 600px;
    	height: auto;
    	float: left;
    
    	
    }
    
    
    
    #synthbg {
    
    	margin-left: 0px;
    	margin-top: 0px;
    	list-style: none;
    	height: auto;
    	width: 450px;
    	padding: 0px;
    	float: left;
    	display: block;	
    	position: absolute;
    	z-index: 1;
    	
    	
    	
    	
    
    }
    
    
    #synthbg li {
    
    	height: 10px;
    	text-align: center;
    	line-height:40px;
    	font-size:0;
    	padding-bottom: 0px;
    	
    
    }
    
    #metalborder {
    
    	margin-top: 14px;
    	margin-left: 429px;
    	padding: 0px;
    	position: absolute;
    	z-index: 2;
    	width: 312px;
    	height: 130px;
    	
    
    }
    
    #headshot {
    
    	margin-left: 285px;
    	margin-top: 14px;
    	padding: 0px;
    	position: absolute;
    	z-index: 3;	
    	width: 134px;
    	height: 132px;
    
    }
    
    
    
    #links {
    
    	margin-top: 0px;
    	margin-left: 0px;
    	list-style: none;
    	float: left;
    	line-height: 60px;
    	position: absolute;
    	z-index: 4;
    	font-family: century gothic;
    	font-size: 11pt;
    	
    
    
    }
    
    
    #left {
    
    
    	margin-top: 176px;
    	margin-left: -100px;	
    	position: absolute;
    	z-index: 5;
    
    }
    I am quite confused now I thought I was doing well getting IE 6 to behave now there is a new one....... I have tried the firefox page on IE 7 but it doesn't look right neither does the IE 6 version.
    Last edited by blacktears; 12-19-2006 at 07:51 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I think you are probably overcomplicating things but don't know it yet. Also absolute positioning isn't helping. Since your layout has images in it that we don't have we would need to see a link to your page. Then tell us WHAT is wrong. Saying somethign is wrong doesn't help much. Its not like we know what your page is supposed to look like. Help us help you.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is how it's supposed to look:



    This is how it looks on IE7 using the FF version of code:



    This is how it looks using the code I made for IE6 on IE7:



    I thought that in order to use the z-index you had to use a position tag...?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    We still need a link since we don't have your images.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Righty,

    FF working (in FF)

    http://www.rainstormphotography.co.uk/testing/main.html

    coding for IE6

    http://www.rainstormphotography.co.u...profileie.html

    Let me know if those are what you need.


    Cheers

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Get rid of this line
    Code:
    <?xml version="1.0"?>
    Then see if IE6 plays better.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't seem to find that bit of code in the html doc, which line is it on?

    Becka

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You shouldn't even be using absolute positioning in your layout but because you didn't slice it properly you are stuck doing so. For it to work properly in IE you need to specify left and top values.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    From looking at the page without styles (in Firefox) I can already see that your approach isn't very good. I mean the graphical part is nice but you are still approaching the transformation of the graphic into a website form a graphic artist's point of view.
    Think of the proper structure of the plain information on your site before you start styling it! Look at http://csszengarden.com and view the page(s) without styles. You can get the message even without any images etc. Then compare it to your site and adapt the practices from the CSS Zen Garden.

    Steps to take when creating a website:
    1. Create design
    2. Structure the information (without styles)
    3. Use CSS to style the HTML you've got (no unnecessary markup!)


    I can just repeat it over and over: Clean and well sorted code is easier to style than poorly written markup.
    Good luck.

  • #10
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Righty, I see what you mean with the graphic artists thing. How do I slice the background properly to avoid absolute positioning. And also, I have been told that using the z-index is good, how do I use this while avoiding absolute positioning? I am learning and learning at the moment, I just want to make the best websites that I can really.

    Thanks for your help guys I seriously appreciate it!

    Becka

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    The first thing to know is that for most layouts absolute positioning is abolutely not needed.
    The second thing to know is that absolute positioning actually ain't that bad and is certainly allowed to use. However, if positioning is used it has to be used wisely because it also ain't the cure for everything. Here is a shore explanation on positioning and z-index.

    Your design looks like it's not made to be flexibly adapting to different amounts of content so absolute positioning might be a way to go (you'll need some overflow: auto; for those cells then). In that case you won't need to slice the background image (the links don't count as background so remove them before exporting the PSD, leaving just the blue background colo[u]r). You just apply the entire image as background and position those cells (div elements) over the cell images of the background image.

    I noticed that all of the website designs you posted here are somewhat of the same kind regarding the overall size, meaning that they probably fit your screen nicely when you design them but they aren't very flexible in height when it comes to convert the designs into a working website. You should be aware that most websites are designed in a way that they can expand vertically without breaking the layout and use that knowledge for future designs.

  • #12
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To put it bluntly I am a little confused at the moment, I need to keep the bg pic as a whole and put it in a div on top of the bg colour? I feel a bit out of my depth with creating a site that works across browsers. Well, this one in particular, I'm completely flumoxed with it...

    Becka

  • #13
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am trying the coding again from scratch. I will post when I have done it

    Thanks for your help guys

    Becka


  •  

    Posting Permissions

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