...

View Full Version : IE7 and cross browser



blacktears
12-19-2006, 08:45 PM
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


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


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


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


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.

_Aerospace_Eng_
12-19-2006, 10:31 PM
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.

blacktears
12-19-2006, 10:54 PM
This is how it's supposed to look:

http://www.rainstormphotography.co.uk/testing/supposedtolook.jpg

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

http://www.rainstormphotography.co.uk/testing/IEwithFF.jpg

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

http://www.rainstormphotography.co.uk/testing/IEwithIE7.jpg

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

_Aerospace_Eng_
12-20-2006, 12:13 AM
We still need a link since we don't have your images.

blacktears
12-20-2006, 07:55 PM
Righty,

FF working (in FF)

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

coding for IE6

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

Let me know if those are what you need.


Cheers :D

_Aerospace_Eng_
12-21-2006, 09:28 PM
Get rid of this line

<?xml version="1.0"?>
Then see if IE6 plays better.

blacktears
12-23-2006, 10:28 PM
I can't seem to find that bit of code in the html doc, which line is it on?

Becka

_Aerospace_Eng_
12-24-2006, 06:40 AM
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.

VIPStephan
12-24-2006, 12:20 PM
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:

Create design
Structure the information (without styles)
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. :)

blacktears
12-25-2006, 08:18 PM
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

VIPStephan
12-25-2006, 10:07 PM
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 (http://www.yourhtmlsource.com/stylesheets/csslayout.html#csspositioning) 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.

blacktears
01-02-2007, 02:09 PM
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

blacktears
01-02-2007, 06:00 PM
I am trying the coding again from scratch. I will post when I have done it :D

Thanks for your help guys :D

Becka



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum