emsiva on Dec 6, 2006 at 3:32:26 AM (# 4)
This message has been edited.Made the boxes align left, but the problem with the side padding persists. Could you please say how i can remove the
space above and below a in firefox?
please look at the code:< head>
< style type="text/css">
body
{font:9px arial, sans-serif;
}
#main
{
padding:30px;
width: 650px;
border: 1 px solid silver;
background-color: rgb(250,254,254) ;
border: 2px dashed lightsteelblue ;
}
#details
{
border: 1px solid rgb(250,254,254) ;
padding:15px;
width: 184px;
height: 110px;
float:left;
clear:top;
background-color: white ;
border: 1px solid lightsteelblue;
}
#details h3
{
background-color: white ;
border: 1px dotted lightsteelblue;
text-align:center;
padding:3px;
font:12px arial, sans-serif;
font-weight:bold;
}
#details a
{
color:lightsteelblue;
text-decoration:none;
}
#basement{
clear:both;
vvisibility: hidden;
background-color: green ;
}
< /style>
< /head>
< body>
Content for id "details" Goes Here 222222 Content for 3333333333 Content for id "details" 44 Content for id "details" Goes Here
< /body>
bod1467 on Dec 6, 2006 at 5:36:46 AM (# 5)
This message has been edited.Regarding the multiple divs with the same ID ...
#1 This does not conform with the CSS spec per W3C (IIRC);
#2 If you try any DOM traversing (e.g. in JavaScript) then the getElementById() method will have problems.
... The #details declaration is simply defining a style for the div, thus it doesn't need an ID declaration, merely a class declaration. :-)
Jockrock on Dec 6, 2006 at 6:17:51 PM (# 6)bod1467 is, of course, correct. In illustrating my point I put ID instead of class (tsk tsk) on the divs. Same name DIVs are never a good idea. But hopefully you get the gist!
Regarding the padding and margins? I don't really understand your explanation but I suspect you are having 'Box Model problems. I suggest you read the link.
emsiva on Dec 12, 2006 at 2:50:16 AM (# 7)Thanks to bod and jockrock. In this situation, the inner boxes are generated on the fly. Let us they say are .details1, .details2 etc. How can i avoid defineing styles for details1, .details2 etc? if there are 10 detail boxes, i have to define the style to 10 classes(since they are uniquely named?).
Another doubt here is how to reduce the bottom and
top spaces in a < h3> tag?.
bod1467: Thank you very much for the link, this is exactly the problem i have. Sadly, there seem to be no solution... or
there is one?
Jockrock on Dec 12, 2006 at 3:44:56 AM (# 8)emsiva - It's only the IDs that must be unique. The class can be used on multiples. The [#] signifies a unique style while the [.] signifies a global style
.details //note hash changed to dot
{
border: 1px solid rgb(250,254,254) ;
padding:15px;
width: 184px;
height: 110px;
float:left;
clear:top;
background-color: white ;
border: 1px solid lightsteelblue;
}
.details h3//note hash changed to dot
{
background-color: white ;
border: 1px dotted lightsteelblue;
text-align:center;
padding:3px;
font:12px arial, sans-serif;
font-weight:bold;
}
..then applied ..
<div id="detail001" class="details">Content for id "detail001" Goes Here</div>
<div id="detail002" class="details">Content for id "detail002" Goes Here</div>
<div id="detail003" class="details">Content for id "detail003" Goes Here</div>
<div id="detail004" class="details">Content for id "detail004" Goes Here</div>
Regarding the spacing. Sounds pretty obvious suggestion but have you tried :
H3 { font-size: 12pt; line-height: 11pt } or something along those lines? Is there somewhere we can view LIVE attempts?
emsiva on Dec 12, 2006 at 6:37:28 AM (# 9)hi jockrock,
Thank you very much for giving me a valuable insight about ids and classes. line-height didnt work, but the whole page looks ok for the time being. I am not allowed to host the intranet application online. However, i can post the generated html and css somewhere. Any suggestions?
Jack Turk on Dec 12, 2006 at 12:09:31 PM (# 10)For the H3 problem try this:
.details h3
{
margin: 0;
}
| 
<div> boxes
