CSS - Weird Shadow In Ie + Alignment Issue

New accounts are not allowed to create posts containing URLs because the developers of this site are incapable of anti-spam measures that do not hinder legitimate users.

So goodbye. I won't let the door hit my *** on the way out.

Hello all!

I am trying to create a simple website. I had it working in html alignment wise here
URL

But i want it working in CSS. Look here URL
and tell me what it is i have done wrong. I want the two colums to sit next to each other, centered.

Thanks for your time.

Hi guys,
I've been desperately trying to get this to work but realised I have to ask for help.

www johnbradbury com

This looks right in Internet Explorer 7, the header bar is at the top and stretched across the whole screen. In earlier versions this is pushed down etc....

Anyone point me in the right direction?

Good day!

when i run my webpages in IE8 the alignment was change i don't know why it happens. Before my webpage is fix on my screen but now the scrollbar was visible, which is i don't want to happen...is it css code help me in my problem?

Hello everyone.

Another episode of stupid CSS tricks here!

h-t-t-p://rewards.yarnell.openi.com/

This site looks good in IE8, Firefox, Safari, Chrome. Only older IE shows the rightmost DIV, the main content area, as underneath the rest of the page. This is not my first CSS only site, but for some reason, I can't figure out why it isnt displaying correctly in older IE. If you are using IE8 and need to see it broken, just throw the site into compatibility mode.

I have all the DIV styles in the source, not in a stylesheet to make it easy for anyone to help me with this.

I just know this is going to be something simple, and thank you in advance to anyone kind enough to give this a look!

Have a great day!

Hi there,

I want to make the text in my post content to align left and take the same width as the image (448px). I have changed the CSS of the post content, but all that happens is the posts get more un-aligned as you go down, as if the new 'left' alignment ruins the centering of everything.

I'm using wordpress.

Does anyone have any suggestions as to why this is happening, and how I can align my content text to the left?

Thanks.

Here is the thing.. i got this code that works just fine at any browser except IE < 6.

Look the issue's image (better than explaining):
http://img23.imageshack.us/img23/43/borderissue.jpg

The code (for the page in the screenshot)

Code:

<div id="container">
 <div id="main">
 <!-- INCLUDE CONTENT -->
  <div id="content">
  <!-- Conteudo Novidades -->
  <div id="midnewsb">
  <div id="midwrap">
  <div id="midtitle">
  <img src="bar_news.jpg" border="0" /> <b>NOVIDADES</b>
      <div id="midnews">
      <div id="textwrap">
       <p><font color="#333333">dd/mm/aa - Novidade 1</font><br />
      - Novidade 1 novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade</p><br />
      <p><font color="#333333">dd/mm/aa - Novidade 1</font><br />
- Novidade 1 novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade</p><br />
       </div>
      <div id="midb"></div>
      </div> 
     </div>
     <br />
   </div>  
   <div id="midb"></div>
  </div>
   <!-- FIM Conteudo Novidades -->
  </div>
  <div id="block"><br /></div>
  <!-- FIM INCLUDE CONTENT -->
 </div>
</div>

And the CSS:

Code:

#container {
position:relative;
top:30px;
width:704px;
height:auto;
min-height:800px;
margin:auto;
margin:0 auto;
text-align:center;
}
#main {
width:704px;
height:100%;
margin:auto;
background-image:url(bg_mainb.jpg);
text-align:left;
}
#block {
margin:auto;
height:30px;
}
#content {
position:relative;
left:-3px;
top:20px;
width:496px;
height:auto;
min-height:450px;
margin:0px;
display: inline-block;
}
#midb {
background-image:url(bg_midb.jpg);
width:100%;
height:18px;
position:absolute;
bottom:0px;
}
#midwrap {
margin:6px;
}
#midtitle {
position:relative;
margin-top:2px;
width:496px;
color:#3E6F88;
}
#midnews {
position:relative;
margin-top:2px;
top:1px;
width:482px;
height:auto;
min-height:100px;
display: inline-block;
background-image:url(bg_mid.jpg);
background-repeat:no-repeat;
border:solid 1px #C9DEEC;
}
#midnewsb {
position:relative;
margin-top:0px;
width:496px;
height:auto;
display: inline-block;
background-image:url(bg_mid.jpg);
background-repeat:no-repeat;
border:solid 1px #C9DEEC;
}
#textwrap {
margin:6px;
width:476px;
height:auto;
}

Can anyone help me, please? Thanks

Hey,

I have a three column fixed layout design. In the center, middle column, the boxes stack perfectly between the left and right columns. When the center column content's height exceeds the left and right column my problems beings; the center content'll hug the left, leaving it's center position.

Website please scroll to bottom

I've tried a variation of different techniques to try and fix my problem, but the solution's eluded me to no ends.

Can anyone help me?

Kind Regards
The Coder

I have a container division set at 900px. Within this division are three column, a left, center and right. The left and center division are set to float left and the right one is set to float right. The width of the divisions adds up exactly to 900. This setup displays fine in all IE browsers except IE 6 in which it kicks the right column underneath the center one. What would be causing this???

Here is my css code for the divisions:

Code:

   #homecontain {
  width: 900px;
  clear:both; 
  height: auto;   
  background : #CCEDFE;
 }

  #leftblend {   
  float: left;
  margin-left: 0px;
  margin-top: 0px;
  width: 230px;
  height: 887px;
  background-image:url('Images/LeftBlend.jpg');
 }

    p.lefttext{
   color:#FFFFFF;
   text-decoration : none;
    font : 10px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
    text-align:left;
    font-weight: bold;
	font-style: oblique;
	line-height:15pt;
	padding-left: 20px;
	padding-right: 20px;
    width:150px;
    }

   p.leftheadlisting{
   color:#FFFFFF;
   text-decoration : none;
    font : 12px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
    text-align:left;
    font-weight: bold;
	line-height:15pt;
	padding-left: 20px;
	padding-right: 20px;
    width:170px;
    }

  #center {
    float: left;
    width: 477px;
    height: 887px;
    margin-right: 0px;
    padding : 0px 0px 0px 0px;
     background : #CCEDFE;
 }

	    p.centerheadline{
   color:#000000;
   text-decoration : none;
    font : 20px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
    text-align:left;
    font-weight: bold;
	padding-left: 20px;
	padding-right: 20px;
    width:430px;
    }
    p.centertext{
   color:#000000;
   text-decoration : none;
    font : 10px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
    text-align:left;
    font-weight: normal;
	line-height:15pt;
	padding-left: 20px;
	padding-right: 20px;
    width:430px;
    }


	    p.centerbottomline{
   color:#0d2781;
   text-decoration : none;
    font : 16px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
    text-align:left;
    font-weight: bold;
	font-style: oblique;
	line-height:20pt;
	padding-left: 20px;
	padding-right: 20px;
    width:430px;
    }
 
   #rightlogo {
  float: right;
  width: 193px;
  height:887px;
  height: auto;   
  background : #CCFFFF;
  margin-top: 0px;
  padding : 0px 0px 0px 0px;
 }

Any help would be appreciated!

Nevermind, folks over at codingforums helped me.

Hi,

I am having trouble with divs inside tables cells. I have td's in a row, and I want all the objects within these cells to be aligned at the top of the cells. However, the objects within the cells with lesser content are vertically aligning to the central level of the cell with the most content.

Please check: www dot incorrectlyprogrammed dot org/CRC/ to see what I mean.

This is driving me mad. Any help appreciated!!

Alright, first post in a while, let me see if I can make this clear and simple so I can fix this issue. I am making a website for my history project. I have made the website solely by hand and using an HTML editor; I have quite a bit of knowledge in CSS and HTML, but really, this is a great learning process for me.

The website design is laid out in table form. There are just two columns, a sidebar and the main content column. The text causes the table to be stretched out (you can see this by changing the border to "1" and viewing the table. However, when the main text strechtes the table, the side bar moves with it, settling in the center of the smaller column. The entire thing creates a problem like this:

My History Website

The source code for the site can be checked through your browser, or if you are too lazy, this is what I have written:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>History Through The Ages: 1865-1900</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Ethan Mick">
	<!-- Date: 2008-05-21 -->
	<!-- I will eventually put this style sheet into its own external CSS file.-->
	<style type="text/css">
	<!--
	body {
		background:gray;
	}
	p {
		color:white;
		text-align:left;
		position:top;
		text-indent:1cm;
		vertical-align:top;
	}
	h2 {
		color:black;
		text-align:center;	
	}
	
	.sidebar {
		position:relative;
		
		
		
	}
	
	.ads {
		display:block;
		margin-left:auto;
		margin-right:auto;	
	}
	.imageright {float:right;}
	.imageleft {float:left;}

	-->
	</style>


</head>
<body>
	<img src="file:///Volumes/FAT32DATA/OmniEthan/School/US%20&%20World/History%20Logo.jpg" title="History Through The Ages" alt="History Logo" width="800">
	<table width="800" border="0">
		<tr>
			<td width="150" height="300">

				<a class="sidebar" href="file:///Users/Ethan/Sites/History%20Website/Historysite.html">Home</a><br /><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1856-1900.html">1865-1900</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1901-1920.html">1901-1920</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1921-1940.html">1921-1940</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1941-1960.html">1941-1960</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1961-1980.html">1961-1980</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1981-2000.html">1981-2000</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/2001-Current.html">2001-Current</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/Bibliography.html">Bibliography</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/Genealogy.html">Mick Family Genealogy</a><br /><br />

				<a href="http://www.mozilla.com/en-US/firefox/"><img class="" border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1b.png"/></a>	
				
				
			
			</td>
			<td width="*">
				<h2>Emerging from the Civil War to the turn of the century<br />1865 to 1900</h2>
				<img class="imageright" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/DeadUnionsoldiercivilwar.jpg/250px-DeadUnionsoldiercivilwar.jpg" title="A dead soldier in Petersburg, Virginia 1865.  Photograph by Thomas C. Roche">
				<p>The United States emerged as a whole country from the Civil War, thanks to Abraham Lincoln and the union army, although not without consequences.  Over half a million people were killed in the war.  The United States' primary goal at this point was reconstruction from the war, and a lot of work had to be done in the south.</p>				
				<p>This time period set up the United States for many years to come.  During the reconstruction the United States began to industrialize, creating thousands of miles of new infrastructure, and machinating a lot of jobs which had to be done by hand before.  The industrialization allowed huge corporations to be formed, like Standard Oil created by John D. Rockefeller in 1870 and Carnegie Steel Company created by Andrew Carnegie in the mid 1870's, many of which gained a monopoly in the market.  The industrialization allowed the United States to get back onto her feet quicker, as the new businesses could gain a lot of income by exporting their goods on the new infrastructure.</p>
				<p>The South wasn't happy about losing the war, and it wasn't happy about being back in the union.  During reconstruction many groups of people made clandestine acts against the government, and some others made their attacks public, such as the KKK.  The reconstruction acts involved the dismantling of southern governments, and the southern states were only allowed to have their own government after the majority swore a loyalty oath to the Union, and they ratified the new amendments, the 13th, 14th, and 15th.  Even then, once the southern people regained their own governments, everything that the North had been fighting for, rights of African-Americans, were largely ignored, and the African-Americans had to suffer even more discrimination.  To make matters worse, the courts ruled in Plessy vs. Ferguson that segregation was legal on the premises of "separate but equal."</p>
				<img class="imageleft" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/USS_Maine_h60255a.jpg/300px-USS_Maine_h60255a.jpg" title="USS Maine - Wikimedia Commons">
				<p>To heal the scars which had been formed in the Civil War, the United States decided to jump aboard the imperialistic boat, and attacked the weakened Spanish empire, fighting Spain for Peurto Rico, the Philippines, Guam, and Cuba.  The war was extremely single sided, with the United States decimating the Spanish fighters on almost all fronts.  The only interesting points of the war was the Philippines and Cuba.  In the Philippines, native freedom fighters had been fighting the Spanish for a long time, and they viewed the Americans as saviors coming to help their cause.  However, when it became apparent that the American's weren't going to leave, they became angry and fought us as well.  In Cuba, Roosevelt would lead the "Rough Riders" to fight the against the spanish with some Cuban help.</p>				
				<p>My family on both sides was in the United States at this point, but I am not positive where they were.  My family was not seriously affected by the segregation and racism partaking in the south during this time; indeed, my ancestors who moved to the United States in 1730 opposed slavery.  Seeing the cruelly and imbalance in South Carolina, where they landed, they moved to Illinois.  This affected Grandma Lori, my mother's mom, and her attitude on life.</p>
								
				
			</td>
			
			
	</table>
	<img class="ads" src="file:///Users/Ethan/image_1.png">
	
	
</body>
</html>

I recently added the "sidebar" class, trying to bring the links up, as you can see with the one I tested it on. Didn't work. I have tried other ideas, but I nothing worked. Also, if you have some advice (that doesn't require me completely rewrite the site) feel free to ring it by me.

So my question is, without doing anything repetitive or stupid, and preferably with CSS, how can I cause the text (the links) in the sidebar to align to the top of the page, and make it look nice. If you need more information, lemme know.

I've added a background to my site which sits behind the content, in firefox it works fine, it sticks to the bottom of the browser fine, the same applies in IE, but we all know the IE PNG bug, so I used filter instead to load the PNG. But now the image is aligning at the top of the div:

Screenshot
The red shows where the div is actually covering, and it does cover right down to the bottom of the browser.

How do you go about getting the filtered image to go to the bottom of the div?

Theres maybe a simple solution but at the moment its not coming to me.

I'd rather not use another file format, thats the last resort.

I have a table inside of a div, and I need to push the table down a little bit but can't get it to without using line breaks, which push it down too far.

I have a background image that I'm using to emulate a shadow and need the table to just be a little bit lower so that the upper right hand corner image blends in with it.

Here is my CSS:

Code:

#header {
  width: 100%;
  height: 90px;
  padding-bottom:5px;
  padding-right: 10px;
  margin-bottom: 5px;
  vertical-align: bottom;
  background: url(img/hd_shw.gif) no-repeat right;
}
.top {
  width: 16px;
  height: 16px;
  vertical-align: top;
}

.bottom {
  height: 16px;
  width: 16px;
  vertical-align: bottom;
}

.blue_fill{
  background-color: #4095BF;
}

My HTML:

Code:

<div id="header">
     <table class="hdr_bk" align="center" width="100%" style="height: 92%;" cellpadding="0" cellspacing="0">
       <tr>
         <td class="top" style="background: url(img/b_tl.jpg) no-repeat top left #4095BF;"></td>
         <td class="blue_fill"></td>
         <td class="top" style="background: url(img/b_tr.gif) no-repeat top right;"></td>
       </tr>
       <tr class="blue_fill">
         <td></td>
         <td>Header</td>
         <td></td>
       </tr>
       <tr>
         <td class="bottom" style="background: url(img/b_bl.jpg) no-repeat bottom left #4095BF;"></td>
         <td class="blue_fill"></td>
         <td class="bottom" style="background: url(img/b_br.jpg) no-repeat bottom right #4095BF;"></td>
       </tr>
     </table>
  </div>

I realize that there is a gap, which will be fixed when I figure out how to push down the table.

Hi,

I've decided to take the plunge and try using CSS to replicate a table layout.

I've appended my code below. My issue is that I cannot get the menu and content <DIV> to align next to each other.

Any tips gratefully received.

PHP Code:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>CSS Layout</title>
    <style type="text/css">
    <!--

    P {
      color: white;
      }
    
    body {
          background-color: #000000;
          text-align:center;          
         }
    
    #box {
         width: 750px;
         margin: 0px auto;
         background color: #ccc;
         text-align: left;
         border:1px solid white;
         }
         
    #banner {
            width: 745px;
            margin: 10px;
            height: 100px;
            border: 1px solid white;
            background-color: #000000;
            }
          
    #menu {
          margin-left: 10px;
          background-color: #000000;
          width: 200px;
          border: 1px solid white;
          }
          
    #content {
             background-color: #000000;
             width: 500px;
             border: 1px solid white;
             }
             
    #footer {
            width: 745px;
            margin: 10px;
            height: 50px;
            border: 1px solid white;
            background-color: #000000;        
            } 
          
    
             
    !-->    
    </style>
</head>


<body>
<div id="box">
      
                 <div id="banner">
             <p>
             this is my banner
            </p>
            </div>
              
            <div id="menu">
            <p>
            this is the menu
            </p>                    
             </div>
                
            <div id="content">
            <p>
            this is my content
            </p>
            </div>
                
            <div id="footer">
            <p>
            this is my footer
            </p>
            </div>
</div>
</body>
</html>