I've been trying to figure out what is going wrong with this for ages and no matter what I change I'm not getting any closet to figuring out what is going wrong. Therefore I thought I'd take the time to ask for some help on here rather than wasting it without getting any where.
Any help would be really appreciated, it is probably something really simple for those who know. I've done a screen shot of how it's showing in dreamweaver on my screen and I will put the code i'm using below.
Basically I don't understand why when I look at this in Design view in dreamweaver the div that contains the telephone number is bigger than it should be (40px).
HTML
CSS
Any help would be really appreciated, it is probably something really simple for those who know. I've done a screen shot of how it's showing in dreamweaver on my screen and I will put the code i'm using below.
Basically I don't understand why when I look at this in Design view in dreamweaver the div that contains the telephone number is bigger than it should be (40px).
HTML
Code:
<body>
<div id="outterWrapper">
<div id="wrapper">
<div id="header">
<div id="logo">
<a href="#" id="logoLink"></a>
</div>
</div>
<div id="menuContainer">
<div id="menuTelephone">
<img src="images/telelphoneIcon.png" alt="Telephone" id="imgPhone" />
<p class="telNumber">08000 000000<p>
</div>
<div id="menuNavi">
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</div>
</body>CSS
Code:
body {
background-color:#333;
margin:0px;
text-align:center;
}
#outterWrapper {
width:800px;
margin:0 auto;
padding-top:15px;
padding-bottom:15px;
}
#wrapper {
width:770px;
height:1000px;
margin:0 auto;
padding:15px;
background-color:#FFF;
}
#header {
background-color:#096;
height:170px;
position:relative;
}
#logo {
width:300px;
height:130px;
position:absolute;
top:20px;
left:235px;
background-color:#0CF;
}
#logoLink {
display:block;
height:100%;
width:100%;
}
#menuContainer {
margin-top:15px;
height:40px;
background-color:#DDD;
position:relative;
padding:15px;
text-align:left;
}
#menuTelephone {
position:absolute;
width:300px;
height:40px;
}
#imgPhone {
float:left;
}
p.telNumber {
font-family:Calibri, Arial, verdana;
font-size:24px;
font-weight:bold;
color:#063;
margin:0px;
}
#menuNavi {
position:absolute;
left:330px;
width:425px;
height:40px;
}
#content {
background-color:#DDD;
height:500px;
}
#footer {
margin-top:15px;
background-color:#999;
height:45px;
}
Those sorts of visual scanning issues are incredibly easy to miss, and that's a star wars reference and a red dwarf reference in one post for me.
