Forum Moderators: not2easy
I just started with CSS and so far so bad. I have a problem and I have tried everything but it doesn't work. Somehow the text in #content-main gives an indent for the first sentence and I have no idea why.
Part of the HTML looks like this:
<div id="contentcenter">
<div>
<img src="images/notre-ambition-h2.jpg" class="content- head-img">
<h2>TEXT</h2>
<h3>TEXT</h3>
</div>
<div ID="content-main">
<P>TEXT</p>
</div>
</div>
CSS:
#contentcenter {
width:379px;
padding:0px;
float:left;
background:#eee;
border: none;
color: #000000;
}
#content-head {
}
#content-main {
position: relative;
left: 15px;
top: 40px;
text-align: left;
text-indent: 0pt;
margin: 0px;
padding: 0px;
}
IMG.content-head-img {
float: left;
margin: 0px;
padding: 0px;
border: thin solid #000000;
position: relative;
left: 0px;
top: 0px;
}
H2{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 28px;
font-variant: normal;
color: #999999;
margin: 0px;
padding: 0px;
font-weight: normal;
position: relative;
top: 20px;
}
H3 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #666666;
margin: 0px;
padding: 0px;
list-style-type: decimal;
list-style-position: outside;
list-style-image: url(../images/TEMP3.jpg);
font-weight: normal;
font-style: italic;
position: relative;
top: 19px;
text-indent: 15px;
}
P {
margin: 0px;
padding: 0px 0px 10px;
position: static;
border: none #000000;
}
I think this is all the relevant info. Can someone please help me, I would really appreciate it.
Kind regards,
Bram
I cannot seem to replicate the problem on any of the main browsers! There is an indent that adheres to all the text rather than just the first sentence, this can be removed by setting:
#content-main {
position: relative;
left: 0px;
top: 40px;
text-align: left;
text-indent: 0pt;
margin: 0px;
padding: 0px;
}
Something tells me though that this is not the problem...
-gs
thanks for your fast reply. I tried your suggestion but as you stated also, this was not the problem.
If anyone can help me it would still be greatly appreciated.
Kind regards,
Bram
[edited by: Nick_W at 10:34 am (utc) on Oct. 29, 2003]
I'm not sure either but give it a go..
Nick
HTML code
<div id="frame">
<div id="heading">
<H1>TEXT</H1>
</div>
<div id="top">
<img src="">
</div>
<div id="border">
<div id="contentleft">
<div id="language">TEXT</div>
<div id="borderleft"><img scr=""></div>
<div id="menu">
<a href="" class="menu-main">MENU</a>
</div>
</div>
<div id="contentcenter">
<div><img src="" class="content-head-img">
<h2>Notre Ambition</h2>
<h3>TEXT</h3>
</div>
<div ID="content-main">
<P>TEXT WITH THE WEIRD INDENT</p>
<li>TEXT</li>
<li>TEXT</li>
</div>
</div>
<div id="contentright">
<div id="border-right">
</div>
</div>
</div>
<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
</div>
<div>
</div>
CSS code
/* ID's */
#frame {
width:771px;
margin-right:auto;
margin-left:auto;
margin-top:5px;
padding:0px;
text-align:left;
border: none;
}
#border {
width:771px;
border-top: 0px none #CC0033;
border-right: 2px solid #CC0033;
border-bottom: 2px solid #CC0033;
border-left: 2px solid #CC0033;
}
#heading {
width:650px;
padding:0px;
text-align:left;
border: none;
margin: 0px;
}
#top {
width:771px;
padding:0px;
text-align:left;
border: none;
margin: 0px;
clear: both;
}
#contentleft {
width:193px;
padding:0px;
float:left;
}
#language {
width:193px;
padding:0px;
float:left;
font-variant: small-caps;
font-size: 12px;
top: 3px;
position: relative;
left: 3px;
}
#borderleft {
position: relative;
top: 7px;
}
#menu {
position: relative;
top: -264px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
left: 0px;
width: 177px;
}
#contentcenter {
width:379px;
padding:0px;
float:left;
border: none;
color: #000000;
}
#content-head {
}
#content-main {
position: relative;
left: 0px;
top: 40px;
text-align: left;
text-indent: 0pt;
margin: 0px;
padding: 0px;
}
#contentright {
width:195px;
padding:0px;
float:left;
background:#fff;
text-align: left;
position: relative;
right: 0px;
}
#border-right {
border-top-width: 4px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: none;
position: relative;
top: -20px;
height: 100%;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
width: 100%;
border-left-style: solid;
padding: 5px;
}
/* CLASSES */
.menu-main-background {
width: 174px;
position: static;
border-top: #666666;
border-right: #666666;
border-bottom: 1px solid #666666;
border-left: #666666;
margin: 0px;
padding: 0px;
}
/* CLASS SELECTORS */
IMG.content-head-img {
float: left;
margin: 0px;
padding: 0px;
border: thin solid #000000;
position: relative;
left: 0px;
top: 0px;
}
/* TAGS */
BODY {
font-family: verdana,arial,helvetica,sans-serif;
font-size: 10px;
line-height: 19px;
background-repeat: repeat-x;
color: #848284;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align:center;
}
IMG {
margin: 0px;
padding: 0px;
position: static;
}
H1{
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #999999;
font-style: italic;
font-weight: bold;
margin: 0px;
padding: 1px;
}
Yep I know, this is a lot of code, but I tried to keep it as small as possible. So anyone out there who can help me out, please?
Thanks again and sorry for the long post with all the code, but you were just too fast.
Kind regards,
Bram
When you float an element you need to clear it otherwise it effects the following elements as they try to float around it.
By assinging 'clear: all' to an elemnt followning your float(s) you er.. clear all ;-) floats and anything coming afterwards behaves itself.
There might well be a more elegant solution but I find that one to be a good generall 'fix all' with floats.
Be carefull when you test floats, it often depends a lot on resolution as to what you see on screen and you can easily miss these little annoynces..
Nick
Kind regards,
Bram
