site is great in safari & firefox, but not IE7...

algoodbody · #1 Jul 5th, 2007, 13:45

Hi !,

I'm having real problems....!!!

I've made my site in dreamweaver, on a mac. (goodbodycreate.com) But, although looking perfect in safari and firefox, it's all over the place when viewed in Internet Explorer. Help! Please have a look at my site and let me know what my problems are.

All the best, Al.

delusion · #2 Jul 5th, 2007, 14:13

Quote:

Originally Posted by algoodbody

Hi !,

I'm having real problems....!!!

I've made my site in dreamweaver, on a mac. (goodbodycreate.com) But, although looking perfect in safari and firefox, it's all over the place when viewed in Internet Explorer. Help! Please have a look at my site and let me know what my problems are.

All the best, Al.

can you paste some code?

algoodbody · #3 Jul 5th, 2007, 14:57

Here is the code for a page. Each page is the same, except the images and links are different...

Also, if I'm wanting to continue with web design, is it worth investing in a pc instead of a mac to do the work on, or is there no difference?

Code:

Code: Select all

<!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=ISO-8859-1" />
<title>Untitled Document</title>

<style>

body{
padding:0;
margin:0;
background:#fff;
font-family: Helvetica, Arial, sans-serif;
color:#333333;
font-size:small;
}

a{
color:#333333;
text-decoration:none;
}

#wrapper{
margin: 15px 0 0 0;
 width:800px;
 position: relative;
 left: 50%;
 margin-left: -400px;
  }

#header ul{
margin:0;
padding:0;
list-style:none;
}

#header li{
font-size:280%;
text-transform:uppercase;
display:inline;
}

#home a:hover{
color:#999999;
}

#port a{
color:#009933;
}

#port a:hover{color:#FF9933;
}

#misc a:hover{color:#FFCC33;
} 

#contact a:hover{
color:#FFFF33;
}

#misc a{
color:#00CC33;
}

#contact a{
color:#00FF33;
}

#content{
background:url(img/Truman.jpg) no-repeat;
min-height: 503px;
}

#transport ul{
margin: 10;
padding: 0;
list-style-type: none;
text-decoration: none;
text-align:center; 
}

#transport li{
font-size:170%;
text-transform:uppercase;
display:inline;
}

#left img{
border:none;}

#right img{
border:none;

#command a{
margin: 5;

</style>


</head>

<body>
<div id="wrapper">
  <div id="header">
    <ul>
      <li id="home"><a href="index.html">algoodbody</a></li>
      <li id="port"><a href="PortfolioPage.html">portfolio</a></li>
      <li id="misc"><a href="MiscPage.html">misc</a></li>
      <li id="contact"><a href="ContactPage.html">contact</a></li>
      
    </ul>
  </div>
 
  <div id="content"> 
  </div>
  
  
   <div id="transport">
    <body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33" valign="middle"><a href="PortfolioPage.html"><img src="img/LeftArrow.jpg" width="33" height="39" border="0"></a></td>
    <td width="690" align="center" valign="middle"><h2><strong>CLICK LEFT AND RIGHT ARROWS TO MOVE THROUGH PORTFOLIO</strong></h2></td>
    <td width="33" valign="middle"><a href="Truman02.html"><img src="img/RightArrow.jpg" width="33" height="39" border="0"></a></td>
  </tr>
</table>

  </div>
</div>
</body>
</html>

algoodbody · #4 Jul 5th, 2007, 16:11

Hello again !,

Any ideas as to why my code doesn't work in IE7?

My head is spinning!

Best, Al

Lchad · #5 Jul 5th, 2007, 18:49

Hi Al:
Do you have the site online so we can visually see what the problem is?

If not, can you explain the problem? Looking at the code would be like looking for a needle in a hay stack.

algoodbody · #6 Jul 10th, 2007, 15:56

Hello !

My site is called 'goodbodycreate.com' I have created it using a very high resolution screen, so am attempting to reduce the size of it, so that when viewed on a normal screen, the whole page is visible. However, I still have this problem with it being fine in FireFox and Safari, but all over the place in Explorer...

I hope you can give me some idea as to what my problems could be.

Thanks and best wishes, I'm finding your forum invaluable to my learning of web standards.

Al

Lchad · #7 Jul 10th, 2007, 16:24

The first thing I noticed is you have extra <body>and </header>code in the html. Delete the ones in red below.

Code: Select all

<body>
<div id="wrapper">
  <div id="header">
    <ul>
      <li id="home"><a href="Index.html">algoodbody</a></li>
      <li id="port"><a href="PortfolioPage.html">portfolio</a></li>
      <li id="misc"><a href="MiscPage.html">misc</a></li>
      <li id="contact"><a href="ContactPage.html">contact</a></li>
    </ul>
  </div>
  

  </body>
  </head>

<div id="content">  

<body>
<img src="img/MiscPage.html" width="800" height="536" border="0" usemap="#Map" />

<map name="Map" id="Map"/>
<area shape="rect" coords="531,357,759,511" href="Urge01.html" />
<area shape="rect" coords="286,357,515,511" href="Butter01.html" />
<area shape="rect" coords="43,358,272,510" href="Mukky.html" />
<area shape="rect" coords="531,191,759,341" href="Fields02.html" />
<area shape="rect" coords="285,191,514,342" href="What02.html" />
<area shape="rect" coords="44,192,271,341" href="Crack.html" />
<area shape="rect" coords="530,23,757,179" href="May01.html"/>
<area shape="rect" coords="285,23,514,178" href="Pink Twist.html" />
<area shape="rect" coords="45,24,272,178" href="Explode.html" />   
  


</map>
</body>
</html

Also Close the </html> code in orange.
See what that does. Then we can see what we need to do with the css.

karinne · #8 Jul 10th, 2007, 16:47

And you need to close your </map>

Running your site through the W3 Validator would have found you those errors.

algoodbody · #9 Jul 10th, 2007, 16:57

Thanks!

Will do.

algoodbody · #10 Jul 10th, 2007, 17:06

Hi!,
I have done what you suggested, but have not had any luck with it so far, however the code (in red) is wrong for some reason, as it is showing up as black in dreamweaver's code view. I guess this could have something to do with it....?

I created the hotspots using design mode.

Thanks for helping..!

Al

#command a{
margin: 5;

</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<ul>
<li id="home"><a href="Index.html">algoodbody</a></li>
<li id="port"><a href="PortfolioPage.html">portfolio</a></li>
<li id="misc"><a href="MiscPage.html">misc</a></li>
<li id="contact"><a href="ContactPage.html">contact</a></li>
</ul>
</div>

<div id="content">

<img src="img/PortfolioPage.html" width="800" height="536" border="0" usemap="#Map" />

<map name="Map" id="Map"
<area shape="rect" coords="531,357,759,511" href="Shaun03.html" />

<area shape="rect" coords="286,357,515,511" href="4Text.html" />

<area shape="rect" coords="43,358,272,510" href="Truman.html" />

<area shape="rect" coords="531,191,759,341" href="SwissBook01.html" />

<area shape="rect" coords="285,191,514,342" href="Glob03.html" />

<area shape="rect" coords="44,192,271,341" href="Doll02.html" />

<area shape="rect" coords="530,23,757,179" href="SBook02.html" />

<area shape="rect" coords="285,23,514,178" href="Tram01.html" />

<area shape="rect" coords="45,24,272,178" href="TraillPage.html" />

</map>
</body>
</html>

karinne · #11 Jul 10th, 2007, 17:11

What's this?!

Code: Select all

#wrapper{
margin: 15px 0 0 0;
 width:800px;
 position: relative;
 left: 50%;
 margin-left: -400px;
  }

If you want to center a div you should be using the margin: auto; - see How to center your site horizontally

There's shouldn't be any position: relative in there.

You haven't ran this in the validator have you? 'Cause you would see that you need to close a few </div>

algoodbody · #12 Jul 10th, 2007, 17:23

That is code that I was working on with a web designer, who suggested that was the best way to center my site....

#wrapper{
margin: 15px 0 0 0;
width:800px;
position: relative;
left: 50%;
margin-left: -400px;
}

I'll follow the 'center horizontally' you have suggested and let you know. Also - How do I run the site checker ? - Then, hopefully I can make corrections which you don't need to tell me..

Many thanks..

Back in a bit,

Al

karinne · #13 Jul 10th, 2007, 17:24

Just do to the link, put you url and click on check!?

algoodbody · #14 Jul 10th, 2007, 17:44

That's great!

Things are beginning to work!! Followed the center your site horizontally and to my delight it's worked!

Will I need to go through every page within my site and make these changes seperately, or is there some sneaky way of applying code changes to every page, without having to start fresh, thereby having to re-link and re-load urls etc?

Thanks!

karinne · #15 Jul 10th, 2007, 17:57

You should start by putting your stylesheet external instead of internal like you have and just link to it. That way ... you make one change in the CSS and it reflects on every page that links to it

Integrating CSS in your website

Lchad · #16 Jul 10th, 2007, 21:48

Not sure where you are in fixing this but I've got a couple of corrections for you.

Code: Select all

<body>
 <div id="wrapper">

  <div id="header">

    <ul>

      <li id="home"><a href="Index.html">algoodbody</a></li>

      <li id="port"><a href="PortfolioPage.html">portfolio</a></li>

      <li id="misc"><a href="MiscPage.html">misc</a></li>

      <li id="contact"><a href="ContactPage.html">contact</a></li>

    </ul>

  </div>
 
 
 
 <div id="content">  
 
 

<img src="img/PortfolioPage.html" width="800" height="536" border="0" usemap="#Map" />
 

<map name="Map" id="Map"

<area shape="rect" coords="531,357,759,511" href="Shaun03.html" />
 

<area shape="rect" coords="286,357,515,511" href="4Text.html" />
 

<area shape="rect" coords="43,358,272,510" href="Truman.html" />
 

<area shape="rect" coords="531,191,759,341" href="SwissBook01.html" />
 

<area shape="rect" coords="285,191,514,342" href="Glob03.html" />
 

<area shape="rect" coords="44,192,271,341" href="Doll02.html" />
 

<area shape="rect" coords="530,23,757,179" href="SBook02.html" />
 

<area shape="rect" coords="285,23,514,178" href="Tram01.html" />
 

<area shape="rect" coords="45,24,272,178" href="TraillPage.html" />
 
 
 
 
 

</map>
</div>
</div>
</body>

</html>

Purple div closes the wrapper.
Green div closes the content div.

algoodbody · #17 Jul 10th, 2007, 22:08

Thanks Loads,

I've corrected much of the code. And created a seperate stylesheet.css page. I've tested things and they seem to be working very well.

I've also resized the images and their files, so that loading each page will be quicker.

I'll let you know how things go tomorrow....

Thank you all for your help. I am beginning to understand the basics much better now.

Al

		Webforumz.com > Main Forums > Design Your Website > Starting Out
site is great in safari & firefox, but not IE7...