CSS - Small Spacing Problems On My Website

The underline is on the contact page (the google map has been freaking out on IE, so try FF). I want "Hours" to be underlined, but it isn't showing up.

It's an h1 with a class of "comment" and the CSS is Code:

h1.comment {
text-decoration: underline; 
}

The float problem uses this CSS. The page in question shows all the previous presidents .

There's a 0 margin and it does float, it just is aligned wrong. The CSS for both columns is Code:

#pastpres table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
border-collapse: collapse;
margin-bottom: 1em;
margin-right: 0;
}

#pastpres tr {
border-bottom: 1px solid #775b36;
}

#pastpres2 table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
border-collapse: collapse;
margin-bottom: 1em;
float: right;
margin-top: 0;
margin-left:0;
}

#pastpres2 tr {
border-bottom: 1px solid #775b36;
}

Here is the industry news page

I have the picture floating either right or left with text beside it - then a line underneath it. I want the line to always be at least 10px below the picture. When the text is less, the line crosses into the picture.

xhtml: Code:

	  
	  <div id="industry"> 
	  
	  <h1>Industry News and Information</h1>
	         
	    <div class="row">
		<span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span> 
        <h2>New single set of standards for ERS and ATS</h2>
          <p>Through the combined efforts of the European Respiratory Society (ERS) 
          and the American Thoracic Society (ATS), there is now a new single set 
          of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More 
          ...</a></p>
		  
		  </div>
		
		<div class="row"> <span class="imgRight"><img src="../images/ARTP_thumb.jpg" width="112" height="100" alt="COPD Day at Vitalograph" /></span> 
          <h2>Winter ARTP meeting well attended</h2>
		  <p>Vitalograph recently attended the Association for Respiratory Technology 
            and Physiology (ARTP) 3Oth Annual Conference at the Hilton Metropole 
            Hotel in Brighton. <a href="/resources/industry_news/news_artp.html">More 
            ...</a></p>
			
		  </div>
		  
		  <div class="row">
		  <span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span> 
        <h2>New single set of standards for ERS and ATS</h2>
          <p>Through the combined efforts of the European Respiratory Society (ERS) 
          and the American Thoracic Society (ATS), there is now a new single set 
          of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More 
          ...</a></p>
		  </div>
		
        <div class="rowLast">
		<span class="imgRight"><img src="../images/COPDdayoffice_thumb.jpg" width="99" height="98" alt="COPD Day at Vitalograph" /></span> 
        <h2>Vitalograph participates World COPD Day</h2>
		  <p>To mark World COPD Day on 16 November 2005, the British Lung Foundation 
          teamed up with Superdrug to offer a free spirometry test at selected 
          stores across the UK. <a href="/resources/industry_news/news_world_copd_day.html">More 
          ...</a></p>
		  </div>		

       <p class="back"><a href="javascript:history.go(-1)">< Back</a></p>
		  
      </div>

css: Code:

.imgLeft img {
	clear: none;
	float: left;
	margin: 0px 20px 10px 0px;
	border: 1px solid #000099;
}

.imgRight img {
	clear: none;
	float: right;
	margin: 0px 10px 10px 20px;
	border: 1px solid #000099;
}

/*rows*/

.row {
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid #3399FF;
}

.rowLast {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px solid #3399FF;
	border-bottom: 1px solid #3399FF;

}

.line {
	border-bottom: 1px solid #3399FF;
	padding-top: 0px;
	padding-bottom: 10px;
}

.inline {
	display: inline;
}



#mainColumn {
	padding: 0px;
	margin-left: 175px;
	background-color: #FFFFFF;
	height: 100%;
}

/*industry news*/

#industry {
	padding-right: 20px;
	padding-left: 20px;
}

#industry h1 {
	margin-bottom: 20px;
}

#industry h2 {
	color: #000099;
	margin: 0px 0px 10px 0px;
}

#industry img {
	margin-bottom: 10px;
}
	
.copdDay img {
	clear: both;
	margin: 0px 40px 15px 55px;
	border: 1px solid #000099;
}

.artp {
	margin: 0px 40px 15px 40px;
}

.artp img {
	clear: both;
	margin: 0px 40px 15px 25px;
	border: 1px solid #000099;
}

Any suggestions on how to get this consistently since through css accounting for varying lengths of text?? I know I can adjust padding/margins for each section to make it work, but I want something that is more universal that I can always use to get the same appearance.


Thanks!

Hi everybody. I'm attempting to format video thumbnails horizontally across a page, and I'm experiencing some very weird behaviors.

A bit of basic background on the site - this is a Drupal 5 site sporting a customized version of the "Lite Jazz" theme. XHTML & CSS are both valid.

Basically, I just want to have the thumbnails scroll horizontally from left to right, then break and continue directly underneath. However, I am getting this odd "stair" effect in Firefox (for lack of a better way to put it). The alignment looks fine in IE, however in IE the thumbnail furthest to the right is squashed up against the side of the border. I have attached two screenshots to give you an idea. Below is a sample of the video thumbnail HTML that is output by Drupal and all (what I think is) all of the pertinent CSS styling. Additionally, I am aware that I can combine several of these CSS classes, so there is no literal need for multiple div tags, but these divs are generated by a short series of tpl files, and I don't think they are hurting anything. I could of course be wrong, but it would be hard to really consolidate them they way that the template is structures.

Here's the HTML involved:
Code:

<div class="node">
      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/48"><img src="http://kathleenmackie.com/files/48_AtlantaFinal.jpg" alt="Watch this video!" /></a><br />
vid: 48<br />
type: video<br />
status: 1<br />
created: 1207090735<br />
</div></div>
  
  </div>

<div class="node">
      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/47"><img src="http://kathleenmackie.com/files/47_FirefoxScreenSnapz003.jpg" alt="Watch this video!" /></a><br />
vid: 47<br />
type: video<br />
status: 1<br />
created: 1206652960<br />
</div></div>
  
  </div>

<div class="node">

      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/45"><img src="/sites/all/modules/flashvideo/thumbnail_MIA.png" alt="thumbnail unavailable" /></a><br />
vid: 45<br />
type: video<br />
status: 1<br />
created: 1204256880<br />
</div></div>
  
  </div>

And the CSS as well....
Code:

.node {
display: inline;
padding: 5px 10px 10px;
}
.node .content, .comment .content {
margin: 0;
}
.node .taxonomy {
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
 
}
 
.video {
border: 1px solid #1e6730;
background-color: #beff93;
padding: 5px 10px 10px;
clear: right;
float: left;
display: inline;
margin: 15px;
}
 
#header, #content {
width: 100%;
}
.node .content, .comment .content {
margin: 0; 

I would include a bbcode link to the site, but apparently new users cannot do that (I suppose that makes sense from a spamming standpoint). Site is located at kathleenmackie.com. I also have screenshots from IE and Firefox detailing the problems, but again I apparently can't attach files or images (??).

Thanks folks... hoping somebody has an idea or two. Again, I do have screenshots as well.....

hi there


I'm having a problem on my website, First off my drop downs take a longtime to load and I need some advise on how to make my drop downs load first and faster.

Secondly my drop downs on the home page appear behind the flash which is very annoying and help will be appreciated.

I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong.

Correct look Incorrect look

I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any.

Here is my main CSS:
Code:

	body		{ background-color: #FFFFFF; }
	a		{ text-decoration: none; font-weight: bold; }
	a:link		{ color: #003366; background-color: transparent; }
	a:visited	{ color: #003300; background-color: transparent; }
	a:active	{ color: #339933; background-color: transparent; }
	a:hover		{ text-decoration: underline; }
	table		{ border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
	td, th		{ border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
	tr.one		{ background-color: #FFFFFF; }
	tr.two		{ background-color: #DDDDDD; }
	table.squares	{ border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
	td.square	{ border: 1px solid grey; padding: 4px; }
	td.nopadding	{ padding: 0px; }
	.default	{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
	.h1		{ font-size: 200%; font-weight: bold; text-align: center;}
	.h2		{ font-size: 120%; font-weight: bold; }
	.h3		{ font-weight: bold; }
	.step		{ font-size: 150%; font-weight: bold; color: #999999; }

Here is one of the sets of squares:
Code:

<table class="squares">
    <tr>
        <td class="square" style="background-color: #CCCC66"></td>
        <td class="square" style="background-color: #CC9966"></td>
        <td class="square" style="background-color: #990000; border: black"><td>
        <td class="square" style="background-color: #669966"></td>
        <td class="square" style="background-color: #669999"></td>
    </tr>
</table>

And finally, here is one of my progress bars:
Code:

<table style="color: white; width: 100px">
    <tr>
        <td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
        <td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
    </tr>
</table>

And in case that code is not enough, here is a link to the full HTML.

According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers?

My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work?

Ok, I've completed w3c validation, there were about 33 errors and it now shows green, saying the page was validated. However, the website is not aligned properly, I'm not sure if it's css or html. Can you guys help me further to getting it aligned and proper?
Site:
aspekt.blogdns.com/ahs/layout2/index2.php

Thanks again for all the help guys.

//index2.php

Code:

<?php 
include 'header.php'; 
include 'blocks.php';
?>
    <div id="maincontent">
     <table width="875" cellspacing=0 cellpadding=0 border=0>  
        <tr>
       <td valign="top" bgcolor="#e5e5e5">
     	    <strong>Welcome</strong>
     		<p> 

eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores 

et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 

consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 

dolor sit amet.
	</p>
       </td>
      </tr>
     </table>
    </div>
 
</body>
</html>

// header.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">   
<title>AHS v2</title>
   <link rel="stylesheet" href="css/main.css" type="text/css">
   <link rel="stylesheet" href="css/menu-style.php" type="text/css">
   <script type="text/javascript" src="css/menu.php"></script>
</head>
<div id="pagewrapper">
   <div id="header">
	<a href="/"></a>
</div>
<table border='0' cellspacing='0' cellpadding='0'width="875">
<tr>
 <td colspan="2">
  <div id="nav">
   <ul id="udm" class="udm">
    <li><a tabindex="10" title="Students" class="nohref">Students</a>
<ul>
 <li><a tabindex="10" title="Alumni" href="">Alumni</a></li>
 <li><a tabindex="10" title="Blue Pride" href="">Blue Pride</a>

 <ul>
  <li><a tabindex="10" title="Overview" href="">AHS Music</a></li>
  <li><a tabindex="10" title="Overview" href="">Athletics</a></li>
  <li><a tabindex="10" title="Overview" href="">Boosters Club</a></li>
  <li><a tabindex="10" title="Overview" href="">Community Service</a></li>
 </ul>
</li>
 <li><a tabindex="10" title="Student Work Drop Down" class="nohref">Student Work</a>

 <ul>
  <li><a tabindex="10" title="AHS Music" href=""><i>Eagles Eye</i></a></li>
  <li><a tabindex="10" title="Athletics" href="" target="_blank">Jewelry</a></li>
  <li><a tabindex="10" title="Boosters" href="">Multimedia</a></li>
 </ul>
</li>
</ul>
</li>

<li><a tabindex="10" title="Parents" class="nohref">Curriculum</a>

<ul>
 <li><a tabindex="10" title="" href="">AHS Rubrics</a></li>
 <li><a tabindex="10" title="" href="">Career and Technical Programs</a></li>
 <li><a tabindex="10" title="" href="" target="_blank">Guidance</a></li>
 <li><a tabindex="10" title="" href="">NEASC</a></li>
 <li><a tabindex="10" title="" href="">Program of Studies</a></li>
</ul>
</li>
<li><a tabindex="10" title="Community" class="nohref">Information</a>
<ul>
 <li><a tabindex="10" title="" href="">Announcements</a></li>
 <li><a tabindex="10" title="" href="">Blue Notes</a></li>
 <li><a tabindex="10" title="" href="">Calendar</a></li>
 <li><a tabindex="10" title="" href="">Contact Information</a></li>
 <li><a tabindex="10" title="" href="">Directions</a></li>
 <li><a tabindex="10" title="" href="">Handbook</a></li>
 <li><a tabindex="10" title="" href="">Health Center</a></li>
 <li><a tabindex="10" title="" href="">Mission Statement</a></li>
 <li><a tabindex="10" title="" href="">Parent Connection</a></li>
 <li><a tabindex="10" title="" href="">Summer Reading</a></li>
</ul>
</li>

<li><a tabindex="10" title="Utilities" href="">Contact</a></li>
</ul>
  </div>
 </td>
</tr>
</table>
</div>

// blocks.php

Code:

<div id="blockcontent">
<table align="right">    
<tr>
<td valign="top" width="200">
  <table cellspacing=0 cellpadding=4 border=0>

     <tr bgcolor="#cccccc"><td>
      <strong>Account Login</strong>
      <p align="left"> 
	<form name="login" method="post" action="login.php">
	<br>
	<div align="left">
	Username: <input name="myusername" type="text" id="myusername">
	<br>
	Password: <input name="mypassword" type="text" id="mypassword">
	<br></div><br>
	<input type="submit" name="Submit" value="Login">
	</form>
	

     </td></tr>
      <tr><td><img src="/Graphics/blank.gif" height=1 width="200" ALT=""></td></tr>
     <tr bgcolor="#cccccc"><td>
      <a style="font-weight:bold;" href="/calendar/">Calendar of Events</a><p />
      <center>
      <table class="calendar">
<tr>
<td align="center" valign="top">&nbsp;</td>

<td align="center" valign="top" class="calendarHeader" colspan="5">December 2006</td>
<td align="center" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top" class="calendarHeader">S</td>
<td align="center" valign="top" class="calendarHeader">M</td>
<td align="center" valign="top" class="calendarHeader">T</td>
<td align="center" valign="top" class="calendarHeader">W</td>
<td align="center" valign="top" class="calendarHeader">T</td>
<td align="center" valign="top" class="calendarHeader">F</td>

<td align="center" valign="top" class="calendarHeader">S</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">&nbsp;</td>
<td align="center" valign="top" class="calendar">&nbsp;</td>
<td align="center" valign="top" class="calendar">&nbsp;</td>
<td align="center" valign="top" class="calendar">&nbsp;</td>
<td align="center" valign="top" class="calendar">&nbsp;</td>
<td align="center" valign="top" class="calendar"><a class="calendar" onMouseOut="kill();" onMouseOver="popup('<strong>Events on 

12/1/2006</strong>03:00 pm Testing javapopup event <br/>','#ddd','0');">1</a></td>
<td align="center" valign="top" class="calendar">2</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">3</td>

<td align="center" valign="top" class="calendar">4</td>
<td align="center" valign="top" class="calendarToday">5</td>
<td align="center" valign="top" class="calendar">6</td>
<td align="center" valign="top" class="calendar">7</td>
<td align="center" valign="top" class="calendar">8</td>
<td align="center" valign="top" class="calendar">9</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">10</td>
<td align="center" valign="top" class="calendar">11</td>

<td align="center" valign="top" class="calendar">12</td>
<td align="center" valign="top" class="calendar">13</td>
<td align="center" valign="top" class="calendar">14</td>
<td align="center" valign="top" class="calendar"><a class="calendar" onMouseOut="kill();" onMouseOver="popup('<strong>Events on 

12/15/2006</strong>11:00 am Testing javapopup event <br/>','#ddd','0');">15</a></td>
<td align="center" valign="top" class="calendar">16</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">17</td>
<td align="center" valign="top" class="calendar">18</td>
<td align="center" valign="top" class="calendar">19</td>

<td align="center" valign="top" class="calendar">20</td>
<td align="center" valign="top" class="calendar">21</td>
<td align="center" valign="top" class="calendar">22</td>
<td align="center" valign="top" class="calendar">23</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">24</td>
<td align="center" valign="top" class="calendar">25</td>
<td align="center" valign="top" class="calendar">26</td>
<td align="center" valign="top" class="calendar">27</td>

<td align="center" valign="top" class="calendar">28</td>
<td align="center" valign="top" class="calendar">29</td>
<td align="center" valign="top" class="calendar">30</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">31</td>
<td align="center" valign="top" class="calendar">&nbsp;</td>
<td align="center" valign="top" class="calendar">&nbsp;</td>
<td align="center" valign="top" class="calendar">&nbsp;</td>
<td align="center" valign="top" class="calendar">&nbsp;</td>
<td align="center" valign="top" class="calendar">&nbsp;</td>
<td align="center" valign="top" class="calendar">&nbsp;</td>
</tr>

</table>

      <br />
      <a href="/eventRequest/">Submit an Event</a>
      </center>
      </td></tr>
      <tr><td><img src="/Graphics/blank.gif" height=1 width="200" ALT=""></td></tr>
      <tr bgcolor="#dddddd"><td>
       <strong>Box number 2</strong>
       <br><br>
       Loreum Ipsum

      </td></tr>
      <tr><td><img src="/Graphics/blank.gif" height=1 width="200" ALT=""></td></tr>
      <tr bgcolor="#cccccc"><td>
       <strong>Site Statistics</strong>
       <p align="left">
        <a href="/visiting/">Visitors:</a><br />
        &nbsp;&nbsp;&nbsp;<br />

        &nbsp;&nbsp;&nbsp;
       </p>
       <p align="left">
        <strong>Session Information:</strong><br />
        &nbsp;&nbsp;&nbsp;0 minute, 0 second<br />
        &nbsp;&nbsp;&nbsp;Language: English<br />
       </p>
       <p align="left">

        <strong>Page Generation:</strong><br />
        &nbsp;&nbsp;&nbsp;Generated in 0 seconds 
       </p>
      </td></tr></table>

      <p />
     </td>
    </tr>
   </table>
   </div>

Hi all,
I'm building a website, and am experiencing a few problems with the site template. Was wondering if somebody could take a look? The files can be found at:
http://www.ashleycox.co.uk/template,zip
Basically what's happening is the background image in the top right hand corner only fills a small amount of the box.
If anybody could take a look at my code and point me in the right direction it would be much appreciated!
Thanks :-)

Hi,
I'm new to using forums, and need a little help trying to fix an IE6 problem.
My code is all valid, and i'm using xhtml strict. my page works fine in all the main browsers (including ie:7/8) just not ie6.

Here is the problem i have. I have a div (links) which is 956px wide and i am floating 5 other divs (1-5) within the links div.

The widths and padding for all of the 5 divs equals 956px's
But for some reason the last div (lower5) is dropping out of alignment, it looks like ie6 thinks there is not enough room for all of the 5 divs to fit within the outer div.
As you can see i have tried using line height:0; and that did not help.

Here is my code...........Any idea's

HTML:

<div id="lower-links">
<div id="lower1"></div>
<div id="lower2"></div>
<div id="lower3"></div>
<div id="lower4"></div>
<div id="lower5"></div>
</div>

CSS:
#links {
margin:0;
padding:0;
background-color: #FFFFFF;
width: 956px;
height:374px;
float: right;
line-height:0;
}

#lower1,#lower3 {
background-color: #FFFFFF;
width: 161px;
height:308px;
float: left;
padding-top:33px;
padding-left:15px;
padding-right:15px;
line-height:0;
}
#lower2,#lower4 {
background-color: #FFFFFF;
width: 162px;
height:308px;
float:left;
padding-top:33px;
padding-left:15px;
padding-right:15px;
line-height:0;
}
#lower5 {
background-color: #FFFFFF;
width: 160px;
height:308px;
float: right;
padding-top:33px;
padding-left:15px;
padding-right:15px;
line-height:0;
}

Hi Guys,

Hope someone can help out here.. I am trying to create a page with a header and footer and a middle portion for the content. I am not used to using CSS and I thought I had it working but when I test in IE it doesn't quite work as expected.. The footer removes itself from the bottom of the page and the scrollbars for the maincontent extend below the footer.. You'll see what I mean if you open this in IE:

http://www.modelglamorous.com/div_test.htm
http://www.modelglamorous.com/css/mainstyle.css

It works perfectly in Firefox but not in IE.. I think it's something simple but I am not sure how to fix it..

TIA,

N.

Howdy folks. If you check http://www.clansunited.net/ and http://www.clansunited.net/phorum/read.php?55,20178,20178#20178 you will notice that it doesnt really appear as it should as in IE. Now there are 2-3 small minor errors left otherwise everything is valid.

How do I make the space between the menu and the rest of the site appear as in IE without messing it up in IE?

Any feedback is welcome.

Well I got sick of reading through tons of <td> and <tr> tags today so I sat down and tried to write my first CSS script ever. I got the basic idea of it and tweaked it using Firefox/Firebug to get it working great. The problem was I checked back in IE (since most people use it =/...) It looked all messed up and I tried changing a lot of things around and I just got frustrated. Since I am new to this whole thing with CSS, I don't know what to look for or change. I know that the top links are messed up but I will fix those after I get my layout working in both browsers. Can anyone help me out?

www.etwcweb.com/ETWC.html

Here is the CSS code also:

Code:

/* Main Part */

body {
     font-family: Arial, Helvetica, sans-serif;
     background: #333333 url(Images/mainbacknew.png) repeat-y;
     font-size: 14px;
     margin: 0px;
}

h1 {
   font-size: 115%
   font-weight: bold;
   color: #000000;
}

p, ol, ul {
   line-height: 145%
}

a {
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
	color: #CCCCCC;
	font-weight: bold;
	text-decoration: none;
}


ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0pt;
padding-left:0pt;
}

ul li {
list-style: url(Images/bluearrow.png);
padding-left:15px;
}

img {
border:medium none;
}
img.left {
float:left;
margin:5px 9px 0pt 0pt;
}
img.right {
float:right;
margin:5px 9px 0pt 0pt;
}

hr {
display:none;
}


/* Floating part of Page */

#main_content {
	      width: 800px;
	      margin: 0pt auto;
	      background: url(Images/bg_content.jpg) repeat;
}

#main_content a {
	      color: #000000;
	      text-decoration: underline;
}

#main_content a:hover {
	      color: #666666;
}


/* The Top Picture */

#top_area {
	  background: url(Images/CSSHeader.png);
	  height: 433px;
	  width: 100%;
}

#top_area li {
	  display: block;
}

#top_area a {
	  color: #FFFFFF;
	  display: block;
	  float: left;
	  padding: 40px 20px 0pt;
	  text-decoration: none;
}


/* Search Form */

.search {
	float: right;
	padding-right: 20px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.search h1 {
	color: #FFFFFF;
	font-size: 150%;
}

/* Top Links */

#main_links {
	   /* background-color: #000000;
	    opacity: 0.7; */
	    width: 800px;
	    margin: 0pt auto;
}

#main_links ul {
	    list-style-image: none;
	    list-style-position: outside;
	    list-style-type: none;
	    margin-left: 0pt;
	    padding-left: 0pt;
}


/* Right Side of Floating Page */

#stories {
	 background: transparent url(Images/bg_content.jpg) repeat;
	 width: 535px;
       	 padding: 30px;
       	 float: right;
	 margin: 0pt auto;
}

#stories h2 {
	 padding-left: 20px;
	 padding-top: 15px;
}

/* Left Side */

#left_bar {
	  background: transparent url(Images/bg_content.jpg) repeat;
	  float: left;
	  width: 205px;
	  margin: 0pt auto;
}

.left {
      padding-right: 10px;
      padding-top: 0px;
}

.left_list {
	   padding: 20px;
}

.left_list ul li {
	   border-top: 1px solid #CCCCCC;
	   padding: 10px 15px;
}

#left_bar h1 {
	  background: url(Images/LeftHeaders.png) repeat-x;
	  padding-left: 20px;
	  padding-top: 5px;
	  color: #FFFFFF;
}

/* Message */
#top_footer {
	    width: 800px;
	    margin: 0pt auto;
	    background-color: #666666;
	    color: #FFFFFF;
	    font-size: 90%;
	    font-weight: bold;
	    padding-top: 4px;
	    padding-bottom: 4px;
	    text-align: center;
	    line-height: 150%;
}

/* Bottom Links */
#links {
       width: 800px;
       margin: 0pt auto;
       text-align: center;
       background: #000000;
       color: #FFFFFF;
       font-size: 90%;
       line-height: 160%;
       padding-top: 8px;
       padding-bottom: 3px;
}

#links a, #links a:hover {
       text-decoration: none;
       font-weight: bold;
}

#links .contact {
}

#links .contact a, #links .contact a:hover {
	       text-decoration: underline;
	       color: #0000CC;
}

Thanks in advance guys and sorry if this is already posted here, but my brain is frazzled and I couldn't find it with a quick search or three

battleglory.mattaproductions.com/layout

Somewhere in the coding I made a issue somewhere and I don't know where. In firefox the layout shows up fine, but in Internet Explorer there is like a pixel gap between the top content image and the text. Appreciate anyone's help....thanks.

Matta

EDIT: Special thanks to ryan-reese-09 and kk5st for the wonderful support they both gave.

What happen was a gap below the images in IE and firefox displayed just fine. I added:

img{
vertical-align: bottom;
}

Fixed the issue immediately. But than my images were to close so than I added:

#special_feature_btm img {
padding: 0px 0px 10px 0px;
}

#content_btm img {
padding: 0px 0px 10px 0px;
}

This gave a 10px space to the bottom of the images. Remember top, right, bottom, left (clockwise). So the rest I didn't need to change. I hope I summarized this up well and hope it helps you guys out sometime. Thanks again!

Matta

So I made a test design for a site, which I uploaded for testing HERE.

The problem is that for a few borders to the navbar and such, an image needed to overlap them, so instead I made them very short div's and cut the image to fit inside the div, about 2px in height. Although this displays fine in firefox, in IE the small images do not show.

At first it looked even worse in IE, until I implemented overflow: hidden; to make the div shrink to its actual size.

Any recommendations? Is there a better way to do this, or an easy fix?

Thanks in advance

moved on....

I am busy building a site with XHTML & CSS, which is nearly finished. I build my sites by hand and check while building in FF and IE7. When I thought I was finished I checked the site in IE6 and saw ONE of the divs was slightly shifted to the right. I was amazed, since only one of them was shifted, and nearly all are positioned in a similar matter. I have tried to remove all parts of the CSS, edited the containing layer, the layer before, and after, nothing worked. I now haven't got a clue on what to do next or what could cause this difference in rendering. Can you help me?

You can find the site here. The CSS is external, you can find it here. [edit: links are outdated, sorry /]

If have made the background of the whole site white and of the containing div (with id "main") black. The layer that is shifted now has the color red and has the CSS id "boven_rechts_top".

By the way, the XHTML is validated as: Valid XHTML 1.0 Transitional and the CSS is validated as well.