1 reply [Last post]
Nos402
Offline
newbie
Last seen: 16 years 10 weeks ago
Timezone: GMT-6
Joined: 2004-08-15
Posts: 5
Points: 0

I've recently converted two sites from tables to CSS. I'm still very shaky on it all, but have made lots of progress. My question is regarding burninglibrary.com

I want some padding between the edge of the middle div and the text. If I put padding in the div itself, it doesn't work because it seems that IE keeps the div the same size WITH the padding, while Firefox expands the div to accommodate the padding, thus making it run over into the right div. The only way I've found is to add padding to every single individual element. Is there a more efficient way? Here's my style sheet:

body {
position:relative;
min-width: 600px;
margin:0;
padding:0;
background:pink;
width:100%;
}

#lvl0 {
}

#top {
position:absolute;
min-width:600px;
top:0;
left:0;
width:99.5%;
text-align:center;
height:60px;
font-size:25pt;
line-height: 60px;
}

#left {
position:absolute;
left:0;
top:60px;
width:13.75%;
margin:1% 1% 0 0;
font-family: verdana;
font-size: 11px;
text-align: center;
z-index:2;
}

#middle {
position:absolute;
min-width:360px;
padding:0;
top:60px;
left:14.75%;
width:70%;
margin-top:1%;
font-family: verdana;
font-size: x-small;
color: #000000;
text-align: justify;
background:#ffcccc;
border-left: 2px dotted hotpink;
border-right: 2px dotted hotpink;
border-top: 2px dotted hotpink;
border-bottom: 2px dotted hotpink;
z-index:3;
}

#right {
position:absolute;
left:84.75%;
top:60px;
width:13.75%;
margin:1% 0 0% 1%;
font-family: verdana;
font-size: 11px;
text-align: center;
z-index:1;
}

#top, #left, #right {
color: #CC6699;
background:#000000;
border-left: 2px dotted hotpink;
border-right: 2px dotted hotpink;
border-top: 2px dotted hotpink;
border-bottom: 2px dotted hotpink;
}

p, .spoiler, font {
padding:0 2%;
}

.blogdate, .blogfooter, .blogtitle, h3, h2 {
padding:0 1%;
}

a {
font-family: verdana;
font-weight: bold;
text-decoration: none;
color: #CC6699;
}

a:hover {
text-decoration:underline;
color: #CC0000;
}

H1 {
color: #CC6699;
margin:0 0 0 0;
padding:0 0 0 0;
}

ul {
padding:0 2% 0 4%
}

.blogtitle {
font-family: verdana;
font-size: 20px;
color: #CC6699;
font-weight: bold;
}

.comments-post {  
font-style: italic;
font-weight: bold;
}

.blogdate {
font-family: verdana;
font-size: xx-small;
font-weight: bold;
color: #000000;
text-align: right;
}

.blogfooter {
font-family: verdana;
font-size: xx-small;
font-weight: bold;
color: #000000;
text-align: justify;
}

.menu {
text-align:center;
}

.spoiler {
color:#ffcccc;
}

.spoilertag {
color:mediumpurple
}

Thanks for any and all suggestions! I'm very slowly working towards more strict code compliance.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Need some padding!

This is called the box model. It's horrible, there's plenty of articles about it.

Have a look at http://www.alistapart.com/articles/journey/, about halfway down.

Verschwindende wrote:
  • CSS doesn't make pies