Hi all,
I am redesigning a site using XHTML and CSS but am having a few problems in Opera and Firefox which I can't figure out. Good old IE seems to work fine!
<!-- m --><a class="postlink" href="http://www.loyalty.co.uk/redesign_test_a9_5ko.html">http://www.loyalty.co.uk/redesign_test_a9_5ko.html</a><!-- m -->
The first is the left-hand navigation div. I can't get it to extend to the bottom of the containing row. I tried setting a height of 100% which didn't work, so I then tried using a background image which also had no effect.
The second problem only appears in Firefox. The containing divs' border does not appear. Is there a fix for this?? It's probably something simple.
Any help is much appreciated.
Kieran.yeh with the height of the div you can set min-height in px, bit fussy but i had the same prob an thats all i could think of so if someone has better ild like to know too.
an for the border - hmmm, could try giving the tableRow2 a left and right border and see if that does anything?
and the nectar logo is covering contact us on my end, and its easy to see that the logo background purple is a different purple too.It does you no good, whatsoever, to use XHTML. Using HTML 4.01 Strict or XHTML 1.0 Strict is important, however.Change the following:
.container {background: #FFF5CC;text-align: center; width: 780px; border:1px solid #612860; margin-left: auto; margin-right:auto; height:100%;}
.midNav {background-color: #FFF5CC; border-top:1.3em solid #FFF5CC; float: left; margin: 0; width:170px; text-align:left; height:auto; font-size:90%;}
.midBody {background-color: #FFF; border-top:1.3em solid #FFFFFF; border-left:17px solid #FFFFFF; border-right:10px solid #FFFFFF; border-bottom:10px solid #FFFFFF; float: right; margin: 0; width:572px; text-align:left; font-size:80%; display:block;}
and add:
</div>
<div style="clear:both;"></div>
<div class="bottomFooter">
I am redesigning a site using XHTML and CSS but am having a few problems in Opera and Firefox which I can't figure out. Good old IE seems to work fine!
<!-- m --><a class="postlink" href="http://www.loyalty.co.uk/redesign_test_a9_5ko.html">http://www.loyalty.co.uk/redesign_test_a9_5ko.html</a><!-- m -->
The first is the left-hand navigation div. I can't get it to extend to the bottom of the containing row. I tried setting a height of 100% which didn't work, so I then tried using a background image which also had no effect.
The second problem only appears in Firefox. The containing divs' border does not appear. Is there a fix for this?? It's probably something simple.
Any help is much appreciated.
Kieran.yeh with the height of the div you can set min-height in px, bit fussy but i had the same prob an thats all i could think of so if someone has better ild like to know too.
an for the border - hmmm, could try giving the tableRow2 a left and right border and see if that does anything?
and the nectar logo is covering contact us on my end, and its easy to see that the logo background purple is a different purple too.It does you no good, whatsoever, to use XHTML. Using HTML 4.01 Strict or XHTML 1.0 Strict is important, however.Change the following:
.container {background: #FFF5CC;text-align: center; width: 780px; border:1px solid #612860; margin-left: auto; margin-right:auto; height:100%;}
.midNav {background-color: #FFF5CC; border-top:1.3em solid #FFF5CC; float: left; margin: 0; width:170px; text-align:left; height:auto; font-size:90%;}
.midBody {background-color: #FFF; border-top:1.3em solid #FFFFFF; border-left:17px solid #FFFFFF; border-right:10px solid #FFFFFF; border-bottom:10px solid #FFFFFF; float: right; margin: 0; width:572px; text-align:left; font-size:80%; display:block;}
and add:
</div>
<div style="clear:both;"></div>
<div class="bottomFooter">