HTML web page help

Associate
Joined
14 Sep 2008
Posts
2,485
Location
Portsmouth/Salisbury
Doing my corsework, need to design a page about myself as part of it, and need some help.

Constructed my page's basic structure, and it works in firefox, but completely messes up in I.E.
This is the page I am on about.
The frame completely messes up in I.E, but works on the index page here, and they both use the same structure.

Any help in getting it to look proper in I.E would be much appreciated (and any other hints on what to do).
 
Because that's the reason why IE screws up the layout. Oh and btw, sort out the access on your website :p
 
Yeah, lose the tables. I recently made a website for an AS LEVEL project and it offered me more custimizability :) Good luck
 
what is you or the uni course that said to use tables? are you hoping for a good grade? i'm being serious btw, i am not sure exactly which uni you are at so maybe tables for some random reason is still accepted but i would have thought you'd get a low grade using tables?
 
Tables aren't neccesarry, I may as wel take them out, I wasn't planning to leave them visible anyway.

What would be the best way to keep the border images?
 
Bit scrappy but it'll do. Only a 15min jobby so will need some work but that is roughly what your aiming towards. Obviously you'll need to link to the css some how, drop it in one of the existing files or create a new one.


CSS:

Code:
* {

margin-top: 10px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;

}


#wrapcontainer {

margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
width: 1074px;
height: 956px;
padding: 0px;
border: 2px outset gray;


}
#topbar {


margin: 3px;
width: 1058;
height: 82px;
padding: 0px;
border: 1px outset gray;
background: url(top.jpg) no-repeat center;


}

#leftbar {

float: left;
margin: 3px;
width: 30px;
height: 800px;
padding: 0px;
border: 1px outset gray;
background: url(left.jpg) no-repeat center;

}



#topmiddlebar {
float: left;
margin: 3px;
width: 984px;
height: 10%;
padding: 0px;

border: 1px outset gray;
vertical-align: bottom;



}

#middlebar {

float: left;
margin: 3px;
width: 984px;
height: 697px;
padding: 0px;

border: 1px outset gray;



}


#rightbar {

float: right;
margin: 3px;
width: 30px;
height: 800px;
padding: 0px;
border: 1px outset gray;
background: url(right.jpg) no-repeat center;

}


#bottombar {

float: left;
margin: 3px;
width: 1058px;
height: 50px;
padding: 0px;
border: 1px outset gray;
background: url(bottom.jpg) no-repeat center;

}



HTML:

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" xml:lang="en" lang="en"> 
 
<head> 
<title> 
Hobbies and interests of Mat
</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
 

<link rel="stylesheet" type="text/css" href="mat.css" />
<link rel="stylesheet" type="text/css" href="gallery.css" /> 

<!--gallery styles--> 
<link rel="stylesheet" type="text/css" href="gallery.css" /> 
<!--end of gallery styles--> 
 
</head> 

<body> 
<map name="mat" id="mat"> 
  <area shape="rect" coords="0, 0, 147, 300" href="mat.html" alt="mat"/> 
  <area shape="rect" coords="147, 0, 300, 225" href="notingroup.html" alt="chris"/> 
</map> 
 

		<div id="wrapcontainer">
 
 
			<div id="topbar">
			
			</div> <!-- topbar -->
 
				<div id="leftbar">
			
				</div> <!-- topbar -->
				
				<div id="rightbar">
			
				</div> <!-- topbar -->
				
				<div id="topmiddlebar">
			
			<p style="">Going out with people has been one of my favourite things to do since I arrived at university.<br/> 
The following pictures show a slender amount of the nights that I've been out and either taken a camera, or remembered I have my phone on me: </p> 
			
			
				</div> <!-- topbar -->
				
				<div id="middlebar">
			
			
			<!-- start of gallery --> 
<div id="matsgallery"> 
<ul> 
<li> 
  <a class="gallery slide1"> 
    <span> 
      <img src="party1.jpg" alt="Tony and Ed"  /><br />Tony and Ed<br />Ed and Tony "predrinking".
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide3"> 
    <span> 
      <img src="party3.jpg" alt="Tony and I" /><br />Tony and I<br />Always have to stretch to take photos of yourself!
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide4"> 
    <span> 
      <img src="party4.jpg" alt="Tony and Ed" /><br />Tony and Ed<br />Tony and Ed, getting a bit of sit down time.
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide5"> 
    <span> 
      <img src="party5.jpg" alt="Chris and I"  /><br />Chris and I<br />Starting to look a little worse for the wear!
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide6"> 
    <span> 
      <img src="party6.jpg" alt="Chris Tom and I"  /><br />Chris and I and I<br />Everyone always pitches in for the group photos
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide7"> 
    <span> 
      <img src="party7.jpg" alt="Chris and Ed"  /><br />Chris and Ed<br />There's always one that get a little carried away...
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide8"> 
    <span> 
      <img src="party8.jpg" alt="Tony and I"  /><br />Tony and I<br />Good songs always seem to have this effect.
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide9"> 
    <span> 
      <img src="party9.jpg" alt="Tony and Chris" /><br />Tony and Chris<br />We all need a bit of laid back time.
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide10"> 
  <span> 
    <img src="party10.jpg" alt="Group" /><br />The Group<br />Looks like someone hot was behind the camera!!
      </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide11"> 
    <span> 
      <img src="party11.jpg" alt="Group2" /><br />The Group again<br />Glow paint night, very fun.
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide12"> 
    <span> 
      <img src="party12.jpg" alt="Before Clubbing" /><br />Before Clubbing<br />Everyone agrees, Chris has awesome muscles.
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide13"> 
    <span> 
      <img src="party13.jpg" alt="Yo" /><br />Relaxed!<br />Trying to lay back and catch some kip I think!
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide14"> 
    <span> 
      <img src="party14.jpg" alt="woohoo" /><br />Clearly having a good time<br />A good song must have come on...
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide15"> 
    <span> 
      <img src="party15.jpg" alt="excited" /><br />A VERY good time!<br />Followed by something even better!
    </span> 
  </a> 
</li> 
 
<li> 
  <a class="gallery slide16"> 
    <span> 
      <img src="party16.jpg" alt="tired" /><br />Clubbing takes its toll<br />We all need a rest at some point...
    </span> 
  </a> 
</li> 
</ul> 
</div> 
<!-- end of gallery --> 
			
			
			
			
			
			
			
			
			
			
			
			
				</div> <!-- topbar -->
				
				

 
 
 
			<div id="bottombar">
			
			</div> <!-- topbar -->
 
		</div> <!-- container -->
 

 
 </body> 

</html>
 
Well I have updated various things, thank for the div help.

Any help on how to get the button which pops up and shows the specs to look the right size?
 
Remove the style that has been applied to it:

<input type="button" value="Click me for specs" onclick="disp_alert()" style="height: 1.4em;"/>
 
Back
Top Bottom