hmmmm whats wrong with this?

djcritch · #1 (**permalink**) Apr 2nd, 2008, 14:35

ok i have layed out my page with divs everywhere but ive got one that is causing me a bitof hassle! and its the one for the main content in firefox it looks sweet but in IE ihave problems it seems to be loading the content after the menu.

Can anyone help me fix this:

I have put it online for you guys to take a look at:

http://www.djc-solutions.co.uk/rcnnew/

code is as follows:

XHTML:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>rcn-oh-southwest.co.uk - Royal College Of Nursing - Occupational Health Nurses Group - South West</title>
 <meta name="Description" content="rcn-oh-southwest.co.uk - Royal College Of Nursing - Occupational Health Nurses Group - South West"/>
 <meta name="Keywords" content="Royal, College, Nursing, South, West, Occupational, Health, Nurses, Group"/>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="top">
  <div id="logo">
   <img src="images/topspacer.png" alt="Top Spacer" />
   <div id="flashlogo">
    
    <object type="application/x-shockwave-flash" data="flash/rcnohsouthwest.swf" width="742" height="100">
    <param name="movie" value="flash/rcnohsouthwest.swf" />
    <img src="images/logo.gif" width="742" height="100" alt="rcn-oh-southwest" />
    </object>
   </div>
  </div>
 </div>
 <div id="header">
  Welcome to The New Look rcn-oh-southwest.co.uk - Royal College Of Nursing - Occupational Health Nurses Group - South West
 </div>
 <div id="main">
  <br />
  <div id="content">
   <div id="cell1">
   </div>
    <div id="cell2">
     <div id="cell4">
      <div id="container">
       <div id="vertmenu">
        <ul>
        <li><a href="#" tabindex="1">Home</a></li>
        <li><a href="#" tabindex="2">About Us</a></li>
        <li><a href="#" tabindex="3">Newsletter</a></li>
        <li><a href="#" tabindex="4">Chairman's Letter</a></li>
        <li><a href="#" tabindex="5">Study Day Info</a></li>
        <li><a href="#" tabindex="6">Discussion Forum</a></li>
        <li><a href="#" tabindex="7">Committee Members</a></li>
        <li><a href="#" tabindex="8">Pictures</a></li>
        <li><a href="#" tabindex="9">Membership</a></li>              
        <li><a href="#" tabindex="10">Members Only Area</a></li>
        <li><a href="#" tabindex="11">Jobs</a></li>
        <li><a href="#" tabindex="12">Links</a></li>
        <li><a href="#" tabindex="13">Contact Us</a></li>
        </ul>
        <a href="http://www.vitalograph.co.uk" title="Go To http://www.vitalograph.co.uk/"><img src="images/advert.jpg" alt="Go To http://www.vitalograph.co.uk/" /></a>
       </div>
       <div id="cutenews">
       some random text some random textsome random textsome random textsome random textsome random textsome random text
       some random text some random textsome random textsome random textsome random textsome random textsome random text
       some random text some random textsome random textsome random textsome random textsome random textsome random text
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
              <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
              <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
              <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       </div>
      </div>
     </div> 
    </div>
     <div id="cell3">
     <br />
     </div>
   <br />
  </div>
   <div id="bottom">
    <div id="accessibilitybox">
     <br />
     <br />
     <div id="accessibility">
      &nbsp;&nbsp;&nbsp;Accessibility - High Contrast - Low Contrast - Text Only - Default Contrast - Site Map
     </div>
     <div id="textsize">
      Text size A - A - A
     </div>
    </div>
   </div>
  <div id="bottom">
   <br />
   <br />
   &nbsp;
   <!-- AddThis Bookmark Button BEGIN -->
   <a href="http://www.addthis.com/bookmark.php" onclick="addthis_url   = location.href; addthis_title = document.title; return addthis_click(this);"><img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" alt="AddThis Social Bookmark Button" /></a> <script type="text/javascript">var addthis_pub = 'djcritch';</script><script type="text/javascript" src="http://s9.addthis.com/js/widget.php?v=10"></script>  
   <!-- AddThis Bookmark Button END -->
   <img src="images/spacer.png" alt="Spacer" />
   <img src="images/rss.png" alt="RSS Feed" title="RSS Feed" />&nbsp;
   <img src="images/css.gif" alt="Valid CSS 2.0" title="Valid CSS 2.0" />&nbsp;
   <img src="images/xhtml.gif" alt="XHTML Strict 1.0" title="Valid XHTML 1.0 Strict" />&nbsp;
   <br />
   <br />
   Copyright &copy; 2008 rcn-oh-southwest.co.uk - Website By <a class="footer" href="http://www.djc-solutions.co.uk">djc-solutions</a> - Hosted By <a class="footer" href="http://www.bluehost.com/track/djcrit...ehost</a>&nbsp;
   <br />
   <br />
  </div>
 </div>
 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
 </script>
 <script type="text/javascript">
 _uacct = "UA-3857591-1";
 urchinTracker();
 </script>
</body>
</html>

and CSS as follows:

Code: Select all

/* 
Style Sheet 1.1
Author: djc-solutions.co.uk
CSS level 2.0
*/
body { 
 margin: 0;
 padding: 0;
 font-family: verdana, arial, helvetica, sans-serif;
 background-image: 
 url('images/background.gif');
 background-repeat: repeat;
 background-attachment: 
 fixed;
 text-align:center;
} 
img {
border: 0px solid #666666;
}
a.footer:link {
 color: #3c7faf; 
 text-decoration: none
}
a.footer:visited {
 color: #3c7faf;
 text-decoration: none
}
a.footer:hover {
 text-decoration: underline
}
#header {
    position: relative;
    text-align: center;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 10px;
 font-weight: bold;
 color: #fff;
}
#accessibilitybox {
    position: relative;
    text-align: left;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 10px;
 font-weight: bold;
 color: #000;
 width: 750px;
 height: 10px;
 margin: +2px auto; 
 border:0px dashed #333;
}
#accessibility {
 float:left;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 10px;
 width: 544px;
 padding: 0px;
 margin: 0px;
 border:0px dashed #333;
}
#top {
    position: relative;
    text-align: center;
 background: url(images/top.png);
 background-repeat: no-repeat;
 background-position: 50% -2px; 
 height: 140px;
}
#logo {
 width:780px;
 height: 140px;
 margin:0px auto; 
 text-align:left; 
 padding:0px;
 border:0px dashed #333;
}
#flashlogo {
 width:744px;
 height: 100px;
 margin:0px 20px; 
 text-align:left; 
 padding:0px;
 border:0px dashed #333;
}
#main {
    position: relative;
    text-align: center;
}
#bottom {
    position: relative;
    text-align: center;
 background: url(images/bottom.png);
 background-repeat: no-repeat;
 background-position: 50% +2px; 
 height: 60px;
 font-family: verdana;
 font-size: 10px;
 font-weight: bold;
 color: #000;
}

#content {
 width:780px;
 margin:-20px auto; 
 text-align:left; 
 padding:0px;
 border:0px dashed #333;
}
#cell1 {
 width:780px;
 margin:-1px 0px; 
 text-align:left; 
 padding:0px;
 border:0px dashed #333;
 background: url(images/contenttop.png);
 background-repeat: no-repeat;
 background-position: 0px 0px; 
 height: 24px; 
}
#cell2 {
 width:780px;
 margin:-1px 0px; 
 text-align:left; 
 padding:0px;
 border:0px dashed #333;
 background: url(images/contentmain.png);
 background-repeat: repeat-y;
 background-position: 0px 0px;
}
#cell3 {
 width:780px;
 height: 23px;
 margin:-1px 0px; 
 text-align:left; 
 padding:0px;
 border:0px dashed #333;
 background: url(images/contentbottom.png);
 background-repeat: no-repeat;
 background-position: 0px +1px;
}
#cell4 {
 width:135px;
 margin:0px 19px; 
 text-align:left; 
 padding:0px;
 border:0px dashed #333;
}
#textsize {
 float:left;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 10px;
 width: 200px;
 padding: 0px;
 margin: 0px;
 border:0px dashed #333;
 text-align: right;
}
#container {
 width:744px;
 margin:0px 0px; 
 text-align:left; 
 padding:0px;
 border:0px dashed #333;
}
#cutenews {
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 15px;
 padding: 0px;
 margin: 0px +182px;
 width: 557px;
 border:2px dashed #333;
}
#vertmenu {
 float:left;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 15px;
 width: 133px;
 padding: 0px;
 margin: 0px;
 border:0px dashed #333;
}
#vertmenu ul {
 list-style: none;
 margin: 0px;
 padding: 0px;
 border: none;
}
#vertmenu ul li {
 margin: 0px;
 padding: 0px;
}
#vertmenu ul li a {
 font-size: 80%;
 display: block;
 border-bottom: 1px dashed #000000;
 padding: 5px 0px 2px 4px;
 text-decoration: none;
 color: #003366;
 width:131px;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
 color: #cf0a38;
 background-color: #eeeeee;
}

Cheers Dave.

djcritch · #2 (**permalink**) Apr 4th, 2008, 22:54

anyone?

Aso · #3 (**permalink**) Apr 5th, 2008, 00:44

That's some messy code you got there! I appreciate that it may be required under the circumstances, but generally: more code = harder to debug!

I will try and look at it in more detail later, but in the mean time;

Validate your HTML - this is essential. You have a lot of unclosed/unopened <div>'s which could be causing you these issues. Until the HTML is valid, it's extremely difficult to pinpoint other bugs.
Remove the XML version - this is a major cause of browser issues, as it throws (most of) them into quirks mode, resulting in unstable and inconsistent rendering.

Code: Select all

<?xml version="1.0" encoding="utf-8"?>

djcritch · #4 (**permalink**) Apr 5th, 2008, 10:12

ok ive validated it all and still have the same problem i removed that xml line at the top as well:

http://www.djc-solutions.co.uk/rcnnew/

http://www.djc-solutions.co.uk/rcnnew/style.css

i think there might be a problem with the div struture?

Aso · #5 (**permalink**) Apr 5th, 2008, 11:55

Sorry djcritch I'm trying everything I can!

I think I have to agree you have serious issue with your <div> structure. I'd recommend to go right back to basics, forgetting the decoration for the time being.

Something like;

Code: Select all

<div id="container">
 <div id="leftcol">...</div>
 <div id="rightsection">...</div>
</div>

Float the leftcol and rightsection left, right respectively. Set your widths and fill in the content, then begin to style up again.

Something like this perhaps?

Code: Select all

<div id="container">
 <div id="topslice"><!-- Put the top slice of your two sections in here --></div>
 <div id="leftcol">...</div>
 <div id="rightcol">...</div>
 <div id="bottomslice"><!-- Same again with the bottom part --></div>
</div>

Then, take a mid-section slice of your two columns (about 10px high) and repeat it vertically down the container.

saltedm8 · #6 (**permalink**) Apr 5th, 2008, 12:16

i have re-written it, you should be able to work out the rest on your own, ( obviously there are ajustments you need to do ) but i think this is basically what you are after

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#logo {
    margin: 0 auto;
    width:780px;
    height:140px;
    text-align:left; 
    padding:0px;
    border:0px dashed #333;

}

#container {
    margin: 0 auto;
    width:780px;
    height:400px;
    text-align:left; 
    border:0px dashed #333;

}

#header {
    margin: 0 auto;
    height:20px;
    width:780px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #fff;

}

#menu {
    float:left;
    width:135px;
    margin: 10px 20px 20px 20px;
    text-align:left; 
    border:0px dashed #333;
}    
#content {
    float:right;
    width:580px;
    margin: 10px 10px 20px 10px;
    
}    
#f1 {
    margin: 0 auto;
    width:780px;
    height:20px;
    margin-top: 10px;
    margin-bottom: 10px
    
}    
#f2 {
    margin: 0 auto;
    width:780px;
    height:20px;
    margin-top: 10px;
    margin-bottom: 10px
    

}    
#footer {

    margin: 0 auto;
    width:780px;
    height:20px;
    margin-top: 10px;
    margin-bottom: 10px
    
    }
    

-->
</style>
</head>

<body>
<div id="logo"></div>
<div id="header"></div>
<div id="container">
<div id="menu"></div>
<div id="content"></div>
</div>

<div id="f1"></div>
<div id="f2"></div>
<div id="footer"></div>


</body>
</html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Whats wrong?	Bradfordp26	Web Page Design	11	Apr 5th, 2008 10:14
whats wrong with these 2 ?	batman13	JavaScript Forum	0	May 11th, 2007 19:29
Whats wrong with this?	MaccGaz	Other Programming Languages	1	Nov 4th, 2006 21:12
Whats wrong with tables and why css	mrnthere	Web Page Design	7	Mar 16th, 2006 23:38
Whats wrong with this?	TheShadow	Classic ASP	5	May 26th, 2005 12:55

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
hmmmm whats wrong with this?