I'm having a few problems with some css/html code. The code isn't looking to bad in firefox(although it needs moving up the page a bit) but in internet explorer it looks very silly.

I think i have mucked up the divs somewhere but can't find it for the life of me. Any help will be much appreciated.

css

/* CSS Document */
body {
	background-image: url(graphics/sect-car-background.gif);
}
#nav {
	float: left;
	margin: 0px;
	border: 0px;
	width: 15%;
	

		}

	
	
	#content2 {
	float: left; 
	margin: 16%;
	border: 0px ;
	width: 50%;
	display: inline;
	
			}

	
	/* everything above is for colums */
	img {border: 1px solid; color:#000000 }
/* puts a black border round the images */
	
	p {font:"Trebuchet MS", Verdana, Arial; size:12px}
/*P{margin: 0px 90px 0px 100px; }*/

a:link{font-family:"Trebuchet MS", Verdana, Arial; size:12px color:#F5C0F7; text-decoration:none;} a:visited{font-family:"Trebuchet MS", Verdana, Arial; size:12px color:#C00099; text-decoration:none;}
a:hover{font-family:"Trebuchet MS", Verdana, Arial; size:12px color:#C00099; text-decoration:none; cursor:pointer}

and now the html.

<!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>H&amp;R Vehicle Hire</title>
<link rel="stylesheet" type="text/css" href="hrcars.css"/>
</head>
<body>
<div id="nav">
<a href="home.html"><img src="graphics/logo copy.jpg" alt="H&amp;R Vehicle Hire Logo" border="0" /></a>
<img src="graphics/nav-bar-copy150.jpg" width="195" /></div>
</div>
<div id="content2">
  <p><img src="graphics/navbarfinal copy.jpg" alt="top naviagtion bar" width="650" height="185" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="3,-1,215,186" href="weddings.html" />
<area shape="rect" coords="215,2,419,180" href="limo.html" />
<area shape="rect" coords="418,-1,649,187" href="classics.html" />
</map></p>
  <p><img src="graphics/welcome.gif" alt="Welcome" width="106" height="30" style="border:0px;/></p>
  <p>&nbsp;</p>
  <p>
    <map name="Map" id="Map">
      <area shape="rect" coords="1,1,220,186" href="weddings.html" />
  </p>
  <p>Welcome To H&amp;R Vehicle Hire. Weather you require a vehicle for a wedding a night out on the town are merely feel like driving a classic car for the day we are sure to have the right vehicle for you. With over 20 years experience in the idustry you can be sure that all our vehicle are of a high standard be it a steam powered vehicle or one of our state of the art limosuines.</p>
  <p>&nbsp;</p>
  <table width="568" border="0" align="center">
    <tr>
      <td width="202"><img src="graphics/carrige200px.jpg" alt="One of the carriges availible for hire from h&amp;R vehicle hire" width="200" height="132" /></td>
      <td width="150"><div align="center"></div></td>
      <td width="202"><img src="graphics/limo200px.jpg" alt="one of the limos availible to hire" width="200" height="126" /></td>
    </tr>
  </table>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p>
    <area shape="rect" coords="211,-1,421,185" href="limo.html" />
    <area shape="rect" coords="421,2,650,185" href="classics.html" />
    </map>
  </p>
</div>


</body>
</html>

Recommended Answers

All 3 Replies

i think instead of div id="nav" for example you should go back into the css and make it a class

.nav {
	float: left;
	margin: 0px;
	border: 0px;
	width: 15%;
	}

<div class="nav">klkjlljklklklklklklklksdksldkslskdlsk</div>

try that and see wat happens.

HEY! :mrgreen:
I NEED HELP WITH MY DIV CODE FOR MYSPACE (SUPPLIED BY PANICKED LAYOUTS) I WANT TO
1) CENTER THIS LAYOUT IF POSSIBLE
2) ADD A SIDE COLUMN BESIDE THE MAIN DIV

CAN ANYONE HELP ME OUT :-| . the code is below

---------------------------------------------------------------------------------
ABOUT ME SECTION CODE

<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
.btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font,div table tr td form {
visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
td td object {position:absolute; left: 0px; top:0px; display:block;}
.PANICKED COMMENT { this is where you control the position of the music player. }
td td object {position:absolute; left: 0px; top:0px; display:block;}
body {
background-image: url("http://i44.photobucket.com/albums/f25/panicked00/bgms.jpg");
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
background-color: 384E46;
color: 2B270A;
scrollbar-arrow-color: 451817;
scrollbar-track-color: 384E46;
scrollbar-face-color:5A7068;
scrollbar-highlight-color: 9FBBB5;
scrollbar-3dlight-color: 748F85;
scrollbar-shadow-color: 384E46;
scrollbar-darkshadow-color: 1E2F29;}
td, .text, div, input {
font: normal 10px trebuchet ms!important;
color: 2B270A!important;}
.headtext1 {
font: bold 11px trebuchet ms;
letter-spacing: 1px;
text-align: left;
color:AD8264;
background-color: 5C0E0E;
border-top:1px solid;
border-bottom: 1px solid;
border-left: 0px solid;
border-right: 0px solid;
border-color: 211E08;
display: block;}
.headtext2 {
font: bold 11px trebuchet ms;
letter-spacing: 1px;
text-align: right;
color:758F85;
background-color: 40594A;
border-top:1px solid;
border-bottom: 1px solid;
border-left: 0px solid;
border-right: 0px solid;
border-color:211E08;
display: block;}
b, bold, strong {font: bold 12px trebuchet ms!important; color:6E5127!important;}
i, em, italic {font: normal 9px trebuchet ms!important; color:5C0E0E!important;}
a {font: normal 10px trebuchet ms!important; text-decoration: underline!important; color:6E0106!important;}
a:hover {font: normal 10px trebuchet ms!important; text-decoration: none!important; color: 350102!important; cursor: crosshair;}
a.van:link, a.van:visited, a.van:active {
text-decoration: none!important;
font-family:trebuchet ms;
text-align: right;
font-style:normal;
font-size:10px;
line-height:10px;
color: 93936E!important;
background-color:C0C09E;
border-left: 8px solid;
border-color: 851B0E!important;
cursor: default;
display: block;
margin-right: 1px;
margin-bottom: 0em;
padding: 0px;}
a.van:hover {
text-decoration: none!important;
font-family:trebuchet ms;
text-align: right;
font-style:normal;
font-size:10px;
line-height:10px;
color: 71653C!important;
background-color:B8AA7D;
border-left: 8px solid;
border-color: 5D0808!important;
cursor: default;
display: block;
margin-right: 1px;
margin-bottom: 0em;
padding: 0px;}
textarea.pnckdbox {
color: AFC2BB;
font-family: Trebuchet MS;
font-size: 10px;
text-transform: none!important;
font-weight: normal;
letter-spacing: 0px;
text-align: left;
line-height: 9px;
height: 55px;
width: 340px;
border-color: 384E46;
border-style: solid;
border-width: 2px;
background-color: 59726B;
overflow: auto;}
input.pnckdcom {
color: 6F8D84!important;
font-family: trebuchet MS;
font-size: 10px;
text-transform: none!important;
font-weight: normal;
letter-spacing: 0px;
text-align: center;
line-height: 10px;
background-color: 384E46;
height: auto;
width: auto;
border-color: 211E08;
border-width: 1px;
border-style: solid;}
.lrgdiv {
background-color: transparent;
color: 000000;
border: 0px solid;
border-color: 000000;
width: 4px;
height: 500px;
overflow: auto;
position: absolute;
z-index: 2;
left: 0%; top: 0%;
margin-left: 2px;
margin-top: 500px;
visibility: visible;}
.imgdiv {
background-color: transparent;
color: 2B270A;
border: 0px solid;
border-color: 384E46;
width: auto; height: auto;
overflow: visible;
position: absolute;
z-index: 7;
left: 0%; top: 0%;
margin-left: 10px;
margin-top: 125px;
text-align: left;
visibility: visible;}
.maindiv {
background-color: AA9E6E;
text-align: left;
width: 400px;
height: auto;
border: 5px solid;
border-color: 211E08;
margin-top: 617px;
margin-left: 58px;
visibility: visible;
position: absolute;
left: 0%; top: 0%;
overflow: visible;
z-index:6;
padding: 0px;}
.sidediv {
background-color: 5C726A;
border: 3px solid;
border-color: 211E08;
font-size: 9px!important;
width: 265px;
height: auto;
margin-top: 135px;
margin-left: 560px;
z-index:9;
text-align: left;
padding: 0px;
visibility: visible;
position: absolute;
left: 0%; top: 0%;
overflow: visible; }
</style>

-------------------------------------------------------------------------------
I'D LIKE TO MEET SECTION OF CODE

<div class="imgdiv">
<img src="<A href="http://i44.photobucket.com/albums/f25/panicked00/crutch.jpg"></div">http://i44.photobucket.com/albums/f25/panicked00/crutch.jpg"></div>
<div class="maindiv">
<span class="headtext1">Briefly...</span>
<b>name:</b> your name<br>
<b>age:</b> your age<br>
<b>gender:</b> your gender<br>
<b>location:</b> your location<br>
<b>status:</b> your status<br>
<b>job:</b> your occupation<br>
<span class="headtext1">Detailed...</span>
<style>REPLACE THE "USERIMG" URL WITH YOUR PHOTO'S URL</style>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=YOUR FRIEND ID"><img src="http://i44.photobucket.com/albums/f25/panicked00/DIVS/NEW/userimg.jpg" align="left" border="0" width="150px"></a>
Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here.
<span class="headtext1">Comment...</span>
<center><form method="post" action="<A href="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input">http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="YOUR FRIEND ID" type="hidden"> <textarea name="f_comments" class="pnckdbox">i will sing your fears...if you sing my neurosis...</textarea><br /><input type="submit" value="sing." class="pnckdcom"> <input type="reset" value="back out now." class="pnckdcom"></form></center>
<span class="headtext1">Darlings...</span>
<center>
<style>REPLACE THE "FRIENDIMG" URL WITH YOUR FRIEND'S PHOTO URL</style>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f25/panicked00/DIVS/NEW/friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f25/panicked00/DIVS/NEW/friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f25/panicked00/DIVS/NEW/friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f25/panicked00/DIVS/NEW/friendimg.jpg" border="0" width="90px"></a>
<br>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f25/panicked00/DIVS/NEW/friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f25/panicked00/DIVS/NEW/friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f25/panicked00/DIVS/NEW/friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f25/panicked00/DIVS/NEW/friendimg.jpg" border="0" width="90px"></a>
</center>
<span class="headtext1">Contacting...</span>
This is where you can add your instant messenger screen names and any email addresses you'd like people to know.
<span class="headtext1">Your Title...</span>
You can change the title for this section and add what you want here. Make it your own.
<span class="headtext1">Your Title...</span>
You can change the title for this section and add what you want here. Make it your own.
</div><div class="sidediv">
<span class="headtext2">Navigation</span>
<a class="van" href="<A href="http://home.myspace.com/index.cfm?fuseaction=user">home</a">http://home.myspace.com/index.cfm?fuseaction=user">home</a>
<a class="van" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=YOUR FRIEND ID">pictures</a>
<a class="van" href="http://vids.myspace.com/index.cfm?fuseaction=vids.showvids&friendID=YOUR FRIEND ID">videos</a>
<a class="van" href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=YOUR FRIEND ID">message</a>
<a class="van" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=YOUR FRIEND ID">add friend</a>
<a class="van" href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=YOUR FRIEND ID">view blog</a>
<a class="van" href="http://home.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=YOUR FRIEND ID">view friends</a>
<a class="van" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=YOUR FRIEND ID">view comments</a>
<a class="van" href="http://mail.myspace.com/index.cfm?fuseaction=mail.forward&friendID=YOUR FRIEND ID&f=forwardprofile">forward</a>
<a class="van" href="http://collect.myspace.com/index.cfm?fuseaction=user.addToFavorite&friendID=YOUR FRIEND ID&public=0">favourite</a>
<a class="van" href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=YOUR FRIEND ID">block</a>
<span class="headtext2">Adores...</span>
This is where you get to list everything that makes you smile, giddy, happy, etc. Whatever you absolutely adore.
<span class="headtext2">Loathes...</span>
This is a space reserved for anything that drives you crazy, anything you cannot stand. General dislikes and outright hates.
<span class="headtext2">Sounds...</span>
List all or just some of the music you enjoy.
<span class="headtext2">Pages...</span>
Tell everyone what you enjoy reading.
<span class="headtext2">Films...</span>
Think of all your favourite films. And list them here for the world to see.

<style>DO NOT EDIT ANYTHING BELOW THIS LINE DO NOT EDIT ANYTHING BELOW THIS LINE.</style>
<span class="headtext1">Layout...</span><center>Layout created by <a target="_blank" href="<A href="http://panicked.nuclearcentury.com">Panicked!!</a>.</center">http://panicked.nuclearcentury.com">Panicked!!</a>.</center>
</center></div>

-------------------------------------------------------------------------------

THANKS GUYS :cheesy:

I see several errors:

1. The style tags go in the head part of the code, not the body. Your invalid use may be confusing browsers.

2. Something is very wrong with the second line in the code section. The quotes are mismatched.

In addition, the div method of making columns falls apart if the width of the combined columns becomes wider than the browser window.

Note that IE calculates the width of an object in a different way than most other browsers. Widths which add to 100 percent in some browsers add to 104 percent or 96 percent in other browsers, because some browsers include borders and padding when setting total width, while others exclude them.

Believe it or not, tables still do a better job.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.