PDA

View Full Version : IE cause incresed indentation



l Squid l
Dec 7th, 2008, 04:49 AM
www.kumarafoundation.com

In IE 7, there is increased indentation. This seems to be caused by the picture moving more toward the center. In FF it looks fine. Any ideas?

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>
<title>Kumara Foundation</title>


<script type="text/javascript" src="assets/js/mootools-1.2.1-core-nc.js"></script>
<script type="text/javascript" src="assets/js/dropMenu2.js"></script>
<script type="text/javascript" src="/assets/js/slimbox.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){

//idGen = new idGenerator();
menu = new DropMenu('navmenu-h');

});

</script>
<link rel="stylesheet" href="/assets/css/slimbox.css" type="text/css" media="screen" />
<link href="assets/css/styles.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/default.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/menu2.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/shared.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="wrapper">


<div id="header"></div>
<div id="navbar">
<ul id="navmenu-h" class="mainmenu">
<li><a href="index.html">Home</a></li>
<li><a href="html/projects.html">Our Work +</a>
<ul style="visibility: hidden; opacity: 0;" class="submenu">
<li><a>Past Projects +</a>
<ul style="visibility: hidden; opacity: 0;" class="sub_submenu">
<li><a href="html/education_1.html">Education 1</a></li>

<li><a href="html/education_2.html">Education 2</a></li>
<li><a href="html/elderly_sick_2.html">Elderly &amp; Sick 1</a></li>
<li><a href="#">Elderly &amp; Sick 2</a></li>
</ul>
<span style="visibility: hidden; opacity: 0;" class="counter"></span></li>
<li><a href="html/futureprojects.html">Future Projects</a></li>

</ul>
</li>
<li><a href="html/leadership.html">Leadership</a></li>
<li><a href="html/donate.html">Donate</a></li>
<li><a href="html/sponsors.html">Sponsors</a></li>
<li><a href="html/contact.html">Contact Us</a></li>
</ul>
<div id="navbar2"></div>

<div id="contentHeader">
</div>

<div id="rightpanel">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center"><span class="textH">&quot;Sharing is caring&quot;, this is the motto of Kumara Foundation.<br />
<br />
</span></td>
</tr>
<tr>
<td width="69%" valign="top"><blockquote>
<p align="justify">Kumara Foundation is assigned as a non-profit organization destined for humanitarian help in particular to the poor, homeless and disenfranchised population in rural India. The foundation will also lend support most enthusiastically to children&rsquo;s education in various underdeveloped rural areas in Indian subcontinent. It is the brainchild of Dr Rajeshkumar and recently hosted by him in the year of 2008 with cordial help from several benevolent relatives and friends. The tax-exempt status 501C (3), as a charitable organization, of the foundation under Massachusetts State law is under way and in future its central office will be located at Worcester, MA, USA. </p>
</blockquote></td>
<td width="31%" valign="top"><span class="textIndent"><img src="assets/images/JPEGS/Ramana.jpg" alt="Ramana" width="150" height="206" hspace="0" vspace="20" align="left"/></span></td>
</tr>
<tr>
<td colspan="2" valign="top"><blockquote>
<p>The earning of Kumara foundation is solely dependent on the kind donations from individuals. To meet the further demand in future the foundation will seek grants from federal, state, industries or any outside sources. Any new idea in this regard will always be entertained with utmost courtesy. </p>
</blockquote></td>
</tr>
</table>
<p class="textIndent"></p>
</div>
<div id="footer">
<div class="copyright">&copy; 2008 Kumara Foundation&bull; Worcester, MA 01604</div></div>

</div>
</div>

</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

body {
margin: 0px;
border: 0px;
background-color: #eeeeee;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}

#wrapper {
margin: 0 auto;
width: 582px;
height: 600px;
text-align:left;
overflow:visible;
}

#header {
width: 582px;
height:135px;
background-image:url(../images/KFv2_02.png);
background-repeat: no-repeat;
}

#navbar {
width: 582px;
height: 29px;
}

#navbar2 {
width: 582px;
height: 19px;
background-image:url(../images/KFv2_12.png);
}

#contentHeader{
width:582px;
height:65px;
background-image:url(../images/KFv2_13.png);
}

#rightpanel {
width: 582px;
height: 450px;
background-color:#FFF;
overflow:visible;
}

#footer {
width:582px;
height:15px;
background-image:url(../images/KFv2_15.png);
}

.textH {
font-size:12px;
font-weight:bold;
text-align: center;
}

.textIndent {
margin-left:20px;
margin-right:150px;
}

.rama {
margin-bottom:300px;
}

.copyright {
font-size:9px;
text-align: center;
}

.green {
color:#393;
}

Excavator
Dec 7th, 2008, 06:18 AM
Hello l Squid l,
Not sure why the tables...

Have a look at this -
<!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">
body {
background: #eeeeee;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 582px;
background: #fff;
margin: 0 auto;
overflow: auto;
}
.l-float {
float: right;
margin: 20px 30px 20px 50px;
}
#wrap p {
text-align: justify;
margin: 30px;
}
.bot-img {
margin: 30px 0 0 0;
}
</style>
</head>
<body>
<div id="wrap">
<img src="http://www.kumarafoundation.com/assets/images/KFv2_13.png" width="582" height="65" alt="green" />
<h3>&quot;Sharing is caring&quot;, this is the motto of Kumara Foundation.</h3>
<img src="http://www.kumarafoundation.com/assets/images/JPEGS/Ramana.jpg" alt="Ramana" width="150" height="206" class="l-float" />
<p>
Kumara Foundation is assigned as a non-profit organization destined for humanitarian help in particular to the poor,
homeless and disenfranchised population in rural India. The foundation will also lend support most enthusiastically
to children&rsquo;s education in various underdeveloped rural areas in Indian subcontinent. It is the brainchild of
Dr Rajeshkumar and recently hosted by him in the year of 2008 with cordial help from several benevolent relatives
and friends. The tax-exempt status 501C (3), as a charitable organization, of the foundation under Massachusetts
State law is under way and in future its central office will be located at Worcester, MA, USA.
</p>
<p>
The earning of Kumara foundation is solely dependent on the kind donations from individuals. To meet the
further demand in future the foundation will seek grants from federal, state, industries or any outside
sources. Any new idea in this regard will always be entertained with utmost courtesy.
</p>
<img src="http://www.kumarafoundation.com/assets/images/KFv2_15.png" alt="green" width="582" height="15" class="bot-img" />
<!--end wrap--></div>
</body>
</html>

l Squid l
Dec 7th, 2008, 12:59 PM
I was pushed to use tables by the client who thought it was better even after I repeatably said it would not be.

After I added header and nav, the content goes into overflow. Instead of the scroll bar appearing is there a way to increased the white box(aka content box) as text/content increases?

Can I edit p and h1 rule?

Thanks for so much help so far I really do appreciate it.

Excavator
Dec 7th, 2008, 06:48 PM
The code I gave you would not make a scroll bar so I expect your still using some of your original CSS. If that's the case then this might stop the scrollbar - make the changes in red:

#wrapper {
margin: 0 auto;
width: 582px;
/*height: 600px;*/
text-align:left;
overflow:auto;
}


The overflow:auto; is to clear the floats. Read about that here. (http://www.quirksmode.org/css/clearing.html)

If that doesn't fix the problem then you'll need to show us your current version...


Edit the p here -

#wrap p {
text-align: justify;
margin: 30px;
}

And you can make one for the h3 like this -

h3 {
...
}

jerry62704
Dec 8th, 2008, 04:17 PM
You can certainly change the css for <p> or <h1>. Make sure you are using <h1> correctly. It is NOT there to make things bigger or darker. Think of your page as an outline and <h1> is the top level.