| | |
|
|
|
Re: css in design mode? (dw mx 04) |
|---|
| message from krb100 on 18 Jul 2004 |
Any thingyou find odd?
<!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>Et barn i dit hjerte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META http-equiv="page-enter" content="blendtrans(duration=1)" />
<style type="text/css">
<!--
|
| Osgood replied to krb100 on 18 Jul 2004 |
I would need to see your stylesheet as well.
Css/dollaraday1.css
|
| krb100 replied to Osgood on 19 Jul 2004 |
Hi Osgood, here is the style sheet, hope it clears matters up. Thanks for your
time and help. All the best
body {
margin: 0px;
padding: 0px;
color: #8f9295;
font: 12px Verdana, Arial, Helvetica, sans-serif;
background: #a5a5a5 url(../assets/shared/page_background.gif) repeat-y 50%
0px;
}
#wrapper {
background-color: #ffffff;
padding: 0px;
width: 740px;
margin: 0px auto;
}
#masthead {
background: url(../assets/masthead2.jpg) no-repeat;
height: 30px;
padding-top: 101px;
border-bottom: 10px solid #dadada;
}
#navigation {
padding: 0px;
width: 740px;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navigation li {
margin: 0px;
padding: 0px;
float: left;
background: url(../assets/rollover.gif) no-repeat left top;
display: inline;
}
#navigation a {
font: bold 13px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
display: block;
height: 23px;
width: 155px;
padding: 7px 0px 0px 30px;
}
#navigation a:hover {
background: url(../assets/rollover.gif) 0px -40px;
}
#content {
padding: 22px;
}
#footer {
font-size: 85%;
background-color: #FFFFFF;
text-align: right;
clear: both;
padding: 30px 22px;
}
#leftColumn {
float: left;
width: 337px;
margin-right: 22px;
}
#rightColumn {
float: right;
width: 337px;
border: solid 1 px;
}
.greyArea {
padding: 10px;
background-color: #e6e6e6;
}
p {
line-height: 18px;
margin: 0px 0px 1em 0px;
}
a {
font-weight: bold;
color: #f68a56;
text-decoration: none;
}
a:hover {
color: #444444;
text-decoration: underline;
}
.textRight {
font-family: Arial, Verdana, sans-serif;
color: #666666;
margin: 0px;
padding: 0px;
}
.logo {
background-image: url(../assets/drop.jpg);
background-repeat: no-repeat;
float: left;
height: 80px;
width: 82px;
z-index: auto;
padding: 10px;
margin: 10px;
}
.kids1 {
background-image: url(../assets/kids1.jpg);
background-repeat: no-repeat;
margin: 10px;
padding: 10px;
float: right;
height: 163px;
width: 203px;
cursor: hand;
display: inline;
}
.happyKid {
background-image: url(../assets/kid.jpg);
background-repeat: no-repeat;
float: right;
height: 134px;
width: 122px;
cursor: hand;
margin-top: 10px;
padding-top: 10px;
padding-left: 40px;
|
| Osgood replied to krb100 on 19 Jul 2004 |
Your calculation are out by 4px.
Make both the #leftColumn and rightColumn <div> 335px instead of 337px wide.
The wrapper <div> is 740px wide. Inside this is the content <div> which
has 22px padding.
740px - (22px x 2) 44px = 696px. (This is the total width you have to
work with)
Your leftColumn is 337px wide + the border (1px x 2) 2px = 339px
Your rightColumn width is the same as the the leftColumn = 339px
339px x 2 = 678px + (margin-right on the leftColumn 22px) = 700px.
Therfore the total width of your left/right columns + borders and margin
= 700px, 4px too wide.
krb100 wrote:
|
| Osgood replied to Osgood on 19 Jul 2004 |
Should have also mentioned that border and padding width in all modern
browsers, apart from PC IE5x, are added to the width of the <div>
PC IE5x includes the padding and border width inside the <div> width.
Therfore you have to re-calculate the widths for PC IE5x and feed it
seperate css styles.
Since #content <div> has no width declared you dont have to do anything
to that, even though it has padding.
leftColumn and rightColumn, after you have made the changes from 337px
wide to 335px wide, to cater for all other browsers, will only be 333px
wide in IE5x
Its not a big issue in your case losing 2px off each <div> width.
However if you want to correct this you can include a hack in your styles.
*html #leftColumn, #rightColumn {
width: 337px;
}
Only IE will see this.
|
|
Archived message: Re: css in design mode? (dw mx 04) (Macromedia Dreamweaver)
