The site I am working on is how I want it to be in firefox and IE 8 but in IE 7 the margin between the navigation bar and the border below it is not being recognised, link to site.
I have tried to find the answer on the tinternet and also had a look at the CSS FAQ but can’t seem to resolve it. Does anybody know what I need to do, thanks as always.
i have had another look at this but I’m still struggling, does anybody know if it is linked to this on the CSS FAQ - Sitepoint CSS FAQ
It’s a weird problem alright. I had a look at it yesterday but couldn’t figure it out completely.
The weird thing is that it initially shows the margin and then all of the sudden it seems to collapse. When I download the whole website to my own PC that doesn’t happen; it shows perfectly fine.
Also when I disable scripting in IETester the margin also doesn’t collapse. Which makes me think it has something to do with javascript, but there is no javascript on the website whatsoever. So it might have something to do with the @font-face you’re using.
Could you comment the @font-face in your CSS to determine if that is where the problem comes from?
I have just done that with the @fontface but that didn’t affect it either. It is weird with the slight delay when it looks ok then collapses. I am using the firefox extension IE tab which is showing the same as what it did in IE Tester. I don’t know anything about javascript as I haven’t tried to learn it yet or anything similar I have just been focusing on HTML and CSS. However there are a few things I have took on that I don’t know much about, which are script related:-
Bot sure if you can work out if it is any of those things
Yup it’s CSS PIE alright.
If you change the margin of #mainboxindex to 0 0 10px 0 and add margin-bottom: 60px to .header it seems to work. Well, at least for me 
Thanks your suggestion works brilliantly. Just one thing when I use IE Tab (Firefox add on) which lets me see the site in IE 7. the picture of the woman has dirty thin black line above it and the picture of the pen something similar at the left. However when I use IE tester the problems aren’t there. Do you know if I can trust IE Tester, can you see anything lilke that when you use IE7?
Thanks for your help.
I don’t have IE7 running natively, but use it through Win7 Windows Virtual Machine, which should be the same as running it natively (won’t make any promises though ;)).
Anyway, see screenshot in attachment. Looks fine to me
Thanks for that I really appreciate it. I have also been registering with the Adobe Browserlabs which seems pretty neat and this shows the same as your screenshot and IE tester, so happy days. It must be a bug with the IE Tab firefox extension I used.
I thought I would wiat until this is sorted before mentioning that i have also found another problem on my price page in IE 7 where the icons on the right have all merged up together when they should be in line with those on the left. I don’t suppose you can see an easy fix for that can you?
Try putting margin: 0 0 70px 230px in #pricelist li
Thanks again, it works I just had to change the amounts a bit to what you suggested to get it how I want it only thing I can’t figure is the boreder at the bottom is touching the bottom icons when there should be a gap, any suggestions how I fix this. Sorry for being a pain but I just have no clue why this is happening.
Yes, IE has a tendency to ignore margin (or padding for that matter) at the bottom of an element. See if it works if you force hasLayout by setting zoom:1 on #wrapper
If that doesn’t work try overflow:hidden on #wrapper instead to make sure it takes floats into account
If that doesn’t work I’m out
I can’t get it to work (At one point I must have had about a thousand overflow:hiddens in my css :)) I am quite tired now though so I will give it another go tomorrow. Thanks again.
I have managed to get it to kind of work by adding padding to the bottom of mainyellow box (the border surrounding all of the icons). Only problem is that there is a margin added to .pricelist li so in firefox the overall distance is then doubled, if I remove it from .pricelist li, then the gap between each icon is removed and I don’t know how to put it back another way. In the meantime I have had to settle for it showing this way, its now a 90px (70 + 20) gap in firefox and just a 20px gap in IE7. This really does cheese me off as it is now not right in any browser just so it doesn’t look completely naff in IE7. Any suggestions would be apprecieted.
Hi,
You can simplify that #pricelist code and reduce the code by about 70% if you do something like this.
ul#pricelist {
list-style: none;
margin:0;
width:100%;
}
*+html ul#pricelist {padding:0 0 70px;}
#pricelist li {
display: block;
width: 150px;
height: 205px;
position: relative;
border:5px solid #F7F9A5;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
float:left;
margin: 0 70px 70px 160px;
display:inline;
}
#pricelist li span {
position:absolute;
top:76px;
right:-150px;
color:#a3a504;
font-size: 250%;
font-family: leaguegothic, "arial narrow", serif, tahoma;
}
#pricelist li b{
position: absolute;
width: 150px;
height: 205px;
}
.cut b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) 0 0 no-repeat;}
.cut b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) 0 -219px no-repeat;}
.style b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -360px 0 no-repeat;}
.style b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -360px -219px no-repeat;}
.blow b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -200px 0 no-repeat;}
.blow b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -205px -219px no-repeat;}
.shampoo b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -540px 0 no-repeat;}
.shampoo b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -540px -219px no-repeat;}
.colour b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -707px 0 no-repeat;}
.colour b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -707px -218px no-repeat;}
.half b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -870px 0 no-repeat;}
.half b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -870px -215px no-repeat;}
.straight b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -1032px 0 no-repeat;}
.straight b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -1032px -219px no-repeat;}
.perm b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -1195px 0 no-repeat;}
.perm b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -1195px -219px no-repeat;}
IE7 loses the last bottom margin on a series of floats so you will need to add the last margin with a hack I’m afraid (because its easier than any other solution). Juts add some padding bottom to the ul for ie7 only.
*+html ul#pricelist {padding:0 0 70px;}
There was no need for all those separate rules or for the repeated rules as you can style all spans and b elements in one go. I also absolutely placed the span to stop all those weird margins being thrown into the mix and to simplify things.
#pricelist li span {
position:absolute;
top:76px;
right:-150px;
color:#a3a504;
font-size: 250%;
font-family: leaguegothic, "arial narrow", serif, tahoma;
}
#pricelist li b{
position: absolute;
width: 150px;
height: 205px;
}
That saves about 90% of the code you were using.
The lists themselves don’t need 2 rules as you can do it all in on rule.
#pricelist li {
display: block;
width: 150px;
height: 205px;
position: relative;
border:5px solid #F7F9A5;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
float:left;
[B] margin: 0 70px 70px 160px;
display:inline;[/B]
}
That achieves the same spacing for all.
The other problem you had was that you set every odd numbered float to clear:left and gave it a top margin. In Ie7 although you add clear to the odd numbered float it will have no effect on the following float and that just slides up as high as it can. This means that you can’t actually fix it without changing something for one browser only.
The clear isn’t necessary anyway because there is no room at the end of the line and the float will drop without you trying to help it.
Here is the whole code I used.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en"
>
<head>
<meta
http-equiv="content-type"
content="text/html; charset=iso-8859-1"
/>
<meta
http-equiv="content-language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>Anna B - Mobile Hairdresser</title>
<style>
@font-face {
font-family: 'leaguegothic';
src: url('font/league_gothic-webfont.eot');
src: local('font/enigma__2-webfont'), url('font/league_gothic-webfont.woff') format('woff'), url('font/league_gothic-webfont.ttf') format('truetype'), url('font/league_gothic-webfont.svg#webfonthmaq0s6s') format('svg');
font-weight: normal;
font-style: normal;
}
/* --------------------------------------- Other (Start) ------------------------------- */
p {
padding: 0 0 0 0;
}
img {
border: none;
}
body, html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
}
a img {
border: 0;
}
body {
margin: 0px 0px 0px 0px;
padding: 0 0 0 0;
background: url(http://www.anna-b.co.uk/images/border.gif) repeat-x;
background-color: white;
}
.clear {
clear: both;
}
.bluetext {
color:#0922E0;
font-size: 85%;
}
.bluetext2 {
color:#0922E0;
font-size: 85%;
}
.bluetext3 {
color:#0922E0;
font-size: 100%;
}
.yellowtext {
color:#a3a504;
font-size: 85%;
}
.greentext {
color:#246D04;
font-size: 85%;
}
.greentext2 {
color:#246D04;
font-size:100%;
}
.pinktext {
color:#ec5360;
font-size: 85%;
}
.pinktext2 {
color:#ec5360;
font-size: 100%;
}
.pinktext3 {
color:#ec5360;
font-size: 90%;
}
.pinklogo {
width: 250px;
height: 125px;
position: relative;
text-align: center;
color: #fdc2c2;
text-decoration: none;
float: left;
background-color: white;
margin: 8% 0% 2% 12%;
padding: 0;
font-family: leaguegothic, "arial narrow", serif, tahoma;
font-size: 70%;
}
.pinklogo span {
width: 250px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: url(http://www.anna-b.co.uk/images/words.gif) top left no-repeat;
}
.pinkcard {
text-decoration: none;
width: 250px;
height: 125px;
position: relative;
text-align: center;
float: right;
color: #fdc2c2;
background-color: white;
margin: 7% 13% 0% 0%;
padding: 0;
font-family: leaguegothic, "arial narrow", serif, tahoma;
font-size: 180%;
}
.pinkcard span {
width: 250px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: url(http://www.anna-b.co.uk/images/pinkcard.gif) top left no-repeat;
}
.bluelogo {
width: 250px;
height: 125px;
position: relative;
text-align: center;
color: #d4def9;
text-decoration: none;
float: left;
background-color: white;
margin: 8% 0% 2% 12%;
padding: 0;
font-family: leaguegothic, "arial narrow", serif, tahoma;
font-size: 70%;
}
.bluelogo span {
width: 250px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: url(http://www.anna-b.co.uk/images/words.gif) top left no-repeat;
}
.bluecard {
text-decoration: none;
width: 250px;
height: 125px;
position: relative;
text-align: center;
float: right;
color: #d4def9;
background-color: white;
margin: 7% 13% 0% 0%;
padding: 0;
font-family: leaguegothic, "arial narrow", serif, tahoma;
font-size: 180%;
}
.bluecard span {
width: 250px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: url(http://www.anna-b.co.uk/images/bluecard.gif) top left no-repeat;
}
.yellowlogo {
width: 250px;
height: 125px;
position: relative;
text-align: center;
color: #f7f9a5;
text-decoration: none;
float: left;
background-color: white;
margin: 8% 0% 2% 12%;
padding: 0;
font-family: leaguegothic, "arial narrow", serif, tahoma;
font-size: 70%;
}
.yellowlogo span {
width: 250px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: url(http://www.anna-b.co.uk/images/words.gif) top left no-repeat;
}
.yellowcard {
text-decoration: none;
width: 250px;
height: 125px;
position: relative;
text-align: center;
float: right;
color: #f7f9a5;
background-color: white;
margin: 7% 13% 0% 0%;
padding: 0;
font-family: leaguegothic, "arial narrow", serif, tahoma;
font-size: 180%;
}
.yellowcard span {
width: 250px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: url(http://www.anna-b.co.uk/images/yellowcard.gif) top left no-repeat;
}
.greenlogo {
width: 250px;
height: 125px;
position: relative;
text-align: center;
color: #cff9a9;
text-decoration: none;
float: left;
background-color: white;
margin: 8% 0% 2% 12%;
padding: 0;
font-family: leaguegothic, "arial narrow", serif, tahoma;
font-size: 70%;
}
.greenlogo span {
width: 250px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: url(http://www.anna-b.co.uk/images/words.gif) top left no-repeat;
}
.greencard {
text-decoration: none;
width: 250px;
height: 125px;
position: relative;
text-align: center;
float: right;
color: #cff9a9;
background-color: white;
margin: 7% 13% 0% 0%;
padding: 0;
font-family: leaguegothic, "arial narrow", serif, tahoma;
font-size: 180%;
}
.greencard span {
width: 250px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: url(http://www.anna-b.co.uk/images/greencard.gif) top left no-repeat;
}
#oops {
text-align: center;
background-image: url(http://www.anna-b.co.uk/images/surprised.gif);
background-repeat: no-repeat;
background-position: center;
width: 500px;
height: 100px;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
max-width: 1000px;
position: relative;
text-align: left;
}
/* --------------------------------------- Other (End) ------------------------------- */
/* --------------------------------------- Navigation Bar (Start) ------------------------------- */
.header {
margin-bottom: 60px;
clear: both;
width: 100%;
height: 57px;
border-bottom: 10px solid;
}
.header .menu {
width: 880px;
margin: 0 auto;
position: relative;
list-style-type: none;
}
.header .menu li {
position: relative;
float: left;
}
.header .menu li a {
margin: 17px 0 0 0;
float: left;
text-indent: -9999px;
}
.header .menu li a.home {
height: 38px;
width: 110px;
background: url(http://www.anna-b.co.uk/images/home.gif) 0 0 no-repeat;
}
.header .menu li a.about {
height: 38px;
width: 110px;
background: url(http://www.anna-b.co.uk/images/about.gif) 0 0 no-repeat;
}
.header .menu li a.price {
height: 38px;
width: 110px;
background: url(http://www.anna-b.co.uk/images/price.gif) 0 0 no-repeat;
}
.header .menu li a.contact {
height: 38px;
width: 110px;
background: url(http://www.anna-b.co.uk/images/contact.gif) 0 0 no-repeat;
}
.header .menu li a.testimonials {
height: 38px;
width: 110px;
background: url(http://www.anna-b.co.uk/images/testimonials.gif) 0 0 no-repeat;
}
.header .menu li a.gallery {
height: 38px;
width: 110px;
background: url(http://www.anna-b.co.uk/images/gallery.gif) 0 0 no-repeat;
}
.header .menu li a.services {
height: 38px;
width: 110px;
background: url(http://www.anna-b.co.uk/images/services.gif) 0 0 no-repeat;
}
.header .menu li a.articles {
height: 38px;
width: 110px;
background: url(http://www.anna-b.co.uk/images/articles.gif) 0 0 no-repeat;
}
.pink {
border-bottom-color: #fdc2c2;
background-position: bottom;
background-image:url(http://www.anna-b.co.uk/images/bordersmall.gif);
background-repeat: repeat-x;
}
.blue {
border-bottom-color: #d4def9;
background-position: bottom;
background-image:url(http://www.anna-b.co.uk/images/bordersmallblue.gif);
background-repeat: repeat-x;
}
.yellow {
border-bottom-color:#f7f9a5;
background-position: bottom;
background-image:url(http://www.anna-b.co.uk/images/bordersmallyellow.gif);
background-repeat: repeat-x;
}
.green {
border-bottom-color:#cff9a9;
background-position: bottom;
background-image:url(http://www.anna-b.co.uk/images/bordersmallgreen.gif);
background-repeat: repeat-x;
}
.header .menu li a.current {
height: 40px;
}
/* --------------------------------------- Navigation Bar (End) ------------------------------- */
/* --------------------------------------- Contact Form (Start) ------------------------------- */
.form-label-top {
width:150px !important;
margin: 0 0 50px 5px;
font-family: leaguegothic, "arial narrow", serif, tahoma;
font-size: 150%;
}
.form-label-left {
width:150px !important;
}
.form-line {
padding:10px;
}
.form-label-right {
width:150px !important;
}
.form-all {
width:500px;
margin: 0px 20px 20px 0;
padding: 20px 18px 11px 18px;
color:#000000;
float: right;
border:5px solid #CFF9A9;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
.form-textbox, .form-textarea {
width: 460px;
font-family: "trebuchet ms", helvetica, tahoma, serif;
font-size: 105%;
padding: 5px 10px 5px 10px;
margin: 10px 0px 15px 0;
border: solid 3px #CFF9A9;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
.form-textbox:hover, .form-textarea:hover {
background-color: #CFF9A9;
}
.form-textbox:focus, .form-textarea:focus {
background-color: #CFF9A9;
}
.form-all li {
list-style: none !important;
}
.form-error-message {
width: 300px;
text-align:left;
}
.form-error-message img {
float: left;
}
.form-submit-button {
background-color: #ffffff;
text-decoration: none;
margin: 0 0 0 0;
padding: 1px 2px 1px 2px;
text-align: center;
width: 130px;
color:#000000;
font-family: leaguegothic, "arial narrow", serif, tahoma;
font-size: 150%;
border: solid 3px #CFF9A9;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
.form-submit-button:hover {
background-color: #CFF9A9;
}
.map {
float: left;
border:5px solid #CFF9A9;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
#thanks {
clear: both;
font-size: 200%;
font-family: leaguegothic, "arial narrow", serif, tahoma;
margin: 55px 100px 0 170px;
}
/* --------------------------------------- Contact Form (End) ------------------------------- */
/* --------------------------------------- Main Box (Start) ------------------------------- */
ul#pricelist {
list-style: none;
margin:0;
width:100%;
}
*+html ul#pricelist {padding:0 0 70px;}
#pricelist li {
display: block;
width: 150px;
height: 205px;
position: relative;
border:5px solid #F7F9A5;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
float:left;
margin: 0 70px 70px 160px;
display:inline;
}
#pricelist li span {
position:absolute;
top:76px;
right:-150px;
color:#a3a504;
font-size: 250%;
font-family: leaguegothic, "arial narrow", serif, tahoma;
}
#pricelist li b{
position: absolute;
width: 150px;
height: 205px;
}
.cut b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) 0 0 no-repeat;}
.cut b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) 0 -219px no-repeat;}
.style b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -360px 0 no-repeat;}
.style b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -360px -219px no-repeat;}
.blow b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -200px 0 no-repeat;}
.blow b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -205px -219px no-repeat;}
.shampoo b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -540px 0 no-repeat;}
.shampoo b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -540px -219px no-repeat;}
.colour b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -707px 0 no-repeat;}
.colour b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -707px -218px no-repeat;}
.half b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -870px 0 no-repeat;}
.half b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -870px -215px no-repeat;}
.straight b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -1032px 0 no-repeat;}
.straight b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -1032px -219px no-repeat;}
.perm b {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -1195px 0 no-repeat;}
.perm b:hover {background: url(http://www.anna-b.co.uk/images/scissoricon2.gif) -1195px -219px no-repeat;}
#mainboxblue {
overflow: hidden;
padding: 10px 0px 10px 0px;
background-position: 5px 5px;
font-size: 105%;
font-family: "trebuchet ms", helvetica, tahoma, serif;
min-height: 400px;
width: 980px;
margin: 0 0 10px 0;
border: solid 10px #d4def9;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
#mainboxblue img {
border: solid 5px #d4def9;
}
#mainboxblue p {
padding: 10px 10px 10px 10px;
}
#mainboxindex h2 {
position: relative;
float: left;
top: 10px;
left: 260px;
right: 20px;
width: 730px;
font-size: 200%;
font-family: leaguegothic, "arial narrow", serif, tahoma;
}
#mainboxblue h2 {
position: relative;
padding: 20px;
text-align: center;
font-size: 200%;
font-family: leaguegothic, "arial narrow", serif, tahoma;
}
#mainboxyellow h2 {
position: relative;
text-align: center;
width: 980px;
font-size: 200%;
padding: 30px 0 50px 0;
font-family: leaguegothic, "arial narrow", serif, tahoma;
}
#mainboxyellow img {
border: solid 5px #F7F9A5;
}
#mainboxgreen h2 {
position: relative;
padding: 20px;
text-align: center;
font-size: 200%;
font-family: leaguegothic, "arial narrow", serif, tahoma;
}
#mainboxgreen p {
padding: 10px 10px 10px 10px;
}
img {
padding: 10px;
margin: 20px 20px 20px 20px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
img.annab {
float: left;
margin: 25px 20px 0px 20px;
}
img.bag {
float: right;
margin: 20px 20px 20px 20px;
}
img.castle {
float: left;
margin: 20px 20px 10px 20px;
}
img.family {
float: right;
}
#mainboxyellow {
overflow: hidden;
font-size: 105%;
font-family: "trebuchet ms", helvetica, tahoma, serif;
position: relative;
width: 980px;
padding: 0px 0px 0px 0px;
margin: 0 0 10px 0;
border: solid 10px #F7F9A5;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
#mainboxgreen {
overflow: hidden;
font-size: 105%;
font-family :"trebuchet ms", helvetica, tahoma, serif;
position: relative;
min-height: 500px;
width: 980px;
padding: 0px 0px 0px 0px;
margin: 0 0 10px 0;
border: solid 10px #CFF9A9;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
#mainboxindex {
overflow: hidden;
position: relative;
font-size: 105%;
font-family: "trebuchet ms", helvetica, tahoma, serif;
min-height: 284px;
max-width: 980px;
padding: 0px 0px 0px 0px;
margin: 0 0 10px 0;
border: solid 10px #fdc2c2;
background-position: 0 1px;
background-image:url(http://www.anna-b.co.uk/images/pinkhair3.gif);
background-repeat: no-repeat;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
#mainboxtestimonials {
overflow: hidden;
position: relative;
font-size: 105%;
font-family: "trebuchet ms", helvetica, tahoma, serif;
min-height: 284px;
max-width: 980px;
padding: 0px 0px 0px 0px;
margin: 0 0 10px 0;
border: solid 10px #fdc2c2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
#mainboxoops {
overflow: hidden;
font-size: 200%;
font-family: leaguegothic, "arial narrow", serif, tahoma;
position: relative;
text-align: center;
min-height: 130px;
width: 980px;
padding: 50px 0px 10px 0px;
margin: 0 0 10px 0;
border: solid 10px black;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
#mainboxoops p {
padding: 0px 80px 40px 80px;
}
.list {
position: absolute;
margin: 0 0 0 0;
padding: 0 0 0 0;
top: 130px;
right: 10px;
width: 650px;
font-family: "trebuchet ms", helvetica, tahoma, serif;
font-size: 104%;
}
.list li {
list-style-type: none;
padding-left: 25px;
padding-top: 2px;
padding-bottom: 4px;
background-image: url(http://www.anna-b.co.uk/images/scissors.gif);
background-repeat: no-repeat;
background-position: left center;
margin: 0 0 0 0;
}
.read {
text-decoration: none;
position: absolute;
margin: 0 0 0 0;
padding: 1px 2px 1px 2px;
text-align: center;
top: 243px;
right: 5px;
width: 85px;
color:#ec5360;
font-family: leaguegothic, "arial narrow", serif, tahoma;
font-size: 150%;
border: solid 3px #ec5360;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
.milev {
text-decoration: none;
}
.sitepoint {
text-decoration: none;
}
.daniel {
text-decoration: none;
}
/* --------------------------------------- Main Box (End) ------------------------------- */
/* --------------------------------------- Smaller Boxes (Start) ------------------------------- */
.box {
min-height: 284px;
max-height: 100%;
width: 450px;
border: solid 10px #fdc2c2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
.box p {
font-size: 300%;
font-family: leaguegothic, "arial narrow", serif, tahoma;
color:#ec5360;
}
.box p a:link {
text-decoration: none;
color: #ec5360;
}
.box p a:visited {
text-decoration: none;
color: #ec5360;
}
.box p a:active {
text-decoration: none;
color: #ec5360;
}
.box p a:hover {
text-decoration: none;
color: #ec5360;
}
.odd {
clear: both;
float: left;
margin: 60px 0 0 0;
}
.even {
float: right;
margin: 60px 0px 0 0;
}
.newprice {
background-position: 0 0;
background-image:url(http://www.anna-b.co.uk/images/paying2.gif);
background-repeat: no-repeat;
}
.newprice p {
width: 90px;
text-align: center;
margin: 100px 0 0 300px;
}
.newtestimonials {
background-position: 255px 1px;
background-image:url(http://www.anna-b.co.uk/images/paper.gif);
background-repeat: no-repeat;
}
.newtestimonials p {
width: 215px;
text-align: center;
margin: 100px 0 0 10px;
}
.newservices {
background-position: 0 0;
background-image:url(http://www.anna-b.co.uk/images/servicehair2.gif);
background-repeat: no-repeat;
}
.newservices p {
width: 140px;
text-align: center;
margin: 100px 0 0 260px
}
.boxright {
background-position: 0 0;
background-image:url(http://www.anna-b.co.uk/images/mappink.gif);
background-repeat: no-repeat;
float: right;
position: relative;
min-height: 284px;
width: 450px;
margin: 60px 0px 0 0;
border: solid 10px #fdc2c2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(pie.htc);
}
#righttextmap {
position: absolute;
top: 70px;
right: 30px;
text-align: center;
width: 150px;
}
#righttextmap p a {
text-decoration: none;
font-size: 300%;
font-family: leaguegothic, "arial narrow", serif, tahoma;
color:#ec5360;
}
/* --------------------------------------- Smaller Boxes (End) ------------------------------- */
/* --------------------------------------- Footer (Start) ------------------------------- */
#footerborder {
margin: 60px 0 0 0;
background: url(http://www.anna-b.co.uk/images/border.gif) 0 0 repeat-x;
line-height: 40px;
text-indent: -9999px
}
#footer {
position: relative;
height:100px;
width: 1000px;
padding: 50px 0px 0px 0px;
}
.footertext li a:link {
text-decoration: none;
color: black;
}
.footertext li a:visited {
text-decoration: none;
color: black;
}
.footertext li a:active {
text-decoration: none;
color: black;
}
.footertext .footerpink li a:hover {
text-decoration: none;
color: black;
border: solid 3px #fdc2c2;
padding: 5px 5px 5px 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(pie.htc);
}
.footertext .footerblue li a:hover {
text-decoration: none;
color: black;
border: solid 3px #d4def9;
padding: 5px 5px 5px 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(pie.htc);
}
.footertext .footergreen li a:hover {
text-decoration: none;
color: black;
border: solid 3px #CFF9A9;
padding: 5px 5px 5px 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(pie.htc);
}
.footertext .footeryellow li a:hover {
text-decoration: none;
color: black;
border: solid 3px #F7F9A5;
padding: 5px 5px 5px 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(pie.htc);
}
.footertext .footerpink li a:focus {
text-decoration: none;
color: black;
border: solid 3px #fdc2c2;
padding: 5px 5px 5px 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(pie.htc);
}
.footertext .footerblue li a:focus {
text-decoration: none;
color: black;
border: solid 3px #d4def9;
padding: 5px 5px 5px 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(pie.htc);
}
.footertext .footergreen li a:focus {
text-decoration: none;
color: black;
border: solid 3px #CFF9A9;
padding: 5px 5px 5px 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(pie.htc)
}
.footertext .footeryellow li a:focus {
text-decoration: none;
color: black;
border: solid 3px #F7F9A5;
padding: 5px 5px 5px 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(pie.htc);
}
.footertext li a {
border: solid 3px #ffffff;
padding: 5px 5px 5px 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin: 0px 58px 0px 50px;
behavior: url(pie.htc);
}
.footertext li {
float: left;
font-size: 105%;
font-family: "trebuchet ms", helvetica, tahoma, serif;
float: left;
list-style-type: none;
}
/* --------------------------------------- Footer (End) ------------------------------- */
</style>
</head>
<body>
<h1> <a href="index.html" class ="yellowlogo"> Anna B - Mobile Hairdresser <span></span> </a> </h1>
<p><a href="contact.html" class="yellowcard"> Live in Sheffield S35/S6?
Call 0871 3021046 to book! <span></span> </a></p>
<div class="header yellow">
<ul class="menu">
<li><a href="index.html" class ="home"><span>Home</span></a></li>
<li><a href="about me.html" class = "about"><span>About Me</span></a></li>
<li><a href="price.html" class="current price"><span>Price</span></a></li>
<li><a href="contact.html" class = "contact" ><span>Contact Me</span></a></li>
<li><a href="testimonials.html" class = "testimonials"><span>Testimonials</span></a></li>
<li><a href="gallery.html" class = "gallery"><span>Gallery</span></a></li>
<li><a href="services.html" class = "services"><span>Services</span></a></li>
<li><a href="articles.html" class = "articles"><span>Articles/Products</span></a></li>
</ul>
</div>
<!-- header yellow -->
<div class="wrapper">
<div id ="mainboxyellow">
<h2> Below is my <span class="yellowtext">PRICE LIST </span>if you have any questions feel free to get in touch . . . </h2>
<ul id="pricelist">
<li class="cut"><b></b>Cut<span>£15.00</span></li>
<li class="style"><b></b>Cut and Syle<span>£20.00</span></li>
<li class="blow"><b></b>Blow Dry<span>£15.00</span></li>
<li class="shampoo"><b></b>Shampoo and Set<span>£20.00</span></li>
<li class="colour"><b></b>Full Head Colour<span>£35.00</span></li>
<li class="half"><b></b>Half Head Colour<span>£30.00</span></li>
<li class="straight"><b></b>Straightening<span>£15.00</span></li>
<li class="perm"><b></b>Perm<span>£25.00</span></li>
</ul>
</div>
<!-- mainbox -->
</div>
<!-- wrapper -->
<div id="footerborder">
<p>?</p>
</div>
<!-- footer -->
<div class="wrapper">
<div id="footer">
<div class="footertext">
<div class="footeryellow">
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="about me.html" >About Me</a></li>
<li><a href="price.html" >Price</a></li>
<li><a href="contact.html" >Contact Me</a></li>
<li><a href="other.html" >Other Information</a></li>
</ul>
</div>
<!-- footertext -->
</div>
<!-- footeryellow -->
</div>
<!-- footer -->
</div>
<!-- wrapper -->
</body>
</html>
There maybe minor tweaks needed but it is working in ie7 and firefox ok. I assume you are not supporting ie6 as that is broken.
A better method instead of floating would have been to use inline-block for the lists and then you wouldn’t have the float bugs to contend with and margins would work fine. However you would still need a hack to make inline-block work in IE7 anyway.
Wow Paul thanks ever so much, that is going to take me while to go through, I’ll come back in next few days when I have gone through it (or when I don’t understand something). Really appreciate your effort.
That is absolutely amazing, thanks ever so much, I have copied your code and it works perfectly. All I need to do is try and work out what is doing what. I’ll work through and report later.
I have had a look now and most of that makes sense, just a few things that I don’t fully understand (I could google it but if you get the chance your explanation would be great).
1)On the #pricelist li you have put display:inline what does this do?
3)How does this work - *+html ul#pricelist {padding:0 0 70px;}.
Is the *+html all I need, does this just target IE7 or all IE and if so how?
Thanks again
That was for IE6 (which you aren’t supporting anyway) and cures the double margin bug on floats that have side edges adjacent to a parent container.
The list element has position:relative added and provides the stacking context for absolute children. The span is then placed at top 76px from the top of that list element and then dragged out at the right side by 150px.
This takes the span out of the flow but is no matter because the gap between the list items is held open with the margins that were set and we don’t have to worry about accounting for the span.
3)How does this work - *+html ul#pricelist {padding:0 0 70px;}.
Is the *+html all I need, does this just target IE7 or all IE and if so how?
Thanks again
Yes “+html" is the IE7 hack and targets just IE7. It is valid code but just nonsense because it should never match. It is basically the same as the IE6 hack which is " html”.
e.g.
* html .test{background:red}/* ie6 and under*/
*+html .test{background:blue}/* ie7 only */
Just remember never to mix this hack with other rules in a comma separated list or rules will be missed.
They are about the only hacks you ever need to remember. All the rest are a waste of time and too complicated. Use sparingly and only when you know its a real bug like in your above code with the failing margin.
That all makes sense thanks ever so much. There is nothing more to say other than you are a scholar and a gent!
Since its very painful to fix it, I would suggest you ignore IE7, its gowing away, anyway. Day by day IE is losing its share, and IE is already low.