hi,
after some tips off some other users i have started to create some rounded corners for a footer of my website, i have a problem with some of the code though, the 2 images i have used have rounded corners facing downwards, and underneath the round edge there is a border line, i have however not specified any bottom borders, how do i get rid of this??
here is the code:
<style type="text/css">
#top1 {
width: 760px;
height: 20px;
border-left: 1px solid;
border-top: 1px solid;
border-bottom: 0px solid;
border-right: 1px solid;
border-color: #324AB1;
background-color: #324AB1;
}
/*images*/
#footer-leftcorner, #footer-rightcorner {
height: 20px;
width: 20px;
}
#footer-leftcorner {
position: relative;
float: left;
left: -1px;
top: -1px;
}
#footer-rightcorner {
position: relative;
float: right;
right: -1px;
top: -1px;
}
</style>
<!--Footer-->
<div id="top1"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/footer-leftcorner.jpg" alt="" id="footer-leftcorner" /><img src="images/footer-rightcorner.jpg" alt="" id="footer-rightcorner" />
<font size="-1" color="#ffffff">
Copyright ?2004 Ken's Commercial Kitchens. All Rights Reserved.
ABN: 48 002 521 851
</font>
</div>It is the background not a border line.
The corner images are offset by -1px which allows the background to "show through".
Setting all borders to zero would be a solution, but a suitable solution would depend on seeing the corner images and any other elements in the footer.i have tried setting all the borders to zero and it still doesnt work, you still get a line on the left and right hand sideWithout seeing the images or a full example page, I can only guess that part of the image is transparent.
There should be no need to offset the images as the are floated into position.ok, i have used it in my website, go to <!-- m --><a class="postlink" href="http://www.dennic.com.au">http://www.dennic.com.au</a><!-- m -->
this time i have used it in the top of the page instead of the footer, code pretty much the same except different imagesChange these:
#top2 {
width: 760px;
height: 20px;
background: #324AB1;
border: 0;
}
#header-leftcorner {
float: left;
}
#header-rightcorner {
float: right;
}
and most important use a valid DTD (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->).what does the DTD have to do with it, i used the code that you gave me and i still get a border on the left and right hand side for some reason?The valid DTD puts IE into standard mode.
Without it IE is in quirk mode and you have a box model problem (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/articles/box-model.html">http://www.positioniseverything.net/art ... model.html</a><!-- m -->).
In quirk mode use:
#header-leftcorner {
position:relative;
float: left;
left: -3px;
}
but it is advisable to use a valid DTD.
after some tips off some other users i have started to create some rounded corners for a footer of my website, i have a problem with some of the code though, the 2 images i have used have rounded corners facing downwards, and underneath the round edge there is a border line, i have however not specified any bottom borders, how do i get rid of this??
here is the code:
<style type="text/css">
#top1 {
width: 760px;
height: 20px;
border-left: 1px solid;
border-top: 1px solid;
border-bottom: 0px solid;
border-right: 1px solid;
border-color: #324AB1;
background-color: #324AB1;
}
/*images*/
#footer-leftcorner, #footer-rightcorner {
height: 20px;
width: 20px;
}
#footer-leftcorner {
position: relative;
float: left;
left: -1px;
top: -1px;
}
#footer-rightcorner {
position: relative;
float: right;
right: -1px;
top: -1px;
}
</style>
<!--Footer-->
<div id="top1"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/footer-leftcorner.jpg" alt="" id="footer-leftcorner" /><img src="images/footer-rightcorner.jpg" alt="" id="footer-rightcorner" />
<font size="-1" color="#ffffff">
Copyright ?2004 Ken's Commercial Kitchens. All Rights Reserved.
ABN: 48 002 521 851
</font>
</div>It is the background not a border line.
The corner images are offset by -1px which allows the background to "show through".
Setting all borders to zero would be a solution, but a suitable solution would depend on seeing the corner images and any other elements in the footer.i have tried setting all the borders to zero and it still doesnt work, you still get a line on the left and right hand sideWithout seeing the images or a full example page, I can only guess that part of the image is transparent.
There should be no need to offset the images as the are floated into position.ok, i have used it in my website, go to <!-- m --><a class="postlink" href="http://www.dennic.com.au">http://www.dennic.com.au</a><!-- m -->
this time i have used it in the top of the page instead of the footer, code pretty much the same except different imagesChange these:
#top2 {
width: 760px;
height: 20px;
background: #324AB1;
border: 0;
}
#header-leftcorner {
float: left;
}
#header-rightcorner {
float: right;
}
and most important use a valid DTD (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->).what does the DTD have to do with it, i used the code that you gave me and i still get a border on the left and right hand side for some reason?The valid DTD puts IE into standard mode.
Without it IE is in quirk mode and you have a box model problem (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/articles/box-model.html">http://www.positioniseverything.net/art ... model.html</a><!-- m -->).
In quirk mode use:
#header-leftcorner {
position:relative;
float: left;
left: -3px;
}
but it is advisable to use a valid DTD.